1
 2import { fetch } from "@marzneshin/utils"
 3import { LoginSchema, useAuth } from "@marzneshin/features/auth";
 4import { useNavigate } from "@tanstack/react-router";
 5import { useState } from "react";
 6import { FieldValues, useForm } from "react-hook-form";
 7import { zodResolver } from '@hookform/resolvers/zod';
 8import { Button, Form, FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from "@marzneshin/components";
 9import { useTranslation } from "react-i18next";
10import { FormError } from "./form-error";
11
12export const LoginForm = () => {
13    const { setAuthToken } = useAuth();
14    const form = useForm({
15        resolver: zodResolver(LoginSchema),
16        defaultValues: {
17            username: '',
18            password: '',
19        }
20    })
21    const navigate = useNavigate({ from: '/login' });
22    const [error, setError] = useState<string>('');
23    const { t } = useTranslation();
24
25    const submit = (values: FieldValues) => {
26        setError('');
27        const formData = new FormData();
28        formData.append('username', values.username);
29        formData.append('password', values.password);
30        formData.append('grant_type', 'password');
31        fetch('/admins/token', { method: 'post', body: formData })
32            .then(({ access_token: token }) => {
33                setAuthToken(token);
34                navigate({ to: '/' });
35            })
36            .catch((err) => {
37                setError(err.response._data?.detail);
38            });
39    };
40
41    return (
42        <Form {...form}>
43            <form onSubmit={form.handleSubmit(submit)}>
44                <FormField
45                    control={form.control}
46                    name="username"
47                    render={({ field }) => (
48                        <FormItem>
49                            <FormLabel className="font-semibold text-primary">{t('username')}</FormLabel>
50                            <FormControl>
51                                <Input type="text" {...field} />
52                            </FormControl>
53                            <FormMessage />
54                        </FormItem>
55                    )}
56                />
57                <FormField
58                    control={form.control}
59                    name="password"
60                    render={({ field }) => (
61                        <FormItem>
62                            <FormLabel className="font-semibold text-primary">{t('password')}</FormLabel>
63                            <FormControl>
64                                <Input type="password" {...field} />
65                            </FormControl>
66                            <FormMessage />
67                        </FormItem>
68                    )}
69                />
70                <Button className="mt-3 w-full" type="submit">{t('login')}</Button>
71                {error && <FormError className="mt-2" title='Submission failed' desc={error} />}
72            </form>
73        </Form>
74    )
75}