spb/polyllm

1"use client";2import * as React from "react";3import Link from "next/link";4import { AlertTriangle, MailCheck } from "lucide-react";5import { Field, Input } from "@/components/ui/input";6import { AuthCard } from "./auth-card";7import { ResendVerification } from "./resend-verification";8import { humanAuthError, isValidEmail } from "./auth-errors";910export function VerifyEmailView({ initialEmail, errorCode }: { initialEmail: string; errorCode: string | null }) {11  const [email, setEmail] = React.useState(initialEmail);12  const valid = isValidEmail(email);13  const failed = !!errorCode;1415  return (16    <AuthCard17      icon={failed ? <AlertTriangle /> : <MailCheck />}18      title={failed ? "That link didn't work" : "Verify your email"}19      description={20        failed21          ? humanAuthError({ code: errorCode ?? undefined }, "verify")22          : initialEmail23            ? (24                <>25                  We sent a verification link to <span className="font-medium text-fg">{initialEmail}</span>. Open it to activate your account. Links are valid for 24 hours.26                </>27              )28            : "Your account needs a verified email before you can sign in. Check your inbox for the link we sent when you signed up, or request a new one below."29      }30      footer={31        <>32          Already verified?{" "}33          <Link href="/login" className="font-medium text-accent underline-offset-4 hover:underline">34            Sign in35          </Link>36        </>37      }38    >39      <form40        onSubmit={(e) => e.preventDefault()}41        noValidate42        className="space-y-4"43      >44        <Field label="Email" htmlFor="verify-email" hint={failed ? "We'll send a fresh link to this address." : undefined}>45          <Input46            id="verify-email"47            name="email"48            type="email"49            inputMode="email"50            autoComplete="email"51            autoCapitalize="none"52            spellCheck={false}53            required54            value={email}55            onChange={(e) => setEmail(e.target.value)}56            placeholder="you@company.com"57            autoFocus={!initialEmail}58          />59        </Field>60        <ResendVerification email={valid ? email.trim() : ""} variant="primary" className="h-11 w-full rounded-lg text-[15px]" />61        <p className="text-center text-xs text-fg-subtle">Nothing after a minute? Check your spam folder. Verification emails come from PolyLLM.</p>62      </form>63    </AuthCard>64  );65}66