Login: Adds show/hide password toggle

[MrHutmat]

Warning

Do not merge until the main branch targets 17.1!

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

[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:

[Copilot]

Pull Request Overview

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

[iOvergaard]

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

[iOvergaard]

@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.

[iOvergaard]

LGTM, but let's wait to merge it until the main branch targets 17.1, otherwise we will introduce a new feature in 16.4 that won't make it for 17.0.