@viliha/vui-ui 1.1.8 → 1.3.0

package/template/app/auth/layout.tsx

@@ -0,0 +1,43 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import { ThemeToggle } from "@/app/_components/theme-toggle";
+import { Wordmark } from "@/app/_components/wordmark";
+import { FOOTER_NOTICE } from "@/lib/seo";
+
+// Auth screens shouldn't surface in search results.
+export const metadata: Metadata = { robots: { index: false, follow: false } };
+
+export default function AuthLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="relative flex min-h-screen flex-col bg-muted/30">
+      <div className="absolute right-3 top-3">
+        <ThemeToggle />
+      </div>
+
+      <div className="flex flex-1 flex-col items-center justify-center px-4 py-12">
+        <div className="w-full max-w-[400px]">
+          <Wordmark href="/auth/signin" className="mb-8 justify-center" />
+          {children}
+        </div>
+      </div>
+
+      <footer className="pb-6 text-center text-muted-foreground">
+        <div className="space-x-2">
+          <Link href="#" className="hover:text-foreground">
+            Terms of Service
+          </Link>
+          <span aria-hidden="true">·</span>
+          <Link href="#" className="hover:text-foreground">
+            Privacy Policy
+          </Link>
+        </div>
+        <p className="mt-2">{FOOTER_NOTICE}</p>
+      </footer>
+    </div>
+  );
+}

package/template/app/auth/page.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+
+/** The auth section lands on sign-in. Client redirect (static-export safe). */
+export default function AuthIndex() {
+  const router = useRouter();
+  React.useEffect(() => {
+    router.replace("/auth/signin");
+  }, [router]);
+  return null;
+}

package/template/app/auth/reset-password/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import {
+  ArrowLeftIcon as ArrowLeft,
+  CheckCircledIcon as CheckCircle,
+  LockClosedIcon as Lock,
+} from "@radix-ui/react-icons";
+
+import { Button } from "@viliha/vui-ui/button";
+import { Input } from "@viliha/vui-ui/input";
+import {
+  AuthCard,
+  AuthCardAside,
+  AuthCardBody,
+  AuthCardFooter,
+  AuthCardHeader,
+  Field,
+} from "@/app/_components/auth";
+
+export default function ResetPasswordPage() {
+  const [password, setPassword] = React.useState("");
+  const [confirm, setConfirm] = React.useState("");
+  const [error, setError] = React.useState<string>();
+  const [done, setDone] = React.useState(false);
+
+  function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters.");
+      return;
+    }
+    if (password !== confirm) {
+      setError("Passwords don't match.");
+      return;
+    }
+    setError(undefined);
+    setDone(true);
+  }
+
+  if (done) {
+    return (
+      <AuthCard>
+        <AuthCardHeader
+          icon={<CheckCircle className="size-6" />}
+          title="Password updated"
+          description="Your password has been changed. You can sign in now."
+        />
+        <AuthCardFooter>
+          <Link href="/auth/signin" className="block">
+            <Button variant="primary" className="w-full">
+              Continue to sign in
+            </Button>
+          </Link>
+        </AuthCardFooter>
+      </AuthCard>
+    );
+  }
+
+  return (
+    <AuthCard>
+      <form onSubmit={submit}>
+        <AuthCardHeader
+          title="Set a new password"
+          description="Choose a strong password you don't use elsewhere."
+        />
+        <AuthCardBody>
+          <Field label="New password" htmlFor="password" required>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete="new-password"
+              placeholder="At least 8 characters"
+            />
+          </Field>
+          <Field label="Confirm password" htmlFor="confirm" required error={error}>
+            <Input
+              id="confirm"
+              type="password"
+              value={confirm}
+              onChange={(e) => setConfirm(e.target.value)}
+              autoComplete="new-password"
+              placeholder="Re-enter password"
+            />
+          </Field>
+        </AuthCardBody>
+        <AuthCardFooter>
+          <Button type="submit" className="w-full">
+            <Lock className="size-4" />
+            Update password
+          </Button>
+          <AuthCardAside>
+            <Link
+              href="/auth/signin"
+              className="flex items-center justify-center gap-1 hover:text-foreground"
+            >
+              <ArrowLeft className="size-3.5" />
+              Back to sign in
+            </Link>
+          </AuthCardAside>
+        </AuthCardFooter>
+      </form>
+    </AuthCard>
+  );
+}

