diff --git a/src/Umbraco.Web.UI.Login/src/auth-styles.css b/src/Umbraco.Web.UI.Login/src/auth-styles.css index 8e5b5efd53..f63dfa92e6 100644 --- a/src/Umbraco.Web.UI.Login/src/auth-styles.css +++ b/src/Umbraco.Web.UI.Login/src/auth-styles.css @@ -1,24 +1,12 @@ -#umb-login-form umb-login-input { +#umb-login-form input { width: 100%; height: var(--input-height); box-sizing: border-box; display: block; border: 1px solid var(--uui-color-border); border-radius: var(--uui-border-radius); - outline: none; background-color: var(--uui-color-surface); -} - -#umb-login-form umb-login-input input { - width: 100%; - height: 100%; - display: block; - box-sizing: border-box; - border: none; - outline: none; - background: none; padding: var(--uui-size-1, 3px) var(--uui-size-space-4, 9px); - font-size: inherit; } #umb-login-form uui-form-layout-item { @@ -26,11 +14,31 @@ margin-bottom: var(--uui-size-space-4); } -#umb-login-form umb-login-input:focus-within { +#umb-login-form input:focus-within { border-color: var(--uui-input-border-color-focus, var(--uui-color-border-emphasis, #a1a1a1)); outline: calc(2px * var(--uui-show-focus-outline, 1)) solid var(--uui-color-focus); } -#umb-login-form umb-login-input:hover:not(:focus-within) { +#umb-login-form input:hover:not(:focus-within) { border-color: var(--uui-input-border-color-hover, var(--uui-color-border-standalone, #c2c2c2)); } + +#umb-login-form input::-ms-reveal { + display: none; +} + +#umb-login-form input span { + position: absolute; + right: 1px; + top: 50%; + transform: translateY(-50%); + z-index: 100; +} + +#umb-login-form input span svg { + background-color: white; + display: block; + padding: .2em; + width: 1.3em; + height: 1.3em; +} diff --git a/src/Umbraco.Web.UI.Login/src/auth.element.ts b/src/Umbraco.Web.UI.Login/src/auth.element.ts index 4ba0b8fbea..4880bc9c74 100644 --- a/src/Umbraco.Web.UI.Login/src/auth.element.ts +++ b/src/Umbraco.Web.UI.Login/src/auth.element.ts @@ -1,10 +1,9 @@ import { html, customElement, property, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element"; -import { type InputType, type UUIFormLayoutItemElement, type UUILabelElement } from "@umbraco-cms/backoffice/external/uui"; +import type { InputType, UUIFormLayoutItemElement } from "@umbraco-cms/backoffice/external/uui"; import { umbExtensionsRegistry } from "@umbraco-cms/backoffice/extension-registry"; import { UMB_AUTH_CONTEXT, UmbAuthContext } from "./contexts"; -import type { UmbLoginInputElement } from "./components"; 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. @@ -18,36 +17,33 @@ const createInput = (opts: { type: InputType; name: string; autocomplete: AutoFill; - requiredMessage: string; label: string; inputmode: string; }) => { - const input = document.createElement('umb-login-input'); + const input = document.createElement('input'); input.type = opts.type; input.name = opts.name; input.autocomplete = opts.autocomplete; input.id = opts.id; input.required = true; - input.requiredMessage = opts.requiredMessage; - input.label = opts.label; - input.spellcheck = false; input.inputMode = opts.inputmode; + input.ariaLabel = opts.label; return input; }; const createLabel = (opts: { forId: string; localizeAlias: string; localizeFallback: string; }) => { - const label = document.createElement('uui-label'); + const label = document.createElement('label'); const umbLocalize = document.createElement('umb-localize'); umbLocalize.key = opts.localizeAlias; umbLocalize.innerHTML = opts.localizeFallback; - label.for = opts.forId; + label.htmlFor = opts.forId; label.appendChild(umbLocalize); return label; }; -const createFormLayoutItem = (label: UUILabelElement, input: UmbLoginInputElement) => { +const createFormLayoutItem = (label: HTMLLabelElement, input: HTMLInputElement) => { const formLayoutItem = document.createElement('uui-form-layout-item') as UUIFormLayoutItemElement; formLayoutItem.appendChild(label); formLayoutItem.appendChild(input); @@ -61,7 +57,7 @@ const createForm = (elements: HTMLElement[]) => { const form = document.createElement('form'); form.id = 'umb-login-form'; form.name = 'login-form'; - form.noValidate = true; + form.spellcheck = false; elements.push(styles); elements.forEach((element) => form.appendChild(element)); @@ -113,10 +109,10 @@ export default class UmbAuthElement extends UmbLitElement { _form?: HTMLFormElement; _usernameLayoutItem?: UUIFormLayoutItemElement; _passwordLayoutItem?: UUIFormLayoutItemElement; - _usernameInput?: UmbLoginInputElement; - _passwordInput?: UmbLoginInputElement; - _usernameLabel?: UUILabelElement; - _passwordLabel?: UUILabelElement; + _usernameInput?: HTMLInputElement; + _passwordInput?: HTMLInputElement; + _usernameLabel?: HTMLLabelElement; + _passwordLabel?: HTMLLabelElement; #authContext = new UmbAuthContext(this, UMB_AUTH_CONTEXT); @@ -174,7 +170,6 @@ export default class UmbAuthElement extends UmbLitElement { type: 'text', name: 'username', autocomplete: 'username', - requiredMessage, label: labelUsername, inputmode: this.usernameIsEmail ? 'email' : '', }); @@ -183,7 +178,6 @@ export default class UmbAuthElement extends UmbLitElement { type: 'password', name: 'password', autocomplete: 'current-password', - requiredMessage, label: labelPassword, inputmode: '', }); diff --git a/src/Umbraco.Web.UI.Login/src/components/index.ts b/src/Umbraco.Web.UI.Login/src/components/index.ts index 4ec1233fd5..f4550c0b29 100644 --- a/src/Umbraco.Web.UI.Login/src/components/index.ts +++ b/src/Umbraco.Web.UI.Login/src/components/index.ts @@ -1,4 +1,3 @@ export * from './layouts/index.js'; export * from './pages/index.js'; export * from './back-to-login-button.element.js'; -export * from './login-input.element.js'; diff --git a/src/Umbraco.Web.UI.Login/src/components/login-input.element.ts b/src/Umbraco.Web.UI.Login/src/components/login-input.element.ts deleted file mode 100644 index fcd1953525..0000000000 --- a/src/Umbraco.Web.UI.Login/src/components/login-input.element.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; -import { customElement } from '@umbraco-cms/backoffice/external/lit'; - -/** - * This is a custom element based on UUIInputElement that is used in the login page. - * It differs from UUIInputElement in that it does not render a Shadow DOM. - * - * @element umb-login-input - * @inheritDoc UUIInputElement - */ -@customElement('umb-login-input') -export class UmbLoginInputElement extends UUIInputElement { - /** - * Remove the id attribute from the inner input element to avoid duplicate ids. - * - * @override - * @protected - */ - protected firstUpdated() { - const innerInput = this.querySelector('input'); - innerInput?.removeAttribute('id'); - - innerInput?.addEventListener('mousedown', () => { - this.style.setProperty('--uui-show-focus-outline', '0'); - }); - innerInput?.addEventListener('blur', () => { - this.style.setProperty('--uui-show-focus-outline', ''); - }); - } - - /** - * Since this element does not render a Shadow DOM nor does it have a unique ID, - * we need to override this method to get the form element. - * - * @override - * @protected - */ - protected getFormElement(): HTMLElement { - const formElement = this.querySelector('input'); - - if (!formElement) { - throw new Error('Form element not found'); - } - - return formElement; - } - - /** - * Instruct Lit to not render a Shadow DOM. - * - * @protected - */ - protected createRenderRoot() { - return this; - } - - static styles = [...UUIInputElement.styles]; -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-login-input': UmbLoginInputElement; - } -}