From a87c66885c0932a295b7d9d5e2cde80f12c1561a Mon Sep 17 00:00:00 2001
From: Zach H <zahalpern+github@gmail.com>
Date: Sun, 31 Oct 2021 22:15:51 -0400
Subject: [PATCH] Webatrice: Account Registration form (pt2) (#4454)

Co-authored-by: ParkTandem <93353951+ParkTandem@users.noreply.github.com>
---
 .../RegistrationDialog/RegistrationDialog.css |   5 +
 .../RegistrationDialog/RegistrationDialog.tsx |  36 ++++++
 webclient/src/components/index.ts             |   1 +
 .../src/forms/RegisterForm/RegisterForm.css   |  33 +++--
 .../src/forms/RegisterForm/RegisterForm.tsx   | 121 ++++++++++--------
 5 files changed, 128 insertions(+), 68 deletions(-)
 create mode 100644 webclient/src/components/RegistrationDialog/RegistrationDialog.css
 create mode 100644 webclient/src/components/RegistrationDialog/RegistrationDialog.tsx

diff --git a/webclient/src/components/RegistrationDialog/RegistrationDialog.css b/webclient/src/components/RegistrationDialog/RegistrationDialog.css
new file mode 100644
index 00000000..731927c1
--- /dev/null
+++ b/webclient/src/components/RegistrationDialog/RegistrationDialog.css
@@ -0,0 +1,5 @@
+.dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/webclient/src/components/RegistrationDialog/RegistrationDialog.tsx b/webclient/src/components/RegistrationDialog/RegistrationDialog.tsx
new file mode 100644
index 00000000..006d0377
--- /dev/null
+++ b/webclient/src/components/RegistrationDialog/RegistrationDialog.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
+
+import { RegisterForm } from 'forms';
+
+import './RegistrationDialog.css';
+
+const RegistrationDialog = ({ classes, handleClose, isOpen }: any) => {
+  const handleOnClose = () => {
+    handleClose();
+  }
+
+  return (
+    <Dialog onClose={handleOnClose} open={isOpen}>
+      <DialogTitle disableTypography className="dialog-title">
+        <Typography variant="h6">Create New Account</Typography>
+
+        {handleOnClose ? (
+          <IconButton onClick={handleOnClose}>
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </DialogTitle>
+      <DialogContent>
+        <RegisterForm onSubmit={handleOnClose}></RegisterForm>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default RegistrationDialog;
diff --git a/webclient/src/components/index.ts b/webclient/src/components/index.ts
index 5f392f56..7d839cc7 100644
--- a/webclient/src/components/index.ts
+++ b/webclient/src/components/index.ts
@@ -12,6 +12,7 @@ export { default as ThreePaneLayout }  from './ThreePaneLayout/ThreePaneLayout';
 export { default as CheckboxField } from './CheckboxField/CheckboxField';
 export { default as SelectField } from './SelectField/SelectField';
 export { default as ScrollToBottomOnChanges } from './ScrollToBottomOnChanges/ScrollToBottomOnChanges';
+export { default as RegistrationDialog } from './RegistrationDialog/RegistrationDialog';
 
 // Guards
 export { default as AuthGuard } from './Guard/AuthGuard';
diff --git a/webclient/src/forms/RegisterForm/RegisterForm.css b/webclient/src/forms/RegisterForm/RegisterForm.css
index 83121bbe..d51d7298 100644
--- a/webclient/src/forms/RegisterForm/RegisterForm.css
+++ b/webclient/src/forms/RegisterForm/RegisterForm.css
@@ -1,14 +1,21 @@
-.registerForm {
-  width: 100%;
-  padding: 20px;
-}
-
-.registerForm-item {
-  display: flex;
-  flex-direction: column;
-}
-
-.registerForm-submit.MuiButton-root {
-  display: block;
-  margin: 20px auto 0;
+.registerForm {
+  width: 100%;
+}
+
+.registerForm-submit {
+    width: 100%;
+    /*padding is off, something in material-theme is causing it*/
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+}
+
+.column {
+    width: 48%;
+    flex: 0 1 auto;
+    align-self: auto;
 }
\ No newline at end of file
diff --git a/webclient/src/forms/RegisterForm/RegisterForm.tsx b/webclient/src/forms/RegisterForm/RegisterForm.tsx
index 9eb2d781..068c589e 100644
--- a/webclient/src/forms/RegisterForm/RegisterForm.tsx
+++ b/webclient/src/forms/RegisterForm/RegisterForm.tsx
@@ -1,55 +1,66 @@
-// eslint-disable-next-line
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { Form, Field, reduxForm } from 'redux-form'
-
-import Button from '@material-ui/core/Button';
-
-import { InputField } from 'components';
-import { FormKey } from 'types';
-
-import './RegisterForm.css';
-
-const RegisterForm = ({ handleSubmit }) => (
-  <Form className="registerForm" onSubmit={handleSubmit} autoComplete="off">
-    <div className="registerForm-item">
-      <Field label="Host" name="host" component={InputField} />
-    </div>
-    <div className="registerForm-item">
-      <Field label="Port" name="port" component={InputField} />
-    </div>
-    <div className="registerForm-item">
-      <Field label="Player Name" name="user" component={InputField} />
-    </div>
-    <div className="registerForm-item">
-      <Field label="Password" name="pass" type="password" component={InputField} />
-    </div>
-    <div className="registerForm-item">
-      <Field label="Password (again)" name="passwordConfirm" type="password" component={InputField} />
-    </div>
-    <div className="registerForm-item">
-      <Field label="Email" name="email" type="email" component={InputField} />
-    </div>
-    <div className="registerForm-item">
-      <Field label="Email (again)" name="emailConfirm" type="email" component={InputField} />
-    </div>
-    <div className="registerForm-item">
-      <Field label="Real Name" name="realName" component={InputField} />
-    </div>
-    <Button className="registerForm-submit" color="primary" variant="contained" type="submit">
-      Register
-    </Button>
-  </Form>
-);
-
-const propsMap = {
-  form: FormKey.REGISTER,
-};
-
-const mapStateToProps = () => ({
-  initialValues: {
-    
-  }
-});
-
-export default connect(mapStateToProps)(reduxForm(propsMap)(RegisterForm));
+// eslint-disable-next-line
+import React, { Component } 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 './RegisterForm.css';
+
+const RegisterForm = (props) => {
+  const { dispatch, handleSubmit } = props;
+
+  const onHostChange = ({ host, port }) => {
+    dispatch(change(FormKey.REGISTER, 'host', host));
+    dispatch(change(FormKey.REGISTER, 'port', port));
+  }
+  return (
+    <Form className="registerForm row" onSubmit={handleSubmit} autoComplete="off">
+      <div className="leftRegisterForm column" >
+        <div className="registerForm-item">
+          <KnownHosts onChange={onHostChange} />
+          { /* Padding is off */ }
+        </div>
+        <div className="registerForm-item">
+          <Field label="Country" name="country" component={InputField} />
+        </div>
+        <div className="registerForm-item">
+          <Field label="Real Name" name="realName" component={InputField} />
+        </div>
+        <div className="registerForm-item">
+          <Field label="Email" name="email" type="email" component={InputField} />
+        </div>
+      </div>
+      <div className="rightRegisterForm column">
+        <div className="registerForm-item">
+          <Field label="Player Name" name="user" component={InputField} />
+        </div>
+        <div className="registerForm-item">
+          <Field label="Password" name="pass" type="password" component={InputField} />
+        </div>
+        <div className="registerForm-item">
+          <Field label="Password (again)" name="passwordConfirm" type="password" component={InputField} />
+        </div>
+        <Button className="registerForm-submit tall" color="primary" variant="contained" type="submit">
+          Register
+        </Button>
+      </div>
+
+    </Form >
+  );
+}
+
+const propsMap = {
+  form: FormKey.REGISTER,
+};
+
+const mapStateToProps = () => ({
+  initialValues: {
+    
+  }
+});
+
+export default connect(mapStateToProps)(reduxForm(propsMap)(RegisterForm));