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