Dev/jchamish/forgotpassword (#4481)

* Implementation of Forgotten Password Reset

* Update webclient/src/hooks/useReduxEffect.tsx

Co-authored-by: Zach H <zahalpern+github@gmail.com>

webclient/src/containers/Login/Login.tsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line
-import React from "react";
+import React, { useState } from "react";
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
@@ -7,11 +7,14 @@ import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 
+
 import { AuthenticationService } from 'api';
+import { RequestPasswordResetDialog, ResetPasswordDialog } from 'components';
 import { LoginForm } from 'forms';
+import { useReduxEffect } from 'hooks';
 import { Images } from 'images';
 import { RouteEnum } from 'types';
-import { ServerSelectors } from 'store';
+import { ServerSelectors, ServerTypes } from 'store';
 
 import './Login.css';
 
@@ -56,6 +59,15 @@ const Login = ({ state, description }: LoginProps) => {
   const classes = useStyles();
   const isConnected = AuthenticationService.isConnected(state);
 
+  const [dialogState, setDialogState] = useState({
+    openRequest: false,
+    openReset: false
+  });
+
+  useReduxEffect(() => {
+    openResetPasswordDialog();
+  }, ServerTypes.RESET_PASSWORD, []);
+
   const showDescription = () => {
     return !isConnected && description?.length;
   };
@@ -64,6 +76,38 @@ const Login = ({ state, description }: LoginProps) => {
     console.log('Login.createAccount->openForgotPasswordDialog');
   };
 
+  const handleRequestPasswordResetDialogSubmit = async ({ user, email, host, port }) => {
+    if (email) {
+      AuthenticationService.resetPasswordChallenge({ user, email, host, port } as any);
+    } else {
+      AuthenticationService.resetPasswordRequest({ user, host, port } as any);
+    }
+
+    closeRequestPasswordResetDialog();
+  };
+
+  const handleResetPasswordDialogSubmit = async ({ user, token, newPassword, passwordAgain, host, port }) => {
+    AuthenticationService.resetPassword({ user, token, newPassword, host, port } as any);
+
+    closeResetPasswordDialog();
+  };
+
+  const closeRequestPasswordResetDialog = () => {
+    setDialogState(s => ({ ...s, openRequest: false }));
+  }
+
+  const openRequestPasswordResetDialog = () => {
+    setDialogState(s => ({ ...s, openRequest: true }));
+  }
+
+  const closeResetPasswordDialog = () => {
+    setDialogState(s => ({ ...s, openReset: false }));
+  }
+
+  const openResetPasswordDialog = () => {
+    setDialogState(s => ({ ...s, openReset: true }));
+  }
+
   return (
     <div className={'login overflow-scroll ' + classes.root}>
       { isConnected && <Redirect from="*" to={RouteEnum.SERVER} />}
@@ -138,6 +182,18 @@ const Login = ({ state, description }: LoginProps) => {
           </div>
         </Paper>
       </div>
+
+      <RequestPasswordResetDialog
+        isOpen={dialogState.openRequest}
+        onSubmit={handleRequestPasswordResetDialogSubmit}
+        handleClose={closeRequestPasswordResetDialog}
+      />
+
+      <ResetPasswordDialog
+        isOpen={dialogState.openReset}
+        onSubmit={handleResetPasswordDialogSubmit}
+        handleClose={closeResetPasswordDialog}
+      />
     </div>
   );
 }