selection of known hosts to form (#4379)

webclient/src/forms/ConnectForm/ConnectForm.css

@@ -11,4 +11,8 @@
 .connectForm-submit.MuiButton-root {
   display: block;
   margin: 20px auto 0;
+}
+
+.selectKnownHosts-items {
+  margin-bottom: 4px;
 }

webclient/src/forms/ConnectForm/ConnectForm.tsx

@@ -1,34 +1,59 @@
 // eslint-disable-next-line
-import React, { Component } from "react";
+import React, { useState } from "react";
 import { connect } from "react-redux";
-import { Form, Field, reduxForm } from "redux-form"
+import { Form, Field, reduxForm, change} from "redux-form"
 
 import Button from "@material-ui/core/Button";
 
 import { InputField } from "components";
-import { FormKey } from 'types';
+import { FormKey, KnownHost, KnownHosts } from 'types';
 
 import "./ConnectForm.css";
+import { Select, MenuItem } from "@material-ui/core";
 
-const ConnectForm = ({ handleSubmit }) => (
-  <Form className="connectForm" onSubmit={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 ConnectForm = (props) => {
+  const { handleSubmit, dispatch } = props;
+  const [knownHosts, setKnownHosts] = useState(KnownHost.ROOSTER);
+
+  const handleChange = (event) => {
+    setKnownHosts(event.target.value);
+    dispatch(change(FormKey.CONNECT,'host', KnownHosts[event.target.value].host));
+    dispatch(change(FormKey.CONNECT,'port', KnownHosts[event.target.value].port))
+  };
+
+  return (
+    <Form className="connectForm" onSubmit={handleSubmit}>
+      <div className="connectForm-item">
+        <Select
+              labelId="selectedKnownHosts-label"
+              id="selectedKnownHosts-label"
+              className="selectKnownHosts-items"
+              value={knownHosts}
+              fullWidth={true}
+              onChange={handleChange}
+            >
+            <MenuItem value={KnownHost.ROOSTER}>{KnownHost.ROOSTER}</MenuItem>
+            <MenuItem value={KnownHost.TETRARCH}>{KnownHost.TETRARCH}</MenuItem>
+        </Select>
+      </div>
+      <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: FormKey.CONNECT

webclient/src/types/server.tsx

@@ -16,6 +16,16 @@ export enum StatusEnumLabel {
   "Disconnecting" = 99
 }
 
+export enum KnownHost {
+  ROOSTER = 'Rooster',
+  TETRARCH = 'Tetrarch',
+}
+
+export const KnownHosts = {
+  [KnownHost.ROOSTER]: { port: 443, host: 'server.cockatrice.us', },
+  [KnownHost.TETRARCH]:  { port: 443, host: 'mtg.tetrarch.co/servatrice'},
+}
+
 export const getStatusEnumLabel = (statusEnum: number) => {
   if (StatusEnumLabel[statusEnum] !== undefined) {
     return StatusEnumLabel[statusEnum];