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,126 @@
|
||||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import Link from "next/link";
|
||||
import { useRef, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { KeyRound, Loader2 } from "lucide-react";
|
||||
import { z } from "zod";
|
||||
import { FormField } from "@/components/ui/form-field";
|
||||
import { TurnstileWidget, type TurnstileWidgetHandle } from "@/components/ui/turnstile-widget";
|
||||
import { authErrorMessage, useRequestPasswordReset, useSystemStatus } from "@/hooks/use-auth";
|
||||
|
||||
const forgotSchema = z.object({
|
||||
email: z.string().email("Enter a valid email address"),
|
||||
});
|
||||
|
||||
type ForgotForm = z.infer<typeof forgotSchema>;
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const { data: status } = useSystemStatus();
|
||||
const resetMutation = useRequestPasswordReset();
|
||||
const turnstileRef = useRef<TurnstileWidgetHandle>(null);
|
||||
const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
|
||||
const [submittedEmail, setSubmittedEmail] = useState<string | null>(null);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<ForgotForm>({ resolver: zodResolver(forgotSchema) });
|
||||
|
||||
// Mirrors the backend's turnstile_required(is_localhost, settings) gate
|
||||
// exactly - skipped on loopback regardless of auth mode.
|
||||
const turnstileRequired = status ? !status.is_localhost : false;
|
||||
|
||||
const onSubmit = handleSubmit(async (values) => {
|
||||
try {
|
||||
await resetMutation.mutateAsync({
|
||||
email: values.email,
|
||||
turnstile_token: turnstileToken ?? undefined,
|
||||
});
|
||||
setSubmittedEmail(values.email);
|
||||
} catch {
|
||||
// Surfaced via resetMutation.isError below.
|
||||
} finally {
|
||||
turnstileRef.current?.reset();
|
||||
setTurnstileToken(null);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
|
||||
<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">
|
||||
<KeyRound className="h-4.5 w-4.5" aria-hidden />
|
||||
</span>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-slate-900">Reset your password</h1>
|
||||
<p className="text-sm text-slate-600">We'll email you a code to reset it.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{submittedEmail ? (
|
||||
<div className="mt-6 animate-fade-in space-y-4">
|
||||
<p className="rounded-md bg-green-50 px-3 py-2 text-sm text-green-700">
|
||||
If an account exists for {submittedEmail}, a reset code is on its way.
|
||||
</p>
|
||||
<Link
|
||||
href={`/reset-password?email=${encodeURIComponent(submittedEmail)}`}
|
||||
className="focus-ring inline-flex w-full items-center justify-center rounded-md bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition-colors duration-200 hover:bg-brand-700"
|
||||
>
|
||||
I have a code
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={onSubmit} className="mt-6 space-y-4" noValidate>
|
||||
<FormField
|
||||
label="Email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
{...register("email")}
|
||||
error={errors.email?.message}
|
||||
/>
|
||||
|
||||
{turnstileRequired && (
|
||||
<TurnstileWidget
|
||||
ref={turnstileRef}
|
||||
siteKey={status?.turnstile_site_key}
|
||||
onToken={setTurnstileToken}
|
||||
/>
|
||||
)}
|
||||
|
||||
{resetMutation.isError && (
|
||||
<p className="animate-fade-in text-sm text-red-600" role="alert">
|
||||
{authErrorMessage(resetMutation.error)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={resetMutation.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"
|
||||
>
|
||||
{resetMutation.isPending && (
|
||||
<Loader2 className="h-4 w-4 animate-spin" aria-hidden />
|
||||
)}
|
||||
{resetMutation.isPending ? "Sending…" : "Send reset code"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<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>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user