From ced3457ea26b56442de2744d7e39bad7053cba52 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Fri, 12 Nov 2021 18:54:17 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=8A=20Form=20for=20AirDCPP=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/actions/settings.actions.tsx       |  0
 src/client/assets/scss/App.scss               |  2 +-
 src/client/components/AirDCPPSettingsForm.tsx | 41 ++++++++++++++++++-
 src/client/components/Library.tsx             |  2 +-
 4 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 src/client/actions/settings.actions.tsx

diff --git a/src/client/actions/settings.actions.tsx b/src/client/actions/settings.actions.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index 4fca671..a1fe188 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -276,7 +276,7 @@ $size-8: 0.9rem;
     width: 100%;
     thead {
       position: sticky;
-      top: 204px;
+      top: 194px;
       z-index: 1;
       background: #fffffc;
       min-height: 120px;
diff --git a/src/client/components/AirDCPPSettingsForm.tsx b/src/client/components/AirDCPPSettingsForm.tsx
index fffdbab..d87a338 100644
--- a/src/client/components/AirDCPPSettingsForm.tsx
+++ b/src/client/components/AirDCPPSettingsForm.tsx
@@ -2,7 +2,9 @@ import React, { ReactElement } from "react";
 import { Form, Field } from "react-final-form";
 
 export const AirDCPPSettingsForm = (): ReactElement => {
-  const onSubmit = () => {};
+  const onSubmit = async (values) => {
+    console.log(values);
+  };
   const validate = async () => {};
 
   return (
@@ -23,6 +25,43 @@ export const AirDCPPSettingsForm = (): ReactElement => {
               />
             </div>
           </div>
+          <div className="field">
+            <div className="is-clearfix">
+              <label className="label">Credentials</label>
+            </div>
+            <div className="field-body">
+              <div className="field">
+                <p className="control is-expanded has-icons-left">
+                  <Field
+                    name="airdcpp_username"
+                    component="input"
+                    className="input"
+                    placeholder="Username"
+                  />
+                  <span className="icon is-small is-left">
+                    <i className="fa-solid fa-user-ninja"></i>
+                  </span>
+                </p>
+              </div>
+              <div className="field">
+                <p className="control is-expanded has-icons-left has-icons-right">
+                  <Field
+                    name="airdcpp_password"
+                    component="input"
+                    type="password"
+                    className="input"
+                    placeholder="Password"
+                  />
+                  <span className="icon is-small is-left">
+                    <i className="fa-solid fa-lock"></i>
+                  </span>
+                  <span className="icon is-small is-right">
+                    <i className="fas fa-check"></i>
+                  </span>
+                </p>
+              </div>
+            </div>
+          </div>
 
           <button type="submit" className="button is-primary">
             Submit
diff --git a/src/client/components/Library.tsx b/src/client/components/Library.tsx
index 5818752..badecbf 100644
--- a/src/client/components/Library.tsx
+++ b/src/client/components/Library.tsx
@@ -133,7 +133,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
                   return (
                     <input
                       {...input}
-                      className="input main-search-bar is-large"
+                      className="input main-search-bar is-medium"
                       placeholder="Type an issue/volume name"
                     />
                   );