WRNexusJS/packages/auth/components/SignUp.wrn

import { Button, Checkbox, Input, StrongPassword } from "@wrnexus/ui"

component SignUp {
  props {
    action = "/api/auth/register"
    schema = "auth-register"
    redirect = ""
    title = "Create your account"
    description = "Use a strong password and verify your contact details."
    submitLabel = "Create account"
    signInHref = "/sign-in"
    termsHref = "/legal/terms"
    privacyHref = "/legal/privacy-policy"
    namePlaceholder = "Enter your full name"
    emailPlaceholder = "Enter your email address"
    phonePlaceholder = "Enter your mobile number"
    usernamePlaceholder = "Choose a username"
    passwordPlaceholder = "Create a strong password"
    showPhone = true
    showUsername = true
    requireConsent = true
    color = "primary"
    size = "md"
    class = ""
  }
  view {
    <section
      {...attrs}
      data-wrnexus-runtime="auth"
      class='w-full max-w-lg rounded-[var(--wrn-radius-lg)] border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-6 text-[var(--wrn-color-text)] shadow-[var(--wrn-shadow-2)] {class}'
    >
      <header
        class="mb-6 space-y-1.5"
      >
        <h1
          class="m-0 text-2xl font-semibold"
        >
          {title}
        </h1>
        <p
          class="m-0 text-sm text-[var(--wrn-color-muted)]"
        >
          {description}
        </p>
      </header>

      <form
        method="post"
        action='{action}'
        data-schema='{schema}'
        data-redirect='{redirect}'
        novalidate
        class="grid gap-4 sm:grid-cols-2"
      >
        <Input
          id="auth-sign-up-name"
          name="displayName"
          label="Full name"
          autocomplete="name"
          placeholder="{namePlaceholder}"
          icon="icon-[lucide--user]"
          color="{color}"
          size="{size}"
          class="sm:col-span-2"
        />

        <Input
          id="auth-sign-up-email"
          name="email"
          type="email"
          label="Email"
          autocomplete="email"
          placeholder="{emailPlaceholder}"
          icon="icon-[lucide--mail]"
          color="{color}"
          size="{size}"
        />

        {#if showPhone}
          <Input
            id="auth-sign-up-phone"
            name="phone"
            type="tel"
            label="Phone"
            autocomplete="tel"
            placeholder="{phonePlaceholder}"
            icon="icon-[lucide--phone]"
            color="{color}"
            size="{size}"
          />
        {/if}

        {#if showUsername}
          <Input
            id="auth-sign-up-username"
            name="username"
            label="Username"
            autocomplete="username"
            placeholder="{usernamePlaceholder}"
            icon="icon-[lucide--circle-user-round]"
            color="{color}"
            size="{size}"
            class="sm:col-span-2"
          />
        {/if}

        <div
          class="wrn-auth-sign-up__wide space-y-1.5 sm:col-span-2"
        >
          <StrongPassword
            label="Password"
            name="password"
            placeholder="{passwordPlaceholder}"
            autocomplete="new-password"
            minLength="12"
            requireLowercase="true"
            requireUppercase="true"
            requireNumber="true"
            requireSpecialCharacter="true"
            presentation="inline"
            color="{color}"
            size="{size}"
          />
        </div>

        {#if requireConsent}
          <Checkbox
            id="auth-sign-up-consent"
            name="consent"
            label="I agree to the"
            color="{color}"
            size="{size}"
            class="wrn-auth-sign-up__wide sm:col-span-2"
          >
            <span
              class="flex items-center"
            >
              <a
                href="{termsHref}"
              >
                terms
              </a>
              and
              <a
                href="{privacyHref}"
              >
                privacy policy
              </a>.
            </span>
          </Checkbox>
        {:else}
          <input
            type="hidden"
            name="consent"
            value="true"
          />
        {/if}

        <div
          class="wrn-auth-sign-up__wide sm:col-span-2"
        >
          <slot></slot>
        </div>

        <p
          data-error="_form"
          role="alert"
          class="wrn-auth-sign-up__wide m-0 hidden rounded-[var(--wrn-radius-sm)] bg-[color-mix(in_srgb,var(--wrn-color-danger)_10%,transparent)] p-3 text-sm text-[var(--wrn-color-danger)] sm:col-span-2"
        >
        </p>
        <p
          data-success="Account created successfully."
          role="status"
          hidden
          class="wrn-auth-sign-up__wide m-0 rounded-[var(--wrn-radius-sm)] bg-[color-mix(in_srgb,var(--wrn-color-success)_10%,transparent)] p-3 text-sm text-[var(--wrn-color-success)] sm:col-span-2"
        >
        </p>

        <Button
          type="submit"
          label="{submitLabel}"
          variant="solid"
          color="{color}"
          size="{size}"
          fullWidth="true"
          class="wrn-auth-sign-up__wide sm:col-span-2"
        />
      </form>

      <p
        class="mb-0 mt-5 text-center text-sm text-[var(--wrn-color-muted)]"
      >
        Already have an account? <a href='{signInHref}' class="font-semibold text-[var(--wrn-color-primary)] hover:underline">Sign in</a>
      </p>
    </section>
  }

  style {
    .wrn-auth-sign-up__wide {
      grid-column: 1 / -1;
      min-width: 0;
    }
  }
}