-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathForgotPassword.jsx
More file actions
70 lines (65 loc) · 2.5 KB
/
ForgotPassword.jsx
File metadata and controls
70 lines (65 loc) · 2.5 KB
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
import { useState } from "react"
import { BiArrowBack } from "react-icons/bi"
import { useDispatch, useSelector } from "react-redux"
import { Link } from "react-router-dom"
import { getPasswordResetToken } from "../services/operations/authAPI"
function ForgotPassword() {
const [email, setEmail] = useState("")
const [emailSent, setEmailSent] = useState(false)
const dispatch = useDispatch()
const { loading } = useSelector((state) => state.auth)
const handleOnSubmit = (e) => {
e.preventDefault()
dispatch(getPasswordResetToken(email, setEmailSent))
}
return (
<div className="grid min-h-[calc(100vh-3.5rem)] place-items-center">
{loading ? (
<div className="spinner"></div>
) : (
<div className="max-w-[500px] p-4 lg:p-8">
<h1 className="text-[1.875rem] font-semibold leading-[2.375rem] text-richblack-5">
{!emailSent ? "Reset your password" : "Check email"}
</h1>
<p className="my-4 text-[1.125rem] leading-[1.625rem] text-richblack-100">
{!emailSent
? "Have no fear. We'll email you instructions to reset your password. If you dont have access to your email we can try account recovery"
: `We have sent the reset email to ${email}`}
</p>
<form onSubmit={handleOnSubmit}>
{!emailSent && (
<label className="w-full">
<p className="mb-1 text-[0.875rem] leading-[1.375rem] text-richblack-5">
Email Address <sup className="text-pink-200">*</sup>
</p>
<input
required
type="email"
name="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter email address"
className="form-style w-full"
/>
</label>
)}
<button
type="submit"
className="mt-6 w-full rounded-[8px] bg-yellow-50 py-[12px] px-[12px] font-medium text-richblack-900"
>
{!emailSent ? "Sumbit" : "Resend Email"}
</button>
</form>
<div className="mt-6 flex items-center justify-between">
<Link to="/login">
<p className="flex items-center gap-x-2 text-richblack-5">
<BiArrowBack /> Back To Login
</p>
</Link>
</div>
</div>
)}
</div>
)
}
export default ForgotPassword