package/template/app/auth/signin/page.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  ArrowLeftIcon as ArrowLeft,
+  CheckCircledIcon as ShieldCheck,
+  EnvelopeClosedIcon as Mail,
+  LockClosedIcon as Fingerprint,
+  LockClosedIcon as KeyRound,
+} from "@radix-ui/react-icons";
+
+import { Button } from "@viliha/vui-ui/button";
+import { Input } from "@viliha/vui-ui/input";
+import {
+  AuthCard,
+  AuthCardAside,
+  AuthCardBody,
+  AuthCardFooter,
+  AuthCardHeader,
+  Field,
+  GoogleIcon,
+  OrDivider,
+} from "@/app/_components/auth";
+
+type View = "main" | "magic-sent" | "sso" | "2fa";
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export default function SignInPage() {
+  const router = useRouter();
+  const [view, setView] = React.useState<View>("main");
+  const [email, setEmail] = React.useState("");
+  const [emailError, setEmailError] = React.useState<string>();
+  const [orgId, setOrgId] = React.useState("");
+  const [code, setCode] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+
+  function sendMagicLink(e: React.FormEvent) {
+    e.preventDefault();
+    if (!EMAIL_RE.test(email.trim())) {
+      setEmailError("Enter a valid email address.");
+      return;
+    }
+    setEmailError(undefined);
+    setView("magic-sent");
+  }
+
+  function finish() {
+    setBusy(true);
+    router.push("/dashboard");
+  }
+
+  if (view === "magic-sent") {
+    return (
+      <AuthCard>
+        <AuthCardHeader
+          icon={<Mail className="size-6" />}
+          title="Check your email"
+          description={
+            <>
+              Sign-in link sent to{" "}
+              <span className="font-medium text-foreground">{email}</span>
+            </>
+          }
+        />
+        <AuthCardFooter className="space-y-2">
+          <Button variant="outline" className="w-full" onClick={() => undefined}>
+            Resend link
+          </Button>
+          <Button variant="ghost" className="w-full" onClick={() => setView("main")}>
+            Use a different email
+          </Button>
+        </AuthCardFooter>
+      </AuthCard>
+    );
+  }
+
+  if (view === "sso") {
+    return (
+      <AuthCard>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            finish();
+          }}
+        >
+          <AuthCardHeader title="Single sign-on" />
+          <AuthCardBody>
+            <Field label="Organization ID" htmlFor="org" required>
+              <Input
+                id="org"
+                value={orgId}
+                onChange={(e) => setOrgId(e.target.value)}
+                placeholder="org_ACME1234"
+                autoComplete="off"
+                required
+              />
+            </Field>
+          </AuthCardBody>
+          <AuthCardFooter>
+            <Button type="submit" className="w-full" disabled={!orgId || busy}>
+              Continue to your provider
+            </Button>
+            <AuthCardAside>
+              <BackLink onClick={() => setView("main")} />
+            </AuthCardAside>
+          </AuthCardFooter>
+        </form>
+      </AuthCard>
+    );
+  }
+
+  if (view === "2fa") {
+    return (
+      <AuthCard>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            finish();
+          }}
+        >
+          <AuthCardHeader
+            icon={<ShieldCheck className="size-6" />}
+            title="Two-factor authentication"
+            description="Enter your 6-digit code"
+          />
+          <AuthCardBody>
+            <Input
+              aria-label="Authentication code"
+              value={code}
+              onChange={(e) =>
+                setCode(e.target.value.replace(/\D/g, "").slice(0, 6))
+              }
+              inputMode="numeric"
+              placeholder="••••••"
+              className="text-center text-base tracking-[0.5em]"
+            />
+          </AuthCardBody>
+          <AuthCardFooter>
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={code.length !== 6 || busy}
+            >
+              Verify &amp; sign in
+            </Button>
+            <AuthCardAside>
+              <button
+                type="button"
+                onClick={finish}
+                className="mx-auto block text-primary hover:underline"
+              >
+                Use a passkey instead
+              </button>
+              <BackLink onClick={() => setView("main")} />
+            </AuthCardAside>
+          </AuthCardFooter>
+        </form>
+      </AuthCard>
+    );
+  }
+
+  // main
+  return (
+    <AuthCard>
+      <form onSubmit={sendMagicLink}>
+        <AuthCardHeader title="Sign in to your account" />
+        <AuthCardBody className="space-y-4">
+          <div className="space-y-4">
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full"
+              onClick={() => setView("2fa")}
+            >
+              <GoogleIcon />
+              Continue with Google
+            </Button>
+            <Button type="button" variant="outline" className="w-full" onClick={finish}>
+              <Fingerprint className="size-4" />
+              Sign in with a passkey
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full"
+              onClick={() => setView("sso")}
+            >
+              <KeyRound className="size-4" />
+              Single sign-on (SSO)
+            </Button>
+          </div>
+
+          <OrDivider />
+
+          <Field label="Work email" htmlFor="email" required error={emailError}>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@company.com"
+              autoComplete="email"
+            />
+          </Field>
+        </AuthCardBody>
+        <AuthCardFooter>
+          <Button type="submit" className="w-full">
+            <Mail className="size-4" />
+            Email me a magic link
+          </Button>
+          <AuthCardAside>
+            New to Vui Starter?{" "}
+            <Link href="/auth/signup" className="font-medium text-primary hover:underline">
+              Create an account
+            </Link>
+          </AuthCardAside>
+        </AuthCardFooter>
+      </form>
+    </AuthCard>
+  );
+}
+
+/** Small "Back" link shared by the SSO / 2FA sub-views. */
+function BackLink({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex w-full items-center justify-center gap-1 text-muted-foreground hover:text-foreground"
+    >
+      <ArrowLeft className="size-3.5" />
+      Back
+    </button>
+  );
+}

