-
Notifications
You must be signed in to change notification settings - Fork 0
/
LoginModal.tsx
101 lines (92 loc) · 3.15 KB
/
LoginModal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
'use client';
import axios from "axios";
import { signIn } from "next-auth/react";
import { FcGoogle } from "react-icons/fc";
import { useCallback, useState } from "react";
import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
import useRegisterModal from "@/app/hooks/useRegisterModal";
import useLoginModal from "@/app/hooks/useLoginModal";
import Modal from "./Modal";
import Heading from "../Heading";
import Input from "../Inputs/Input";
import toast from "react-hot-toast";
import Button from "../Button";
import { useRouter } from "next/navigation";
const LoginModal = () => {
const registerModal = useRegisterModal();
const LoginModal = useLoginModal();
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FieldValues>({
defaultValues: {
email: '',
password: '',
},
});
const onSubmit: SubmitHandler<FieldValues> = (data) => {
setIsLoading(true);
signIn('credentials', {
...data,
redirect: false,
}).then((callback) => {
setIsLoading(false);
if (callback?.ok) {
toast.success('Logged in successfully');
router.refresh();
LoginModal.onClose();
}
if (callback?.error) {
toast.error(callback.error);
}
})
};
const toggle = useCallback(() => {
LoginModal.onClose();
registerModal.onOpen();
}, [LoginModal, registerModal])
const bodyContent = (
<div className="flex flex-col gap-4">
<Heading
title="Welcome Back"
subtitle="Login to your account "
/>
<Input id="email" label="Email" disabled={isLoading} register={register} errors={errors} required />
<Input id="password" type="password" label="Password" disabled={isLoading} register={register} errors={errors} required />
</div>
);
const footerContent = (
<div className="flex flex-col gap-4 mt-3 ">
<hr />
<Button outline label="Continue with Google" icon={FcGoogle}
onClick={() => { signIn("google", { callbackUrl: '/' }) }}
/>
<div className="text-neutral-500 text-center mt-4 font-light" >
<div className="justify-center flex flex-row items-center gap-2">
<div>
Don't have an account?
</div>
<div onClick={toggle} className="text-neutral-800 cursor-pointer hover:underline" >
Register
</div>
</div>
</div>
</div>
)
return (
<Modal
disabled={isLoading}
isOpen={LoginModal.isOpen}
onClose={LoginModal.onClose}
title="Login"
actionLabel="Continue"
onSubmit={handleSubmit(onSubmit)}
body={bodyContent}
footer={footerContent}
/>
);
}
export default LoginModal;