diff --git a/.chores.md b/.chores.md deleted file mode 100644 index 9786ce569..000000000 --- a/.chores.md +++ /dev/null @@ -1,34 +0,0 @@ -- [x] Change schema to fix validations -- [x] Refactor to apply Single Responsibility Principle to validation (validation is done on joi only) -- [ ] Validation on change -- [ ] Validation on submit -- [ ] Take validation out from the component. - - [x] SetNewPassword - - [x] Register - - [ ] Refactor on change to deal with step three specificity - - [ ] Fix Input enter not working - - [ ] PasswordPanel - - [ ] Login -- [x] Update check component to accept not highlighted text -- [x] Split some of these user feedbacks? Like: - - [x] Must contain at least one special character, - - [x] Must contain at least one number, - - [x] Must contain at least one upper character, - - [x] Must contain at least one lower character -- [x] Pass mismatching password user feedback as the other messages, for consistency -- [ ] Get rid of toast message -- [x] Tests - - [x] Valid Password and Matching Confirmation - - [x] Valid Password, Incorrect Confirmation, then Corrects confirmation - - [x] Password Update to Match Confirm Password - - [x] Short Password with Matching Confirmation - - [x] Invalid Password Format, Correct Confirmation - - [x] Empty Password Field with Confirmation Filled - - [x] Confirm Password Left Blank - - [x] Password Change After Successful Match -- [x] Avoid submission in new password if password or confirm empty, and on error -- [ ] Update validation for password on backend - -//TODO Apply custom hook to SetNewPassword -// Enter on input triggers back action on steps one and two -// When user registers, we see sign up page for half a second diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx index 700e27fb9..c2e4c1cf8 100644 --- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx +++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx @@ -29,13 +29,21 @@ const PasswordPanel = () => { "edit-confirm-password": "confirm", }; + const errorsMap = { + length: "Must be at least 8 characters long", + uppercase: "Must contain at least one upper character", + lowercase: "Must contain at least one lower character", + number: "Must contain at least one number", + special: "Must contain at least one special character", + different: "Confirm password and password must match", + }; + const [localData, setLocalData] = useState({ password: "", newPassword: "", confirm: "", }); const [errors, setErrors] = useState({}); - const handleChange = (event) => { const { value, id } = event.target; const name = idToName[id]; @@ -110,20 +118,32 @@ const PasswordPanel = () => { onSubmit={handleSubmit} noValidate spellCheck="false" - gap={theme.spacing(20)} + gap={theme.spacing(26)} + maxWidth={"80ch"} + marginInline={"auto"} > - - - Current password - -