Changes

2026-01-06 14:59:47 +00:00
parent 1697e719c9
commit 8c2e001d1e
5 changed files with 496 additions and 43 deletions
@@ -1,32 +1,198 @@
-import { Mail, RefreshCw } from "lucide-react";
+import { useState, useEffect } from "react";
+import { useSearchParams, Link } from "react-router-dom";
+import { Mail, CheckCircle, XCircle, Loader2, ArrowRight, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Link } from "react-router-dom";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { BannerAlert } from "@/components/auth/BannerAlert";
+
+type VerificationState = "verifying" | "success" | "error" | "resend";

 export default function VerifyEmailPage() {
+  const [searchParams] = useSearchParams();
+  const token = searchParams.get("token");
+  
+  const [state, setState] = useState<VerificationState>(token ? "verifying" : "resend");
+  const [errorMessage, setErrorMessage] = useState<string>("");
+  const [resendEmail, setResendEmail] = useState("");
+  const [isResending, setIsResending] = useState(false);
+  const [resendSuccess, setResendSuccess] = useState(false);
+
+  useEffect(() => {
+    if (token && state === "verifying") {
+      verifyToken(token);
+    }
+  }, [token, state]);
+
+  const verifyToken = async (verificationToken: string) => {
+    // Mock verification - POST /api/auth/verify-email?token=...
+    setTimeout(() => {
+      // Simulate different responses
+      const mockSuccess = Math.random() > 0.3; // 70% success rate for demo
+      
+      if (mockSuccess) {
+        setState("success");
+      } else {
+        setState("error");
+        setErrorMessage("This verification link has expired or is invalid.");
+      }
+    }, 1500);
+  };
+
+  const handleResendVerification = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsResending(true);
+    setResendSuccess(false);
+
+    // Mock resend - POST /api/auth/request-email-verification
+    setTimeout(() => {
+      setIsResending(false);
+      setResendSuccess(true);
+    }, 1000);
+  };
+
+  // Loading / Verifying state
+  if (state === "verifying") {
+    return (
+      <div className="auth-card text-center">
+        <div className="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mx-auto mb-6">
+          <Loader2 className="w-8 h-8 text-accent animate-spin" />
+        </div>
+
+        <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+          Verifying your email
+        </h1>
+        <p className="text-muted-foreground mt-2">
+          Please wait while we confirm your email address...
+        </p>
+      </div>
+    );
+  }
+
+  // Success state
+  if (state === "success") {
+    return (
+      <div className="auth-card text-center">
+        <div className="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center mx-auto mb-6">
+          <CheckCircle className="w-8 h-8 text-success" />
+        </div>
+
+        <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+          Email verified
+        </h1>
+        <p className="text-muted-foreground mt-2 mb-6">
+          Your email has been successfully verified. You can now sign in to your account.
+        </p>
+
+        <Link to="/login">
+          <Button className="w-full">
+            Continue to sign in
+            <ArrowRight className="w-4 h-4 ml-2" />
+          </Button>
+        </Link>
+      </div>
+    );
+  }
+
+  // Error state
+  if (state === "error") {
+    return (
+      <div className="auth-card text-center">
+        <div className="w-16 h-16 rounded-full bg-destructive/10 flex items-center justify-center mx-auto mb-6">
+          <XCircle className="w-8 h-8 text-destructive" />
+        </div>
+
+        <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+          Verification failed
+        </h1>
+        <p className="text-muted-foreground mt-2 mb-6">
+          {errorMessage}
+        </p>
+
+        <div className="space-y-3">
+          <Button 
+            variant="outline" 
+            className="w-full"
+            onClick={() => setState("resend")}
+          >
+            <RefreshCw className="w-4 h-4 mr-2" />
+            Resend verification email
+          </Button>
+          
+          <Link to="/login">
+            <Button variant="ghost" className="w-full">
+              Back to sign in
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // Resend verification form
  return (
-    <div className="auth-card text-center">
-      <div className="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mx-auto mb-6">
-        <Mail className="w-8 h-8 text-accent" />
+    <div className="auth-card">
+      <div className="text-center mb-8">
+        <div className="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mx-auto mb-6">
+          <Mail className="w-8 h-8 text-accent" />
+        </div>
+
+        <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+          Resend verification
+        </h1>
+        <p className="text-muted-foreground mt-2">
+          Enter your email to receive a new verification link
+        </p>
      </div>

-      <h1 className="text-2xl font-semibold text-foreground tracking-tight">
-        Check your email
-      </h1>
-      <p className="text-muted-foreground mt-2 mb-6">
-        We've sent a verification link to your email address. Click the link to verify your account.
-      </p>
+      {resendSuccess && (
+        <BannerAlert
+          type="success"
+          message="If an account exists with this email, you'll receive a verification link shortly."
+          className="mb-6"
+        />
+      )}

-      <div className="space-y-3">
-        <Button variant="outline" className="w-full">
-          <RefreshCw className="w-4 h-4 mr-2" />
-          Resend verification email
+      <form onSubmit={handleResendVerification} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <div className="relative">
+            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              value={resendEmail}
+              onChange={(e) => setResendEmail(e.target.value)}
+              className="pl-10"
+              required
+              autoComplete="email"
+            />
+          </div>
+        </div>
+
+        <Button 
+          type="submit" 
+          className="w-full" 
+          disabled={isResending || !resendEmail.trim()}
+        >
+          {isResending ? (
+            <>
+              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+              Sending...
+            </>
+          ) : (
+            <>
+              Send verification link
+              <ArrowRight className="w-4 h-4 ml-2" />
+            </>
+          )}
        </Button>
-      </div>
+      </form>

-      <p className="text-sm text-muted-foreground mt-6">
-        Wrong email?{" "}
-        <Link to="/register" className="text-accent hover:underline font-medium">
-          Go back
+      <p className="text-center text-sm text-muted-foreground mt-6">
+        <Link to="/login" className="text-accent hover:underline font-medium">
+          Back to sign in
        </Link>
      </p>
    </div>