V14: Login page throws validation errors (#16222)

* remove unused login-input.element.ts

* fix: use regular html inputs to prevent validation errors that arose when we removed the shadow dom

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;
+}

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: '',
     });

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';

src/Umbraco.Web.UI.Login/src/components/login-input.element.ts

@@ -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;
-  }
-}