From bd35223f0f088562dea5bad6bdfd7229feb4b732 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Tue, 12 Sep 2023 05:44:12 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=91=F0=9F=8F=BC=E2=80=8D=F0=9F=94=A7?=
 =?UTF-8?q?=20Fixed=20the=20hostname=20regex?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AirDCPPSettings/AirDCPPSettingsForm.tsx   | 30 ++++----
 .../QbittorrentConnectionForm.tsx             | 75 +++++++++++++++++++
 2 files changed, 90 insertions(+), 15 deletions(-)

diff --git a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
index 8ab1eb6..6dc38bf 100644
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
@@ -1,7 +1,10 @@
 import React, { ReactElement, useCallback, useContext } from "react";
 import { Form, Field } from "react-final-form";
 import { useDispatch } from "react-redux";
-import { saveSettings, deleteSettings } from "../../../actions/settings.actions";
+import {
+  saveSettings,
+  deleteSettings,
+} from "../../../actions/settings.actions";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
 import { AirDCPPSocketContext } from "../../../context/AirDCPPSocket";
 import { isUndefined, isEmpty, isNil } from "lodash";
@@ -10,17 +13,16 @@ export const AirDCPPSettingsForm = (): ReactElement => {
   const dispatch = useDispatch();
   const airDCPPSettings = useContext(AirDCPPSocketContext);
 
-  const hostValidator = (hostname: string): string | null => {
-    const hostnameRegex = /[\W]+/gm;
-    try {
-      if (!isUndefined(hostname)) {
-        const matches = hostname.match(hostnameRegex);
-        return isNil(matches) && matches.length !== 0
-          ? hostname
-          : "Invalid hostname; it should not contain special characters";
-      }
-    } catch {
-      return null;
+  const hostValidator = (hostname: string): string | undefined => {
+    const hostnameRegex =
+      /^([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])(\.([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]{0,61}[a-zA-Z0-9]))*$/;
+
+    if (!isUndefined(hostname)) {
+      const matches = hostname.match(hostnameRegex);
+      console.log(matches);
+      return !isNil(matches) && matches.length > 0
+        ? undefined
+        : "Enter a valid hostname";
     }
   };
 
@@ -96,9 +98,7 @@ export const AirDCPPSettingsForm = (): ReactElement => {
               </p>
             </div>
             <div className="field">
-              <div className="is-clearfix">
-                <label className="label">Credentials</label>
-              </div>
+              <label className="label">Credentials</label>
               <div className="field-body">
                 <div className="field">
                   <p className="control is-expanded has-icons-left">
diff --git a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx b/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
index 9c4cf6a..772d08b 100644
--- a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
+++ b/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
@@ -24,6 +24,81 @@ export const QbittorrentConnectionForm = (): ReactElement => {
         render={({ handleSubmit }) => (
           <form onSubmit={handleSubmit}>
             <h2>Configure Qbittorrent</h2>
+            <label className="label">Qbittorrent Hostname</label>
+            <div className="field has-addons">
+              <p className="control">
+                <span className="select">
+                  <Field name="protocol" component="select">
+                    <option>Protocol</option>
+                    <option value="http">http://</option>
+                    <option value="https">https://</option>
+                  </Field>
+                </span>
+              </p>
+              <div className="control is-expanded">
+                <Field name="hostname">
+                  {({ input, meta }) => (
+                    <div>
+                      <input
+                        {...input}
+                        type="text"
+                        placeholder="Qbittorrent hostname"
+                        className="input"
+                      />
+                      {meta.error && meta.touched && (
+                        <span className="is-size-7 has-text-danger">
+                          {meta.error}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </Field>
+              </div>
+              <p className="control">
+                <Field
+                  name="port"
+                  component="input"
+                  className="input"
+                  placeholder="Qbittorrent port"
+                />
+              </p>
+            </div>
+
+            <div className="field">
+              <label className="label">Credentials</label>
+              <div className="field-body">
+                <div className="field">
+                  <p className="control is-expanded has-icons-left">
+                    <Field
+                      name="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="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>
           </form>
         )}
       />