package/template/app/auth/signup/page.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  CheckIcon as Check,
+  EnvelopeOpenIcon as MailCheck,
+  QuestionMarkCircledIcon as ShieldQuestion,
+} from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@viliha/vui-ui/button";
+import { Input } from "@viliha/vui-ui/input";
+import {
+  AuthCard,
+  AuthCardAside,
+  AuthCardBody,
+  AuthCardFooter,
+  AuthCardHeader,
+  Field,
+  GoogleIcon,
+  OrDivider,
+} from "@/app/_components/auth";
+import { checkBusinessEmail } from "@/lib/auth-demo";
+
+export default function SignUpPage() {
+  const router = useRouter();
+  const [email, setEmail] = React.useState("");
+  const [error, setError] = React.useState<string>();
+  const [robot, setRobot] = React.useState(false);
+  const [sent, setSent] = React.useState(false);
+
+  function submit(e: React.FormEvent) {
+    e.preventDefault();
+    const check = checkBusinessEmail(email);
+    if (!check.ok) {
+      setError(
+        check.reason === "public"
+          ? "Please use your work email — personal domains (Gmail, Outlook, …) aren't allowed."
+          : "Enter a valid email address.",
+      );
+      return;
+    }
+    if (!robot) {
+      setError("Please confirm you're not a robot.");
+      return;
+    }
+    setError(undefined);
+    setSent(true);
+  }
+
+  if (sent) {
+    return (
+      <AuthCard>
+        <AuthCardHeader
+          icon={<MailCheck className="size-6" />}
+          title="Verify your email"
+          description={
+            <>
+              Verification link sent to{" "}
+              <span className="font-medium text-foreground">{email}</span>
+            </>
+          }
+        />
+        <AuthCardFooter className="space-y-2">
+          {/* Demo shortcut — no real inbox in the demo. */}
+          <Button className="w-full" onClick={() => router.push("/onboarding")}>
+            I&apos;ve verified — continue
+          </Button>
+          <Button variant="ghost" className="w-full" onClick={() => setSent(false)}>
+            Change email
+          </Button>
+        </AuthCardFooter>
+      </AuthCard>
+    );
+  }
+
+  return (
+    <AuthCard>
+      <form onSubmit={submit}>
+        <AuthCardHeader title="Create your account" />
+        <AuthCardBody className="space-y-4">
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full"
+            onClick={() => router.push("/onboarding")}
+          >
+            <GoogleIcon />
+            Sign up with Google
+          </Button>
+
+          <OrDivider />
+
+          <Field label="Work email" htmlFor="email" required error={error}>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@company.com"
+              autoComplete="email"
+            />
+          </Field>
+
+          <RecaptchaMock checked={robot} onChange={setRobot} />
+        </AuthCardBody>
+        <AuthCardFooter>
+          <Button type="submit" className="w-full">
+            Create account
+          </Button>
+          <AuthCardAside>
+            Already have an account?{" "}
+            <Link href="/auth/signin" className="font-medium text-primary hover:underline">
+              Sign in
+            </Link>
+          </AuthCardAside>
+        </AuthCardFooter>
+      </form>
+    </AuthCard>
+  );
+}
+
+/** Non-functional reCAPTCHA look-alike for the demo (frontend spam gate). */
+function RecaptchaMock({
+  checked,
+  onChange,
+}: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between rounded-md border border-input bg-background px-3 py-2.5">
+      <div className="flex items-center gap-2.5">
+        <button
+          type="button"
+          role="checkbox"
+          aria-checked={checked}
+          aria-label="I'm not a robot"
+          onClick={() => onChange(!checked)}
+          className={cn(
+            "grid size-5 place-items-center rounded-[3px] border transition-colors",
+            checked
+              ? "border-primary bg-primary text-primary-foreground"
+              : "border-muted-foreground/40 bg-background",
+          )}
+        >
+          {checked && <Check className="size-3.5" />}
+        </button>
+        I&apos;m not a robot
+      </div>
+      <div className="flex flex-col items-center text-muted-foreground">
+        <ShieldQuestion className="size-5" aria-hidden="true" />
+        <span className="text-xs leading-tight">reCAPTCHA</span>
+      </div>
+    </div>
+  );
+}

