Wire Password Reset (#981)

* Wire Password Reset

* Remove unecessary reset temp password code that isn't used with temp password.

We use the link and token method for resetting temp passwords, no need to have temporary password code any longer

* Remove unecessary reset temp password code that isn't used with temp password.

Amended this commit to re-introduce reset temp password items.

* Fixes

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',