gitscope
/
← marzneshin / dashboard/src/features/auth/login/form.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/auth/login/form.tsx · v0.3.0-alpha
Source
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 4466347 Mrdn 2y ago const { setAuthToken } = 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 4466347 Mrdn 2y ago const submit = (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 4466347 Mrdn 2y ago fetch('/admins/token', { method: 'post', body: formData })
32 4466347 Mrdn 2y ago .then(({ access_token: token }) => {
33 4466347 Mrdn 2y ago setAuthToken(token);
34 4466347 Mrdn 2y ago navigate({ to: '/' });
35 4466347 Mrdn 2y ago })
36 4466347 Mrdn 2y ago .catch((err) => {
37 4466347 Mrdn 2y ago setError(err.response._data?.detail);
38 4466347 Mrdn 2y ago });
39 4466347 Mrdn 2y ago };
40 4466347 Mrdn 2y ago
41 4466347 Mrdn 2y ago return (
42 4466347 Mrdn 2y ago <Form {...form}>
43 4466347 Mrdn 2y ago <form onSubmit={form.handleSubmit(submit)}>
44 4466347 Mrdn 2y ago <FormField
45 4466347 Mrdn 2y ago control={form.control}
46 4466347 Mrdn 2y ago name="username"
47 4466347 Mrdn 2y ago render={({ field }) => (
48 4466347 Mrdn 2y ago <FormItem>
49 4466347 Mrdn 2y ago <FormLabel className="font-semibold text-primary">{t('username')}</FormLabel>
50 4466347 Mrdn 2y ago <FormControl>
51 25f60ca Mrdn 2y ago <Input type="text" {...field} />
52 4466347 Mrdn 2y ago </FormControl>
53 4466347 Mrdn 2y ago <FormMessage />
54 4466347 Mrdn 2y ago </FormItem>
55 4466347 Mrdn 2y ago )}
56 4466347 Mrdn 2y ago />
57 4466347 Mrdn 2y ago <FormField
58 4466347 Mrdn 2y ago control={form.control}
59 4466347 Mrdn 2y ago name="password"
60 4466347 Mrdn 2y ago render={({ field }) => (
61 4466347 Mrdn 2y ago <FormItem>
62 4466347 Mrdn 2y ago <FormLabel className="font-semibold text-primary">{t('password')}</FormLabel>
63 4466347 Mrdn 2y ago <FormControl>
64 25f60ca Mrdn 2y ago <Input type="password" {...field} />
65 4466347 Mrdn 2y ago </FormControl>
66 4466347 Mrdn 2y ago <FormMessage />
67 4466347 Mrdn 2y ago </FormItem>
68 4466347 Mrdn 2y ago )}
69 4466347 Mrdn 2y ago />
70 4466347 Mrdn 2y ago <Button className="mt-3 w-full" type="submit">{t('login')}</Button>
71 4466347 Mrdn 2y ago {error && <FormError className="mt-2" title='Submission failed' desc={error} />}
72 4466347 Mrdn 2y ago </form>
73 4466347 Mrdn 2y ago </Form>
74 4466347 Mrdn 2y ago )
75 4466347 Mrdn 2y ago }