AWS SES preview

components/auth/EmailVerification.tsx

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { Button } from '../ui/button';
+import { Card, CardContent } from '../ui/card';
+import { sendVerificationEmail, signOut } from '../../lib/auth-client';
+import { Mail } from 'lucide-react';
+
+const logo = '/logo.png';
+
+interface Props {
+  email: string;
+}
+
+export function EmailVerification({ email }: Props) {
+  const [resent, setResent] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  async function handleResend() {
+    setLoading(true);
+    await sendVerificationEmail({
+      email,
+      callbackURL: window.location.origin,
+    });
+    setLoading(false);
+    setResent(true);
+  }
+
+  function handleCheckStatus() {
+    window.location.reload();
+  }
+
+  return (
+    <div className="flex h-screen items-center justify-center bg-secondary">
+      <Card className="w-full max-w-sm">
+        <CardContent className="p-8 space-y-6 text-center">
+          <div className="flex justify-center">
+            <img src={logo} alt="LabWise" className="h-12" />
+          </div>
+          <div className="flex justify-center">
+            <div className="rounded-full bg-accent p-4">
+              <Mail className="h-8 w-8 text-primary" />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <h2 className="font-semibold text-lg">Check your email</h2>
+            <p className="text-sm text-muted-foreground">
+              We sent a verification link to <span className="font-medium text-foreground">{email}</span>.
+              Click the link to activate your account.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Button className="w-full" onClick={handleCheckStatus}>
+              I've verified — continue
+            </Button>
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={handleResend}
+              disabled={loading || resent}
+            >
+              {resent ? 'Email sent!' : loading ? 'Sending…' : 'Resend email'}
+            </Button>
+          </div>
+          <button
+            onClick={() => signOut()}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            Use a different account
+          </button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}