From 489e82b7e862841d708d5475a67f1cc6acd79841 Mon Sep 17 00:00:00 2001
From: zkldi <20380519+zkldi@users.noreply.github.com>
Date: Sat, 27 Nov 2021 12:31:23 +0000
Subject: [PATCH] Add confirm stuff to changepassword

---
 .../dashboard/users/UserSettingsPage.tsx      | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/client/src/app/pages/dashboard/users/UserSettingsPage.tsx b/client/src/app/pages/dashboard/users/UserSettingsPage.tsx
index 0a7adb9c0..2ca2bcb98 100644
--- a/client/src/app/pages/dashboard/users/UserSettingsPage.tsx
+++ b/client/src/app/pages/dashboard/users/UserSettingsPage.tsx
@@ -80,13 +80,17 @@ function AccountSettings({ reqUser }: { reqUser: PublicUserDocument }) {
 		initialValues: {
 			"!oldPassword": "",
 			"!password": "",
+			confPass: "",
 		},
 		onSubmit: async values => {
 			const r = await APIFetchV1<UserSettings>(
 				`/users/${reqUser.id}/change-password`,
 				{
 					method: "POST",
-					...FetchJSONBody(values),
+					...FetchJSONBody({
+						"!oldPassword": values["!oldPassword"],
+						"!password": values["!password"],
+					}),
 				},
 				true,
 				true
@@ -96,6 +100,7 @@ function AccountSettings({ reqUser }: { reqUser: PublicUserDocument }) {
 				formik.setValues({
 					"!oldPassword": "",
 					"!password": "",
+					confPass: "",
 				});
 			}
 		},
@@ -122,9 +127,36 @@ function AccountSettings({ reqUser }: { reqUser: PublicUserDocument }) {
 					placeholder="New Password"
 					onChange={formik.handleChange}
 				/>
-				<Form.Text>Passwords have to be atleast 8 characters long.</Form.Text>
+				{formik.values["!password"].length < 8 && (
+					<Form.Text className="text-warning">
+						Passwords have to be atleast 8 characters long.
+					</Form.Text>
+				)}
 			</Form.Group>
-			<Button className="mt-8" variant="danger" type="submit">
+			<Form.Group>
+				<Form.Label>Confirm New Password</Form.Label>
+				<Form.Control
+					type="password"
+					id="confPass"
+					value={formik.values.confPass}
+					placeholder="New Password"
+					onChange={formik.handleChange}
+				/>
+			</Form.Group>
+			{!(formik.values["!password"] === formik.values.confPass) && (
+				<Form.Text className="text-danger">Passwords don't match!</Form.Text>
+			)}
+			<Button
+				className="mt-8"
+				variant="danger"
+				type="submit"
+				disabled={
+					!(
+						formik.values["!password"] === formik.values.confPass &&
+						formik.values.confPass.length >= 8
+					)
+				}
+			>
 				Change Password
 			</Button>
 		</Form>