From 67ff1058e9579f1c08b539185be34e531d084f22 Mon Sep 17 00:00:00 2001
From: martylukyy <35452459+martylukyy@users.noreply.github.com>
Date: Sun, 5 Mar 2023 16:13:19 +0100
Subject: [PATCH] feat(downloadclients): make fields required (#715)

* initial commit for DownloadClientForms field validation

* changed behaviour of required fields

* removed validate from download clients

* removed unused const

* removed unused vars

---------

Co-authored-by: soup <soup@r4tio.dev>
---
 web/src/components/inputs/input_wide.tsx       |  2 ++
 web/src/forms/settings/DownloadClientForms.tsx | 15 +++++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/web/src/components/inputs/input_wide.tsx b/web/src/components/inputs/input_wide.tsx
index a2270a4..6a1ce42 100644
--- a/web/src/components/inputs/input_wide.tsx
+++ b/web/src/components/inputs/input_wide.tsx
@@ -58,6 +58,7 @@ export const TextFieldWide = ({
             className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white rounded-md")}
             placeholder={placeholder}
             hidden={hidden}
+            required={required}
           />
         )}
       </Field>
@@ -120,6 +121,7 @@ export const PasswordFieldWide = ({
                 type={isVisible ? "text" : "password"}
                 className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full pr-10 dark:bg-gray-800 shadow-sm dark:text-gray-100 sm:text-sm rounded-md")}
                 placeholder={placeholder}
+                required={required}
               />
               <div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
                 {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
diff --git a/web/src/forms/settings/DownloadClientForms.tsx b/web/src/forms/settings/DownloadClientForms.tsx
index 11c372f..3a73917 100644
--- a/web/src/forms/settings/DownloadClientForms.tsx
+++ b/web/src/forms/settings/DownloadClientForms.tsx
@@ -63,6 +63,7 @@ function FormFieldsDeluge() {
         label="Host"
         help="Eg. client.domain.ltd, domain.ltd/client, domain.ltd:port"
         tooltip={<div><p>See guides for how to connect to Deluge for various server types in our docs.</p><br /><p>Dedicated servers:</p><a href='https://autobrr.com/configuration/download-clients/dedicated#deluge' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/configuration/download-clients/dedicated#deluge</a><p>Shared seedbox providers:</p><a href='https://autobrr.com/configuration/download-clients/shared-seedboxes#deluge' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/configuration/download-clients/shared-seedboxes#deluge</a></div>}
+        required={true}
       />
 
       <NumberFieldWide
@@ -98,9 +99,10 @@ function FormFieldsArr() {
         label="Host"
         help="Full url http(s)://domain.ltd and/or subdomain/subfolder"
         tooltip={<div><p>See guides for how to connect to the *arr suite for various server types in our docs.</p><br /><p>Dedicated servers:</p><a href='https://autobrr.com/configuration/download-clients/dedicated/#sonarr' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/configuration/download-clients/dedicated/</a><p>Shared seedbox providers:</p><a href='https://autobrr.com/configuration/download-clients/shared-seedboxes#sonarr' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/configuration/download-clients/shared-seedboxes</a></div>}
+        required={true}
       />
 
-      <PasswordFieldWide name="settings.apikey" label="API key" />
+      <PasswordFieldWide name="settings.apikey" label="API key" required={true}/>
 
       <SwitchGroupWide name="settings.basic.auth" label="Basic auth" />
 
@@ -126,6 +128,7 @@ function FormFieldsQbit() {
         label="Host"
         help="Eg. http(s)://client.domain.ltd, http(s)://domain.ltd/qbittorrent, http://domain.ltd:port"
         tooltip={<div><p>See guides for how to connect to qBittorrent for various server types in our docs.</p><br /><p>Dedicated servers:</p><a href='https://autobrr.com/configuration/download-clients/dedicated#qbittorrent' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/configuration/download-clients/dedicated#qbittorrent</a><p>Shared seedbox providers:</p><a href='https://autobrr.com/configuration/download-clients/shared-seedboxes#qbittorrent' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/configuration/download-clients/shared-seedboxes#qbittorrent</a></div>}
+        required={true}
       />
 
       {port > 0 && (
@@ -171,11 +174,13 @@ function FormFieldsPorla() {
         name="host"
         label="Host"
         help="Eg. http(s)://client.domain.ltd, http(s)://domain.ltd/porla, http://domain.ltd:port"
+        required={true}
       />
 
+      
       <SwitchGroupWide name="tls" label="TLS" />
 
-      <PasswordFieldWide name="settings.apikey" label="Auth token" />
+      <PasswordFieldWide name="settings.apikey" label="Auth token" required={true}/>
 
       {tls && (
         <SwitchGroupWide
@@ -204,6 +209,7 @@ function FormFieldsRTorrent() {
         label="Host"
         help="Eg. http(s)://client.domain.ltd/RPC2, http(s)://domain.ltd/client, http(s)://domain.ltd/RPC2"
         tooltip={<div><p>See guides for how to connect to rTorrent for various server types in our docs.</p><br /><p>Dedicated servers:</p><a href='https://autobrr.com/configuration/download-clients/dedicated#rtorrent--rutorrent' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/configuration/download-clients/dedicated#rtorrent--rutorrent</a><p>Shared seedbox providers:</p><a href='https://autobrr.com/configuration/download-clients/shared-seedboxes#rtorrent' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/configuration/download-clients/shared-seedboxes#rtorrent</a></div>}
+        required={true}
       />
     </div>
   );
@@ -221,6 +227,7 @@ function FormFieldsTransmission() {
         label="Host"
         help="Eg. client.domain.ltd, domain.ltd/client, domain.ltd"
         tooltip={<div><p>See guides for how to connect to Transmission for various server types in our docs.</p><br /><p>Dedicated servers:</p><a href='https://autobrr.com/configuration/download-clients/dedicated#transmission' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/configuration/download-clients/dedicated#transmission</a><p>Shared seedbox providers:</p><a href='https://autobrr.com/configuration/download-clients/shared-seedboxes#transmisison' className='text-blue-400 visited:text-blue-400' target='_blank'>https://autobrr.com/configuration/download-clients/shared-seedboxes#transmisison</a></div>}
+        required={true}
       />
 
       <NumberFieldWide name="port" label="Port" help="Port for Transmission" />
@@ -636,7 +643,7 @@ export function DownloadClientAddForm({ isOpen, toggle }: formProps) {
                         </div>
 
                         <div className="flex flex-col space-y-4 px-1 py-6 sm:py-0 sm:space-y-0">
-                          <TextFieldWide name="name" label="Name"/>
+                          <TextFieldWide name="name" label="Name" required={true}/>
                           <SwitchGroupWide name="enabled" label="Enabled"/>
                           <RadioFieldsetWide
                             name="type"
@@ -835,7 +842,7 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: updateFormP
                           </div>
 
                           <div className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y dark:divide-gray-700">
-                            <TextFieldWide name="name" label="Name"/>
+                            <TextFieldWide name="name" label="Name" required={true}/>
                             <SwitchGroupWide name="enabled" label="Enabled"/>
                             <RadioFieldsetWide
                               name="type"