Webatrice: Add account validation dialog/form (#4547)

* Add account validation dialog/form

* clean up

* close registration dialog on token request

* remove dupe code

* add subtitle styling

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/containers/Login/Login.tsx

@@ -9,7 +9,7 @@ import Typography from '@material-ui/core/Typography';
 
 
 import { AuthenticationService } from 'api';
-import { RegistrationDialog, RequestPasswordResetDialog, ResetPasswordDialog } from 'dialogs';
+import { RegistrationDialog, RequestPasswordResetDialog, ResetPasswordDialog, AccountActivationDialog } from 'dialogs';
 import { LoginForm } from 'forms';
 import { useReduxEffect, useFireOnce } from 'hooks';
 import { Images } from 'images';
@@ -65,6 +65,7 @@ const Login = ({ state, description }: LoginProps) => {
     passwordResetRequestDialog: false,
     resetPasswordDialog: false,
     registrationDialog: false,
+    activationDialog: false,
   });
   const [userToResetPassword, setUserToResetPassword] = useState(null);
 
@@ -77,6 +78,24 @@ const Login = ({ state, description }: LoginProps) => {
     closeResetPasswordDialog();
   }, ServerTypes.RESET_PASSWORD_SUCCESS, []);
 
+  useReduxEffect(() => {
+    closeActivateAccountDialog();
+  }, ServerTypes.ACCOUNT_ACTIVATION_SUCCESS, []);
+
+  useReduxEffect(() => {
+    closeRegistrationDialog();
+    openActivateAccountDialog();
+  }, ServerTypes.ACCOUNT_AWAITING_ACTIVATION, []);
+
+  useReduxEffect(({ options: { hashedPassword } }) => {
+    if (hostIdToRemember) {
+      HostDTO.get(hostIdToRemember).then(host => {
+        host.hashedPassword = hashedPassword;
+        host.save();
+      });
+    }
+  }, ServerTypes.LOGIN_SUCCESSFUL, [hostIdToRemember]);
+
   const showDescription = () => {
     return !isConnected && description?.length;
   };
@@ -112,18 +131,7 @@ const Login = ({ state, description }: LoginProps) => {
     AuthenticationService.login(options as WebSocketConnectOptions);
   }, []);
 
-  const [submitButtonDisabled, resetSubmitButton, handleLogin] = useFireOnce(onSubmitLogin)
-
-  useReduxEffect(({ options: { hashedPassword } }) => {
-    if (hostIdToRemember) {
-      HostDTO.get(hostIdToRemember).then(host => {
-        host.hashedPassword = hashedPassword;
-        host.save();
-      });
-    }
-    resetSubmitButton()
-  }, ServerTypes.LOGIN_SUCCESSFUL, [hostIdToRemember]);
-
+  const [submitButtonDisabled, resetSubmitButton, handleLogin] = useFireOnce(onSubmitLogin);
 
   const updateHost = ({ selectedHost, userName, hashedPassword, remember }) => {
     HostDTO.get(selectedHost.id).then(hostDTO => {
@@ -165,6 +173,10 @@ const Login = ({ state, description }: LoginProps) => {
     AuthenticationService.resetPassword({ userName, token, newPassword, host, port } as any);
   };
 
+  const handleAccountActivationDialogSubmit = ({ token }) => {
+    AuthenticationService.activateAccount({ token } as any);
+  };
+
   const skipTokenRequest = (userName) => {
     setUserToResetPassword(userName);
 
@@ -198,6 +210,14 @@ const Login = ({ state, description }: LoginProps) => {
     setDialogState(s => ({ ...s, registrationDialog: true }));
   }
 
+  const closeActivateAccountDialog = () => {
+    setDialogState(s => ({ ...s, activationDialog: false }));
+  };
+
+  const openActivateAccountDialog = () => {
+    setDialogState(s => ({ ...s, activationDialog: true }));
+  };
+
   return (
     <div className={'login overflow-scroll ' + classes.root}>
       { isConnected && <Redirect from="*" to={RouteEnum.SERVER} />}
@@ -296,6 +316,12 @@ const Login = ({ state, description }: LoginProps) => {
         handleClose={closeResetPasswordDialog}
         userName={userToResetPassword}
       />
+
+      <AccountActivationDialog
+        isOpen={dialogState.activationDialog}
+        onSubmit={handleAccountActivationDialogSubmit}
+        handleClose={closeActivateAccountDialog}
+      />
     </div>
   );
 }