Email + password login scheme set up, mailgun sending set up.

components/auth/SignUpForm.tsx

@@ -3,7 +3,16 @@ import { Button } from '../ui/button';
 import { Card, CardContent } from '../ui/card';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
-import { signUp } from '../../lib/auth-client';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '../ui/dialog';
+import { signUp, sendVerificationEmail } from '../../lib/auth-client';
+import { useEffect } from 'react';
 
 const logo = '/logo.png';
 
@@ -12,13 +21,29 @@ interface Props {
   onVerify: () => void;
 }
 
-export function SignUpForm({ onLogin, onVerify }: Props) {
+export function SignUpForm({ onLogin }: Props) {
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [confirm, setConfirm] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
+  const [showVerifyDialog, setShowVerifyDialog] = useState(false);
+  const [resendCooldown, setResendCooldown] = useState(0);
+  const [resendLoading, setResendLoading] = useState(false);
+
+  useEffect(() => {
+    if (resendCooldown <= 0) return;
+    const t = setTimeout(() => setResendCooldown(c => c - 1), 1000);
+    return () => clearTimeout(t);
+  }, [resendCooldown]);
+
+  async function handleResend() {
+    setResendLoading(true);
+    await sendVerificationEmail({ email, callbackURL: window.location.origin });
+    setResendLoading(false);
+    setResendCooldown(60);
+  }
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -42,11 +67,47 @@ export function SignUpForm({ onLogin, onVerify }: Props) {
     if (res.error) {
       setError(res.error.message || 'Failed to create account');
     } else {
-      onVerify();
+      setShowVerifyDialog(true);
     }
   }
 
   return (
+    <>
+    <Dialog open={showVerifyDialog} onOpenChange={open => { if (!open) onLogin(); }}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Check your inbox</DialogTitle>
+          <DialogDescription asChild>
+            <div className="space-y-2 text-sm text-muted-foreground">
+              <p>
+                We sent a verification link to{' '}
+                <span className="font-medium text-foreground">{email}</span>.
+              </p>
+              <p>
+                Click the link in the email to activate your account. If you don't see it, check your spam folder.
+              </p>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="flex-col gap-2 sm:flex-col">
+          <Button
+            variant="outline"
+            className="w-full"
+            onClick={handleResend}
+            disabled={resendLoading || resendCooldown > 0}
+          >
+            {resendLoading
+              ? 'Sending…'
+              : resendCooldown > 0
+              ? `Resend in ${resendCooldown}s`
+              : 'Resend verification email'}
+          </Button>
+          <Button className="w-full" onClick={onLogin}>
+            Back to sign in
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
     <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">
@@ -118,5 +179,6 @@ export function SignUpForm({ onLogin, onVerify }: Props) {
         </CardContent>
       </Card>
     </div>
+    </>
   );
 }