diff --git a/src/Umbraco.Web.UI.Login/public/closedEye.svg b/src/Umbraco.Web.UI.Login/public/closedEye.svg new file mode 100644 index 000000000000..3a29b4297436 --- /dev/null +++ b/src/Umbraco.Web.UI.Login/public/closedEye.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Login/public/openEye.svg b/src/Umbraco.Web.UI.Login/public/openEye.svg new file mode 100644 index 000000000000..5f28e8e03ff5 --- /dev/null +++ b/src/Umbraco.Web.UI.Login/public/openEye.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Login/src/auth.element.ts b/src/Umbraco.Web.UI.Login/src/auth.element.ts index 3e0de59b6c76..d574ef460186 100644 --- a/src/Umbraco.Web.UI.Login/src/auth.element.ts +++ b/src/Umbraco.Web.UI.Login/src/auth.element.ts @@ -9,6 +9,10 @@ import { UmbSlimBackofficeController } from './controllers'; // We import the authStyles here so that we can inline it in the shadow DOM that is created outside of the UmbAuthElement. import authStyles from './auth-styles.css?inline'; +// Import the SVG files +import openEyeSVG from '../public/openEye.svg?raw'; +import closedEyeSVG from '../public/closedEye.svg?raw'; + // Import the main bundle import { extensions } from './umbraco-package.js'; @@ -48,21 +52,6 @@ const createShowPasswordToggleButton = (opts: { ariaLabelShowPassword: string; ariaLabelHidePassword: string; }) => { - const openEyeSVG = ` - - - - - `; - const closedEyeSVG = ` - - - - - - - `; - const button = document.createElement('button'); button.id = opts.id; button.ariaLabel = opts.ariaLabelShowPassword; @@ -216,22 +205,24 @@ export default class UmbAuthElement extends UmbLitElement { } async #waitForLocalization(): Promise { - return new Promise((resolve) => { - // Check if localization is already available - if (this.localize.term('auth_showPassword') !== 'auth_showPassword') { - resolve(); - return; - } - + return new Promise((resolve, reject) => { let retryCount = 0; // Retries 40 times with a 50ms interval = 2 seconds const maxRetries = 40; - // If not, we check periodically until it is available or we reach the max retries + // We check periodically until it is available or we reach the max retries const checkInterval = setInterval(() => { - if (this.localize.term('auth_showPassword') !== 'auth_showPassword' || retryCount >= maxRetries) { + // If we reach max retries, we give up and reject the promise + if (retryCount > maxRetries) { + clearInterval(checkInterval); + reject('Localization not available'); + return; + } + // Check if localization is available + if (this.localize.term('auth_showPassword') !== 'auth_showPassword') { clearInterval(checkInterval); resolve(); + return; } retryCount++; }, 50); @@ -294,7 +285,7 @@ export default class UmbAuthElement extends UmbLitElement { this._passwordLayoutItem = createFormLayoutPasswordItem( this._passwordLabel, this._passwordInput, - this._passwordShowPassswordToggleItem + this._passwordShowPasswordToggleItem ); this._form = createForm([this._usernameLayoutItem, this._passwordLayoutItem]);