Forgot password page

[jamesgeer]

If a user has forgotten their password then there needs to be a way for them to reset their password.

Add a "Forgot password?" link to the login form.

Step 1:

Create a component in frontend/src/pages with the name PasswordReset.tsx

Starter code:

import React, { useState } from 'react';
import { FormControl, FormLabel, Input, FormHelperText, FormErrorMessage } from '@chakra-ui/react';

const ResetPassword = () => {
    const [username, setUsername] = useState('');

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => setUsername(e.target.value);

    const isError = username === '';

    return (
        <FormControl isInvalid={isError}>
            <FormLabel>Username</FormLabel>
            <Input type="text" value={username} onChange={handleInputChange} />
            {!isError ? (
                <FormHelperText>Please enter the username you signed up with.</FormHelperText>
            ) : (
                <FormErrorMessage>Username is required.</FormErrorMessage>
            )}
        </FormControl>
    );
};

export default ResetPassword;

Step 2:

Open Index.tsx (located in the same directory (pages)) and add the following line below login.

<Route path="password-reset" element={<PasswordReset />} />

Now for the form I would like a "two-stage" form, so stage one they enter their username and if it belongs to a valid user then the form should re-render to display another form asking for a new password.

Logic below:

Form 1: Enter username

If user exists, proceed.

Form 2: Enter a new password.

If password is valid, return to login screen.

[jamesgeer]

Due to security concerns this issue will not be implemented.