Implementing an inline toggle button to show/hide password. #20611

MrHutmat · 2025-10-22T13:00:54Z

Implemented an inline toggle button to show/hide your password, also changed the css to accommodate these changes, for the login screen

Description

Created methods to add a button for the toggle as well as a method for creating the span element that contains the button.
The button has an SVG attached that changes depending on the toggle state.
The button's onClick event targets the field for the password and changes its type from "password" to "text"
The button only appears if you hover the span or have focus-within in the span element.

Wrapped the password input in a new span element so I could manipulate the input field's length

I have removed some of the styling that wasn't used, as well as added CSS that specifically targets each input element (username and password).

Copilot

Pull Request Overview

This PR implements a password visibility toggle button for the login screen, allowing users to show/hide their password input. The implementation adds an inline toggle button with SVG icons that appears on hover or focus, and refactors the CSS to support the new layout.

Adds a toggle button with eye/eye-off SVG icons that switches between showing and hiding the password
Wraps the password input in a span container to accommodate the toggle button
Updates CSS to target specific input elements and style the new password input container with toggle button

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.

File	Description
src/Umbraco.Web.UI.Login/src/auth.element.ts	Adds createButton and createShowPasswordToggleItem functions, modifies createFormLayoutItem to optionally include the toggle button, and updates component initialization
src/Umbraco.Web.UI.Login/src/auth-styles.css	Refactors CSS to target username and password inputs separately, adds styles for the password container span and toggle button

src/Umbraco.Web.UI.Login/src/auth.element.ts

src/Umbraco.Web.UI.Login/src/auth-styles.css

…changed the css to accommodate these changes

Added the svg's to their own const for easy reuse Added localization for the arialabel on the button Seperated the createFormLayoutItem so there is a seperate for the password input Moved all the conditional logic in the onclick event to fit inside one if/else statement

…enough for localization to load, and replaced it with a function. The function will try and resolve the promise by checking if the localize.terms methods returns a changed value, if not then it retries every 50ms or untill it hits a max retry of 40/2 seconds.

iOvergaard

We had said in the past that the real solution was to use the <uui-input-password /> component, which supports this OOTB. However, it is not possible to use that component because many password managers do not support Shadow DOM, which is why we create the input elements in the root and move them in through slots to their final place.
I don't mind adding this to the login screen, but we need to ensure that we support the same browsers as the UI library and that we do not introduce the same bugs again. So I left a comment down below:

src/Umbraco.Web.UI.Login/src/auth-styles.css

…he uui libary. Now the button is always visible instead of appearing on hover or when in focus

src/Umbraco.Web.UI.Login/src/auth-styles.css

Copilot

Pull Request Overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 8 comments.

src/Umbraco.Web.UI.Login/src/auth-styles.css

src/Umbraco.Web.UI.Login/src/auth.element.ts

Copilot · 2025-10-27T08:04:08Z

src/Umbraco.Web.UI.Login/src/auth.element.ts

+	const closedEyeSVG = `
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"></path>
+					<path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"></path>
+					<path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"></path>
+					<line x1="2" x2="22" y1="2" y2="22"></line>
+				</svg>


Inconsistent indentation between the two SVG definitions. The closedEyeSVG has extra leading tabs compared to openEyeSVG. Align the indentation for consistency.

@MrHutmat, I think we could benefit a bit by cutting these two SVG codes out into real .svg files, which you then import into the app. Vite will automatically bundle it up based on asset rules and load it most efficiently. This approach also has the added benefit of reducing the number of lines in this file as well as solving this Copilot suggestion.

Copilot · 2025-10-27T08:04:08Z

src/Umbraco.Web.UI.Login/src/auth.element.ts

+	async #waitForLocalization(): Promise<void> {
+		return new Promise((resolve) => {
+			// Check if localization is already available
+			if (this.localize.term('auth_showPassword') !== 'auth_showPassword') {
+				resolve();
+				return;
+			}
+
+			let retryCount = 0;
+			//Retries 40 times with a 50ms interval = 2 seconds
+			const maxRetries = 40;
+
+			// If not, we check periodically until it it is available or we reach the max retries
+			const checkInterval = setInterval(() => {
+				if (this.localize.term('auth_showPassword') !== 'auth_showPassword' || retryCount >= maxRetries) {
+					clearInterval(checkInterval);
+					resolve();
+				}
+				retryCount++;
+			}, 50);
+		});
 	}


The polling interval runs indefinitely if localization never loads. Consider adding a timeout or rejection mechanism to handle the case where maxRetries is reached without successful localization.

There is a comment here to consider from Copilot. The logic looks OK to me, so I don't know where it sees that the logic would keep running. I do, however, think we should separate the two checks in the if-sentence into two separate if-sentences, so that you can reject() the Promise if localization is never available. That way, you'll stop the form from rendering.

if (retryCount > maxRetries) { clearInterval(checkInterval); reject('Localization not available'); return; } if (this.localize.term('auth_showPassword') !== 'auth_showPassword') { clearInterval(checkInterval); resolve(); return; } retryCount++;

Co-authored-by: Copilot <[email protected]>

iOvergaard

Looks OK, but based on Copilot feedback and my own findings, I have made two suggestions:

iOvergaard · 2025-10-27T08:28:04Z

src/Umbraco.Web.UI.Login/src/auth.element.ts

+	const closedEyeSVG = `
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"></path>
+					<path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"></path>
+					<path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"></path>
+					<line x1="2" x2="22" y1="2" y2="22"></line>
+				</svg>


