Support Server requests for MFA, Render failed UI statuses to user, C… (#4483)

* Support Server requests for MFA, Render failed UI statuses to user, Connect to KnownHosts component

webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.css

@@ -2,6 +2,14 @@
   width: 100%;
 }
 
+.RequestPasswordResetForm-MFA-Message {
+  margin-top: -20px;
+}
+
+.RequestPasswordResetForm-Error {
+  margin-bottom: 10px;
+}
+
 .RequestPasswordResetForm-item {
   margin-bottom: 20px;
 }

webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.tsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line
-import React from "react";
+import React, { useState } from "react";
 import { connect } from 'react-redux';
 import { Form, Field, reduxForm, change } from 'redux-form'
 
@@ -9,21 +9,47 @@ import { InputField, KnownHosts } from 'components';
 import { FormKey } from 'types';
 
 import './RequestPasswordResetForm.css';
+import { useReduxEffect } from 'hooks';
+import { ServerTypes } from 'store';
 
 const RequestPasswordResetForm = (props) => {
   const { dispatch, handleSubmit } = props;
+  const [errorMessage, setErrorMessage] = useState(false);
+  const [isMFA, setIsMFA] = useState(false);
 
   const onHostChange = ({ host, port }) => {
     dispatch(change(FormKey.RESET_PASSWORD_REQUEST, 'host', host));
     dispatch(change(FormKey.RESET_PASSWORD_REQUEST, 'port', port));
   }
 
+  useReduxEffect(() => {
+    setErrorMessage(true);
+  }, ServerTypes.RESET_PASSWORD_FAILED, []);
+
+  useReduxEffect(() => {
+    setIsMFA(true);
+  }, ServerTypes.RESET_PASSWORD_CHALLENGE, []);
+
+  const onSubmit = (event) => {
+    setErrorMessage(false);
+    handleSubmit(event);
+  }
+
   return (
-    <Form className="RequestPasswordResetForm" onSubmit={handleSubmit}>
+    <Form className="RequestPasswordResetForm" onSubmit={onSubmit}>
       <div className="RequestPasswordResetForm-items">
+        {errorMessage ? (
+          <div className="RequestPasswordResetForm-Error">Request Password Reset Failed, please try again</div>
+        ) : null}
         <div className="RequestPasswordResetForm-item">
           <Field label="Username" name="user" component={InputField} autoComplete="username" />
         </div>
+        {isMFA ? (
+          <div className="RequestPasswordResetForm-item">
+            <div className="RequestPasswordResetForm-MFA-Message">Server has multi-factor authentication enabled</div>
+            <Field label="Email" name="email" component={InputField} autoComplete="email" />
+          </div>
+        ) : null}
         <div className="RequestPasswordResetForm-item">
           <KnownHosts onChange={onHostChange} />
         </div>