Create account

"use client";
import { useState, type SyntheticEvent } from "react";
import { LuArrowRight, LuLock, LuMail, LuUser } from "react-icons/lu";
import { Alert, Button, CheckboxField, Input, PasswordStrength } from "@nexera-ui/react";

type Strength = "empty" | "weak" | "fair" | "good" | "strong";

/** Rough client-side score from length and character variety. Enforce your real policy (and a breach check) on the server. */
function scorePassword(value: string): Strength {
  if (value === "") return "empty";
  if (value.length < 8) return "weak";
  const variety = [/[a-z]/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/].filter((rule) =>
    rule.test(value),
  ).length;
  const points = (value.length >= 12 ? 1 : 0) + (variety >= 3 ? 1 : 0);
  return (["fair", "good", "strong"] as const)[points] ?? "fair";
}

/** Create account: name, work email and password with a live strength meter and terms consent. */
export default function CreateAccount() {
  const [password, setPassword] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const strength = scorePassword(password);

  const onSubmit = (event: SyntheticEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSubmitted(true); // replace with your sign-up request
  };

  return (
    <div className="@container grid min-h-[640px] place-items-center bg-page px-4 py-10">
      <div className="grid w-full max-w-sm gap-6 rounded-xl border border-default bg-surface p-6 shadow-sm @sm:p-8">
        <header className="grid gap-1">
          <h2 className="text-heading-h3 text-primary">Create your Northwind account</h2>
          <p className="text-body-default text-secondary">
            Your company has invited you to join. It takes a minute.
          </p>
        </header>
        {submitted ? (
          <Alert
            tone="success"
            title="Account created"
            description="We sent a confirmation link to your work email. This is a demo, so nothing was sent."
            politeness="polite"
          />
        ) : null}
        <form className="grid gap-4" onSubmit={onSubmit}>
          <Input
            label="Full name"
            name="name"
            autoComplete="name"
            leadingIcon={<LuUser />}
            placeholder="e.g. Ayesha Khan"
            isRequired
          />
          <Input
            label="Work email"
            type="email"
            name="email"
            autoComplete="email"
            leadingIcon={<LuMail />}
            placeholder="you@northwind.io"
            isRequired
          />
          <div className="grid gap-2">
            <Input
              label="Password"
              type="password"
              name="password"
              autoComplete="new-password"
              leadingIcon={<LuLock />}
              value={password}
              onChange={setPassword}
              description="At least 8 characters. Longer passwords with numbers and symbols are stronger."
              validate={(value) =>
                value.length > 0 && value.length < 8 ? "Use at least 8 characters." : null
              }
              isRequired
            />
            <PasswordStrength strength={strength} />
          </div>
          <CheckboxField
            name="terms"
            label="I agree to the Northwind terms of service and privacy policy"
            description="You can read both before you continue."
            isRequired
          />
          <Button type="submit" size="lg" trailingIcon={<LuArrowRight />} className="w-full">
            Create account
          </Button>
        </form>
        <p className="text-center text-body-small text-secondary">
          <a href="#terms" className="text-brand-text underline underline-offset-4">
            Terms
          </a>
          {" · "}
          <a href="#privacy" className="text-brand-text underline underline-offset-4">
            Privacy
          </a>
          {" · "}
          Already have an account?{" "}
          <a href="#sign-in" className="text-brand-text underline underline-offset-4">
            Sign in
          </a>
        </p>
      </div>
    </div>
  );
}