WRNexusJS/packages/ui/components/AuthForm.wrn

import Button from "./button.wrn"
import Checkbox from "./checkbox.wrn"
import Input from "./input.wrn"
import PinInput from "./PinInput.wrn"

component AuthForm {
  outputs {
    submit(payload: { event: Event; mode: string; action: string })
    change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
    input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
    focus(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    blur(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
  }

  props {
    size: string = "default"
    color: string = "primary"
    mode: string = "sign-in"
    action: string = "/api/auth/login"
    method: string = "post"
    title: string = "Sign in"
    description: string = ""
    returnTo: string = ""
    schema: string = ""
    showRemember: boolean = true
    showName: boolean = true
    submitLabel: string = "Continue"
    class: string = ""
  }

  functions {
    shared function schemaName() {
      if (schema) return schema
      if (mode === "sign-in") return "auth-login"
      if (mode === "register") return "auth-register"
      if (mode === "recover") return "auth-password-request"
      if (mode === "reset") return "auth-password-reset"
      if (mode === "mfa") return "auth-mfa"
      return "auth-empty"
    }

    client function submitForm(event) {
      output.submit({ event: event, mode: mode, action: action })
    }
    client function fieldEvent(type, payload) {
      const detail = payload || {}
      output[type]({ sourceEvent: detail.sourceEvent, name: detail.name || "", value: detail.value || "" })
    }
  }

  view {
    <section class="wrn-auth-form wrn-component--color-{color} wrn-component--size-{size} {class}">
      <header>
        <span class="wrn-auth-form__icon icon-[lucide--fingerprint]" aria-hidden="true"></span>
        <div><h2>{title}</h2>{#if description}<p>{description}</p>{/if}</div>
      </header>
      <form
        action="{action}"
        method="{method}"
        data-schema="{schemaName()}"
        data-wrnexus-runtime="auth"
        novalidate="true"
        @submit="submitForm(event)"
      >
        {#if returnTo}<input type="hidden" name="returnTo" value="{returnTo}" />{/if}
        {#if mode === "register" && showName}
          <Input label="Full name" name="displayName" autocomplete="name" placeholder="Enter your full name" required="true" icon="icon-[lucide--user-round]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
        {/if}
        {#if mode === "sign-in" || mode === "register" || mode === "recover"}
          <Input label="{mode === 'recover' ? 'Registered email or mobile' : 'Email, mobile, or username'}" name="{mode === 'recover' ? 'identifier' : mode === 'register' ? 'email' : 'identifier'}" type="{mode === 'register' ? 'email' : 'text'}" autocomplete="{mode === 'register' ? 'email' : 'username'}" placeholder="{mode === 'recover' ? 'Enter your registered identity' : 'Enter your identity'}" required="true" icon="icon-[lucide--at-sign]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
        {/if}
        {#if mode === "sign-in" || mode === "register" || mode === "reset"}
          <Input label="{mode === 'reset' ? 'New password' : 'Password'}" name="password" type="password" autocomplete="{mode === 'sign-in' ? 'current-password' : 'new-password'}" placeholder="Enter your password" required="true" icon="icon-[lucide--lock-keyhole]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
        {/if}
        {#if mode === "register" || mode === "reset"}
          <Input label="Confirm password" name="confirmPassword" type="password" autocomplete="new-password" placeholder="Enter the password again" required="true" icon="icon-[lucide--shield-check]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
        {/if}
        {#if mode === "mfa"}
          <PinInput label="Verification code" name="code" length={6} inputMode="numeric" />
        {/if}
        {#if mode === "sign-in" && showRemember}
          <div class="wrn-auth-form__options">
            <Checkbox label="Remember this device" name="rememberDevice" value="on" />
            <a href="/forgot-password">Forgot password?</a>
          </div>
        {/if}
        <Button type="submit" label="{submitLabel}" variant="default" color="{color}" size="lg" fullWidth="true" icon="icon-[lucide--arrow-right]" iconPosition="end" class="wrn-auth-form__submit" />
      </form>
      <slot />
    </section>
  }

  style {
    .wrn-auth-form {
      width: 100%;
    }

    .wrn-auth-form > header {
      display: flex;
      margin-bottom: 1.5rem;
      align-items: flex-start;
      gap: 0.85rem;
    }

    .wrn-auth-form__icon {
      width: 2rem;
      height: 2rem;
      flex: none;
      color: var(--wrn-color-primary);
    }

    .wrn-auth-form h2 {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 650;
      letter-spacing: -0.025em;
    }

    .wrn-auth-form header p {
      margin: 0.35rem 0 0;
      color: var(--wrn-color-muted);
      font-size: 0.75rem;
      line-height: 1.5;
    }

    .wrn-auth-form form {
      display: grid;
      gap: 1rem;
    }

    .wrn-auth-form__options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      font-size: 0.7rem;
    }

    .wrn-auth-form__options a {
      color: var(--wrn-color-primary);
      text-decoration: none;
    }

    .wrn-auth-form__submit {
      width: 100%;
      justify-content: center;
    }

    /* Shared component foundation. */

        .wrn-component {
          --wrn-component-color: var(--wrn-color-primary);
          --wrn-component-scale: 1;
          margin: 0;
          color: var(--wrn-color-text);
          font-family: var(--wrn-font-sans, inherit);
        }

        .wrn-component--color-primary {
          --wrn-component-color: var(--wrn-color-primary);
        }

        .wrn-component--color-secondary {
          --wrn-component-color: var(--wrn-color-secondary);
        }

        .wrn-component--color-success {
          --wrn-component-color: var(--wrn-color-success);
        }

        .wrn-component--color-warning {
          --wrn-component-color: var(--wrn-color-warning);
        }

        .wrn-component--color-danger {
          --wrn-component-color: var(--wrn-color-danger);
        }

        .wrn-component--color-info {
          --wrn-component-color: var(--wrn-color-info);
        }

        .wrn-component--size-xs {
          --wrn-component-scale: 0.78;
        }

        .wrn-component--size-sm {
          --wrn-component-scale: 0.88;
        }

        .wrn-component--size-default,
        .wrn-component--size-md {
          --wrn-component-scale: 1;
        }

        .wrn-component--size-lg {
          --wrn-component-scale: 1.14;
        }

        .wrn-component--size-xl {
          --wrn-component-scale: 1.28;
        }

        .wrn-component:not(.wrn-btn) {
          font-size: calc(1em * var(--wrn-component-scale));
        }

        .wrn-component :is(a, button, input, select, textarea):focus-visible {
          outline-color: var(--wrn-component-color);
        }

        .wrn-component p {
          margin: 0;
          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
          line-height: 1.6;
        }
  }
}