@MrHutmat, I think we could benefit a bit by cutting these two SVG codes out into real .svg files, which you then import into the app. Vite will automatically bundle it up based on asset rules and load it most efficiently. This approach also has the added benefit of reducing the number of lines in this file as well as solving this Copilot suggestion.

iOvergaard · 2025-10-27T08:34:04Z

src/Umbraco.Web.UI.Login/src/auth.element.ts

+	async #waitForLocalization(): Promise<void> {
+		return new Promise((resolve) => {
+			// Check if localization is already available
+			if (this.localize.term('auth_showPassword') !== 'auth_showPassword') {
+				resolve();
+				return;
+			}
+
+			let retryCount = 0;
+			//Retries 40 times with a 50ms interval = 2 seconds
+			const maxRetries = 40;
+
+			// If not, we check periodically until it it is available or we reach the max retries
+			const checkInterval = setInterval(() => {
+				if (this.localize.term('auth_showPassword') !== 'auth_showPassword' || retryCount >= maxRetries) {
+					clearInterval(checkInterval);
+					resolve();
+				}
+				retryCount++;
+			}, 50);
+		});
 	}


There is a comment here to consider from Copilot. The logic looks OK to me, so I don't know where it sees that the logic would keep running. I do, however, think we should separate the two checks in the if-sentence into two separate if-sentences, so that you can reject() the Promise if localization is never available. That way, you'll stop the form from rendering.

if (retryCount > maxRetries) { clearInterval(checkInterval); reject('Localization not available'); return; } if (this.localize.term('auth_showPassword') !== 'auth_showPassword') { clearInterval(checkInterval); resolve(); return; } retryCount++;

iOvergaard · 2025-10-27T08:36:51Z

@MrHutmat > Apart from the suggestions above, I think we should consider rebasing this PR to v17/dev, so that it will land in 17.1. Otherwise, 16.4 will have a feature that will not be available in 17.0. However, I think this branch is too far ahead to rebase it directly, but we can wait to merge it in until v17/dev has been merged into the main branch, which should happen either next week, when 16.4 is built, or in two weeks, when 16.4-rc is released.

Changed the logic for waitForLocallization Added the svg's as files that are imported instead of having the raw svg in the code

Copilot AI review requested due to automatic review settings October 22, 2025 13:00

Copilot AI reviewed Oct 22, 2025

View reviewed changes

MrHutmat added 3 commits October 23, 2025 15:57

Implimented an inline toggle button to show/hide your password, also …

2eb1994

…changed the css to accommodate these changes

Cleaned the css

1c6d603

Added the svg's to their own const for easy reuse Added localization for the arialabel on the button Seperated the createFormLayoutItem so there is a seperate for the password input Moved all the conditional logic in the onclick event to fit inside one if/else statement

iOvergaard requested changes Oct 23, 2025

View reviewed changes

src/Umbraco.Web.UI.Login/src/auth-styles.css Show resolved Hide resolved

MrHutmat force-pushed the v16/feature/add-show-password-field branch from 9139429 to e294b05 Compare October 23, 2025 14:21

MrHutmat added 3 commits October 24, 2025 09:18

Re adding the hide for -ms-reveal to support Microsoft Edge browsers

9b1e765

Removed a console.log

a31f36e

Alligned the button behavior so it fits better with what we have in t…

187dbde

…he uui libary. Now the button is always visible instead of appearing on hover or when in focus

MrHutmat commented Oct 24, 2025

View reviewed changes

src/Umbraco.Web.UI.Login/src/auth-styles.css Outdated Show resolved Hide resolved

MrHutmat requested a review from iOvergaard October 24, 2025 10:09

iOvergaard requested a review from Copilot October 27, 2025 08:02

Copilot AI reviewed Oct 27, 2025

View reviewed changes

iOvergaard and others added 6 commits October 27, 2025 09:20

Update src/Umbraco.Web.UI.Login/src/auth.element.ts

0d718a1

Co-authored-by: Copilot <[email protected]>

Update src/Umbraco.Web.UI.Login/src/auth.element.ts

f7b4f86

Co-authored-by: Copilot <[email protected]>

Apply suggestion from @Copilot

c7d9362

Co-authored-by: Copilot <[email protected]>

Apply suggestion from @Copilot

c3697bc

Co-authored-by: Copilot <[email protected]>

Apply suggestion from @iOvergaard

8605fa2

Apply suggestion from @iOvergaard

f6a9e54

iOvergaard requested changes Oct 27, 2025

View reviewed changes

iOvergaard added category/ux User experience type/feature area/frontend release/17.1.0 labels Oct 27, 2025

Adding the requested changes via my own fork (#20664)

8b544f8

Changed the logic for waitForLocallization Added the svg's as files that are imported instead of having the raw svg in the code

Uh oh!

Implementing an inline toggle button to show/hide password. #20611

Are you sure you want to change the base?

Implementing an inline toggle button to show/hide password. #20611

Conversation

MrHutmat commented Oct 22, 2025

Description

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

iOvergaard left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

iOvergaard Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

iOvergaard Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

iOvergaard left a comment

Choose a reason for hiding this comment

Uh oh!

iOvergaard Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

iOvergaard Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

iOvergaard commented Oct 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants