# SignInFlow

> Identifier-first sign-in: the email and the providers first, then the step your backend picks for that address (password, one-time code, sign-in link, SSO, sign-up or blocked), with two-factor and forgot password in place.

Source: https://docs.nasaqui.com/components/sign-in-flow

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/sign-in-flow.json
```

The sign-in that starts with one question: which email? The first screen shows only an email field, the OAuth
providers and (when supported) a passkey button. Your backend looks at the address and answers with the next step:

- **password**: the account has a password.
- **code**: a one-time code was emailed.
- **sso**: the domain belongs to an organisation with single sign-on, so no password is asked here at all.
- **register**: no account uses this address; offer sign-up.
- **link-sent**: a sign-in link was emailed.
- **blocked**: this address may not sign in here (suspended, another tenant, no allowed method).

After a password, `onPassword` can answer `{ twoFactor: true }` and the flow asks for a second factor with
`TwoFactorChallenge`. With `onForgotPassword`, "Forgot password?" opens `ForgotPasswordForm` in place with the email
filled in.

Every later step shows the chosen email with a **Change** button, so people can always go back.

## When to use

- The default sign-in for any product, and the only sane one when some customers use SSO.
- When you want to add passkeys, codes or SSO later without redesigning the first screen.

## When not to use

- A single-method product that will only ever have email + password: `LoginForm` is shorter.
- Sign-up: use `RegisterForm` (the register step hands off to it with `onRegister`).

## Import

```tsx
import { SignInFlow } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

The smallest sign-in: email first, then the password. Without `onIdentify` every address goes to the password step.

```tsx
import { AuthLayout, SignInFlow } from "@fadymondy/nasaq/web";

export function SignInPage() {
  return (
    <AuthLayout
      title="Sign in"
      prompt={<>Don't have an account? <a href="/sign-up">Create one</a></>}
    >
      <SignInFlow
        onPassword={async ({ email, password, remember }) => {
          const res = await api.signIn(email, password, remember);
          if (!res.ok) return { error: "Wrong email or password." };
        }}
        forgotPassword={<a href="/forgot-password">Forgot password?</a>}
      />
    </AuthLayout>
  );
}
```

**Email only (passwordless).** Leave out `onIdentify` and `onPassword`: the flow emails a code and asks for it.

```tsx
<SignInFlow
  onRequestCode={async (email) => { await api.sendCode(email); }}
  onCode={async ({ email, code }) => {
    const res = await api.verifyCode(email, code);
    if (!res.ok) return { error: "That code is not right." };
  }}
/>
```

**Magic link only.** Leave out `onIdentify`, `onPassword` and `onRequestCode`: every address gets a sign-in link.

```tsx
<SignInFlow onMagicLink={async (email) => { await api.sendLink(email); }} />
```

**Full flow.** Let the backend pick the step for each address:

```tsx
import { AuthLayout, SignInFlow, type SignInStep } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function SignInPage() {
  const [step, setStep] = useState<SignInStep>("email");
  return (
    <AuthLayout title={step === "email" ? "Sign in" : "Welcome back"}>
      <SignInFlow
        onStepChange={setStep}
        onIdentify={async (email) => (await api.lookup(email)).next} // { step: "password" | "code" | "sso" | "register" }
        onPassword={async ({ email, password, remember }) => {
          const res = await api.signIn(email, password, remember);
          if (!res.ok) return { error: "Wrong email or password." };
        }}
        onTwoFactor={async ({ email, code, method, trustDevice }) => api.verify2fa(email, code, method, trustDevice)}
        onMagicLink={async (email) => { await api.sendLink(email); }}
        onForgotPassword={async (email) => { await api.sendReset(email); }}
        onSso={(email) => { window.location.href = `/sso/start?email=${encodeURIComponent(email)}`; }}
        onRegister={(email) => router.push(`/sign-up?email=${encodeURIComponent(email)}`)}
        oauthProviders={["google", "microsoft"]}
        onOAuth={(id) => { window.location.href = `/oauth/${id}`; }}
      />
    </AuthLayout>
  );
}
```

## Anatomy

```
SignInFlow                        data-slot="sign-in-flow", data-step="email" | "password" | "code" | "sso" | "register"
                                  | "link-sent" | "blocked" | "two-factor" | "forgot"
└─ step                           data-slot="sign-in-flow-step" (remounts on every step, so it re-enters)
   ├─ email step
   │  ├─ form                     data-slot="sign-in-flow-email": email field + Continue
   │  ├─ OAuthDivider + OAuthButtons
   │  └─ passkey button           data-slot="sign-in-flow-passkey"
   └─ later steps
      ├─ identity chip            data-slot="sign-in-flow-identity": the email + Change
      └─ password form | VerifyOtpForm | TwoFactorChallenge | SSO notice | register notice
         | link sent (data-slot="sign-in-flow-link-sent", resend "sign-in-flow-resend")
         | blocked notice (data-slot="sign-in-flow-blocked")
   forgot step                    data-slot="sign-in-flow-forgot": ForgotPasswordForm + Back to sign in (no identity chip)
```

## API

**SignInFlow**: every `div` prop, plus:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onIdentify` | `(email) => SignInNext \| AuthSubmitResult` (or a promise) | | Decide the next step. Return `{ error }` / `{ fieldErrors }` to stay on the email step; return nothing (or leave it out) for the default step: the password step when `onPassword` is set, otherwise the code step (it calls `onRequestCode` first). |
| `onPassword` | `({ email, password, remember }) => SignInPasswordResult` | | The password step. Return `{ twoFactor: true, length? }` to go to the two-factor step. |
| `onTwoFactor` | `({ email, code, method, trustDevice }) => AuthSubmitResult` | | The two-factor step (`TwoFactorChallenge`: authenticator or recovery code). |
| `onTwoFactorPasskey` | `() => void \| Promise` | | Passkey as the second factor. |
| `onMagicLink` | `(email) => AuthSubmitResult` | | Emails a sign-in link. Adds "Email me a sign-in link" to the password step, powers the resend, and is the default step when there is no `onPassword` or `onRequestCode`. |
| `resendSeconds` | `number` | `30` | Resend timer for links and reset emails. |
| `onForgotPassword` | `(email) => AuthSubmitResult` | | Emails a reset link. Adds "Forgot password?" (unless `forgotPassword` is set) which opens the request in place. The reset happens on the link's page with `ResetPasswordForm`. |
| `onRequestCode` | `(email) => AuthSubmitResult` | | Emails a code. Adds "Email me a code instead" to the password step and powers Resend. |
| `onCode` | `({ email, code }) => AuthSubmitResult` | | The code step. `{ step: "code", length }` sets the number of digits. |
| `onSso` | `(email) => AuthSubmitResult` | | Redirect to the identity provider. `{ step: "sso", connection }` names it on the button. |
| `onRegister` | `(email) => void` | | Go to sign-up with the email filled in. |
| `oauthProviders` | `OAuthProvider[]` | | Providers on the email step. |
| `onOAuth` | `(id) => void \| Promise` | | Called with the provider id. |
| `onPasskey` | `() => void \| Promise` | | Shows "Sign in with a passkey" when the browser supports WebAuthn. |
| `lastUsed` | `string \| null` | | `"passkey"` or a provider id: marks that button "Last used". Read it from your own cookie; the flow stores nothing. |
| `onPasskeyAutofill` | `(signal: AbortSignal) => void \| Promise` | | Passkey autofill (conditional UI) on the email field. |
| `forgotPassword` | `ReactNode` | | Slot beside the password label. |
| `showRemember` | `boolean` | `true` | "Keep me signed in" on the password step. |
| `defaultEmail` | `string` | | Prefill the email. |
| `onStepChange` | `(step, email) => void` | | Swap the page title per step. |
| `labels` | `Partial<SignInFlowLabels>` | en / ar | Override any string. `ssoWith` takes `{connection}`. |

`SignInNext` is `{ step: "password"; alternatives? } | { step: "code"; length? } | { step: "sso"; connection? } |
{ step: "register" } | { step: "link-sent" } | { step: "blocked"; message? }`. `alternatives` (`SignInAlternative[]`:
`"code"`, `"magic-link"`) limits the other ways in on the password step for that address; `[]` hides them.
`SignInStep` is `"email"`, one of those steps, `"two-factor"` or `"forgot"`.

## Examples

**Route by domain on the server** (the lab story does the same with a fake backend):

```ts
async function lookup(email: string): Promise<SignInNext> {
  const org = await orgs.byDomain(email.split("@")[1]);
  if (org?.sso) return { step: "sso", connection: org.ssoName };
  const user = await users.byEmail(email);
  if (!user) return { step: "register" };
  if (user.suspended) return { step: "blocked" };
  return user.hasPassword ? { step: "password", alternatives: user.allowLinks ? undefined : [] } : { step: "code" };
}
```

## Accessibility

- Each step is a real `<form>` with labelled fields; errors use the shared error summary and move focus to it.
- The email field is focused on load; the password and code steps focus their field when they open.
- The password step keeps a hidden `username` field with the email, so password managers save the right pair.
- The email field uses `autocomplete="username webauthn"` when passkey autofill is on.
- The password step warns "Caps Lock is on." in a `role="status"` region under the field, so screen readers hear it
  too. It clears when Caps Lock goes off or the field loses focus.
- The "Last used" badge is text inside the button, so it is part of the button's accessible name.
- The link-sent step is a `role="status"` region and its heading takes focus; the resend button counts down and a
  polite status says when a new link went out.

## Security notes

- Asking for the email first means your backend decides what to reveal. If you do not want to leak whether an account
  exists, never return `register`: return `password` or `code` for every address and fail at the next step.
- Return `blocked` only when you are happy to say the address exists; otherwise fail at the next step.
- SSO domains never see a password field, so users cannot type their IdP password into your app.
- Put the flow in `AuthLayout`: its origin line confirms a secure connection and names the host under the card, and
  it turns into a warning on an insecure page.
- `lastUsed` helps people pick the same method again instead of creating a second account. Keep the cookie to the
  method id only, never the email.

## Motion

The steps enter with the `AuthLayout` stagger. On the first render they join the card's entrance; after a step
change (`data-moved`) only the new step's rows rise 6px, 50ms apart, with no delay. `prefers-reduced-motion` turns it off.

## RTL & i18n

- English and Arabic strings are built in and follow the locale provider.
- The email is always shown LTR (`<bdi dir="ltr">`) and the field is `ltr`, in both directions.
- The Change arrow points back in the reading direction (it flips in RTL).

## Styling & tokens

- Only `--nq-*` tokens. The notices use the card radius and `border-border`.
- Target steps with `[data-slot="sign-in-flow"][data-step="…"]`.

## Do / Don't

- Do keep the first screen to the email, the providers and a passkey.
- Do name the SSO connection (`connection: "Acme Okta"`) so people recognise it.
- Don't ask for the password on the first screen: that is `LoginForm`.
- Don't put the flow in a dialog; it owns focus between steps.

## Related

- [`auth-layout`](https://docs.nasaqui.com/components/auth-layout)
- [`login-form`](https://docs.nasaqui.com/components/login-form)
- [`oauth-buttons`](https://docs.nasaqui.com/components/oauth-buttons)
- [`verify-otp-form`](https://docs.nasaqui.com/components/verify-otp-form)
- [`two-factor-challenge`](https://docs.nasaqui.com/components/two-factor-challenge)
- [`forgot-password-form`](https://docs.nasaqui.com/components/forgot-password-form)
- [`reset-password-form`](https://docs.nasaqui.com/components/reset-password-form)
- [`password-input`](https://docs.nasaqui.com/components/password-input)

## Lab

https://docs.nasaqui.com/?path=/docs/components-auth-sign-in-flow--docs

## Code

### React

```tsx
import { AuthLayout, SignInFlow } from "@fadymondy/nasaq/web";

