Wire Password Reset

Tombolo/client-reactjs/src/components/login/AuthRoutes.js

@@ -3,9 +3,9 @@ import BasicLayout from '../common/BasicLayout';
 import { Route, Switch } from 'react-router-dom';
 const Login = React.lazy(() => import('./login.js'));
 const Register = React.lazy(() => import('./register.js'));
-const ResetPassword = React.lazy(() => import('./ResetPassword.js'));
+const ResetPassword = React.lazy(() => import('./ResetPasswordWithToken.js'));
 const ForgotPassword = React.lazy(() => import('./ForgotPassword.js'));
-const resetTempPassword = React.lazy(() => import('./ResetTempPw'));
+const resetTempPassword = React.lazy(() => import('./ResetTempPassword.js'));
 
 const AuthRoutes = () => {
   //if traditional login isn't enabled, redirect user to login page
@@ -30,9 +30,11 @@ const AuthRoutes = () => {
       <Switch>
         <Route path="/login" component={Login} />
         <Route path="/register" component={Register} />
+        {/* reset password with self requested token */}
         <Route path="/reset-password/:resetToken" component={ResetPassword} />
         <Route path="/forgot-password" component={ForgotPassword} />
-        <Route path="/reset-temporary-password" component={resetTempPassword} />
+        {/* reset password with temp password from owner/admin registration */}
+        <Route path="/reset-temporary-password/:resetToken" component={resetTempPassword} />
         {/* redirect all other routes hit to login */}
         <Route path="*" component={Login} />
       </Switch>

Tombolo/client-reactjs/src/components/login/ForgotPassword.js

@@ -1,10 +1,17 @@
 import React from 'react';
 import { Form, Input, Button, Divider, message } from 'antd';
+import { authHeader } from '../common/AuthHeader';
 
 const ForgotPassword = () => {
-  const onFinish = (values) => {
-    console.log('Received values:', values);
-    success();
+  const onFinish = async (values) => {
+    try {
+      const url = '/api/auth/handlePasswordResetRequest';
+      await fetch(url, { headers: authHeader(), method: 'POST', body: JSON.stringify(values) });
+
+      success();
+    } catch (err) {
+      message.error(err.message);
+    }
   };
 
   const [messageApi, contextHolder] = message.useMessage();

Tombolo/client-reactjs/src/components/login/ResetPassword.js → Tombolo/client-reactjs/src/components/login/ResetPasswordWithToken.js

@@ -2,8 +2,12 @@ import React, { useEffect, useState } from 'react';
 import { Form, Input, Button, Divider, message, Popover } from 'antd';
 import { useParams } from 'react-router-dom';
 import passwordComplexityValidator from '../common/passwordComplexityValidator';
+import { authHeader } from '../common/AuthHeader';
+
+import { getDeviceInfo } from './utils';
+import { setUser } from '../common/userStorage';
+
 const ResetPassword = () => {
-  const [user, setUser] = useState(null);
   const [popOverContent, setPopOverContent] = useState(null);
 
   //we will get the reset token from the url and test if it is valid to get the user information
@@ -29,28 +33,49 @@ const ResetPassword = () => {
     });
   };
 
+  //if there is no token, we will show an error message to the user
   useEffect(() => {
-    //check if reset token is valid, if it is, we will get the user ID and store it, if not, we will redirect to the login page
-    if (user === null && resetToken !== undefined) {
-      //get user information by reset token
+    if (resetToken === undefined) {
+      invalidToken();
+    }
+  }, []);
 
-      // get user by reset token route
+  const onFinish = async (values) => {
+    try {
+      const url = '/api/auth/resetPasswordWithToken';
+      const password = values.newPassword;
+      const deviceInfo = getDeviceInfo();
 
-      //if user is found, set user and return
-      console.log(setUser);
+      const response = await fetch(url, {
+        headers: authHeader(),
+        method: 'POST',
+        body: JSON.stringify({ password, token: resetToken, deviceInfo }),
+      });
 
-      //if user is not found, message
-      invalidToken();
-    }
+      if (!response.ok) {
+        let json = await response.json();
 
-    if (resetToken === undefined) {
-      //redirect to login page
-    }
-  }, []);
+        if (json.message) {
+          message.error(json.message);
+        } else {
+          message.error('An undefined error occurred. Please try again later');
+        }
+        return;
+      }
 
-  const onFinish = (values) => {
-    console.log('Received values:', values);
-    alert('reset password code fires here');
+      if (response.ok) {
+        message.success('Password reset successfully.');
+        let json = await response.json();
+        if (json.success === true) {
+          json.data.isAuthenticated = true;
+          setUser(json.data);
+          //reload window
+          window.location.href = '/';
+        }
+      }
+    } catch (err) {
+      message.error(err.message);
+    }
   };
 
   useEffect(() => {}, [popOverContent]);
@@ -119,7 +144,7 @@ const ResetPassword = () => {
         <Input.Password size="large" autoComplete="new-password" />
       </Form.Item>
       <Form.Item>
-        <Button type="primary" htmlType="submit" disabled={!user?.id} className="fullWidth">
+        <Button type="primary" htmlType="submit" className="fullWidth">
           Reset Password
         </Button>
       </Form.Item>

Tombolo/client-reactjs/src/components/login/ResetTempPw.jsx → Tombolo/client-reactjs/src/components/login/ResetTempPassword.js

@@ -36,9 +36,18 @@ function ResetTempPassword() {
       values.token = resetToken;
       const result = await resetTempPassword(values);
 
-      // Save user token to local storage
-      setUser(JSON.stringify(result.data));
-      window.location.href = '/';
+      if (result?.data) {
+        let user = result.data;
+
+        //set isAuthenticated to true so application loads
+        user.isAuthenticated = true;
+
+        // Save user token to local storage
+        setUser(JSON.stringify(user));
+        window.location.href = '/';
+      } else {
+        message.error(result.message);
+      }
     } catch (err) {
       message.error(err.message);
     } finally {

Tombolo/client-reactjs/src/components/login/utils.js

@@ -22,7 +22,7 @@ export const getDeviceInfo = () => {
   return { os, browser: browserName };
 };
 
-// Make a request to the server to reset the temporary password
+// Make a request to the server to reset the temporary password - OWNER REGISTRATION
 export const resetTempPassword = async (resetData) => {
   const payload = {
     method: 'POST',