package/template/app/auth/verify/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { ArrowLeftIcon as ArrowLeft, LockClosedIcon as Shield } from "@radix-ui/react-icons";
+
+import { Button } from "@viliha/vui-ui/button";
+import {
+  AuthCard,
+  AuthCardAside,
+  AuthCardBody,
+  AuthCardFooter,
+  AuthCardHeader,
+} from "@/app/_components/auth";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/components/ui/input-otp";
+
+export default function VerifyPage() {
+  const router = useRouter();
+  const [code, setCode] = React.useState("");
+  const [error, setError] = React.useState<string>();
+
+  function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (code.length !== 6) {
+      setError("Enter all 6 digits.");
+      return;
+    }
+    setError(undefined);
+    router.push("/dashboard");
+  }
+
+  return (
+    <AuthCard>
+      <form onSubmit={submit}>
+        <AuthCardHeader
+          icon={<Shield className="size-6" />}
+          title="Enter verification code"
+          description="We sent a 6-digit code to your email."
+        />
+        <AuthCardBody className="flex flex-col items-center gap-4">
+          <InputOTP
+            maxLength={6}
+            value={code}
+            onChange={(v) => {
+              setCode(v);
+              setError(undefined);
+            }}
+          >
+            <InputOTPGroup>
+              {Array.from({ length: 6 }, (_, i) => (
+                <InputOTPSlot key={i} index={i} />
+              ))}
+            </InputOTPGroup>
+          </InputOTP>
+          {error && <p className="text-destructive">{error}</p>}
+        </AuthCardBody>
+        <AuthCardFooter>
+          <Button type="submit" className="w-full" disabled={code.length !== 6}>
+            Verify
+          </Button>
+          <AuthCardAside>
+            <button
+              type="button"
+              onClick={() => setCode("")}
+              className="mx-auto block hover:text-foreground"
+            >
+              Didn&apos;t get a code? Resend
+            </button>
+            <Link
+              href="/auth/signin"
+              className="flex items-center justify-center gap-1 hover:text-foreground"
+            >
+              <ArrowLeft className="size-3.5" />
+              Back to sign in
+            </Link>
+          </AuthCardAside>
+        </AuthCardFooter>
+      </form>
+    </AuthCard>
+  );
+}