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/forms/RequestPasswordResetForm/RequestPasswordResetForm.css

@@ -0,0 +1,20 @@
+.RequestPasswordResetForm {
+  width: 100%;
+}
+
+.RequestPasswordResetForm-item {
+  margin-bottom: 20px;
+}
+
+.RequestPasswordResetForm-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: -20px;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+
+.RequestPasswordResetForm-submit {
+  width: 100%;
+}

webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.tsx

@@ -0,0 +1,66 @@
+// eslint-disable-next-line
+import React from "react";
+import { connect } from 'react-redux';
+import { Form, Field, reduxForm, change } from 'redux-form'
+
+import Button from '@material-ui/core/Button';
+
+import { InputField, KnownHosts } from 'components';
+import { FormKey } from 'types';
+
+import './RequestPasswordResetForm.css';
+
+const RequestPasswordResetForm = (props) => {
+  const { dispatch, handleSubmit } = props;
+
+  const onHostChange = ({ host, port }) => {
+    dispatch(change(FormKey.RESET_PASSWORD_REQUEST, 'host', host));
+    dispatch(change(FormKey.RESET_PASSWORD_REQUEST, 'port', port));
+  }
+
+  return (
+    <Form className="RequestPasswordResetForm" onSubmit={handleSubmit}>
+      <div className="RequestPasswordResetForm-items">
+        <div className="RequestPasswordResetForm-item">
+          <Field label="Username" name="user" component={InputField} autoComplete="username" />
+        </div>
+        <div className="RequestPasswordResetForm-item">
+          <KnownHosts onChange={onHostChange} />
+        </div>
+      </div>
+      <Button className="RequestPasswordResetForm-submit rounded tall" color="primary" variant="contained" type="submit">
+        Request Reset Token
+      </Button>
+    </Form>
+  );
+};
+
+const propsMap = {
+  form: FormKey.RESET_PASSWORD_REQUEST,
+  validate: values => {
+    const errors: any = {};
+
+    if (!values.user) {
+      errors.user = 'Required';
+    }
+    if (!values.host) {
+      errors.host = 'Required';
+    }
+    if (!values.port) {
+      errors.port = 'Required';
+    }
+
+    return errors;
+  }
+};
+
+const mapStateToProps = () => ({
+  initialValues: {
+    // host: "mtg.tetrarch.co/servatrice",
+    // port: "443"
+    // host: "server.cockatrice.us",
+    // port: "4748"
+  }
+});
+
+export default connect(mapStateToProps)(reduxForm(propsMap)(RequestPasswordResetForm));