chore(release): sync frontend from monorepo v4
This commit is contained in:
Yamen Ahmad
191
src/pages/EmailVerification.tsx
Normal file
191
src/pages/EmailVerification.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Link, useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
|
||||
import { GraduationCap, Loader2 } from "lucide-react";
|
||||
import { useResendOtp, useVerifyEmail } from "@/hooks/queries/useSignup";
|
||||
import { ApiError } from "@/lib/api-client";
|
||||
|
||||
const RESEND_LIMIT = 3;
|
||||
const COOLDOWN_SEC = 60;
|
||||
|
||||
function errorMessage(err: unknown): string {
|
||||
if (err instanceof ApiError) return err.message;
|
||||
if (err instanceof Error) return err.message;
|
||||
return "Verification failed";
|
||||
}
|
||||
|
||||
export default function EmailVerification() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const email = searchParams.get("email")?.trim() || "";
|
||||
const navigate = useNavigate();
|
||||
const verify = useVerifyEmail();
|
||||
const resend = useResendOtp();
|
||||
const [otp, setOtp] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [resendAttempts, setResendAttempts] = useState(0);
|
||||
const [cooldown, setCooldown] = useState(0);
|
||||
const submittingRef = useRef(false);
|
||||
const lastSubmittedOtp = useRef<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (otp.length < 6) lastSubmittedOtp.current = null;
|
||||
}, [otp]);
|
||||
|
||||
useEffect(() => {
|
||||
if (cooldown <= 0) return;
|
||||
const t = window.setInterval(() => {
|
||||
setCooldown((c) => (c <= 1 ? 0 : c - 1));
|
||||
}, 1000);
|
||||
return () => window.clearInterval(t);
|
||||
}, [cooldown]);
|
||||
|
||||
const runVerify = useCallback(
|
||||
async (code: string) => {
|
||||
if (!email || code.length !== 6) return;
|
||||
setError(null);
|
||||
submittingRef.current = true;
|
||||
try {
|
||||
await verify.mutateAsync({ email, otp: code });
|
||||
navigate("/onboarding", { replace: true });
|
||||
} catch (e) {
|
||||
lastSubmittedOtp.current = null;
|
||||
setError(errorMessage(e));
|
||||
} finally {
|
||||
submittingRef.current = false;
|
||||
}
|
||||
},
|
||||
[email, navigate, verify],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (otp.length !== 6 || submittingRef.current || verify.isPending) return;
|
||||
if (lastSubmittedOtp.current === otp) return;
|
||||
lastSubmittedOtp.current = otp;
|
||||
void runVerify(otp);
|
||||
}, [otp, runVerify, verify.isPending]);
|
||||
|
||||
const handleResend = async () => {
|
||||
if (!email || cooldown > 0 || resendAttempts >= RESEND_LIMIT || resend.isPending) return;
|
||||
setError(null);
|
||||
try {
|
||||
await resend.mutateAsync(email);
|
||||
setResendAttempts((n) => n + 1);
|
||||
setCooldown(COOLDOWN_SEC);
|
||||
} catch (e) {
|
||||
setError(errorMessage(e));
|
||||
}
|
||||
};
|
||||
|
||||
if (!email) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-muted/40 to-background p-4">
|
||||
<Card className="w-full max-w-md border-0 shadow-lg">
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle>Missing email</CardTitle>
|
||||
<CardDescription>Add an email query parameter or return to registration.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex justify-center">
|
||||
<Button asChild variant="outline">
|
||||
<Link to="/register">Back to registration</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-muted/40 to-background p-4">
|
||||
<div className="w-full max-w-md space-y-8">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="h-10 w-10 rounded-xl bg-primary flex items-center justify-center shadow-sm">
|
||||
<GraduationCap className="h-6 w-6 text-primary-foreground" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Verify your email</h1>
|
||||
</div>
|
||||
|
||||
<Card className="border-0 shadow-xl bg-card/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center space-y-2">
|
||||
<CardTitle className="text-lg">Check your inbox</CardTitle>
|
||||
<CardDescription className="text-base leading-relaxed">
|
||||
We've sent a 6-digit verification code to{" "}
|
||||
<span className="font-medium text-foreground">{email}</span>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<InputOTP maxLength={6} value={otp} onChange={setOtp} disabled={verify.isPending}>
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot index={0} />
|
||||
<InputOTPSlot index={1} />
|
||||
<InputOTPSlot index={2} />
|
||||
<InputOTPSlot index={3} />
|
||||
<InputOTPSlot index={4} />
|
||||
<InputOTPSlot index={5} />
|
||||
</InputOTPGroup>
|
||||
</InputOTP>
|
||||
{verify.isPending && (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Verifying…
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-center text-sm text-destructive bg-destructive/10 rounded-md py-2 px-3">{error}</p>
|
||||
)}
|
||||
|
||||
<Button
|
||||
className="w-full"
|
||||
size="lg"
|
||||
onClick={() => void runVerify(otp)}
|
||||
disabled={otp.length !== 6 || verify.isPending}
|
||||
>
|
||||
{verify.isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Verifying
|
||||
</>
|
||||
) : (
|
||||
"Verify"
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<div className="text-center text-sm space-y-2">
|
||||
<p className="text-muted-foreground">
|
||||
Resend attempts:{" "}
|
||||
<span className="font-medium text-foreground">
|
||||
{resendAttempts}/{RESEND_LIMIT}
|
||||
</span>
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleResend()}
|
||||
disabled={cooldown > 0 || resendAttempts >= RESEND_LIMIT || resend.isPending}
|
||||
className="text-primary font-medium hover:underline disabled:opacity-50 disabled:no-underline"
|
||||
>
|
||||
{resend.isPending ? (
|
||||
"Sending…"
|
||||
) : cooldown > 0 ? (
|
||||
`Resend code in ${cooldown}s`
|
||||
) : (
|
||||
"Resend code"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Wrong address?{" "}
|
||||
<Link to="/register" className="text-primary font-medium hover:underline">
|
||||
Change email
|
||||
</Link>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user