fix password reset flow

src/frontend/src/enums/ApiEndpoints.tsx

@@ -16,8 +16,8 @@ export enum ApiEndpoints {
   user_token = 'user/token/',
   user_tokens = 'user/tokens/',
   user_simple_login = 'email/generate/',
-  user_reset = 'auth/password/reset/', // TODO change
+  user_reset = 'auth/v1/auth/password/request',
-  user_reset_set = 'auth/password/reset/confirm/', // TODO change
+  user_reset_set = 'auth/v1/auth/password/reset',
   auth_pwd_change = 'auth/v1/account/password/change',
   auth_login = 'auth/v1/auth/login',
   auth_login_2fa = 'auth/v1/auth/2fa/authenticate',

src/frontend/src/functions/auth.tsx

@@ -172,10 +172,16 @@ export function handleReset(
   navigate: NavigateFunction,
   values: { email: string }
 ) {
+  ensureCsrf();
   api
-    .post(apiUrl(ApiEndpoints.user_reset), values, {
+    .post(
+      apiUrl(ApiEndpoints.user_reset),
+      values
+      /*{
       headers: { Authorization: '' }
-    })
+    }
+      */
+    )
     .then((val) => {
       if (val.status === 200) {
         notifications.show({

src/frontend/src/pages/Auth/ResetPassword.tsx

@@ -22,32 +22,41 @@ export default function ResetPassword() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
-  const token = searchParams.get('token');
+  const key = searchParams.get('key');
-  const uid = searchParams.get('uid');
 
-  function invalidToken() {
+  function invalidKey() {
     notifications.show({
-      title: t`Token invalid`,
+      title: t`Key invalid`,
-      message: t`You need to provide a valid token to set a new password. Check your inbox for a reset link.`,
+      message: t`You need to provide a valid key to set a new password. Check your inbox for a reset link.`,
       color: 'red'
     });
     navigate('/login');
   }
 
+  function success() {
+    notifications.show({
+      title: t`Password set`,
+      message: t`The password was set successfully. You can now login with your new password`,
+      color: 'green',
+      autoClose: false
+    });
+    navigate('/login');
+  }
+
   function passwordError(values: any) {
     notifications.show({
       title: t`Reset failed`,
-      message: values?.new_password2 || values?.new_password1 || values?.token,
+      message: values?.errors.map((e: any) => e.message).join('\n'),
       color: 'red'
     });
   }
 
   useEffect(() => {
-    // make sure we have a token
+    // make sure we have a key
-    if (!token || !uid) {
+    if (!key) {
-      invalidToken();
+      invalidKey();
     }
-  }, [token]);
+  }, [key]);
 
   function handleSet() {
     // Set password with call to backend
@@ -55,32 +64,23 @@ export default function ResetPassword() {
       .post(
         apiUrl(ApiEndpoints.user_reset_set),
         {
-          uid: uid,
+          key: key,
-          token: token,
+          password: simpleForm.values.password
-          new_password1: simpleForm.values.password,
-          new_password2: simpleForm.values.password
         },
         { headers: { Authorization: '' } }
       )
       .then((val) => {
         if (val.status === 200) {
-          notifications.show({
+          success();
-            title: t`Password set`,
-            message: t`The password was set successfully. You can now login with your new password`,
-            color: 'green',
-            autoClose: false
-          });
-          navigate('/login');
         } else {
           passwordError(val.data);
         }
       })
       .catch((err) => {
-        if (
+        if (err.response?.status === 400) {
-          err.response?.status === 400 &&
+          passwordError(err.response.data);
-          err.response?.data?.token == 'Invalid value'
+        } else if (err.response?.status === 401) {
-        ) {
+          success();
-          invalidToken();
         } else {
           passwordError(err.response.data);
         }