103 lines
4.1 KiB
TypeScript
103 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { authService } from "@/lib/services/auth.service";
|
|
import type { AppErrorType } from "@/types/global";
|
|
import { ErrorMessage } from "@/components/ui/ErrorMessage";
|
|
import { useTranslate } from "@/hooks/useTranslate";
|
|
|
|
interface LoginFormProps {
|
|
from?: string;
|
|
}
|
|
|
|
export function LoginForm({ from }: LoginFormProps) {
|
|
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 remember = formData.get("remember") === "on";
|
|
|
|
try {
|
|
await authService.login(email, password, remember);
|
|
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
|
|
defaultValue="demo@stripstream.local"
|
|
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="current-password"
|
|
required
|
|
defaultValue="fft$VSD96dis"
|
|
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="flex items-center space-x-2">
|
|
<input
|
|
id="remember"
|
|
name="remember"
|
|
type="checkbox"
|
|
defaultChecked
|
|
className="h-4 w-4 rounded border border-input ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
/>
|
|
<label
|
|
htmlFor="remember"
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
{t("login.form.remember")}
|
|
</label>
|
|
</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.login") : t("login.form.submit.login")}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|