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));

webclient/src/forms/ResetPasswordForm/ResetPasswordForm.css

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

webclient/src/forms/ResetPasswordForm/ResetPasswordForm.tsx

@@ -0,0 +1,86 @@
+// 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 './ResetPasswordForm.css';
+
+const ResetPasswordForm = (props) => {
+  const { dispatch, handleSubmit } = props;
+
+  const onHostChange = ({ host, port }) => {
+    dispatch(change(FormKey.RESET_PASSWORD, 'host', host));
+    dispatch(change(FormKey.RESET_PASSWORD, 'port', port));
+  }
+
+  return (
+    <Form className="ResetPasswordForm" onSubmit={handleSubmit}>
+      <div className="ResetPasswordForm-items">
+        <div className="ResetPasswordForm-item">
+          <Field label="Username" name="user" component={InputField} autoComplete="username" />
+        </div>
+        <div className="ResetPasswordForm-item">
+          <Field label="Token" name="token" component={InputField} />
+        </div>
+        <div className="ResetPasswordForm-item">
+          <Field label="Password" name="newPassword" component={InputField} />
+        </div>
+        <div className="ResetPasswordForm-item">
+          <Field label="Password Again" name="passwordAgain" component={InputField} />
+        </div>
+        <div className="ResetPasswordForm-item">
+          <KnownHosts onChange={onHostChange} />
+        </div>
+      </div>
+      <Button className="ResetPasswordForm-submit rounded tall" color="primary" variant="contained" type="submit">
+        Change Password
+      </Button>
+    </Form>
+  );
+};
+
+const propsMap = {
+  form: FormKey.RESET_PASSWORD,
+  validate: values => {
+    const errors: any = {};
+
+    if (!values.user) {
+      errors.user = 'Required';
+    }
+    if (!values.token) {
+      errors.token = 'Required';
+    }
+    if (!values.newPassword) {
+      errors.newPassword = 'Required';
+    }
+    if (!values.passwordAgain) {
+      errors.passwordAgain = 'Required';
+    } else if (values.newPassword !== values.passwordAgain) {
+      errors.passwordAgain = 'Passwords don\'t match'
+    }
+    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)(ResetPasswordForm));

webclient/src/forms/index.ts

@@ -3,3 +3,5 @@ export { default as ConnectForm } from './ConnectForm/ConnectForm';
 export { default as LoginForm } from './LoginForm/LoginForm';
 export { default as RegisterForm } from './RegisterForm/RegisterForm';
 export { default as SearchForm } from './SearchForm/SearchForm';
+export { default as RequestPasswordResetForm } from './RequestPasswordResetForm/RequestPasswordResetForm';
+export { default as ResetPasswordForm } from './ResetPasswordForm/ResetPasswordForm';