export function SignInPage() {
  return (
    <AuthLayout
      title="Sign in"
      prompt={<>Don't have an account? <a href="/sign-up">Create one</a></>}
    >
      <SignInFlow
        onPassword={async ({ email, password, remember }) => {
          const res = await api.signIn(email, password, remember);
          if (!res.ok) return { error: "Wrong email or password." };
        }}
        forgotPassword={<a href="/forgot-password">Forgot password?</a>}
      />
    </AuthLayout>
  );
}
```

### shadcn

```tsx
import { AuthLayout } from "@/components/ui/auth-layout";
import { SignInFlow } from "@/components/ui/sign-in-flow";

export function SignInPage() {
  return (
    <AuthLayout
      title="Sign in"
      prompt={<>Don't have an account? <a href="/sign-up">Create one</a></>}
    >
      <SignInFlow
        onPassword={async ({ email, password, remember }) => {
          const res = await api.signIn(email, password, remember);
          if (!res.ok) return { error: "Wrong email or password." };
        }}
        forgotPassword={<a href="/forgot-password">Forgot password?</a>}
      />
    </AuthLayout>
  );
}
```

### Vue

```vue
<script setup lang="ts">
import { NqAuthLayout, NqSignInFlow } from "@fadymondy/nasaq/vue";

// Your API call. Resolve { error } for wrong credentials.
async function signIn({ email, password, remember }: { email: string; password: string; remember: boolean }) {
  const res = await fetch("/api/sign-in", { method: "POST", body: JSON.stringify({ email, password, remember }) });
  if (!res.ok) return { error: "Wrong email or password." };
}
</script>

<template>
  <NqAuthLayout title="Sign in">
    <NqSignInFlow :on-password="signIn">
      <template #forgotPassword><a href="/forgot-password">Forgot password?</a></template>
    </NqSignInFlow>
  </NqAuthLayout>
</template>
```

### Blade

```blade
{{-- Your listener picks the step for an address and checks the password (try "wrong"). --}}
<div class="w-96">
    <x-nq::sign-in-flow password forgot
        x-on:nq-sign-in-password="$event.detail.waitUntil(new Promise((done) => setTimeout(() => done($event.detail.password === 'wrong' ? { error: 'Wrong email or password.' } : undefined), 200)))" />
</div>
```

### HTML + Alpine

```html
<div class="w-96">
    <div data-slot="sign-in-flow" x-data="nqSignInFlow(JSON.parse('{\u0022password\u0022:true,\u0022magicLink\u0022:false,\u0022requestCode\u0022:false,\u0022forgotPassword\u0022:true,\u0022passkey\u0022:false,\u0022passkeyAutofill\u0022:false,\u0022oauth\u0022:false,\u0022resendSeconds\u0022:30,\u0022defaultEmail\u0022:\u0022\u0022,\u0022labels\u0022:{\u0022email\u0022:\u0022Email\u0022,\u0022emailPlaceholder\u0022:\u0022you@company.com\u0022,\u0022continue\u0022:\u0022Continue\u0022,\u0022divider\u0022:\u0022or\u0022,\u0022passkey\u0022:\u0022Sign in with a passkey\u0022,\u0022change\u0022:\u0022Change\u0022,\u0022password\u0022:\u0022Password\u0022,\u0022remember\u0022:\u0022Keep me signed in\u0022,\u0022signIn\u0022:\u0022Sign in\u0022,\u0022useCode\u0022:\u0022Email me a code instead\u0022,\u0022ssoTitle\u0022:\u0022Your organisation uses single sign-on\u0022,\u0022ssoWith\u0022:\u0022Continue with {connection}\u0022,\u0022ssoBody\u0022:\u0022You will sign in with your organisation\\u0027s identity provider and come back here.\u0022,\u0022ssoContinue\u0022:\u0022Continue with SSO\u0022,\u0022registerTitle\u0022:\u0022No account uses this email\u0022,\u0022registerBody\u0022:\u0022Create one in a minute, or try another address.\u0022,\u0022register\u0022:\u0022Create an account\u0022,\u0022otherEmail\u0022:\u0022Use another email\u0022,\u0022emailRequired\u0022:\u0022Enter your email address.\u0022,\u0022emailInvalid\u0022:\u0022Enter a valid email address.\u0022,\u0022passwordRequired\u0022:\u0022Enter your password.\u0022,\u0022capsLock\u0022:\u0022Caps Lock is on.\u0022,\u0022lastUsed\u0022:\u0022Last used\u0022,\u0022errorTitle\u0022:\u0022Fix these to continue\u0022,\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022,\u0022magicLink\u0022:\u0022Email me a sign-in link\u0022,\u0022linkSentTitle\u0022:\u0022Check your email\u0022,\u0022linkSentBody\u0022:\u0022We sent a sign-in link to {email}. Open it on this device to finish signing in.\u0022,\u0022resend\u0022:\u0022Send the link again\u0022,\u0022resendIn\u0022:\u0022Send again in {time}\u0022,\u0022resent\u0022:\u0022We sent a new link.\u0022,\u0022blockedTitle\u0022:\u0022This account can\\u0027t sign in here\u0022,\u0022blockedBody\u0022:\u0022Contact your administrator, or try another address.\u0022,\u0022forgotPassword\u0022:\u0022Forgot password?\u0022,\u0022backToSignIn\u0022:\u0022Back to sign in\u0022},\u0022codeLength\u0022:6,\u0022twoFactorLength\u0022:6}'))" x-bind:data-step="step"
    x-bind:data-moved="moved ? '' : null" x-on:nq-sign-in-password="$event.detail.waitUntil(new Promise((done) =&gt; setTimeout(() =&gt; done($event.detail.password === &#039;wrong&#039; ? { error: &#039;Wrong email or password.&#039; } : undefined), 200)))" class="flex w-full flex-col">
    <template x-for="stepKey in [step]" :key="stepKey">
    <div data-slot="sign-in-flow-step" class="flex flex-col gap-4">
        <template x-if="step === 'email'">
            <div class="contents" x-data="nqSignInFlowEmail(JSON.parse('{\u0022password\u0022:true,\u0022magicLink\u0022:false,\u0022requestCode\u0022:false,\u0022forgotPassword\u0022:true,\u0022passkey\u0022:false,\u0022passkeyAutofill\u0022:false,\u0022oauth\u0022:false,\u0022resendSeconds\u0022:30,\u0022defaultEmail\u0022:\u0022\u0022,\u0022labels\u0022:{\u0022email\u0022:\u0022Email\u0022,\u0022emailPlaceholder\u0022:\u0022you@company.com\u0022,\u0022continue\u0022:\u0022Continue\u0022,\u0022divider\u0022:\u0022or\u0022,\u0022passkey\u0022:\u0022Sign in with a passkey\u0022,\u0022change\u0022:\u0022Change\u0022,\u0022password\u0022:\u0022Password\u0022,\u0022remember\u0022:\u0022Keep me signed in\u0022,\u0022signIn\u0022:\u0022Sign in\u0022,\u0022useCode\u0022:\u0022Email me a code instead\u0022,\u0022ssoTitle\u0022:\u0022Your organisation uses single sign-on\u0022,\u0022ssoWith\u0022:\u0022Continue with {connection}\u0022,\u0022ssoBody\u0022:\u0022You will sign in with your organisation\\u0027s identity provider and come back here.\u0022,\u0022ssoContinue\u0022:\u0022Continue with SSO\u0022,\u0022registerTitle\u0022:\u0022No account uses this email\u0022,\u0022registerBody\u0022:\u0022Create one in a minute, or try another address.\u0022,\u0022register\u0022:\u0022Create an account\u0022,\u0022otherEmail\u0022:\u0022Use another email\u0022,\u0022emailRequired\u0022:\u0022Enter your email address.\u0022,\u0022emailInvalid\u0022:\u0022Enter a valid email address.\u0022,\u0022passwordRequired\u0022:\u0022Enter your password.\u0022,\u0022capsLock\u0022:\u0022Caps Lock is on.\u0022,\u0022lastUsed\u0022:\u0022Last used\u0022,\u0022errorTitle\u0022:\u0022Fix these to continue\u0022,\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022,\u0022magicLink\u0022:\u0022Email me a sign-in link\u0022,\u0022linkSentTitle\u0022:\u0022Check your email\u0022,\u0022linkSentBody\u0022:\u0022We sent a sign-in link to {email}. Open it on this device to finish signing in.\u0022,\u0022resend\u0022:\u0022Send the link again\u0022,\u0022resendIn\u0022:\u0022Send again in {time}\u0022,\u0022resent\u0022:\u0022We sent a new link.\u0022,\u0022blockedTitle\u0022:\u0022This account can\\u0027t sign in here\u0022,\u0022blockedBody\u0022:\u0022Contact your administrator, or try another address.\u0022,\u0022forgotPassword\u0022:\u0022Forgot password?\u0022,\u0022backToSignIn\u0022:\u0022Back to sign in\u0022},\u0022codeLength\u0022:6,\u0022twoFactorLength\u0022:6}'))" x-bind:aria-busy="pending ? 'true' : null">
                <form novalidate data-slot="sign-in-flow-email" class="flex flex-col gap-4" x-bind:aria-busy="pending ? 'true' : null" x-on:submit.prevent="onSubmit()" x-on:input="clear($event.target.name)">
                    <div tabindex="-1" class="sr-only" x-show="! problems()"></div>
<div tabindex="-1" data-slot="auth-error-summary" class="outline-none" x-show="problems()" style="display: none">
    <div data-slot="alert" data-tone="danger" role="alert" class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
        <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>        <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
            <div data-slot="alert-title" class="text-label text-foreground" x-text="summaryTitle()"></div>
            <div data-slot="alert-description" class="text-body-sm text-muted-foreground" x-show="! error && entries().length" style="display: none">
                <ul class="flex list-disc flex-col gap-0.5 ps-4">
                    <template x-for="e in entries()" :key="e.name">
                        <li><button type="button" class="text-start underline underline-offset-2" x-on:click="focusField(e.name)" x-text="(e.label ? e.label + ': ' : '') + e.message"></button></li>
                    </template>
                </ul>
            </div>
        </div>
    </div>
</div>
                    <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="bad.email" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  for="nq-signin-000001-email" class="text-label text-foreground data-disabled:opacity-50">Email</label>
                        <input data-slot="input" type="email"
     dir="ltr"      name="email"             id="nq-signin-000001-email" inputmode="email" value="" autocomplete="username" placeholder="you@company.com" aria-describedby="nq-signin-000001-email-error" x-bind:aria-invalid="bad.email ? &#039;true&#039; : null" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
                        <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  id="nq-signin-000001-email-error" class="text-caption text-nq-danger-text"><span x-text="fe.email"></span></div>
</div>
                    <button data-slot="button"
     type="submit"                         x-bind:disabled="anyBusy()" x-bind:data-disabled="anyBusy() ? &#039;&#039; : null" x-bind:aria-busy="pending ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <template x-if="pending"><svg data-slot="spinner" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></template>
                        Continue</button>
                </form>
                                                            </div>
        </template>
        <template x-if="showIdentity()">
            <div data-slot="sign-in-flow-identity" class="flex items-center gap-2 rounded-control border border-border bg-muted/60 py-1 ps-3 pe-1">
                <svg aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/>
  <rect x="2" y="4" width="20" height="16" rx="2"/>
</svg>                <bdi dir="ltr" class="min-w-0 flex-1 truncate text-start text-body-sm text-foreground" x-text="email"></bdi>
                <button data-slot="button"
     type="button"                         x-on:click="go(null)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m12 19-7-7 7-7"/>
  <path d="M19 12H5"/>
</svg>                    Change</button>
            </div>
        </template>
        <template x-if="step === 'password'">
            <form novalidate data-slot="sign-in-flow-password" class="flex flex-col gap-4" x-data="nqSignInFlowPassword(JSON.parse('{\u0022password\u0022:true,\u0022magicLink\u0022:false,\u0022requestCode\u0022:false,\u0022forgotPassword\u0022:true,\u0022passkey\u0022:false,\u0022passkeyAutofill\u0022:false,\u0022oauth\u0022:false,\u0022resendSeconds\u0022:30,\u0022defaultEmail\u0022:\u0022\u0022,\u0022labels\u0022:{\u0022email\u0022:\u0022Email\u0022,\u0022emailPlaceholder\u0022:\u0022you@company.com\u0022,\u0022continue\u0022:\u0022Continue\u0022,\u0022divider\u0022:\u0022or\u0022,\u0022passkey\u0022:\u0022Sign in with a passkey\u0022,\u0022change\u0022:\u0022Change\u0022,\u0022password\u0022:\u0022Password\u0022,\u0022remember\u0022:\u0022Keep me signed in\u0022,\u0022signIn\u0022:\u0022Sign in\u0022,\u0022useCode\u0022:\u0022Email me a code instead\u0022,\u0022ssoTitle\u0022:\u0022Your organisation uses single sign-on\u0022,\u0022ssoWith\u0022:\u0022Continue with {connection}\u0022,\u0022ssoBody\u0022:\u0022You will sign in with your organisation\\u0027s identity provider and come back here.\u0022,\u0022ssoContinue\u0022:\u0022Continue with SSO\u0022,\u0022registerTitle\u0022:\u0022No account uses this email\u0022,\u0022registerBody\u0022:\u0022Create one in a minute, or try another address.\u0022,\u0022register\u0022:\u0022Create an account\u0022,\u0022otherEmail\u0022:\u0022Use another email\u0022,\u0022emailRequired\u0022:\u0022Enter your email address.\u0022,\u0022emailInvalid\u0022:\u0022Enter a valid email address.\u0022,\u0022passwordRequired\u0022:\u0022Enter your password.\u0022,\u0022capsLock\u0022:\u0022Caps Lock is on.\u0022,\u0022lastUsed\u0022:\u0022Last used\u0022,\u0022errorTitle\u0022:\u0022Fix these to continue\u0022,\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022,\u0022magicLink\u0022:\u0022Email me a sign-in link\u0022,\u0022linkSentTitle\u0022:\u0022Check your email\u0022,\u0022linkSentBody\u0022:\u0022We sent a sign-in link to {email}. Open it on this device to finish signing in.\u0022,\u0022resend\u0022:\u0022Send the link again\u0022,\u0022resendIn\u0022:\u0022Send again in {time}\u0022,\u0022resent\u0022:\u0022We sent a new link.\u0022,\u0022blockedTitle\u0022:\u0022This account can\\u0027t sign in here\u0022,\u0022blockedBody\u0022:\u0022Contact your administrator, or try another address.\u0022,\u0022forgotPassword\u0022:\u0022Forgot password?\u0022,\u0022backToSignIn\u0022:\u0022Back to sign in\u0022},\u0022codeLength\u0022:6,\u0022twoFactorLength\u0022:6}'))" x-bind:aria-busy="pending ? 'true' : null"
                x-on:submit.prevent="onSubmit()" x-on:input="clear($event.target.name)">
                <input type="email" name="username" autocomplete="username" x-bind:value="email" readonly hidden />
                <div tabindex="-1" class="sr-only" x-show="! problems()"></div>
<div tabindex="-1" data-slot="auth-error-summary" class="outline-none" x-show="problems()" style="display: none">
    <div data-slot="alert" data-tone="danger" role="alert" class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
        <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>        <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
            <div data-slot="alert-title" class="text-label text-foreground" x-text="summaryTitle()"></div>
            <div data-slot="alert-description" class="text-body-sm text-muted-foreground" x-show="! error && entries().length" style="display: none">
                <ul class="flex list-disc flex-col gap-0.5 ps-4">
                    <template x-for="e in entries()" :key="e.name">
                        <li><button type="button" class="text-start underline underline-offset-2" x-on:click="focusField(e.name)" x-text="(e.label ? e.label + ': ' : '') + e.message"></button></li>
                    </template>
                </ul>
            </div>
        </div>
    </div>
</div>
                <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="bad.password" class="flex flex-col gap-1.5">
    <div class="flex items-baseline justify-between gap-3">
                        <label data-slot="field-label"  for="nq-signin-000001-password" class="text-label text-foreground data-disabled:opacity-50">Password</label>
                                                    <span class="text-caption">
                                <button data-slot="sign-in-flow-forgot-link"
     type="button"                         x-on:click="move(&#039;forgot&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground underline decoration-nq-line underline-offset-4 hover:decoration-current h-auto px-0">
        Forgot password?</button>
                            </span>
                                            </div>
                    <div data-slot="password-input" x-data="nqPasswordInput('', JSON.parse('{\u0022visible\u0022:false,\u0022score\u0022:null,\u0022rules\u0022:null,\u0022levels\u0022:[\u0022Very weak\u0022,\u0022Weak\u0022,\u0022Fair\u0022,\u0022Good\u0022,\u0022Strong\u0022]}'))" x-modelable="value"
    class="flex w-full flex-col gap-2">
    <div role="group" data-slot="input-group"
    class="group/input-group flex h-control min-h-[var(--nq-touch-min,0px)] w-full min-w-0 items-center overflow-hidden rounded-control border border-input bg-card text-body text-foreground transition-colors duration-150 ease-nq focus-within:border-nq-focus focus-within:outline-1 focus-within:outline-nq-focus has-[[data-invalid]]:border-nq-danger has-[[aria-invalid=true]]:border-nq-danger has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50"><input data-slot="input-group-input"     x-model="value" x-bind:type="shown ? &#039;text&#039; : &#039;password&#039;" type="password" value="" autocapitalize="none" autocorrect="off" spellcheck="false" id="nq-signin-000001-password" name="password" autocomplete="current-password" aria-describedby="nq-signin-000001-password-error" x-bind:aria-invalid="bad.password ? &#039;true&#039; : null" x-on:keydown="readCaps($event)" x-on:keyup="readCaps($event)" x-on:blur="caps = false" class="h-full min-w-0 flex-1 border-0 bg-transparent px-3 text-body text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed pointer-coarse:text-[16px]" />
        <div data-slot="input-group-addon" data-align="end"
    class="flex h-full shrink-0 items-center gap-1.5 text-body-sm text-muted-foreground [&_svg]:size-4 order-last ps-1 pe-1.5"><button data-slot="password-input-toggle"
     type="button"                         x-bind="toggle" aria-label="Show password" aria-pressed="false" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg x-show="shown" x-cloak="1" style="display: none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/>
  <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/>
  <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/>
  <path d="m2 2 20 20"/>
</svg>                <svg x-show="!shown" x-cloak="1" style="" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
  <circle cx="12" cy="12" r="3"/>
</svg></button></div></div>
        </div>
                    <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  id="nq-signin-000001-password-error" class="text-caption text-nq-danger-text"><span x-text="fe.password"></span></div>
                    <p data-slot="sign-in-flow-caps" role="status" class="flex items-center gap-1.5 text-caption text-nq-warning-text" x-bind:class="caps ? '' : 'sr-only'">
                        <svg aria-hidden="true" x-show="caps" style="display: none" class="size-3.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/>
  <path d="M12 9v4"/>
  <path d="M12 17h.01"/>
</svg>                        <span x-text="caps ? 'Caps Lock is on.' : ''"></span>
                    </p>
</div>
                                    <label class="flex items-center gap-2 text-body-sm text-foreground">
                        <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="remember" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    <input type="hidden" name="remember" value="1" x-bind:disabled="! checked"  disabled ></button>
                        Keep me signed in
                    </label>
                                <button data-slot="button"
     type="submit"                         x-bind:disabled="altBusy()" x-bind:data-disabled="altBusy() ? &#039;&#039; : null" x-bind:aria-busy="pending ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <template x-if="pending"><svg data-slot="spinner" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></template>
                    Sign in</button>
                                            </form>
        </template>
        <template x-if="step === 'code'">
            <form data-slot="verify-otp-form" novalidate class="flex w-full flex-col gap-4" x-data="nqVerifyOtpForm({ ...JSON.parse('{\u0022length\u0022:6,\u0022autoSubmit\u0022:true,\u0022resend\u0022:false,\u0022resendSeconds\u0022:30,\u0022names\u0022:[\u0022code\u0022],\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022,\u0022labels\u0022:{\u0022description\u0022:\u0022Enter the {length}-digit code we sent to {destination}.\u0022,\u0022group\u0022:\u0022Verification code\u0022,\u0022submit\u0022:\u0022Verify\u0022,\u0022noCode\u0022:\u0022Did not get a code?\u0022,\u0022resend\u0022:\u0022Resend code\u0022,\u0022resendIn\u0022:\u0022Resend in {time}\u0022,\u0022resent\u0022:\u0022We sent a new code.\u0022,\u0022incomplete\u0022:\u0022Enter all {length} digits.\u0022,\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022}}'), length: codeLen })" x-bind:aria-busy="pending ? 'true' : null"
                x-on:submit.prevent="onSubmit()" x-on:nq-verify-otp.stop="relay($event, 'nq-sign-in-code', { code: $event.detail.code })"
                x-on:nq-verify-otp-resend.stop="relay($event, 'nq-sign-in-request-code')">
                <p class="text-body-sm text-muted-foreground"><span x-text="'Enter the {length}-digit code we sent to '.replace('{length}', codeLen)">Enter the 6-digit code we sent to </span><bdi dir="ltr" class="font-medium text-foreground" x-text="masked()"></bdi><span x-text="'.'.replace('{length}', codeLen)">.</span></p>
                <div class="flex flex-col gap-2" x-effect="markInvalid($el)">
                    <div role="group" dir="ltr" data-slot="otp-input" x-data="nqOtpInput('', codeLen, 'numeric')" x-modelable="value" x-model="code" x-on:complete="onComplete($event.detail)"
                        aria-label="Verification code" aria-describedby="nq-signin-000001-code-message" class="inline-flex items-center gap-2 self-center">
                        <template x-for="n in codeLen" :key="n">
                            <input data-slot="otp-input-box" x-bind="box(n - 1)" type="text" inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false" autofocus
                                x-bind:aria-label="'Digit {n} of {total}'.replace('{n}', n).replace('{total}', codeLen)"
                                class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
                        </template>
                        <input type="hidden" name="code" x-bind:value="value" />
                    </div>
                    <p id="nq-signin-000001-code-message" role="alert" class="text-center text-caption text-nq-danger-text" style="display: none" x-show="message()" x-text="message()"></p>
                </div>
                <button data-slot="button"
     type="submit"                         x-bind:disabled="pending" x-bind:data-disabled="pending ? &#039;&#039; : null" x-bind:aria-busy="pending ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <template x-if="pending"><svg data-slot="spinner" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></template>
                    Verify</button>
                                <span role="status" class="sr-only" x-text="resendSent ? 'We sent a new code.' : ''"></span>
            </form>
        </template>
                    <template x-if="step === 'two-factor' && twoLen === 6">
                <form data-slot="two-factor-challenge" novalidate x-data="nqTwoFactorChallenge(JSON.parse('{\u0022length\u0022:6,\u0022defaultMethod\u0022:\u0022totp\u0022,\u0022passkey\u0022:false,\u0022names\u0022:[\u0022code\u0022],\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022,\u0022labels\u0022:{\u0022totpDescription\u0022:\u0022Open your authenticator app and enter the {length}-digit code.\u0022,\u0022recoveryDescription\u0022:\u0022Enter one of the recovery codes you saved when you turned on two-step verification. Each code works once.\u0022,\u0022totpGroup\u0022:\u0022Authenticator code\u0022,\u0022recoveryLabel\u0022:\u0022Recovery code\u0022,\u0022recoveryPlaceholder\u0022:\u0022xxxx-xxxx\u0022,\u0022trust\u0022:\u0022Trust this device for 30 days\u0022,\u0022submit\u0022:\u0022Verify\u0022,\u0022useRecovery\u0022:\u0022Use a recovery code instead\u0022,\u0022useTotp\u0022:\u0022Use your authenticator app instead\u0022,\u0022usePasskey\u0022:\u0022Use a passkey instead\u0022,\u0022incomplete\u0022:\u0022Enter all {length} digits.\u0022,\u0022recoveryRequired\u0022:\u0022Enter a recovery code.\u0022,\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022}}'))" x-bind:data-method="method"
    data-method="totp" x-bind:aria-busy="pending ? 'true' : null" x-effect="inv = Boolean(message())" x-on:submit.prevent="onSubmit()"
     x-on:nq-two-factor.stop="relay($event, &#039;nq-sign-in-two-factor&#039;, $event.detail)" class="flex w-full flex-col gap-4">
    <p class="text-body-sm text-muted-foreground" x-text="method === 'totp' ? 'Open your authenticator app and enter the 6-digit code.' : 'Enter one of the recovery codes you saved when you turned on two-step verification. Each code works once.'">Open your authenticator app and enter the 6-digit code.</p>
    <input type="hidden" name="method" x-bind:value="method" value="totp" />
    <template x-if="method === 'totp'">
        <div class="flex flex-col gap-2" x-effect="markInvalid($el)">
            <div role="group" dir="ltr" data-slot="otp-input" x-data="nqOtpInput('', 6, 'numeric')" x-modelable="value"
    aria-label="Authenticator code" aria-describedby="nq-2fa-000002-message" x-model="code" x-on:complete="onComplete($event.detail)" class="inline-flex items-center gap-2 self-center">
            <input data-slot="otp-input-box" x-bind="box(0)" type="text" value=""
                        aria-label="Digit 1 of 6"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
               autofocus             class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(1)" type="text" value=""
                        aria-label="Digit 2 of 6"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(2)" type="text" value=""
                        aria-label="Digit 3 of 6"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(3)" type="text" value=""
                        aria-label="Digit 4 of 6"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(4)" type="text" value=""
                        aria-label="Digit 5 of 6"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(5)" type="text" value=""
                        aria-label="Digit 6 of 6"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
        <input type="hidden" name="code" :value="value" value="" /></div>
            <p id="nq-2fa-000002-message" role="alert" class="text-center text-caption text-nq-danger-text" style="display: none" x-show="message()" x-text="message()"></p>
        </div>
    </template>
    <template x-if="method === 'recovery'">
        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="inv" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  for="nq-2fa-000002-code" class="text-label text-foreground data-disabled:opacity-50">Recovery code</label>
            <input data-slot="input" type="text"
     dir="ltr"      name="code"             id="nq-2fa-000002-code" autofocus="autofocus" autocomplete="off" autocapitalize="none" spellcheck="false" placeholder="xxxx-xxxx" aria-describedby="nq-2fa-000002-code-error" x-model="code" x-bind:aria-invalid="inv ? &#039;true&#039; : null" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start font-mono">
            <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  id="nq-2fa-000002-code-error" class="text-caption text-nq-danger-text"><span x-text="message()"></span></div>
</div>
    </template>
            <label class="flex items-center gap-2 text-body-sm text-foreground">
            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="trust" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    <input type="hidden" name="trustDevice" value="1" x-bind:disabled="! checked"  disabled ></button>
            Trust this device for 30 days
        </label>
        <button data-slot="button"
     type="submit"                         x-bind:disabled="pending || passkeyPending" x-bind:data-disabled="pending || passkeyPending ? &#039;&#039; : null" x-bind:aria-busy="pending ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <template x-if="pending"><svg data-slot="spinner" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></template>
        Verify</button>
    <div class="flex flex-col items-center gap-1">
        <button data-slot="button"
     type="button"                         x-on:click="switchMethod()" x-bind:disabled="pending" x-bind:data-disabled="pending ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground underline decoration-nq-line underline-offset-4 hover:decoration-current h-auto px-0">
        <span x-text="method === 'totp' ? 'Use a recovery code instead' : 'Use your authenticator app instead'">Use a recovery code instead</span></button>
            </div>
    </form>
            </template>
                    <template x-if="step === 'two-factor' && twoLen === 4">
                <form data-slot="two-factor-challenge" novalidate x-data="nqTwoFactorChallenge(JSON.parse('{\u0022length\u0022:4,\u0022defaultMethod\u0022:\u0022totp\u0022,\u0022passkey\u0022:false,\u0022names\u0022:[\u0022code\u0022],\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022,\u0022labels\u0022:{\u0022totpDescription\u0022:\u0022Open your authenticator app and enter the {length}-digit code.\u0022,\u0022recoveryDescription\u0022:\u0022Enter one of the recovery codes you saved when you turned on two-step verification. Each code works once.\u0022,\u0022totpGroup\u0022:\u0022Authenticator code\u0022,\u0022recoveryLabel\u0022:\u0022Recovery code\u0022,\u0022recoveryPlaceholder\u0022:\u0022xxxx-xxxx\u0022,\u0022trust\u0022:\u0022Trust this device for 30 days\u0022,\u0022submit\u0022:\u0022Verify\u0022,\u0022useRecovery\u0022:\u0022Use a recovery code instead\u0022,\u0022useTotp\u0022:\u0022Use your authenticator app instead\u0022,\u0022usePasskey\u0022:\u0022Use a passkey instead\u0022,\u0022incomplete\u0022:\u0022Enter all {length} digits.\u0022,\u0022recoveryRequired\u0022:\u0022Enter a recovery code.\u0022,\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022}}'))" x-bind:data-method="method"
    data-method="totp" x-bind:aria-busy="pending ? 'true' : null" x-effect="inv = Boolean(message())" x-on:submit.prevent="onSubmit()"
     x-on:nq-two-factor.stop="relay($event, &#039;nq-sign-in-two-factor&#039;, $event.detail)" class="flex w-full flex-col gap-4">
    <p class="text-body-sm text-muted-foreground" x-text="method === 'totp' ? 'Open your authenticator app and enter the 4-digit code.' : 'Enter one of the recovery codes you saved when you turned on two-step verification. Each code works once.'">Open your authenticator app and enter the 4-digit code.</p>
    <input type="hidden" name="method" x-bind:value="method" value="totp" />
    <template x-if="method === 'totp'">
        <div class="flex flex-col gap-2" x-effect="markInvalid($el)">
            <div role="group" dir="ltr" data-slot="otp-input" x-data="nqOtpInput('', 4, 'numeric')" x-modelable="value"
    aria-label="Authenticator code" aria-describedby="nq-2fa-000003-message" x-model="code" x-on:complete="onComplete($event.detail)" class="inline-flex items-center gap-2 self-center">
            <input data-slot="otp-input-box" x-bind="box(0)" type="text" value=""
                        aria-label="Digit 1 of 4"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
               autofocus             class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(1)" type="text" value=""
                        aria-label="Digit 2 of 4"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(2)" type="text" value=""
                        aria-label="Digit 3 of 4"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(3)" type="text" value=""
                        aria-label="Digit 4 of 4"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
        <input type="hidden" name="code" :value="value" value="" /></div>
            <p id="nq-2fa-000003-message" role="alert" class="text-center text-caption text-nq-danger-text" style="display: none" x-show="message()" x-text="message()"></p>
        </div>
    </template>
    <template x-if="method === 'recovery'">
        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="inv" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  for="nq-2fa-000003-code" class="text-label text-foreground data-disabled:opacity-50">Recovery code</label>
            <input data-slot="input" type="text"
     dir="ltr"      name="code"             id="nq-2fa-000003-code" autofocus="autofocus" autocomplete="off" autocapitalize="none" spellcheck="false" placeholder="xxxx-xxxx" aria-describedby="nq-2fa-000003-code-error" x-model="code" x-bind:aria-invalid="inv ? &#039;true&#039; : null" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start font-mono">
            <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  id="nq-2fa-000003-code-error" class="text-caption text-nq-danger-text"><span x-text="message()"></span></div>
</div>
    </template>
            <label class="flex items-center gap-2 text-body-sm text-foreground">
            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="trust" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    <input type="hidden" name="trustDevice" value="1" x-bind:disabled="! checked"  disabled ></button>
            Trust this device for 30 days
        </label>
        <button data-slot="button"
     type="submit"                         x-bind:disabled="pending || passkeyPending" x-bind:data-disabled="pending || passkeyPending ? &#039;&#039; : null" x-bind:aria-busy="pending ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <template x-if="pending"><svg data-slot="spinner" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></template>
        Verify</button>
    <div class="flex flex-col items-center gap-1">
        <button data-slot="button"
     type="button"                         x-on:click="switchMethod()" x-bind:disabled="pending" x-bind:data-disabled="pending ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground underline decoration-nq-line underline-offset-4 hover:decoration-current h-auto px-0">
        <span x-text="method === 'totp' ? 'Use a recovery code instead' : 'Use your authenticator app instead'">Use a recovery code instead</span></button>
            </div>
    </form>
            </template>
                    <template x-if="step === 'two-factor' && twoLen === 5">
                <form data-slot="two-factor-challenge" novalidate x-data="nqTwoFactorChallenge(JSON.parse('{\u0022length\u0022:5,\u0022defaultMethod\u0022:\u0022totp\u0022,\u0022passkey\u0022:false,\u0022names\u0022:[\u0022code\u0022],\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022,\u0022labels\u0022:{\u0022totpDescription\u0022:\u0022Open your authenticator app and enter the {length}-digit code.\u0022,\u0022recoveryDescription\u0022:\u0022Enter one of the recovery codes you saved when you turned on two-step verification. Each code works once.\u0022,\u0022totpGroup\u0022:\u0022Authenticator code\u0022,\u0022recoveryLabel\u0022:\u0022Recovery code\u0022,\u0022recoveryPlaceholder\u0022:\u0022xxxx-xxxx\u0022,\u0022trust\u0022:\u0022Trust this device for 30 days\u0022,\u0022submit\u0022:\u0022Verify\u0022,\u0022useRecovery\u0022:\u0022Use a recovery code instead\u0022,\u0022useTotp\u0022:\u0022Use your authenticator app instead\u0022,\u0022usePasskey\u0022:\u0022Use a passkey instead\u0022,\u0022incomplete\u0022:\u0022Enter all {length} digits.\u0022,\u0022recoveryRequired\u0022:\u0022Enter a recovery code.\u0022,\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022}}'))" x-bind:data-method="method"
    data-method="totp" x-bind:aria-busy="pending ? 'true' : null" x-effect="inv = Boolean(message())" x-on:submit.prevent="onSubmit()"
     x-on:nq-two-factor.stop="relay($event, &#039;nq-sign-in-two-factor&#039;, $event.detail)" class="flex w-full flex-col gap-4">
    <p class="text-body-sm text-muted-foreground" x-text="method === 'totp' ? 'Open your authenticator app and enter the 5-digit code.' : 'Enter one of the recovery codes you saved when you turned on two-step verification. Each code works once.'">Open your authenticator app and enter the 5-digit code.</p>
    <input type="hidden" name="method" x-bind:value="method" value="totp" />
    <template x-if="method === 'totp'">
        <div class="flex flex-col gap-2" x-effect="markInvalid($el)">
            <div role="group" dir="ltr" data-slot="otp-input" x-data="nqOtpInput('', 5, 'numeric')" x-modelable="value"
    aria-label="Authenticator code" aria-describedby="nq-2fa-000004-message" x-model="code" x-on:complete="onComplete($event.detail)" class="inline-flex items-center gap-2 self-center">
            <input data-slot="otp-input-box" x-bind="box(0)" type="text" value=""
                        aria-label="Digit 1 of 5"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
               autofocus             class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(1)" type="text" value=""
                        aria-label="Digit 2 of 5"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(2)" type="text" value=""
                        aria-label="Digit 3 of 5"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(3)" type="text" value=""
                        aria-label="Digit 4 of 5"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(4)" type="text" value=""
                        aria-label="Digit 5 of 5"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
        <input type="hidden" name="code" :value="value" value="" /></div>
            <p id="nq-2fa-000004-message" role="alert" class="text-center text-caption text-nq-danger-text" style="display: none" x-show="message()" x-text="message()"></p>
        </div>
    </template>
    <template x-if="method === 'recovery'">
        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="inv" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  for="nq-2fa-000004-code" class="text-label text-foreground data-disabled:opacity-50">Recovery code</label>
            <input data-slot="input" type="text"
     dir="ltr"      name="code"             id="nq-2fa-000004-code" autofocus="autofocus" autocomplete="off" autocapitalize="none" spellcheck="false" placeholder="xxxx-xxxx" aria-describedby="nq-2fa-000004-code-error" x-model="code" x-bind:aria-invalid="inv ? &#039;true&#039; : null" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start font-mono">
            <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  id="nq-2fa-000004-code-error" class="text-caption text-nq-danger-text"><span x-text="message()"></span></div>
</div>
    </template>
            <label class="flex items-center gap-2 text-body-sm text-foreground">
            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="trust" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    <input type="hidden" name="trustDevice" value="1" x-bind:disabled="! checked"  disabled ></button>
            Trust this device for 30 days
        </label>
        <button data-slot="button"
     type="submit"                         x-bind:disabled="pending || passkeyPending" x-bind:data-disabled="pending || passkeyPending ? &#039;&#039; : null" x-bind:aria-busy="pending ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <template x-if="pending"><svg data-slot="spinner" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></template>
        Verify</button>
    <div class="flex flex-col items-center gap-1">
        <button data-slot="button"
     type="button"                         x-on:click="switchMethod()" x-bind:disabled="pending" x-bind:data-disabled="pending ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground underline decoration-nq-line underline-offset-4 hover:decoration-current h-auto px-0">
        <span x-text="method === 'totp' ? 'Use a recovery code instead' : 'Use your authenticator app instead'">Use a recovery code instead</span></button>
            </div>
    </form>
            </template>
                    <template x-if="step === 'two-factor' && twoLen === 7">
                <form data-slot="two-factor-challenge" novalidate x-data="nqTwoFactorChallenge(JSON.parse('{\u0022length\u0022:7,\u0022defaultMethod\u0022:\u0022totp\u0022,\u0022passkey\u0022:false,\u0022names\u0022:[\u0022code\u0022],\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022,\u0022labels\u0022:{\u0022totpDescription\u0022:\u0022Open your authenticator app and enter the {length}-digit code.\u0022,\u0022recoveryDescription\u0022:\u0022Enter one of the recovery codes you saved when you turned on two-step verification. Each code works once.\u0022,\u0022totpGroup\u0022:\u0022Authenticator code\u0022,\u0022recoveryLabel\u0022:\u0022Recovery code\u0022,\u0022recoveryPlaceholder\u0022:\u0022xxxx-xxxx\u0022,\u0022trust\u0022:\u0022Trust this device for 30 days\u0022,\u0022submit\u0022:\u0022Verify\u0022,\u0022useRecovery\u0022:\u0022Use a recovery code instead\u0022,\u0022useTotp\u0022:\u0022Use your authenticator app instead\u0022,\u0022usePasskey\u0022:\u0022Use a passkey instead\u0022,\u0022incomplete\u0022:\u0022Enter all {length} digits.\u0022,\u0022recoveryRequired\u0022:\u0022Enter a recovery code.\u0022,\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022}}'))" x-bind:data-method="method"
    data-method="totp" x-bind:aria-busy="pending ? 'true' : null" x-effect="inv = Boolean(message())" x-on:submit.prevent="onSubmit()"
     x-on:nq-two-factor.stop="relay($event, &#039;nq-sign-in-two-factor&#039;, $event.detail)" class="flex w-full flex-col gap-4">
    <p class="text-body-sm text-muted-foreground" x-text="method === 'totp' ? 'Open your authenticator app and enter the 7-digit code.' : 'Enter one of the recovery codes you saved when you turned on two-step verification. Each code works once.'">Open your authenticator app and enter the 7-digit code.</p>
    <input type="hidden" name="method" x-bind:value="method" value="totp" />
    <template x-if="method === 'totp'">
        <div class="flex flex-col gap-2" x-effect="markInvalid($el)">
            <div role="group" dir="ltr" data-slot="otp-input" x-data="nqOtpInput('', 7, 'numeric')" x-modelable="value"
    aria-label="Authenticator code" aria-describedby="nq-2fa-000005-message" x-model="code" x-on:complete="onComplete($event.detail)" class="inline-flex items-center gap-2 self-center">
            <input data-slot="otp-input-box" x-bind="box(0)" type="text" value=""
                        aria-label="Digit 1 of 7"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
               autofocus             class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(1)" type="text" value=""
                        aria-label="Digit 2 of 7"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(2)" type="text" value=""
                        aria-label="Digit 3 of 7"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(3)" type="text" value=""
                        aria-label="Digit 4 of 7"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(4)" type="text" value=""
                        aria-label="Digit 5 of 7"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(5)" type="text" value=""
                        aria-label="Digit 6 of 7"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(6)" type="text" value=""
                        aria-label="Digit 7 of 7"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
        <input type="hidden" name="code" :value="value" value="" /></div>
            <p id="nq-2fa-000005-message" role="alert" class="text-center text-caption text-nq-danger-text" style="display: none" x-show="message()" x-text="message()"></p>
        </div>
    </template>
    <template x-if="method === 'recovery'">
        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="inv" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  for="nq-2fa-000005-code" class="text-label text-foreground data-disabled:opacity-50">Recovery code</label>
            <input data-slot="input" type="text"
     dir="ltr"      name="code"             id="nq-2fa-000005-code" autofocus="autofocus" autocomplete="off" autocapitalize="none" spellcheck="false" placeholder="xxxx-xxxx" aria-describedby="nq-2fa-000005-code-error" x-model="code" x-bind:aria-invalid="inv ? &#039;true&#039; : null" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start font-mono">
            <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  id="nq-2fa-000005-code-error" class="text-caption text-nq-danger-text"><span x-text="message()"></span></div>
</div>
    </template>
            <label class="flex items-center gap-2 text-body-sm text-foreground">
            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="trust" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    <input type="hidden" name="trustDevice" value="1" x-bind:disabled="! checked"  disabled ></button>
            Trust this device for 30 days
        </label>
        <button data-slot="button"
     type="submit"                         x-bind:disabled="pending || passkeyPending" x-bind:data-disabled="pending || passkeyPending ? &#039;&#039; : null" x-bind:aria-busy="pending ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <template x-if="pending"><svg data-slot="spinner" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></template>
        Verify</button>
    <div class="flex flex-col items-center gap-1">
        <button data-slot="button"
     type="button"                         x-on:click="switchMethod()" x-bind:disabled="pending" x-bind:data-disabled="pending ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground underline decoration-nq-line underline-offset-4 hover:decoration-current h-auto px-0">
        <span x-text="method === 'totp' ? 'Use a recovery code instead' : 'Use your authenticator app instead'">Use a recovery code instead</span></button>
            </div>
    </form>
            </template>
                    <template x-if="step === 'two-factor' && twoLen === 8">
                <form data-slot="two-factor-challenge" novalidate x-data="nqTwoFactorChallenge(JSON.parse('{\u0022length\u0022:8,\u0022defaultMethod\u0022:\u0022totp\u0022,\u0022passkey\u0022:false,\u0022names\u0022:[\u0022code\u0022],\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022,\u0022labels\u0022:{\u0022totpDescription\u0022:\u0022Open your authenticator app and enter the {length}-digit code.\u0022,\u0022recoveryDescription\u0022:\u0022Enter one of the recovery codes you saved when you turned on two-step verification. Each code works once.\u0022,\u0022totpGroup\u0022:\u0022Authenticator code\u0022,\u0022recoveryLabel\u0022:\u0022Recovery code\u0022,\u0022recoveryPlaceholder\u0022:\u0022xxxx-xxxx\u0022,\u0022trust\u0022:\u0022Trust this device for 30 days\u0022,\u0022submit\u0022:\u0022Verify\u0022,\u0022useRecovery\u0022:\u0022Use a recovery code instead\u0022,\u0022useTotp\u0022:\u0022Use your authenticator app instead\u0022,\u0022usePasskey\u0022:\u0022Use a passkey instead\u0022,\u0022incomplete\u0022:\u0022Enter all {length} digits.\u0022,\u0022recoveryRequired\u0022:\u0022Enter a recovery code.\u0022,\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022}}'))" x-bind:data-method="method"
    data-method="totp" x-bind:aria-busy="pending ? 'true' : null" x-effect="inv = Boolean(message())" x-on:submit.prevent="onSubmit()"
     x-on:nq-two-factor.stop="relay($event, &#039;nq-sign-in-two-factor&#039;, $event.detail)" class="flex w-full flex-col gap-4">
    <p class="text-body-sm text-muted-foreground" x-text="method === 'totp' ? 'Open your authenticator app and enter the 8-digit code.' : 'Enter one of the recovery codes you saved when you turned on two-step verification. Each code works once.'">Open your authenticator app and enter the 8-digit code.</p>
    <input type="hidden" name="method" x-bind:value="method" value="totp" />
    <template x-if="method === 'totp'">
        <div class="flex flex-col gap-2" x-effect="markInvalid($el)">
            <div role="group" dir="ltr" data-slot="otp-input" x-data="nqOtpInput('', 8, 'numeric')" x-modelable="value"
    aria-label="Authenticator code" aria-describedby="nq-2fa-000006-message" x-model="code" x-on:complete="onComplete($event.detail)" class="inline-flex items-center gap-2 self-center">
            <input data-slot="otp-input-box" x-bind="box(0)" type="text" value=""
                        aria-label="Digit 1 of 8"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
               autofocus             class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(1)" type="text" value=""
                        aria-label="Digit 2 of 8"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(2)" type="text" value=""
                        aria-label="Digit 3 of 8"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(3)" type="text" value=""
                        aria-label="Digit 4 of 8"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(4)" type="text" value=""
                        aria-label="Digit 5 of 8"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(5)" type="text" value=""
                        aria-label="Digit 6 of 8"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(6)" type="text" value=""
                        aria-label="Digit 7 of 8"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
            <input data-slot="otp-input-box" x-bind="box(7)" type="text" value=""
                        aria-label="Digit 8 of 8"
            inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false"
                          class="size-control min-h-[var(--nq-touch-min,0px)] min-w-0 rounded-control border border-input bg-card p-0 text-center text-body font-medium tabular-nums text-foreground transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]" />
        <input type="hidden" name="code" :value="value" value="" /></div>
            <p id="nq-2fa-000006-message" role="alert" class="text-center text-caption text-nq-danger-text" style="display: none" x-show="message()" x-text="message()"></p>
        </div>
    </template>
    <template x-if="method === 'recovery'">
        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="inv" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  for="nq-2fa-000006-code" class="text-label text-foreground data-disabled:opacity-50">Recovery code</label>
            <input data-slot="input" type="text"
     dir="ltr"      name="code"             id="nq-2fa-000006-code" autofocus="autofocus" autocomplete="off" autocapitalize="none" spellcheck="false" placeholder="xxxx-xxxx" aria-describedby="nq-2fa-000006-code-error" x-model="code" x-bind:aria-invalid="inv ? &#039;true&#039; : null" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start font-mono">
            <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  id="nq-2fa-000006-code-error" class="text-caption text-nq-danger-text"><span x-text="message()"></span></div>
</div>
    </template>
            <label class="flex items-center gap-2 text-body-sm text-foreground">
            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="trust" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    <input type="hidden" name="trustDevice" value="1" x-bind:disabled="! checked"  disabled ></button>
            Trust this device for 30 days
        </label>
        <button data-slot="button"
     type="submit"                         x-bind:disabled="pending || passkeyPending" x-bind:data-disabled="pending || passkeyPending ? &#039;&#039; : null" x-bind:aria-busy="pending ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <template x-if="pending"><svg data-slot="spinner" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></template>
        Verify</button>
    <div class="flex flex-col items-center gap-1">
        <button data-slot="button"
     type="button"                         x-on:click="switchMethod()" x-bind:disabled="pending" x-bind:data-disabled="pending ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground underline decoration-nq-line underline-offset-4 hover:decoration-current h-auto px-0">
        <span x-text="method === 'totp' ? 'Use a recovery code instead' : 'Use your authenticator app instead'">Use a recovery code instead</span></button>
            </div>
    </form>
            </template>
        <template x-if="step === 'link-sent'">
            <div data-slot="sign-in-flow-link-sent" class="flex flex-col gap-4" x-data="nqSignInFlowLinkSent(JSON.parse('{\u0022password\u0022:true,\u0022magicLink\u0022:false,\u0022requestCode\u0022:false,\u0022forgotPassword\u0022:true,\u0022passkey\u0022:false,\u0022passkeyAutofill\u0022:false,\u0022oauth\u0022:false,\u0022resendSeconds\u0022:30,\u0022defaultEmail\u0022:\u0022\u0022,\u0022labels\u0022:{\u0022email\u0022:\u0022Email\u0022,\u0022emailPlaceholder\u0022:\u0022you@company.com\u0022,\u0022continue\u0022:\u0022Continue\u0022,\u0022divider\u0022:\u0022or\u0022,\u0022passkey\u0022:\u0022Sign in with a passkey\u0022,\u0022change\u0022:\u0022Change\u0022,\u0022password\u0022:\u0022Password\u0022,\u0022remember\u0022:\u0022Keep me signed in\u0022,\u0022signIn\u0022:\u0022Sign in\u0022,\u0022useCode\u0022:\u0022Email me a code instead\u0022,\u0022ssoTitle\u0022:\u0022Your organisation uses single sign-on\u0022,\u0022ssoWith\u0022:\u0022Continue with {connection}\u0022,\u0022ssoBody\u0022:\u0022You will sign in with your organisation\\u0027s identity provider and come back here.\u0022,\u0022ssoContinue\u0022:\u0022Continue with SSO\u0022,\u0022registerTitle\u0022:\u0022No account uses this email\u0022,\u0022registerBody\u0022:\u0022Create one in a minute, or try another address.\u0022,\u0022register\u0022:\u0022Create an account\u0022,\u0022otherEmail\u0022:\u0022Use another email\u0022,\u0022emailRequired\u0022:\u0022Enter your email address.\u0022,\u0022emailInvalid\u0022:\u0022Enter a valid email address.\u0022,\u0022passwordRequired\u0022:\u0022Enter your password.\u0022,\u0022capsLock\u0022:\u0022Caps Lock is on.\u0022,\u0022lastUsed\u0022:\u0022Last used\u0022,\u0022errorTitle\u0022:\u0022Fix these to continue\u0022,\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022,\u0022magicLink\u0022:\u0022Email me a sign-in link\u0022,\u0022linkSentTitle\u0022:\u0022Check your email\u0022,\u0022linkSentBody\u0022:\u0022We sent a sign-in link to {email}. Open it on this device to finish signing in.\u0022,\u0022resend\u0022:\u0022Send the link again\u0022,\u0022resendIn\u0022:\u0022Send again in {time}\u0022,\u0022resent\u0022:\u0022We sent a new link.\u0022,\u0022blockedTitle\u0022:\u0022This account can\\u0027t sign in here\u0022,\u0022blockedBody\u0022:\u0022Contact your administrator, or try another address.\u0022,\u0022forgotPassword\u0022:\u0022Forgot password?\u0022,\u0022backToSignIn\u0022:\u0022Back to sign in\u0022},\u0022codeLength\u0022:6,\u0022twoFactorLength\u0022:6}'))">
                <div role="status" class="flex gap-3 rounded-card border border-border bg-muted/50 p-4">
                    <span class="inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-nq-success-soft text-nq-success-text [&_svg]:size-4">
                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"/>
  <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
  <path d="m16 19 2 2 4-4"/>
</svg>                    </span>
                    <div class="flex min-w-0 flex-col gap-0.5">
                        <p data-slot="sign-in-flow-link-heading" tabindex="-1" class="text-label text-foreground outline-none">Check your email</p>
                        <p class="text-body-sm text-muted-foreground">We sent a sign-in link to <bdi dir="ltr" class="font-medium text-foreground" x-text="email"></bdi>. Open it on this device to finish signing in.</p>
                    </div>
                </div>
                <div data-slot="alert" data-tone="danger" role="alert"
        x-show="resendError" style="display: none" class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="resendError"></span></div>
            </div>
    </div>
                <span role="status" class="sr-only" x-text="resendDone && cooldown > 0 ? 'We sent a new link.' : ''"></span>
                            </div>
        </template>
        <template x-if="step === 'blocked'">
            <div data-slot="sign-in-flow-blocked" class="flex flex-col gap-4">
                <div data-slot="sign-in-flow-notice" class="flex gap-3 rounded-card border border-border bg-muted/50 p-4">
                    <span class="inline-flex size-8 shrink-0 items-center justify-center rounded-control border border-border bg-card text-foreground [&amp;_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m2 2 20 20"/>
  <path d="M5 5a1 1 0 0 0-1 1v7c0 5 3.5 7.5 7.67 8.94a1 1 0 0 0 .67.01c2.35-.82 4.48-1.97 5.9-3.71"/>
  <path d="M9.309 3.652A12.252 12.252 0 0 0 11.24 2.28a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1v7a9.784 9.784 0 0 1-.08 1.264"/>
</svg></span>
                    <div class="flex min-w-0 flex-col gap-0.5">
                        <p class="text-label text-foreground">This account can&#039;t sign in here</p>
                        <p class="text-body-sm text-muted-foreground" x-text="blockedBody()">Contact your administrator, or try another address.</p>
                    </div>
                </div>
                <button data-slot="button"
     type="button"                         x-on:click="go(null)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-[calc(var(--nq-control)+8px)] px-5 text-body">
        Use another email</button>
            </div>
        </template>
        <template x-if="step === 'sso'">
            <form novalidate data-slot="sign-in-flow-sso" class="flex flex-col gap-4" x-data="nqSignInFlowSso(JSON.parse('{\u0022password\u0022:true,\u0022magicLink\u0022:false,\u0022requestCode\u0022:false,\u0022forgotPassword\u0022:true,\u0022passkey\u0022:false,\u0022passkeyAutofill\u0022:false,\u0022oauth\u0022:false,\u0022resendSeconds\u0022:30,\u0022defaultEmail\u0022:\u0022\u0022,\u0022labels\u0022:{\u0022email\u0022:\u0022Email\u0022,\u0022emailPlaceholder\u0022:\u0022you@company.com\u0022,\u0022continue\u0022:\u0022Continue\u0022,\u0022divider\u0022:\u0022or\u0022,\u0022passkey\u0022:\u0022Sign in with a passkey\u0022,\u0022change\u0022:\u0022Change\u0022,\u0022password\u0022:\u0022Password\u0022,\u0022remember\u0022:\u0022Keep me signed in\u0022,\u0022signIn\u0022:\u0022Sign in\u0022,\u0022useCode\u0022:\u0022Email me a code instead\u0022,\u0022ssoTitle\u0022:\u0022Your organisation uses single sign-on\u0022,\u0022ssoWith\u0022:\u0022Continue with {connection}\u0022,\u0022ssoBody\u0022:\u0022You will sign in with your organisation\\u0027s identity provider and come back here.\u0022,\u0022ssoContinue\u0022:\u0022Continue with SSO\u0022,\u0022registerTitle\u0022:\u0022No account uses this email\u0022,\u0022registerBody\u0022:\u0022Create one in a minute, or try another address.\u0022,\u0022register\u0022:\u0022Create an account\u0022,\u0022otherEmail\u0022:\u0022Use another email\u0022,\u0022emailRequired\u0022:\u0022Enter your email address.\u0022,\u0022emailInvalid\u0022:\u0022Enter a valid email address.\u0022,\u0022passwordRequired\u0022:\u0022Enter your password.\u0022,\u0022capsLock\u0022:\u0022Caps Lock is on.\u0022,\u0022lastUsed\u0022:\u0022Last used\u0022,\u0022errorTitle\u0022:\u0022Fix these to continue\u0022,\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022,\u0022magicLink\u0022:\u0022Email me a sign-in link\u0022,\u0022linkSentTitle\u0022:\u0022Check your email\u0022,\u0022linkSentBody\u0022:\u0022We sent a sign-in link to {email}. Open it on this device to finish signing in.\u0022,\u0022resend\u0022:\u0022Send the link again\u0022,\u0022resendIn\u0022:\u0022Send again in {time}\u0022,\u0022resent\u0022:\u0022We sent a new link.\u0022,\u0022blockedTitle\u0022:\u0022This account can\\u0027t sign in here\u0022,\u0022blockedBody\u0022:\u0022Contact your administrator, or try another address.\u0022,\u0022forgotPassword\u0022:\u0022Forgot password?\u0022,\u0022backToSignIn\u0022:\u0022Back to sign in\u0022},\u0022codeLength\u0022:6,\u0022twoFactorLength\u0022:6}'))" x-bind:aria-busy="pending ? 'true' : null" x-on:submit.prevent="onSubmit()">
                <div tabindex="-1" class="sr-only" x-show="! problems()"></div>
<div tabindex="-1" data-slot="auth-error-summary" class="outline-none" x-show="problems()" style="display: none">
    <div data-slot="alert" data-tone="danger" role="alert" class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
        <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>        <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
            <div data-slot="alert-title" class="text-label text-foreground" x-text="summaryTitle()"></div>
            <div data-slot="alert-description" class="text-body-sm text-muted-foreground" x-show="! error && entries().length" style="display: none">
                <ul class="flex list-disc flex-col gap-0.5 ps-4">
                    <template x-for="e in entries()" :key="e.name">
                        <li><button type="button" class="text-start underline underline-offset-2" x-on:click="focusField(e.name)" x-text="(e.label ? e.label + ': ' : '') + e.message"></button></li>
                    </template>
                </ul>
            </div>
        </div>
    </div>
</div>
                <div data-slot="sign-in-flow-notice" class="flex gap-3 rounded-card border border-border bg-muted/50 p-4">
                    <span class="inline-flex size-8 shrink-0 items-center justify-center rounded-control border border-border bg-card text-foreground [&amp;_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 12h4"/>
  <path d="M10 8h4"/>
  <path d="M14 21v-3a2 2 0 0 0-4 0v3"/>
  <path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"/>
  <path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/>
</svg></span>
                    <div class="flex min-w-0 flex-col gap-0.5">
                        <p class="text-label text-foreground">Your organisation uses single sign-on</p>
                        <p class="text-body-sm text-muted-foreground">You will sign in with your organisation&#039;s identity provider and come back here.</p>
                    </div>
                </div>
                <button data-slot="button"
     type="submit"                         x-bind:disabled="pending" x-bind:data-disabled="pending ? &#039;&#039; : null" x-bind:aria-busy="pending ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <template x-if="pending"><svg data-slot="spinner" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></template>
                    <span x-text="ssoLabel()">Continue with SSO</span></button>
            </form>
        </template>
        <template x-if="step === 'register'">
            <div data-slot="sign-in-flow-register" class="flex flex-col gap-4">
                <div data-slot="sign-in-flow-notice" class="flex gap-3 rounded-card border border-border bg-muted/50 p-4">
                    <span class="inline-flex size-8 shrink-0 items-center justify-center rounded-control border border-border bg-card text-foreground [&amp;_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
  <circle cx="9" cy="7" r="4"/>
  <line x1="19" x2="19" y1="8" y2="14"/>
  <line x1="22" x2="16" y1="11" y2="11"/>
</svg></span>
                    <div class="flex min-w-0 flex-col gap-0.5">
                        <p class="text-label text-foreground">No account uses this email</p>
                        <p class="text-body-sm text-muted-foreground">Create one in a minute, or try another address.</p>
                    </div>
                </div>
                <button data-slot="button"
     type="button"                         x-on:click="register()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        Create an account</button>
                <button data-slot="button"
     type="button"                         x-on:click="go(null)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-[calc(var(--nq-control)+8px)] px-5 text-body">
        Use another email</button>
            </div>
        </template>
        <template x-if="step === 'forgot'">
            <div data-slot="sign-in-flow-forgot" class="flex flex-col gap-4" x-init="$nextTick(() => fillEmail($el))">
                <div data-slot="forgot-password-form" x-data="nqForgotPasswordForm(JSON.parse('{\u0022resendSeconds\u0022:30,\u0022names\u0022:[\u0022email\u0022],\u0022fieldLabels\u0022:{\u0022email\u0022:\u0022Email\u0022},\u0022errorTitle\u0022:\u0022Fix this to continue\u0022,\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022,\u0022labels\u0022:{\u0022email\u0022:\u0022Email\u0022,\u0022emailPlaceholder\u0022:\u0022you@example.com\u0022,\u0022submit\u0022:\u0022Send reset link\u0022,\u0022emailRequired\u0022:\u0022Enter your email address.\u0022,\u0022emailInvalid\u0022:\u0022Enter a valid email address.\u0022,\u0022errorTitle\u0022:\u0022Fix this to continue\u0022,\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022,\u0022sentTitle\u0022:\u0022Check your inbox\u0022,\u0022sentBody\u0022:\u0022If an account exists for {email}, we sent a link to reset the password.\u0022,\u0022resend\u0022:\u0022Resend email\u0022,\u0022resendIn\u0022:\u0022Resend in {time}\u0022,\u0022resent\u0022:\u0022We sent the email again.\u0022,\u0022changeEmail\u0022:\u0022Use a different email\u0022}}'))" x-bind:data-state="sentTo ? 'sent' : 'idle'"
    x-on:nq-forgot-password.stop="relay($event, &#039;nq-sign-in-forgot&#039;, { email: $event.detail.email })" x-on:nq-forgot-password-resend.stop="relay($event, &#039;nq-sign-in-forgot&#039;, { email: $event.detail.email })" class="w-full">
    <form novalidate x-show="! sentTo" x-bind:aria-busy="pending ? 'true' : null" x-on:submit.prevent="onSubmit()" x-on:input="clear($event.target.name)"
         class="flex w-full flex-col gap-4">
        <div tabindex="-1" class="sr-only" x-show="! problems()"></div>
<div tabindex="-1" data-slot="auth-error-summary" class="outline-none" x-show="problems()" style="display: none">
    <div data-slot="alert" data-tone="danger" role="alert" class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
        <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>        <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
            <div data-slot="alert-title" class="text-label text-foreground" x-text="summaryTitle()"></div>
            <div data-slot="alert-description" class="text-body-sm text-muted-foreground" x-show="! error && entries().length" style="display: none">
                <ul class="flex list-disc flex-col gap-0.5 ps-4">
                    <template x-for="e in entries()" :key="e.name">
                        <li><button type="button" class="text-start underline underline-offset-2" x-on:click="focusField(e.name)" x-text="(e.label ? e.label + ': ' : '') + e.message"></button></li>
                    </template>
                </ul>
            </div>
        </div>
    </div>
</div>
        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="bad.email" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  for="nq-forgot-000007-email" class="text-label text-foreground data-disabled:opacity-50">Email</label>
            <input data-slot="input" type="email"
     dir="ltr"      name="email"             id="nq-forgot-000007-email" autocomplete="email" inputmode="email" value="" placeholder="you@example.com" aria-describedby="nq-forgot-000007-email-error" x-bind:aria-invalid="bad.email ? &#039;true&#039; : null" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
            <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  id="nq-forgot-000007-email-error" class="text-caption text-nq-danger-text"><span x-text="fe.email"></span></div>
</div>
        <button data-slot="button"
     type="submit"                         x-bind:disabled="pending" x-bind:data-disabled="pending ? &#039;&#039; : null" x-bind:aria-busy="pending ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <template x-if="pending"><svg data-slot="spinner" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></template>
            Send reset link</button>
    </form>
    <div class="flex w-full flex-col gap-4 text-start" x-show="sentTo" style="display: none">
        <div class="flex size-10 items-center justify-center rounded-full bg-nq-success-soft text-nq-success-text">
            <svg aria-hidden="true" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"/>
  <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
  <path d="m16 19 2 2 4-4"/>
</svg>        </div>
        <div role="status" class="flex flex-col gap-1.5">
            <h2 data-slot="forgot-password-sent-title" tabindex="-1" class="text-h3 text-foreground outline-none">Check your inbox</h2>
            <p class="text-body-sm text-muted-foreground">If an account exists for <bdi dir="ltr" class="font-medium text-foreground" x-text="sentTo"></bdi>, we sent a link to reset the password.</p>
        </div>
        <div data-slot="alert" data-tone="danger" role="alert"
        x-show="resendError" style="display: none" class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="resendError"></span></div>
            </div>
    </div>
        <span role="status" class="sr-only" x-text="resendDone && cooldown > 0 ? 'We sent the email again.' : ''"></span>
        <button data-slot="forgot-password-resend"
     type="button"                         x-on:click="resend()" x-bind:disabled="resendOff()" x-bind:data-disabled="resendOff() ? &#039;&#039; : null" x-bind:aria-busy="resendPending ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <template x-if="resendPending"><svg data-slot="spinner" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></template>
            <span x-text="resendLabel()">Resend email</span></button>
        <button data-slot="button"
     type="button"                         x-on:click="changeEmail()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground underline decoration-nq-line underline-offset-4 hover:decoration-current h-auto px-0 self-start">
        Use a different email</button>
    </div>
</div>
                <button data-slot="button"
     type="button"                         x-on:click="move(&#039;password&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m12 19-7-7 7-7"/>
  <path d="M19 12H5"/>
</svg>                    Back to sign in</button>
            </div>
        </template>
    </div>
    </template>
</div>
</div>
```