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,152 @@
|
||||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Loader2, UserPlus } from "lucide-react";
|
||||
import { z } from "zod";
|
||||
import { FormField } from "@/components/ui/form-field";
|
||||
import { PasswordField } from "@/components/ui/password-field";
|
||||
import { PasswordStrengthMeter } from "@/components/ui/password-strength-meter";
|
||||
import { TurnstileWidget, type TurnstileWidgetHandle } from "@/components/ui/turnstile-widget";
|
||||
import { authErrorMessage, useCurrentUser, useRegister, useSystemStatus } from "@/hooks/use-auth";
|
||||
|
||||
const registerSchema = z.object({
|
||||
displayName: z.string().min(1, "Enter your name"),
|
||||
email: z.string().email("Enter a valid email address"),
|
||||
password: z
|
||||
.string()
|
||||
.min(10, "Must be at least 10 characters")
|
||||
.refine((v) => /[a-zA-Z]/.test(v) && /\d/.test(v), {
|
||||
message: "Must contain at least one letter and one digit",
|
||||
}),
|
||||
});
|
||||
|
||||
type RegisterForm = z.infer<typeof registerSchema>;
|
||||
|
||||
export default function RegisterPage() {
|
||||
const router = useRouter();
|
||||
const registerMutation = useRegister();
|
||||
const { data: currentUser } = useCurrentUser();
|
||||
const { data: status } = useSystemStatus();
|
||||
const turnstileRef = useRef<TurnstileWidgetHandle>(null);
|
||||
const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useForm<RegisterForm>({ resolver: zodResolver(registerSchema) });
|
||||
|
||||
// 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 registerMutation.mutateAsync({
|
||||
email: values.email,
|
||||
password: values.password,
|
||||
display_name: values.displayName,
|
||||
turnstile_token: turnstileToken ?? undefined,
|
||||
});
|
||||
router.push(`/verify-email?email=${encodeURIComponent(values.email)}`);
|
||||
} catch {
|
||||
// Surfaced via registerMutation.isError below.
|
||||
} 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);
|
||||
}
|
||||
});
|
||||
|
||||
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">
|
||||
<UserPlus className="h-4.5 w-4.5" aria-hidden />
|
||||
</span>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-slate-900">Create your account</h1>
|
||||
<p className="text-sm text-slate-600">Start monitoring your competitors.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={onSubmit} className="mt-6 space-y-4" noValidate>
|
||||
<FormField
|
||||
label="Full name"
|
||||
type="text"
|
||||
autoComplete="name"
|
||||
{...register("displayName")}
|
||||
error={errors.displayName?.message}
|
||||
/>
|
||||
<FormField
|
||||
label="Email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
{...register("email")}
|
||||
error={errors.email?.message}
|
||||
/>
|
||||
<div>
|
||||
<PasswordField
|
||||
label="Password"
|
||||
autoComplete="new-password"
|
||||
hint="At least 10 characters, with a letter and a digit."
|
||||
{...register("password")}
|
||||
error={errors.password?.message}
|
||||
/>
|
||||
<PasswordStrengthMeter password={watch("password") ?? ""} />
|
||||
</div>
|
||||
|
||||
{turnstileRequired && (
|
||||
<TurnstileWidget
|
||||
ref={turnstileRef}
|
||||
siteKey={status?.turnstile_site_key}
|
||||
onToken={setTurnstileToken}
|
||||
/>
|
||||
)}
|
||||
|
||||
{registerMutation.isError && (
|
||||
<p className="animate-fade-in text-sm text-red-600" role="alert">
|
||||
{authErrorMessage(registerMutation.error)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={registerMutation.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"
|
||||
>
|
||||
{registerMutation.isPending && (
|
||||
<Loader2 className="h-4 w-4 animate-spin" aria-hidden />
|
||||
)}
|
||||
{registerMutation.isPending ? "Creating account…" : "Create account"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-6 text-center text-sm text-slate-600">
|
||||
Already have an account?{" "}
|
||||
<Link
|
||||
href="/login"
|
||||
className="font-medium text-brand-600 transition-colors duration-150 hover:text-brand-700"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user