Skip to content
Snippets Groups Projects
Verified Commit a7aa152f authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

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.
parent 0d725e30
No related branches found
No related tags found
No related merge requests found
...@@ -205,6 +205,7 @@ class Login extends CustomElement { ...@@ -205,6 +205,7 @@ class Login extends CustomElement {
* @property {Function} actions.click Callback function for generic click actions within the login component * @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 {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.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 {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 {Object[]} successUrls List of URLs shown after successful login (e.g., home or logout)
* @property {string} successUrls.label Label for the success URL (displayed) * @property {string} successUrls.label Label for the success URL (displayed)
...@@ -274,6 +275,7 @@ class Login extends CustomElement { ...@@ -274,6 +275,7 @@ class Login extends CustomElement {
callbacks : { callbacks : {
username : null, username : null,
forgotPassword : null,
}, },
digits: 6, digits: 6,
...@@ -1310,8 +1312,17 @@ function initEventHandler() { ...@@ -1310,8 +1312,17 @@ function initEventHandler() {
const emailElement = this.shadowRoot.querySelector("input[name='email']"); const emailElement = this.shadowRoot.querySelector("input[name='email']");
// get username and password // get username and password
const mail = emailElement.value; let mail = emailElement.value;
const valid = emailElement.checkValidity(); 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; let msg = null;
if (mail === "" || mail === null) { if (mail === "" || mail === null) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment