194 lines
7.7 KiB
TypeScript
194 lines
7.7 KiB
TypeScript
"use client";
|
|
|
|
import { Eye, EyeOff, Lock, Mail, User, UserPlus } from "lucide-react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useTranslations } from "next-intl";
|
|
import { useActionState, useState } from "react";
|
|
import { register } from "@/actions/register";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
interface RegisterFormProps {
|
|
hotelName: string;
|
|
captcha: { provider: string; siteKey?: string };
|
|
error?: string;
|
|
}
|
|
|
|
export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
|
const t = useTranslations("pages.register");
|
|
const showCaptcha = captcha.provider !== "none" && !!captcha.siteKey;
|
|
const [serverError, formAction, isPending] = useActionState(register, null);
|
|
const [termsAccepted, setTermsAccepted] = useState(false);
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
return (
|
|
<div className="mx-auto w-full max-w-lg animate-fade-in">
|
|
<div className="text-center mb-8">
|
|
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 shadow-lg">
|
|
<UserPlus className="h-8 w-8 text-[var(--color-primary)]" />
|
|
</div>
|
|
<h1 className="text-2xl font-extrabold tracking-tight m-0">
|
|
{t("title")}
|
|
</h1>
|
|
<p className="mt-1.5 text-sm text-[var(--color-text-muted-readable)]">
|
|
{t("subtitle", { hotel: hotelName })}
|
|
</p>
|
|
</div>
|
|
|
|
<Card className="border-[var(--border-subtle)] shadow-elevated">
|
|
<CardHeader className="px-6 pt-6 pb-0">
|
|
<CardTitle className="text-base font-bold">
|
|
Create your account
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Fill in the details below to join {hotelName}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="p-6">
|
|
<form action={formAction} className="space-y-5">
|
|
{(error || serverError) && (
|
|
<div className="rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900 px-4 py-3">
|
|
<p className="text-sm font-medium text-red-600 dark:text-red-400 text-center m-0">
|
|
{error || serverError}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="relative">
|
|
<User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--color-text-muted)]" />
|
|
<input
|
|
id="username"
|
|
name="username"
|
|
type="text"
|
|
placeholder={t("usernamePlaceholder")}
|
|
autoComplete="username"
|
|
className="w-full rounded-xl border-2 border-[var(--input-border-color)] bg-[var(--color-background)] pl-10 pr-4 py-2.5 text-sm transition-all duration-200 focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--color-text-muted)]" />
|
|
<input
|
|
id="mail"
|
|
name="mail"
|
|
type="email"
|
|
placeholder={t("emailPlaceholder")}
|
|
autoComplete="email"
|
|
className="w-full rounded-xl border-2 border-[var(--input-border-color)] bg-[var(--color-background)] pl-10 pr-4 py-2.5 text-sm transition-all duration-200 focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--color-text-muted)]" />
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder={t("passwordPlaceholder")}
|
|
autoComplete="new-password"
|
|
className="w-full rounded-xl border-2 border-[var(--input-border-color)] bg-[var(--color-background)] pl-10 pr-10 py-2.5 text-sm transition-all duration-200 focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
|
|
required
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)] hover:text-[var(--color-text-readable)]"
|
|
>
|
|
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--color-text-muted)]" />
|
|
<input
|
|
id="password_confirmation"
|
|
name="password_confirmation"
|
|
type="password"
|
|
placeholder={t("confirmPasswordPlaceholder")}
|
|
autoComplete="new-password"
|
|
className="w-full rounded-xl border-2 border-[var(--input-border-color)] bg-[var(--color-background)] pl-10 pr-4 py-2.5 text-sm transition-all duration-200 focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Terms */}
|
|
<div className="flex items-start gap-3 rounded-xl border border-[var(--border-subtle)] bg-[var(--color-background)] p-4">
|
|
<button
|
|
type="button"
|
|
role="checkbox"
|
|
aria-checked={termsAccepted}
|
|
onClick={() => setTermsAccepted(!termsAccepted)}
|
|
className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 transition-all"
|
|
style={{
|
|
borderColor: termsAccepted
|
|
? "var(--color-primary)"
|
|
: "var(--input-border-color)",
|
|
backgroundColor: termsAccepted
|
|
? "var(--color-primary)"
|
|
: "transparent",
|
|
}}
|
|
>
|
|
{termsAccepted && (
|
|
<svg className="h-3 w-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
<input type="hidden" name="terms" value={termsAccepted ? "1" : ""} />
|
|
<label
|
|
className="text-sm cursor-pointer select-none"
|
|
style={{ color: "var(--color-text-readable)" }}
|
|
onClick={() => setTermsAccepted(!termsAccepted)}
|
|
>
|
|
{t("termsAccept", { hotel: hotelName })}
|
|
</label>
|
|
</div>
|
|
|
|
{/* Captcha */}
|
|
{showCaptcha && captcha.provider === "turnstile" && (
|
|
<div className="flex justify-center">
|
|
<div className="cf-turnstile" data-sitekey={captcha.siteKey} />
|
|
</div>
|
|
)}
|
|
{showCaptcha && captcha.provider === "recaptcha" && (
|
|
<div className="flex justify-center">
|
|
<div className="g-recaptcha" data-sitekey={captcha.siteKey} />
|
|
</div>
|
|
)}
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={isPending}
|
|
size="lg"
|
|
className="w-full font-bold text-base h-12 rounded-xl"
|
|
>
|
|
{isPending ? (
|
|
<span className="flex items-center justify-center gap-2">
|
|
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
|
</svg>
|
|
{t("creatingAccount")}
|
|
</span>
|
|
) : t("createAccount")}
|
|
</Button>
|
|
|
|
<div className="text-center">
|
|
<p className="text-sm text-[var(--color-text-muted-readable)]">
|
|
{t("alreadyHaveAccount")}{" "}
|
|
<Link href="/login" className="font-bold text-[var(--color-primary)] hover:underline">
|
|
{t("signIn")}
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|