fix(auth): secure hydration and align password forms

2026-08-11 17:05:04 +05:30
parent 743275e6fa
commit b1086d14e9
17 changed files with 77 additions and 27 deletions
@@ -29,6 +29,8 @@ component TogglePassword {
    invalid: boolean = false
    helpText: string = ""
    validationMessage: string = ""
+    cornerHint: string = ""
+    cornerHref: string = ""
    class: string = ""
 }

@@ -98,7 +100,12 @@ component TogglePassword {
          {/each}
        </div>
      {:else}
-        <label for="{name}-password">{label}</label>
+        <div class="wire-next__password-heading">
+          <label for="{name}-password">{label}</label>
+          {#if cornerHint}
+            {#if cornerHref}<a href="{cornerHref}">{cornerHint}</a>{:else}<span>{cornerHint}</span>{/if}
+          {/if}
+        </div>
        <div class="wire-next__password-control">
          <input
            {...attrs}
@@ -172,6 +179,28 @@ component TogglePassword {
      font-weight: 600;
    }

+    .wire-next__password-heading {
+      display: flex;
+      min-width: 0;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      color: var(--wire-color-text);
+      font-size: 0.75rem;
+      font-weight: 600;
+    }
+
+    .wire-next__password-heading :is(a, span) {
+      color: var(--wire-component-color);
+      font-size: 0.75rem;
+      font-weight: 500;
+      text-decoration: none;
+    }
+
+    .wire-next__password-heading a:hover {
+      text-decoration: underline;
+    }
+
    .wire-next__password-fields {
      display: grid;
      gap: 1rem;