re-implement password change

src/frontend/src/enums/ApiEndpoints.tsx

@@ -18,7 +18,7 @@ export enum ApiEndpoints {
   user_simple_login = 'email/generate/',
   user_reset = 'auth/password/reset/', // TODO change
   user_reset_set = 'auth/password/reset/confirm/', // TODO change
-  user_change_password = 'auth/password/change/', // TODO change
+  user_change_password = 'auth/v1/account/password/change',
   user_sso = 'auth/v1/account/providers',
   user_login = 'auth/v1/auth/login',
   user_login_mfa = 'auth/v1/auth/2fa/authenticate',

src/frontend/src/pages/Auth/ChangePassword.tsx

@@ -19,12 +19,14 @@ import { StylishText } from '../../components/items/StylishText';
 import { ProtectedRoute } from '../../components/nav/Layout';
 import { LanguageContext } from '../../contexts/LanguageContext';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
+import { clearCsrfCookie } from '../../functions/auth';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
 
 export default function Set_Password() {
   const simpleForm = useForm({
     initialValues: {
+      current_password: '',
       new_password1: '',
       new_password2: ''
     }
@@ -37,6 +39,7 @@ export default function Set_Password() {
     let message: any =
       values?.new_password2 ||
       values?.new_password1 ||
+      values?.current_password ||
       values?.error ||
       t`Password could not be changed`;
 
@@ -55,27 +58,45 @@ export default function Set_Password() {
   }
 
   function handleSet() {
+    const { clearUserState } = useUserState.getState();
+
+    // check if passwords match
+    if (simpleForm.values.new_password1 !== simpleForm.values.new_password2) {
+      passwordError({ new_password2: t`Passwords do not match` });
+      return;
+    }
+
     // Set password with call to backend
     api
       .post(apiUrl(ApiEndpoints.user_change_password), {
-        new_password1: simpleForm.values.new_password1,
-        new_password2: simpleForm.values.new_password2
+        current_password: simpleForm.values.current_password,
+        new_password: simpleForm.values.new_password2
       })
       .then((val) => {
-        if (val.status === 200) {
+        passwordError(val.data);
+      })
+      .catch((err) => {
+        if (err.status === 401) {
           notifications.show({
             title: t`Password Changed`,
             message: t`The password was set successfully. You can now login with your new password`,
             color: 'green',
             autoClose: false
           });
+          clearUserState();
+          clearCsrfCookie();
           navigate('/login');
         } else {
-          passwordError(val.data);
+          // compile errors
+          const errors: { [key: string]: string[] } = {};
+          for (const val of err.response.data.errors) {
+            if (!errors[val.param]) {
+              errors[val.param] = [];
+            }
+            errors[val.param].push(val.message);
+          }
+          passwordError(errors);
         }
-      })
-      .catch((err) => {
-        passwordError(err.response.data);
       });
   }
 
@@ -97,6 +118,13 @@ export default function Set_Password() {
               )}
               <Divider />
               <Stack gap='xs'>
+                <PasswordInput
+                  required
+                  aria-label='password'
+                  label={t`Current Password`}
+                  description={t`Enter your current password`}
+                  {...simpleForm.getInputProps('current_password')}
+                />
                 <PasswordInput
                   required
                   aria-label='input-password-1'