From a7aa152f3118f08b297b6c14e9025ac9c9b5cc06 Mon Sep 17 00:00:00 2001
From: Volker Schukai <volker.schukai@schukai.com>
Date: Thu, 15 May 2025 12:55:50 +0200
Subject: [PATCH] feat: Add forgot password callback support in login component
Summary of changes
- Enhanced login component to include a callback for handling forgot password functionality.
- Updated property documentation to reflect the new callback function.
- Modified the event handler to process the entered email through the new callback before further validation.
- Updated `login.mjs`:
- Introduced `callbacks.forgotPassword` property in the class documentation to allow transformation of the entered email.
- Initialized `forgotPassword` callback with a default value of `null`.
- Integrated the callback within `initEventHandler`, enabling email transformation and validation when the callback is provided.
These changes empower developers to customize the login component's behavior when users forget their passwords, providing a more flexible and user-friendly experience.
---
source/components/form/login.mjs | 15 +++++++++++++--
1 file changed, 13 insertions(+), 2 deletions(-)
diff --git a/source/components/form/login.mjs b/source/components/form/login.mjs
index 115f18f38..16f2456db 100644
--- a/source/components/form/login.mjs
+++ b/source/components/form/login.mjs
@@ -205,6 +205,7 @@ class Login extends CustomElement {
* @property {Function} actions.click Callback function for generic click actions within the login component
* @property {Object} callbacks Optional callback hooks for modifying internal behavior
* @property {Function} callbacks.username A function that receives and can transform the entered username before submission
+ * @property {Function} callbacks.forgotPassword A function that receives and can transform the entered email before submission
* @property {number} digits Number of digits required for second factor or password reset code input
* @property {Object[]} successUrls List of URLs shown after successful login (e.g., home or logout)
* @property {string} successUrls.label Label for the success URL (displayed)
@@ -274,6 +275,7 @@ class Login extends CustomElement {
callbacks : {
username : null,
+ forgotPassword : null,
},
digits: 6,
@@ -1310,8 +1312,17 @@ function initEventHandler() {
const emailElement = this.shadowRoot.querySelector("input[name='email']");
// get username and password
- const mail = emailElement.value;
- const valid = emailElement.checkValidity();
+ let mail = emailElement.value;
+ let valid = emailElement.checkValidity();
+
+ const mailCallback = this.getOption("callbacks.forgotPassword");
+ if (isFunction(mailCallback)) {
+ const mailCallbackResult = mailCallback.call(this, mail);
+ if (mailCallbackResult !== undefined) {
+ mail = mailCallbackResult;
+ valid = true;
+ }
+ }
let msg = null;
if (mail === "" || mail === null) {
--
GitLab