114 lines
4.6 KiB
TypeScript
114 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { authService } from "@/lib/services/auth.service";
|
|
import { AppErrorType } from "@/types/global";
|
|
import { ERROR_CODES } from "@/constants/errorCodes";
|
|
import { ErrorMessage } from "@/components/ui/ErrorMessage";
|
|
import { useTranslate } from "@/hooks/useTranslate";
|
|
import { getErrorMessage } from "@/utils/errors";
|
|
|
|
interface RegisterFormProps {
|
|
from?: string;
|
|
}
|
|
|
|
export function RegisterForm({ from }: RegisterFormProps) {
|
|
const router = useRouter();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<AppErrorType | null>(null);
|
|
const { t } = useTranslate();
|
|
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
const formData = new FormData(event.currentTarget);
|
|
const email = formData.get("email") as string;
|
|
const password = formData.get("password") as string;
|
|
const confirmPassword = formData.get("confirmPassword") as string;
|
|
|
|
if (password !== confirmPassword) {
|
|
setError({
|
|
code: ERROR_CODES.AUTH.PASSWORD_MISMATCH,
|
|
name: "Password mismatch",
|
|
message: getErrorMessage(ERROR_CODES.AUTH.PASSWORD_MISMATCH),
|
|
});
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await authService.register(email, password);
|
|
router.push(from || "/");
|
|
router.refresh();
|
|
} catch (error) {
|
|
setError(error as AppErrorType);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="email"
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
{t("login.form.email")}
|
|
</label>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
required
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="password"
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
{t("login.form.password")}
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
required
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="confirmPassword"
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
{t("login.form.confirmPassword")}
|
|
</label>
|
|
<input
|
|
id="confirmPassword"
|
|
name="confirmPassword"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
required
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
/>
|
|
</div>
|
|
{error && <ErrorMessage errorCode={error.code} variant="form" />}
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="inline-flex w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
|
|
>
|
|
{isLoading ? t("login.form.submit.loading.register") : t("login.form.submit.register")}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|