📦 EqualifyEverything / equalify-dashboard

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
78import { 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 Reset = () => {
    const navigate = useNavigate();
    const setLoading = useStore(state => state.setLoading);
    const resetPassword = async (e) => {
        e.preventDefault();
        try {
            setLoading(true);
            const urlParams = new URLSearchParams(location.search);
            const username = urlParams.get('username');
            const code = urlParams.get('code');
            const { password, confirm } = Object.fromEntries(new FormData(e.currentTarget));

            if (!username || !code) {
                throw Error('This reset password link is no longer valid');
            }
            if (!password || !confirm) {
                throw Error('You must fill out both fields');
            }
            else if (password !== confirm) {
                throw Error('Make sure your passwords match');
            }
            else if (password.length < 6) {
                throw Error('Your password must be at least 6 characters long');
            }

            await Auth.confirmResetPassword({ username, confirmationCode: code, newPassword: password.toString() });
            setLoading(false);
            alert('Success! Logging in...');
            await Auth.signIn({ username, password });
            navigate('/reports');
        }
        catch (err) {
            setLoading(false);
            alert(err.message);
        }
    }
    return <Public>
        <AuthLayout>
            <SEO
                title="Reset Password - Equalify"
                description="Log in to your Equalify account to manage your properties and reports."
                url="https://dashboard.equalify.app/reset"
            />
            <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]">Reset Password</h1>
                    <h2 className="text-base text-[#4D4D4D]">
                        Please enter your new password{' '}
                        <span role="img" aria-hidden="true">
                            🔒
                        </span>
                    </h2>
                </div>
                <form onSubmit={resetPassword} className='flex flex-col gap-8 w-full max-w-[448px]'>
                    <div className='flex flex-col gap-2'>
                        <label htmlFor='password' className='text-sm'>Password</label>
                        <input id='password' name='password' className='rounded-md p-3' />
                    </div>
                    <div className='flex flex-col gap-2'>
                        <label htmlFor='confirm_password' className='text-sm'>Confirm password</label>
                        <input id='confirm_password' name='confirm' className='rounded-md p-3' />
                    </div>
                    <button className='bg-[#1D781D] text-white rounded-md p-3 text-sm' type='submit'>Reset password</button>
                </form>
            </section>
        </AuthLayout>
    </Public>
};

export default Reset;