feat: complete SSR CRM and refine auth UI

packages/ui/components/StrongPassword.wrn

@@ -32,11 +32,14 @@ component StrongPassword {
     required: boolean = false
     invalid: boolean = false
     validationMessage: string = ""
+    showLabel: string = "Show password"
+    hideLabel: string = "Hide password"
     class: string = ""
 }
 
   state password = value
   state detailsOpen: boolean = false
+  state revealed: boolean = false
 
   functions {
     shared function hasMinimumLength() {
@@ -113,6 +116,12 @@ component StrongPassword {
       return emptyLabel
     }
 
+    shared function toggleVisibility() {
+      if (!disabled && !readonly) {
+        revealed = !revealed
+      }
+    }
+
   }
 
   view {
@@ -124,10 +133,11 @@ component StrongPassword {
     >
       <label for="{name}-strong-password">{label}</label>
       <div class="wrn-next__strong-password-anchor">
+        <span class="wrn-next__strong-password-leading-icon" aria-hidden="true"></span>
         <input
           {...attrs}
           id="{name}-strong-password"
-          type="password"
+          type="{revealed ? 'text' : 'password'}"
           name="{name}"
           value="{password}"
           placeholder="{placeholder}"
@@ -143,6 +153,15 @@ component StrongPassword {
           @input="password = event.target.value; output.input({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() }); output.strength({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
           @change="output.change({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
         />
+        <button
+          type="button"
+          class="wrn-next__strong-password-toggle"
+          aria-label="{revealed ? hideLabel : showLabel}"
+          title="{revealed ? hideLabel : showLabel}"
+          aria-pressed="{revealed ? 'true' : 'false'}"
+          disabled="{disabled || readonly}"
+          @click="toggleVisibility()"
+        ><span aria-hidden="true"></span></button>
 
         {#if presentation === "popover"}
           <div
@@ -236,19 +255,72 @@ component StrongPassword {
 
     .wrn-next--strong-password input {
       width: 100%;
-      min-height: 2.65rem;
-      padding: 0.7rem 0.85rem;
+      min-height: 3rem;
+      padding: 0.75rem 3rem 0.75rem 2.75rem;
       border: 1px solid var(--wrn-color-border);
       border-radius: var(--wrn-radius-sm);
       outline: 0;
       color: var(--wrn-color-text);
       background: var(--wrn-color-surface);
       font: inherit;
+      font-size: 0.875rem;
       transition:
         border-color 160ms ease,
         box-shadow 160ms ease;
     }
 
+    .wrn-next__strong-password-leading-icon,
+    .wrn-next__strong-password-toggle {
+      position: absolute;
+      top: 50%;
+      z-index: 2;
+      transform: translateY(-50%);
+    }
+    .wrn-next__strong-password-leading-icon {
+      left: 0.9rem;
+      width: 1rem;
+      height: 1rem;
+      color: var(--wrn-color-muted);
+      background: currentColor;
+      pointer-events: none;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
+    }
+    .wrn-next__strong-password-toggle {
+      right: 0.45rem;
+      display: grid;
+      width: 2rem;
+      height: 2rem;
+      padding: 0;
+      place-items: center;
+      border: 0;
+      border-radius: calc(var(--wrn-radius-sm) * 0.72);
+      color: var(--wrn-color-muted);
+      background: transparent;
+      cursor: pointer;
+    }
+    .wrn-next__strong-password-toggle:hover,
+    .wrn-next__strong-password-toggle:focus-visible {
+      color: var(--wrn-component-color);
+      background: color-mix(in srgb, var(--wrn-component-color) 10%, transparent);
+      outline: 0;
+    }
+    .wrn-next__strong-password-toggle > span {
+      width: 1.05rem;
+      height: 1.05rem;
+      background: currentColor;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7C3.7 7.6 7.64 5 12 5c4.36 0 8.3 2.6 9.94 6.65a1 1 0 0 1 0 .7C20.3 16.4 16.36 19 12 19c-4.36 0-8.3-2.6-9.94-6.65Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
+    }
+    .wrn-next__strong-password-toggle[aria-pressed="true"]::after {
+      position: absolute;
+      width: 1.25rem;
+      height: 0.12rem;
+      border-radius: 999px;
+      background: currentColor;
+      content: "";
+      transform: rotate(45deg);
+      box-shadow: 0 0 0 1px var(--wrn-color-surface);
+    }
+
     .wrn-next--strong-password input:focus-visible {
       border-color: var(--wrn-component-color);
       box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 16%, transparent);

packages/ui/components/TogglePassword.wrn

@@ -107,6 +107,7 @@ component TogglePassword {
           {/if}
         </div>
         <div class="wrn-next__password-control">
+          <span class="wrn-next__password-leading-icon" aria-hidden="true"></span>
           <input
             {...attrs}
             id="{name}-password"
@@ -229,19 +230,32 @@ component TogglePassword {
       width: 100%;
       min-width: 0;
       min-height: 2.75em;
-      padding: 0.65em 3em 0.65em 0.8em;
+      min-height: 3rem;
+      padding: 0.75rem 3rem 0.75rem 2.75rem;
       border: 1px solid var(--wrn-color-border);
       border-radius: var(--wrn-radius-sm);
       outline: 0;
       color: var(--wrn-color-text);
-      background: var(--wrn-color-bg);
+      background: var(--wrn-color-surface);
       font: inherit;
-      font-size: 0.8125rem;
+      font-size: 0.875rem;
       transition:
         border-color var(--wrn-motion-base) var(--wrn-ease-standard),
         box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
     }
 
+    .wrn-next__password-leading-icon {
+      position: absolute;
+      left: 0.9rem;
+      z-index: 1;
+      width: 1rem;
+      height: 1rem;
+      color: var(--wrn-color-muted);
+      background: currentColor;
+      pointer-events: none;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
+    }
+
     .wrn-next__password-control > input:focus-visible {
       border-color: var(--wrn-component-color);
       box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 18%, transparent);

packages/ui/components/button.wrn

@@ -36,6 +36,7 @@ label: string = "Button"
   view {
     <span
       class="wrn-action {fullWidth ? 'w-full' : ''} {class}"
+      data-full-width="{fullWidth ? 'true' : 'false'}"
     >
       {#if as === "a" || (as === "" && href)}
         <a
@@ -414,6 +415,11 @@ label: string = "Button"
       display: inline-flex;
     }
 
+    .wrn-action[data-full-width="true"],
+    .wrn-action[data-full-width="true"] > .wrn-btn {
+      width: 100%;
+    }
+
     .wrn-btn--pill {
       border-radius: 999px;
     }