Structure change (#4220)

* Structure change

* Remove duplicate folders from previous structure

* Cleanup websocket protocol

* Updating from based off PR

* Fixup - remove wrong files during conflict and get the websocket working

* renaming tsx to ts

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

webclient/src/forms/ConnectForm/ConnectForm.css

@@ -0,0 +1,14 @@
+.connectForm {
+  width: 100%;
+  padding: 20px;
+}
+
+.connectForm-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.connectForm-submit.MuiButton-root {
+  display: block;
+  margin: 20px auto 0;
+}

webclient/src/forms/ConnectForm/ConnectForm.tsx

@@ -0,0 +1,48 @@
+// eslint-disable-next-line
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Form, Field, InjectedFormProps, reduxForm } from "redux-form"
+
+import Button from "@material-ui/core/Button";
+import { InputField } from "../../components";
+
+import "./ConnectForm.css";
+
+class ConnectForm extends Component<InjectedFormProps> {
+  render() {
+    return (
+      <Form className="connectForm" onSubmit={this.props.handleSubmit}>
+        <div className="connectForm-item">
+          <Field label="Host" name="host" component={InputField} />
+        </div>
+        <div className="connectForm-item">
+          <Field label="Port" name="port" component={InputField} />
+        </div>
+        <div className="connectForm-item">
+          <Field label="User" name="user" component={InputField} autoComplete="username" />
+        </div>
+        <div className="connectForm-item">
+          <Field label="Pass" name="pass" type="password" component={InputField} autoComplete="current-password" />
+        </div>
+        <Button className="connectForm-submit" color="primary" variant="contained" type="submit">
+          Connect
+        </Button>
+      </Form>
+    );
+  }
+}
+
+const propsMap = {
+  form: "connect"
+};
+
+const mapStateToProps = () => ({
+  initialValues: {
+    // host: "mtg.tetrarch.co/servatrice",
+    // port: "443"
+    host: "server.cockatrice.us",
+    port: "4748"
+  }
+});
+
+export default connect(mapStateToProps)(reduxForm(propsMap)(ConnectForm));

webclient/src/forms/RegisterForm/RegisterForm.css

@@ -0,0 +1,14 @@
+.registerForm {
+  width: 100%;
+  padding: 20px;
+}
+
+.registerForm-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.registerForm-submit.MuiButton-root {
+  display: block;
+  margin: 20px auto 0;
+}

webclient/src/forms/RegisterForm/RegisterForm.tsx

@@ -0,0 +1,58 @@
+// eslint-disable-next-line
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Form, Field, InjectedFormProps, reduxForm } from 'redux-form'
+
+import Button from '@material-ui/core/Button';
+
+import { InputField } from '../../components';
+
+import './RegisterForm.css';
+
+class RegisterForm extends Component<InjectedFormProps> {
+  render() {
+    return (
+      <Form className="registerForm" onSubmit={this.props.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="userName" component={InputField} />
+        </div>
+        <div className="registerForm-item">
+          <Field label="Password" name="password" 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: 'register'
+};
+
+const mapStateToProps = () => ({
+  initialValues: {
+    
+  }
+});
+
+export default connect(mapStateToProps)(reduxForm(propsMap)(RegisterForm));

webclient/src/forms/SearchForm/SearchForm.css

@@ -0,0 +1,35 @@
+.log-search {
+  margin-bottom: 20px;
+}
+
+hr.MuiDivider-root {
+  margin: 20px 0;
+}
+
+.log-search__form {
+  width: 100%;
+  padding: 20px;
+}
+
+.log-search__form-item {
+  display: flex;
+}
+
+.log-search__form-item.log-location {
+  display: flex;
+  justify-content: space-around;
+}
+
+.log-search__form-item.log-location .checkbox-field {
+  display: flex;
+  flex-direction: column;
+}
+
+.log-search__form-item.log-location .checkbox-field__box {
+  order: 1;
+}
+
+.log-search__form-submit.MuiButton-root {
+  display: block;
+  margin: 0 auto;
+}

webclient/src/forms/SearchForm/SearchForm.tsx

@@ -0,0 +1,67 @@
+// eslint-disable-next-line
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Form, Field, InjectedFormProps, reduxForm } from "redux-form"
+
+import Button from "@material-ui/core/Button";
+import Divider from "@material-ui/core/Divider";
+import Paper from "@material-ui/core/Paper";
+
+import { InputField, CheckboxField } from "../../components";
+
+import "./SearchForm.css";
+
+class SearchForm extends Component<InjectedFormProps> {
+  render() {
+    return (
+      <Paper className="log-search">
+        <Form className="log-search__form" onSubmit={this.props.handleSubmit}>
+          <div className="log-search__form-item">
+            <Field label="Username" name="userName" component={InputField} />
+          </div>
+          <div className="log-search__form-item">
+            <Field label="IP Address" name="ipAddress" component={InputField} />
+          </div>
+          <div className="log-search__form-item">
+            <Field label="Game Name" name="gameName" component={InputField} />
+          </div>
+          <div className="log-search__form-item">
+            <Field label="GameID" name="gameId" component={InputField} />
+          </div>
+          <div className="log-search__form-item">
+            <Field label="Message" name="message" component={InputField} />
+          </div>
+          <Divider />
+          <div className="log-search__form-item log-location">
+            <Field label="Rooms" name="logLocation.room" component={CheckboxField} />
+            <Field label="Games" name="logLocation.game" component={CheckboxField} />
+            <Field label="Chats" name="logLocation.chat" component={CheckboxField} />
+         </div>
+          <Divider />
+          <div className="log-search__form-item">
+            <span>Date Range: Coming Soon</span>
+          </div>
+          <Divider />
+          <div className="log-search__form-item">
+            <span>Maximum Results: 1000</span>
+          </div>
+          <Divider />
+          <Button className="log-search__form-submit" color="primary" variant="contained" type="submit">
+            Search Logs
+          </Button>
+        </Form>
+      </Paper>  
+    )
+  }
+}
+
+const propsMap = {
+  form: "logs"
+};
+
+const mapStateToProps = () => ({
+  
+});
+
+export default connect(mapStateToProps)(reduxForm(propsMap)(SearchForm));
+

webclient/src/forms/index.ts

@@ -0,0 +1,4 @@
+
+export { default as ConnectForm } from './ConnectForm/ConnectForm';
+export { default as RegisterForm } from './RegisterForm/RegisterForm';
+export { default as SearchForm } from './SearchForm/SearchForm';