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]);