🪢 Added elasticsearch to the docker-compose stack

src/client/components/AirDCPPConnectionForm.tsx

@@ -0,0 +1,42 @@
+import React, { ReactElement } from "react";
+import { Form, Field } from "react-final-form";
+
+export const AirDCPPConnectionForm = (): ReactElement => {
+  const onSubmit = () => {};
+  const validate = async () => {};
+
+  return (
+    <Form
+      onSubmit={onSubmit}
+      validate={validate}
+      render={({ handleSubmit }) => (
+        <form onSubmit={handleSubmit}>
+          <p>
+            <h3 className="title">AirDC++ Connection Settings</h3>
+            <h6 className="subtitle has-text-grey-light">
+              Configure AirDC++ connection settings such as hostname and
+              credentials
+            </h6>
+          </p>
+          <div className="field">
+            <label className="label">AirDC++ Host</label>
+            <div className="control">
+              <Field
+                name="airdcpp_hostname"
+                component="input"
+                className="input"
+                placeholder="adc://hub.url"
+              />
+            </div>
+          </div>
+
+          <button type="submit" className="button is-primary">
+            Submit
+          </button>
+        </form>
+      )}
+    />
+  );
+};
+
+export default AirDCPPConnectionForm;

src/client/components/Settings.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback, ReactElement } from "react";
 import { AirDCPPSettingsForm } from "./AirDCPPSettingsForm";
+import { AirDCPPConnectionForm } from "./AirDCPPConnectionForm";
 import settingsObject from "../constants/settings/settingsMenu.json";
 import { isUndefined, map } from "lodash";
 
@@ -12,15 +13,7 @@ export const Settings = (props: ISettingsProps): ReactElement => {
       id: "adc-connection",
       content: (
         <>
-          <div className="content">
-            <p>
-              <h3 className="title">AirDC++ Connection Settings</h3>
-              <h6 className="subtitle has-text-grey-light">
-                Configure AirDC++ connection settings such as hostname and
-                credentials
-              </h6>
-            </p>
-          </div>
+          <AirDCPPConnectionForm />
         </>
       ),
     },