Closed jamesgeer closed 2 years ago
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
frontend/src/pages
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.
Index.tsx
<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.
Due to security concerns this issue will not be implemented.
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 namePasswordReset.tsx
Starter code:
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.