feat: fixing PAssword Panel

.chores.md

@@ -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

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"}
 			>
-				<Stack direction="row">
-					<Box flex={0.9}>
-						<Typography component="h1">Current password</Typography>
-					</Box>
-					<Field
-						type="text"
-						id="hidden-username"
-						name="username"
-						autoComplete="username"
-						hidden={true}
-						value=""
-					/>
+				<Field
+					type="text"
+					id="hidden-username"
+					name="username"
+					autoComplete="username"
+					hidden={true}
+					value=""
+				/>
+
+				<Stack
+					direction="row"
+					justifyContent={"flex-start"}
+					alignItems={"center"}
+					gap={theme.spacing(8)}
+					flexWrap={"wrap"}
+				>
+					<Typography
+						component="h1"
+						width="20ch"
+					>
+						Current password
+					</Typography>
 					<Field
 						type="password"
 						id="edit-current-password"
@@ -131,13 +151,22 @@ const PasswordPanel = () => {
 						autoComplete="current-password"
 						value={localData.password}
 						onChange={handleChange}
-						error={errors[idToName["edit-current-password"]]}
+						error={errorsMap[errors[idToName["edit-current-password"]]]}
 					/>
 				</Stack>
-				<Stack direction="row">
-					<Box flex={0.9}>
-						<Typography component="h1">New password</Typography>
-					</Box>
+				<Stack
+					direction="row"
+					alignItems={"center"}
+					gap={theme.spacing(8)}
+					flexWrap={"wrap"}
+				>
+					<Typography
+						component="h1"
+						width="20ch"
+					>
+						New password
+					</Typography>
+
 					<Field
 						type="password"
 						id="edit-new-password"
@@ -145,13 +174,22 @@ const PasswordPanel = () => {
 						autoComplete="new-password"
 						value={localData.newPassword}
 						onChange={handleChange}
-						error={errors[idToName["edit-new-password"]]}
+						error={errorsMap[errors[idToName["edit-new-password"]]]}
 					/>
 				</Stack>
-				<Stack direction="row">
-					<Box flex={0.9}>
-						<Typography component="h1">Confirm new password</Typography>
-					</Box>
+				<Stack
+					direction="row"
+					alignItems={"center"}
+					gap={theme.spacing(8)}
+					flexWrap={"wrap"}
+				>
+					<Typography
+						component="h1"
+						width="20ch"
+					>
+						Confirm new password
+					</Typography>
+
 					<Field
 						type="password"
 						id="edit-confirm-password"
@@ -159,18 +197,17 @@ const PasswordPanel = () => {
 						autoComplete="new-password"
 						value={localData.confirm}
 						onChange={handleChange}
-						error={errors[idToName["edit-confirm-password"]]}
+						error={errorsMap[errors[idToName["edit-confirm-password"]]]}
 					/>
 				</Stack>
-				<Stack direction="row">
-					<Box flex={0.9}></Box>
-					<Box sx={{ flex: 1 }}>
+				{Object.keys(errors).length > 0 && (
+					<Box sx={{ maxWidth: "70ch" }}>
 						<Alert
 							variant="warning"
-							body="New password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol."
+							body="New password must contain at least 8 characters and must have at least one uppercase letter, one lowercase letter, one number and one special character."
 						/>
 					</Box>
-				</Stack>
+				)}
 				<Stack
 					direction="row"
 					justifyContent="flex-end"
@@ -178,7 +215,7 @@ const PasswordPanel = () => {
 					<LoadingButton
 						variant="contained"
 						color="primary"
-						onClick={handleSubmit}
+						type="submit"
 						loading={isLoading}
 						loadingIndicator="Saving..."
 						disabled={Object.keys(errors).length !== 0 && true}

Client/src/Pages/Auth/Register/StepThree/index.jsx

@@ -149,7 +149,6 @@ function StepThree({ onSubmit, onBack }) {
 							type="submit"
 							variant="contained"
 							color="primary"
-							/* onClick={onSubmit} */
 							disabled={
 								form.password.length === 0 ||
 								form.confirm.length === 0 ||