release: WRNexusJS 0.5.10

packages/auth/components/TwoFactorChallenge.wrn

@@ -15,6 +15,12 @@ component TwoFactorChallenge {
     size = "md"
     class = ""
   }
+  state methodOptions = [
+    {"label":"Authenticator app","value":"totp"},
+    {"label":"Recovery code","value":"recovery-code"},
+    {"label":"Email code","value":"email-otp"},
+    {"label":"SMS code","value":"sms-otp"}
+  ]
   view {
     <section
       {...attrs}
@@ -31,26 +37,13 @@ component TwoFactorChallenge {
         <input type="hidden" name="mfaToken" value='{mfaToken}' />
         <input type="hidden" name="challengeId" value='{challengeId}' />
         <input type="hidden" name="returnTo" value='{returnTo}' />
-        <div class="space-y-1.5">
-          <label for="auth-mfa-method" class="block text-sm font-medium">Verification method</label>
-          <select id="auth-mfa-method" name="method" data-auth-mfa-method class="h-11 w-full rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] px-3">
-            <option value="totp">Authenticator app</option>
-            <option value="recovery-code">Recovery code</option>
-            <option value="email-otp">Email code</option>
-            <option value="sms-otp">SMS code</option>
-          </select>
-          <p data-error="method" class="m-0 min-h-4 text-xs text-[var(--wire-color-danger)]"></p>
-        </div>
-        <div class="space-y-1.5">
-          <label for="auth-mfa-code" class="block text-sm font-medium">Verification code</label>
-          <input id="auth-mfa-code" name="code" inputmode="numeric" autocomplete="one-time-code" class="h-12 w-full rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] px-3 text-center text-xl tracking-[0.35em]" />
-          <p data-error="code" class="m-0 min-h-4 text-xs text-[var(--wire-color-danger)]"></p>
-        </div>
+        <Select id="auth-mfa-method" name="method" data-auth-mfa-method label="Verification method" value="{method}" options="{methodOptions}" color="{color}" size="{size}" />
+        <PinInput label="Verification code" name="code" length="6" inputMode="numeric" autocomplete="one-time-code" color="{color}" size="{size}" />
         <p data-auth-mfa-status role="status" hidden class="m-0 rounded-[var(--wire-radius-sm)] bg-[color-mix(in_srgb,var(--wire-color-primary)_10%,transparent)] p-3 text-sm text-[var(--wire-color-primary)]"></p>
         <p data-error="mfaToken" class="m-0 min-h-4 text-xs text-[var(--wire-color-danger)]"></p>
         <p data-error="challengeId" class="m-0 min-h-4 text-xs text-[var(--wire-color-danger)]"></p>
         <p data-error="_form" role="alert" class="m-0 hidden rounded-[var(--wire-radius-sm)] bg-[color-mix(in_srgb,var(--wire-color-danger)_10%,transparent)] p-3 text-sm text-[var(--wire-color-danger)]"></p>
-        <button type="submit" class="h-11 w-full rounded-[var(--wire-radius-sm)] bg-[var(--wire-color-primary)] font-semibold text-white disabled:cursor-wait disabled:opacity-60">{submitLabel}</button>
+        <Button type="submit" label="{submitLabel}" variant="solid" color="{color}" size="{size}" fullWidth="true" />
       </form>
       <a href='{recoveryHref}' class="mt-4 inline-flex text-sm text-[var(--wire-color-primary)] hover:underline">Account recovery options</a>
     </section>