Initial commit: CI Agent competitive-intelligence monitoring app
FastAPI + Celery + Next.js + Postgres/Redis app with company monitoring, source collection, LLM-based change analysis, enrichment, and account security (Turnstile, escalating lockout, email verification).
This commit is contained in:
@@ -0,0 +1,165 @@
|
||||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { Suspense, useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Loader2, MailCheck } from "lucide-react";
|
||||
import { z } from "zod";
|
||||
import { FormField } from "@/components/ui/form-field";
|
||||
import { useCountdown } from "@/hooks/use-countdown";
|
||||
import {
|
||||
authErrorMessage,
|
||||
retryAfterSeconds,
|
||||
useCurrentUser,
|
||||
useResendVerification,
|
||||
useVerifyEmail,
|
||||
} from "@/hooks/use-auth";
|
||||
|
||||
const verifySchema = z.object({
|
||||
code: z
|
||||
.string()
|
||||
.length(6, "Enter the 6-digit code")
|
||||
.regex(/^\d{6}$/, "Digits only"),
|
||||
});
|
||||
|
||||
type VerifyForm = z.infer<typeof verifySchema>;
|
||||
|
||||
function VerifyEmailCard() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const email = searchParams.get("email") ?? "";
|
||||
const verifyMutation = useVerifyEmail();
|
||||
const resendMutation = useResendVerification();
|
||||
const { data: currentUser } = useCurrentUser();
|
||||
const countdown = useCountdown();
|
||||
const [resent, setResent] = useState(false);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<VerifyForm>({ resolver: zodResolver(verifySchema) });
|
||||
|
||||
useEffect(() => {
|
||||
if (currentUser) {
|
||||
router.replace("/dashboard");
|
||||
}
|
||||
}, [currentUser, router]);
|
||||
|
||||
const onSubmit = handleSubmit(async (values) => {
|
||||
try {
|
||||
await verifyMutation.mutateAsync({ email, code: values.code });
|
||||
router.push("/login?verified=1");
|
||||
} catch {
|
||||
// Surfaced via verifyMutation.isError below - swallow here so a
|
||||
// wrong/expired code doesn't also trip Next's unhandled-rejection
|
||||
// dev overlay on top of the inline error message.
|
||||
}
|
||||
});
|
||||
|
||||
const onResend = async () => {
|
||||
setResent(false);
|
||||
try {
|
||||
await resendMutation.mutateAsync({ email });
|
||||
setResent(true);
|
||||
countdown.start(30);
|
||||
} catch (error) {
|
||||
const retryAfter = retryAfterSeconds(error);
|
||||
if (retryAfter) countdown.start(retryAfter);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-sm animate-fade-in overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
|
||||
<div className="h-1.5 bg-gradient-to-r from-brand-500 via-brand-600 to-brand-700" />
|
||||
<div className="p-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-50 text-brand-600">
|
||||
<MailCheck className="h-4.5 w-4.5" aria-hidden />
|
||||
</span>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-slate-900">Verify your email</h1>
|
||||
<p className="text-sm text-slate-600">
|
||||
{email ? (
|
||||
<>
|
||||
We sent a 6-digit code to <span className="font-medium">{email}</span>.
|
||||
</>
|
||||
) : (
|
||||
"Enter the 6-digit code we emailed you."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={onSubmit} className="mt-6 space-y-4" noValidate>
|
||||
<FormField
|
||||
label="Verification code"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
maxLength={6}
|
||||
placeholder="123456"
|
||||
{...register("code", {
|
||||
onChange: (e) => {
|
||||
e.target.value = e.target.value.replace(/\D/g, "").slice(0, 6);
|
||||
},
|
||||
})}
|
||||
error={errors.code?.message}
|
||||
/>
|
||||
|
||||
{verifyMutation.isError && (
|
||||
<p className="animate-fade-in text-sm text-red-600" role="alert">
|
||||
{authErrorMessage(verifyMutation.error)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={verifyMutation.isPending}
|
||||
className="focus-ring inline-flex w-full items-center justify-center gap-2 rounded-md bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition-colors duration-200 hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{verifyMutation.isPending && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
|
||||
{verifyMutation.isPending ? "Verifying…" : "Verify email"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-4 text-center text-sm text-slate-600">
|
||||
{resent && countdown.remaining === 0 && !resendMutation.isPending && (
|
||||
<p className="mb-2 animate-fade-in text-green-700">Code resent - check your inbox.</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onResend}
|
||||
disabled={resendMutation.isPending || countdown.remaining > 0 || !email}
|
||||
className="focus-ring font-medium text-brand-600 transition-colors duration-150 hover:text-brand-700 disabled:cursor-not-allowed disabled:text-slate-400"
|
||||
>
|
||||
{countdown.remaining > 0
|
||||
? `Resend in ${countdown.remaining}s`
|
||||
: resendMutation.isPending
|
||||
? "Sending…"
|
||||
: "Resend code"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="mt-6 text-center text-sm text-slate-600">
|
||||
<Link
|
||||
href="/login"
|
||||
className="font-medium text-brand-600 transition-colors duration-150 hover:text-brand-700"
|
||||
>
|
||||
Back to sign in
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function VerifyEmailPage() {
|
||||
return (
|
||||
<main className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
|
||||
<Suspense fallback={null}>
|
||||
<VerifyEmailCard />
|
||||
</Suspense>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user