📦 EqualifyEverything / equalify-dashboard

📄 forgot.tsx · 60 lines
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
60import { AuthLayout } from '~/components/layout';
import SEO from '~/components/layout/seo';
import { Public } from '../..';
import { useStore } from '~/store';
import * as Auth from 'aws-amplify/auth';
import { useNavigate } from 'react-router-dom';

const Forgot = () => {
    const navigate = useNavigate();
    const setLoading = useStore(state => state.setLoading);
    const forgotPassword = async (e) => {
        e.preventDefault();
        try {
            setLoading(true);
            const { email } = Object.fromEntries(new FormData(e.currentTarget));
            if (!email) {
                throw Error;
            }
            await Auth.resetPassword({ username: email.toString() });
            alert(`Success! Please check your email address for a link to reset your password`);
            navigate('/login');
            setLoading(false);
        }
        catch (err) {
            setLoading(false);
            console.log(err);
            alert('You must enter an email address');
        }
    }
    return <Public>
        <AuthLayout>
            <SEO
                title="Forgot Password - Equalify"
                description="Log in to your Equalify account to manage your properties and reports."
                url="https://dashboard.equalify.app/forgot"
            />
            <section className="flex h-full w-full flex-col items-center justify-center gap-10">
                <div className="w-full max-w-md space-y-2">
                    <h1 className="text-3xl md:text-[2.5rem]">Forgot Password</h1>
                    <h2 className="text-base text-[#4D4D4D]">
                        Please enter your email address to reset your password{' '}
                        <span role="img" aria-hidden="true">
                            📧
                        </span>
                    </h2>
                </div>
                <form onSubmit={forgotPassword} className='flex flex-col gap-8 w-full max-w-[448px]'>
                    <div className='flex flex-col gap-2'>
                        <label htmlFor='email' className='text-sm'>Email address</label>
                        <input id='email' name='email' className='rounded-md p-3' aria-required={true} />
                    </div>
                    <button className='bg-[#1D781D] text-white rounded-md p-3 text-sm' type='submit'>Reset password</button>
                </form>
            </section>
        </AuthLayout>
    </Public>
};

export default Forgot;