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,188 @@
|
||||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { Suspense, useEffect, useRef, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Loader2, ShieldCheck } from "lucide-react";
|
||||
import { z } from "zod";
|
||||
import { FormField } from "@/components/ui/form-field";
|
||||
import { PasswordField } from "@/components/ui/password-field";
|
||||
import { TurnstileWidget, type TurnstileWidgetHandle } from "@/components/ui/turnstile-widget";
|
||||
import { useCountdown } from "@/hooks/use-countdown";
|
||||
import { classifyLoginError, useCurrentUser, useLogin, useSystemStatus } from "@/hooks/use-auth";
|
||||
|
||||
const loginSchema = z.object({
|
||||
email: z.string().email("Enter a valid email address"),
|
||||
password: z.string().min(1, "Enter your password"),
|
||||
});
|
||||
|
||||
type LoginForm = z.infer<typeof loginSchema>;
|
||||
|
||||
function LoginFormCard() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const loginMutation = useLogin();
|
||||
const { data: currentUser } = useCurrentUser();
|
||||
const { data: status } = useSystemStatus();
|
||||
const turnstileRef = useRef<TurnstileWidgetHandle>(null);
|
||||
const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
|
||||
const countdown = useCountdown();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<LoginForm>({ resolver: zodResolver(loginSchema) });
|
||||
|
||||
// Mirrors the backend's turnstile_required(is_localhost, settings) gate -
|
||||
// skipped on loopback regardless of auth mode.
|
||||
const turnstileRequired = status ? !status.is_localhost : false;
|
||||
|
||||
useEffect(() => {
|
||||
if (currentUser) {
|
||||
router.replace("/dashboard");
|
||||
}
|
||||
}, [currentUser, router]);
|
||||
|
||||
const onSubmit = handleSubmit(async (values) => {
|
||||
try {
|
||||
await loginMutation.mutateAsync({
|
||||
...values,
|
||||
turnstile_token: turnstileToken ?? undefined,
|
||||
});
|
||||
router.push("/dashboard");
|
||||
} catch (error) {
|
||||
const failure = classifyLoginError(error);
|
||||
if (failure.kind === "verify_email") {
|
||||
router.push(`/verify-email?email=${encodeURIComponent(values.email)}`);
|
||||
return;
|
||||
}
|
||||
if (failure.retryAfterSeconds) {
|
||||
countdown.start(failure.retryAfterSeconds);
|
||||
}
|
||||
} finally {
|
||||
// Tokens are single-use - always reset after a submit attempt,
|
||||
// success or failure, so a retry never reuses a stale token.
|
||||
turnstileRef.current?.reset();
|
||||
setTurnstileToken(null);
|
||||
}
|
||||
});
|
||||
|
||||
const failure = loginMutation.isError ? classifyLoginError(loginMutation.error) : null;
|
||||
|
||||
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">
|
||||
<ShieldCheck className="h-4.5 w-4.5" aria-hidden />
|
||||
</span>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-slate-900">Sign in</h1>
|
||||
<p className="text-sm text-slate-600">Welcome back to CI Agent.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{searchParams.get("registered") && (
|
||||
<p className="mt-4 animate-fade-in rounded-md bg-green-50 px-3 py-2 text-sm text-green-700">
|
||||
Account created. Sign in below.
|
||||
</p>
|
||||
)}
|
||||
{searchParams.get("verified") && (
|
||||
<p className="mt-4 animate-fade-in rounded-md bg-green-50 px-3 py-2 text-sm text-green-700">
|
||||
Email verified. Sign in below.
|
||||
</p>
|
||||
)}
|
||||
{searchParams.get("reset") && (
|
||||
<p className="mt-4 animate-fade-in rounded-md bg-green-50 px-3 py-2 text-sm text-green-700">
|
||||
Password reset. Sign in with your new password.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<form onSubmit={onSubmit} className="mt-6 space-y-4" noValidate>
|
||||
<FormField
|
||||
label="Email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
{...register("email")}
|
||||
error={errors.email?.message}
|
||||
/>
|
||||
<PasswordField
|
||||
label="Password"
|
||||
autoComplete="current-password"
|
||||
{...register("password")}
|
||||
error={errors.password?.message}
|
||||
/>
|
||||
|
||||
{turnstileRequired && (
|
||||
<TurnstileWidget
|
||||
ref={turnstileRef}
|
||||
siteKey={status?.turnstile_site_key}
|
||||
onToken={setTurnstileToken}
|
||||
/>
|
||||
)}
|
||||
|
||||
{failure && (
|
||||
<div className="animate-fade-in space-y-1 text-sm text-red-600" role="alert">
|
||||
<p>{failure.message}</p>
|
||||
{failure.kind === "account_locked" && (
|
||||
<Link href="/forgot-password" className="font-medium underline">
|
||||
Reset your password to unlock it
|
||||
</Link>
|
||||
)}
|
||||
{failure.kind === "banned" && (
|
||||
<Link href="/unban-request" className="font-medium underline">
|
||||
Request an unban
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loginMutation.isPending || countdown.remaining > 0}
|
||||
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"
|
||||
>
|
||||
{loginMutation.isPending && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
|
||||
{countdown.remaining > 0
|
||||
? `Try again in ${countdown.remaining}s`
|
||||
: loginMutation.isPending
|
||||
? "Signing in…"
|
||||
: "Sign in"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-4 text-center text-sm">
|
||||
<Link
|
||||
href="/forgot-password"
|
||||
className="font-medium text-brand-600 transition-colors duration-150 hover:text-brand-700"
|
||||
>
|
||||
Forgot your password?
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<p className="mt-6 text-center text-sm text-slate-600">
|
||||
Don't have an account?{" "}
|
||||
<Link
|
||||
href="/register"
|
||||
className="font-medium text-brand-600 transition-colors duration-150 hover:text-brand-700"
|
||||
>
|
||||
Create one
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<main className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
|
||||
<Suspense fallback={null}>
|
||||
<LoginFormCard />
|
||||
</Suspense>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user