web: Revise to better use lit-html.

web/src/flow/components/ak-flow-password-input.ts

@@ -1,9 +1,11 @@
 import { AKElement } from "@goauthentik/elements/Base.js";
+import { bound } from "@goauthentik/elements/decorators/bound";
 import "@goauthentik/elements/forms/FormElement";
 
 import { msg } from "@lit/localize";
 import { CSSResult, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { Ref, createRef, ref } from "lit/directives/ref.js";
 
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
@@ -46,11 +48,11 @@ interface VisibilityProps {
 const Visibility = {
     Reveal: {
         icon: "fa-eye",
-        label: "Show password",
+        label: msg("Show password"),
     },
     Mask: {
         icon: "fa-eye-slash",
-        label: "Hide password",
+        label: msg("Hide password"),
     },
 } as const satisfies Record<string, VisibilityProps>;
 
@@ -145,12 +147,20 @@ export class InputPassword extends AKElement {
 
     inputRef: Ref<HTMLInputElement> = createRef();
 
-    capsLockHelperRef: Ref<HTMLDivElement> = createRef();
-
     toggleVisibilityRef: Ref<HTMLButtonElement> = createRef();
 
     //#endregion
 
+    //#region State
+
+    /**
+     * Whether the caps lock key is enabled.
+     */
+    @state()
+    capsLock = false;
+
+    //#endregion
+
     //#region Listeners
 
     /**
@@ -160,7 +170,8 @@ export class InputPassword extends AKElement {
      *
      * @param event The event that triggered the visibility toggle.
      */
-    togglePasswordVisibility = (event?: PointerEvent): void => {
+    @bound
+    togglePasswordVisibility(event?: PointerEvent) {
         event?.stopPropagation();
         event?.preventDefault();
 
@@ -175,22 +186,15 @@ export class InputPassword extends AKElement {
         input.type = input.type === "password" ? "text" : "password";
 
         this.syncVisibilityToggle(input);
-    };
+    }
 
     /**
      * Listen for key events, synchronizing the caps lock indicators.
      */
-    capsLockListener = (event: KeyboardEvent): void => {
-        const input = this.inputRef.value;
-        const capsLockHelper = this.capsLockHelperRef.value;
-
-        if (!input || !capsLockHelper) return;
-
-        const capsLockDetected = event.getModifierState("CapsLock");
-
-        input.classList.toggle("pf-m-caps-lock", capsLockDetected);
-        capsLockHelper.classList.toggle("pf-m-hidden", !capsLockDetected);
-    };
+    @bound
+    capsLockListener(event: KeyboardEvent) {
+        this.capsLock = event.getModifierState("CapsLock");
+    }
 
     //#region Lifecycle
 
@@ -305,11 +309,12 @@ export class InputPassword extends AKElement {
     }
 
     renderHelperText() {
+        if (!this.capsLock) return nothing;
+
         return html`<div
-            class="pf-c-form__helper-text pf-m-hidden"
+            class="pf-c-form__helper-text"
             id="helper-text-form-caps-lock-helper"
             aria-live="polite"
-            ${ref(this.capsLockHelperRef)}
         >
             <div class="pf-c-helper-text">
                 <div class="pf-c-helper-text__item pf-m-warning">
@@ -338,7 +343,11 @@ export class InputPassword extends AKElement {
                         name=${this.name}
                         placeholder=${this.placeholder}
                         autocomplete="current-password"
-                        class="pf-c-form-control pf-m-icon"
+                        class="${classMap({
+                            "pf-c-form-control": true,
+                            "pf-m-icon": true,
+                            "pf-m-caps-lock": this.capsLock,
+                        })}"
                         required
                         aria-invalid=${this.invalid}
                         value=${this.initialValue}