T14: Build the reset password form #22
Conversation
…e will be processed once backend method for reset password is created.
justinpchen94
left a comment
justinpchen94
left a comment
There was a problem hiding this comment.
small nits mostly
| setPasswordError(passwordError); | ||
|
|
||
| // TODO: Once handler in backend is created come back here to process the response | ||
| const response = await fetch('/api/auth/reset-password', { |
There was a problem hiding this comment.
in general it's nice to put all the API calls into a separate file esp since API calls eventually will be reused. this react component is made slightly messier by having to also include details about the API request itself here, such as the headers and etc
| const ResetPassword: React.FC = () => { | ||
| const [newPassword, setNewPassword] = useState<string>(''); | ||
| const [confirmNewPassword, setConfirmNewPassword] = useState<string>(''); | ||
| const [passwordError, setPasswordError] = useState<string | null>(null); |
There was a problem hiding this comment.
nit: passwordValidationError slightly more helpful since this one is currently broad and the other error is more specific
| value={confirmNewPassword} | ||
| onChange={handleConfirmNewPasswordChange} | ||
| /> | ||
| {passwordMatchError && ( |
There was a problem hiding this comment.
not blocking: not the worst thing in the world but given that your UI only has 2 fields, it's slightly confusing to have the errors shown in 2 different places. i know you're doing a different design than the wireframes but notice that there are differences between input level and global level errors, and the input level errors are shown directly contextually under the inputs where the issues are.
Description:
UI with filled inputs:
Password criteria error being thrown:
Password matching error being thrown:
