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

components/auth/LoginForm.tsx

@@ -1,9 +1,9 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { Button } from '../ui/button';
 import { Card, CardContent } from '../ui/card';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
-import { signIn } from '../../lib/auth-client';
+import { signIn, sendVerificationEmail } from '../../lib/auth-client';
 import {
   Package,
   FileCheck,
@@ -52,9 +52,24 @@ export function LoginForm({ onSignUp, onForgotPassword }: Props) {
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
+  const [resendCooldown, setResendCooldown] = useState(0);
+  const [resendLoading, setResendLoading] = useState(false);
   const aboutRef = useRef<HTMLElement>(null);
   const heroRef = useRef<HTMLElement>(null);
 
+  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();
     setError('');
@@ -145,7 +160,25 @@ export function LoginForm({ onSignUp, onForgotPassword }: Props) {
                   autoComplete="current-password"
                 />
               </div>
-              {error && <p className="text-sm text-red-600">{error}</p>}
+              {error && (
+                <div className="space-y-1">
+                  <p className="text-sm text-red-600">{error}</p>
+                  {error === 'Email not verified' && (
+                    <button
+                      type="button"
+                      onClick={handleResend}
+                      disabled={resendLoading || resendCooldown > 0}
+                      className="text-sm text-primary hover:underline disabled:opacity-50 disabled:no-underline"
+                    >
+                      {resendLoading
+                        ? 'Sending…'
+                        : resendCooldown > 0
+                        ? `Resend verification email (${resendCooldown}s)`
+                        : 'Resend verification email'}
+                    </button>
+                  )}
+                </div>
+              )}
               <Button type="submit" className="w-full" disabled={loading}>
                 {loading ? 'Signing in…' : 'Sign in'}
               </Button>