From 4516dde1f4fd86125691f407bf99966043824cec Mon Sep 17 00:00:00 2001
From: Larvey <luisrvervaet@gmail.com>
Date: Thu, 16 Jun 2022 15:38:50 -0400
Subject: [PATCH 1/6] Reworked AddAppShelfItem

Adds:
- Advanced Options tab
- Changed which ping status codes identify as "Online"
- Change if service opens in new tab or not

Fixes:
- Deluge and Transmission Password requirement
---
 src/components/AppShelf/AddAppShelfItem.tsx   | 274 +++++++++++-------
 src/components/AppShelf/AppShelfItem.tsx      |  13 +-
 src/components/AppShelf/AppShelfMenu.tsx      |   2 +
 .../modules/ping/PingModule.story.tsx         |   1 +
 src/components/modules/ping/PingModule.tsx    |  31 +-
 src/pages/api/modules/downloads.ts            |   4 +-
 src/pages/api/modules/ping.ts                 |   4 +-
 src/tools/types.ts                            |  28 ++
 8 files changed, 235 insertions(+), 122 deletions(-)

diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx
index 1106bb0db..e1d70382d 100644
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -12,6 +12,8 @@ import {
   Title,
   Anchor,
   Text,
+  Tabs,
+  MultiSelect,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useEffect, useState } from 'react';
@@ -19,7 +21,7 @@ import { IconApps as Apps } from '@tabler/icons';
 import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList } from '../../tools/types';
+import { ServiceTypeList, statusCodes, targets } from '../../tools/types';
 
 export function AddItemShelfButton(props: any) {
   const [opened, setOpened] = useState(false);
@@ -113,6 +115,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       username: props.username ?? (undefined as unknown as string),
       password: props.password ?? (undefined as unknown as string),
       openedUrl: props.openedUrl ?? (undefined as unknown as string),
+      status: props.status ?? ['200'],
+      target: props.target ?? '_blank',
     },
     validate: {
       apiKey: () => null,
@@ -133,6 +137,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
         }
         return null;
       },
+      status: (value: string[]) => {
+        if (!value.length) {
+          return 'Please select a status code';
+        }
+        return null;
+      },
     },
   });
 
@@ -191,117 +201,165 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           form.reset();
         })}
       >
-        <Group direction="column" grow>
-          <TextInput
-            required
-            label="Service name"
-            placeholder="Plex"
-            {...form.getInputProps('name')}
-          />
-
-          <TextInput
-            required
-            label="Icon URL"
-            placeholder="/favicon.svg"
-            {...form.getInputProps('icon')}
-          />
-          <TextInput
-            required
-            label="Service URL"
-            placeholder="http://localhost:7575"
-            {...form.getInputProps('url')}
-          />
-          <TextInput
-            label="New tab URL"
-            placeholder="http://sonarr.example.com"
-            {...form.getInputProps('openedUrl')}
-          />
-          <Select
-            label="Service type"
-            defaultValue="Other"
-            placeholder="Pick one"
-            required
-            searchable
-            data={ServiceTypeList}
-            {...form.getInputProps('type')}
-          />
-          <Select
-            label="Category"
-            data={categoryList}
-            placeholder="Select a category or create a new one"
-            nothingFound="Nothing found"
-            searchable
-            clearable
-            creatable
-            onClick={(e) => {
-              e.preventDefault();
-            }}
-            getCreateLabel={(query) => `+ Create "${query}"`}
-            onCreate={(query) => {}}
-            {...form.getInputProps('category')}
-          />
-          <LoadingOverlay visible={isLoading} />
-          {(form.values.type === 'Sonarr' ||
-            form.values.type === 'Radarr' ||
-            form.values.type === 'Lidarr' ||
-            form.values.type === 'Readarr') && (
-            <>
+        <Tabs position="apart">
+          <Tabs.Tab label="Options">
+            <Group direction="column" grow>
               <TextInput
                 required
-                label="API key"
-                placeholder="Your API key"
-                value={form.values.apiKey}
-                onChange={(event) => {
-                  form.setFieldValue('apiKey', event.currentTarget.value);
-                }}
-                error={form.errors.apiKey && 'Invalid API key'}
+                label="Service name"
+                placeholder="Plex"
+                {...form.getInputProps('name')}
               />
-              <Text
-                style={{
-                  alignSelf: 'center',
-                  fontSize: '0.75rem',
-                  textAlign: 'center',
-                  color: 'gray',
-                }}
-              >
-                Tip: Get your API key{' '}
-                <Anchor
-                  target="_blank"
-                  weight="bold"
-                  style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
-                  href={`${hostname}/settings/general`}
-                >
-                  here.
-                </Anchor>
-              </Text>
-            </>
-          )}
-          {(form.values.type === 'Deluge' ||
-            form.values.type === 'Transmission' ||
-            form.values.type === 'qBittorrent') && (
-            <>
-              <TextInput
-                label="Username"
-                placeholder="admin"
-                value={form.values.username}
-                onChange={(event) => {
-                  form.setFieldValue('username', event.currentTarget.value);
-                }}
-                error={form.errors.username && 'Invalid username'}
-              />
-              <TextInput
-                label="Password"
-                placeholder="password"
-                value={form.values.password}
-                onChange={(event) => {
-                  form.setFieldValue('password', event.currentTarget.value);
-                }}
-                error={form.errors.password && 'Invalid password'}
-              />
-            </>
-          )}
-        </Group>
 
+              <TextInput
+                required
+                label="Icon URL"
+                placeholder="/favicon.svg"
+                {...form.getInputProps('icon')}
+              />
+              <TextInput
+                required
+                label="Service URL"
+                placeholder="http://localhost:7575"
+                {...form.getInputProps('url')}
+              />
+              <TextInput
+                label="New tab URL"
+                placeholder="http://sonarr.example.com"
+                {...form.getInputProps('openedUrl')}
+              />
+              <Select
+                label="Service type"
+                defaultValue="Other"
+                placeholder="Pick one"
+                required
+                searchable
+                data={ServiceTypeList}
+                {...form.getInputProps('type')}
+              />
+              <Select
+                label="Category"
+                data={categoryList}
+                placeholder="Select a category or create a new one"
+                nothingFound="Nothing found"
+                searchable
+                clearable
+                creatable
+                onClick={(e) => {
+                  e.preventDefault();
+                }}
+                getCreateLabel={(query) => `+ Create "${query}"`}
+                onCreate={(query) => {}}
+                {...form.getInputProps('category')}
+              />
+              <LoadingOverlay visible={isLoading} />
+              {(form.values.type === 'Sonarr' ||
+                form.values.type === 'Radarr' ||
+                form.values.type === 'Lidarr' ||
+                form.values.type === 'Readarr') && (
+                <>
+                  <TextInput
+                    required
+                    label="API key"
+                    placeholder="Your API key"
+                    value={form.values.apiKey}
+                    onChange={(event) => {
+                      form.setFieldValue('apiKey', event.currentTarget.value);
+                    }}
+                    error={form.errors.apiKey && 'Invalid API key'}
+                  />
+                  <Text
+                    style={{
+                      alignSelf: 'center',
+                      fontSize: '0.75rem',
+                      textAlign: 'center',
+                      color: 'gray',
+                    }}
+                  >
+                    Tip: Get your API key{' '}
+                    <Anchor
+                      target="_blank"
+                      weight="bold"
+                      style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
+                      href={`${hostname}/settings/general`}
+                    >
+                      here.
+                    </Anchor>
+                  </Text>
+                </>
+              )}
+              {form.values.type === 'qBittorrent' && (
+                <>
+                  <TextInput
+                    required
+                    label="Username"
+                    placeholder="admin"
+                    value={form.values.username}
+                    onChange={(event) => {
+                      form.setFieldValue('username', event.currentTarget.value);
+                    }}
+                    error={form.errors.username && 'Invalid username'}
+                  />
+                  <TextInput
+                    required
+                    label="Password"
+                    placeholder="adminadmin"
+                    value={form.values.password}
+                    onChange={(event) => {
+                      form.setFieldValue('password', event.currentTarget.value);
+                    }}
+                    error={form.errors.password && 'Invalid password'}
+                  />
+                </>
+              )}
+              {(form.values.type === 'Deluge' ||
+                form.values.type === 'Transmission' ||
+                form.values.type === 'qBittorrent') && (
+                <>
+                  <TextInput
+                    label="Username"
+                    placeholder="admin"
+                    value={form.values.username}
+                    onChange={(event) => {
+                      form.setFieldValue('username', event.currentTarget.value);
+                    }}
+                    error={form.errors.username && 'Invalid username'}
+                  />
+                  <TextInput
+                    label="Password"
+                    placeholder="password"
+                    value={form.values.password}
+                    onChange={(event) => {
+                      form.setFieldValue('password', event.currentTarget.value);
+                    }}
+                    error={form.errors.password && 'Invalid password'}
+                  />
+                </>
+              )}
+            </Group>
+          </Tabs.Tab>
+          <Tabs.Tab label="Advanced Options">
+            <MultiSelect
+              required
+              label="HTTP Status Codes"
+              data={statusCodes}
+              placeholder="Select valid status codes"
+              clearButtonLabel="Clear selection"
+              nothingFound="Nothing found"
+              clearable
+              searchable
+              {...form.getInputProps('status')}
+            />
+            <Select
+              required
+              label="Open Tab in: "
+              data={targets}
+              defaultValue="_blank"
+              placeholder="Pick one"
+              {...form.getInputProps('target')}
+            />
+          </Tabs.Tab>
+        </Tabs>
         <Group grow position="center" mt="xl">
           <Button type="submit">{props.message ?? 'Add service'}</Button>
         </Group>
diff --git a/src/components/AppShelf/AppShelfItem.tsx b/src/components/AppShelf/AppShelfItem.tsx
index ea8fb4fce..c1cfdf6a2 100644
--- a/src/components/AppShelf/AppShelfItem.tsx
+++ b/src/components/AppShelf/AppShelfItem.tsx
@@ -83,7 +83,7 @@ export function AppShelfItem(props: any) {
       >
         <Card.Section>
           <Anchor
-            target="_blank"
+            target={service.target !== undefined ? service.target : '_blank'}
             href={service.openedUrl ? service.openedUrl : service.url}
             style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
           >
@@ -127,13 +127,18 @@ export function AppShelfItem(props: any) {
                   src={service.icon}
                   fit="contain"
                   onClick={() => {
-                    if (service.openedUrl) window.open(service.openedUrl, '_blank');
-                    else window.open(service.url);
+                    if (service.target === undefined || service.target === '_blank') {
+                      if (service.openedUrl) window.open(service.openedUrl, '_blank');
+                      else window.open(service.url);
+                    } else {
+                      if (service.openedUrl) window.location.href = service.openedUrl;
+                      else window.location.href = service.url;
+                    }
                   }}
                 />
               </motion.i>
             </AspectRatio>
-            <PingComponent url={service.url} />
+            <PingComponent url={service.url} status={service.status} />
           </Card.Section>
         </Center>
       </Card>
diff --git a/src/components/AppShelf/AppShelfMenu.tsx b/src/components/AppShelf/AppShelfMenu.tsx
index 824b9ae7a..84f573756 100644
--- a/src/components/AppShelf/AppShelfMenu.tsx
+++ b/src/components/AppShelf/AppShelfMenu.tsx
@@ -32,6 +32,8 @@ export default function AppShelfMenu(props: any) {
           username={service.username}
           password={service.password}
           openedUrl={service.openedUrl}
+          status={service.status}
+          target={service.target}
           message="Save service"
         />
       </Modal>
diff --git a/src/components/modules/ping/PingModule.story.tsx b/src/components/modules/ping/PingModule.story.tsx
index 52a832da5..f00ca085a 100644
--- a/src/components/modules/ping/PingModule.story.tsx
+++ b/src/components/modules/ping/PingModule.story.tsx
@@ -11,6 +11,7 @@ const service: serviceItem = {
   name: 'YouTube',
   icon: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png',
   url: 'https://youtube.com/',
+  status: ['200'],
 };
 
 export const Default = (args: any) => <PingComponent service={service} />;
diff --git a/src/components/modules/ping/PingModule.tsx b/src/components/modules/ping/PingModule.tsx
index c7586f538..b77d8c2fd 100644
--- a/src/components/modules/ping/PingModule.tsx
+++ b/src/components/modules/ping/PingModule.tsx
@@ -1,5 +1,5 @@
 import { Indicator, Tooltip } from '@mantine/core';
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { IconPlug as Plug } from '@tabler/icons';
@@ -19,18 +19,37 @@ export default function PingComponent(props: any) {
 
   const { url }: { url: string } = props;
   const [isOnline, setOnline] = useState<State>('loading');
+  const [response, setResponse] = useState(500);
   const exists = config.modules?.[PingModule.title]?.enabled ?? false;
+
+  function statusCheck(response: AxiosResponse) {
+    const { status }: {status: string[]} = props;
+    //Default Status
+    let acceptableStatus = ['200'];
+    if (status !== undefined && status.length) {
+      acceptableStatus = status;
+    }
+    // Checks if reported status is in acceptable status array
+    if (acceptableStatus.indexOf((response.status).toString()) >= 0) {
+      setOnline('online');
+      setResponse(response.status);
+    } else {
+      setOnline('down');
+      setResponse(response.status)
+    }
+  }
+
   useEffect(() => {
     if (!exists) {
       return;
     }
     axios
       .get('/api/modules/ping', { params: { url } })
-      .then(() => {
-        setOnline('online');
+      .then((response) => {
+        statusCheck(response);
       })
-      .catch(() => {
-        setOnline('down');
+      .catch((error) => {
+        statusCheck(error.response);
       });
   }, [config.modules?.[PingModule.title]?.enabled]);
   if (!exists) {
@@ -40,7 +59,7 @@ export default function PingComponent(props: any) {
     <Tooltip
       radius="lg"
       style={{ position: 'absolute', bottom: 20, right: 20 }}
-      label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'}
+      label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? `Online - ${response}` : `Offline - ${response}`}
     >
       <motion.div
         animate={{
diff --git a/src/pages/api/modules/downloads.ts b/src/pages/api/modules/downloads.ts
index 78f3963f6..a6f4cf9c3 100644
--- a/src/pages/api/modules/downloads.ts
+++ b/src/pages/api/modules/downloads.ts
@@ -38,7 +38,7 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
       ...(
         await new Deluge({
           baseUrl: delugeService.url,
-          password: delugeService.password,
+          password: 'password' in delugeService ? delugeService.password : '',
         }).getAllData()
       ).torrents
     );
@@ -49,7 +49,7 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
         await new Transmission({
           baseUrl: transmissionService.url,
           username: transmissionService.username,
-          password: transmissionService.password,
+          password: 'password' in transmissionService ? transmissionService.password : '',
         }).getAllData()
       ).torrents
     );
diff --git a/src/pages/api/modules/ping.ts b/src/pages/api/modules/ping.ts
index b0a095d53..751747ad4 100644
--- a/src/pages/api/modules/ping.ts
+++ b/src/pages/api/modules/ping.ts
@@ -7,10 +7,10 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
   await axios
     .get(url as string)
     .then((response) => {
-      res.status(200).json(response.data);
+      res.status(response.status).json(response.statusText);
     })
     .catch((error) => {
-      res.status(500).json(error);
+      res.status(error.response.status).json(error.response.statusText);
     });
   // // Make a request to the URL
   // const response = await axios.get(url);
diff --git a/src/tools/types.ts b/src/tools/types.ts
index 92d5345ac..dedff307d 100644
--- a/src/tools/types.ts
+++ b/src/tools/types.ts
@@ -31,6 +31,32 @@ interface ConfigModule {
   };
 }
 
+export const statusCodes = [
+  {value: '200', label: '200 - OK', group:'Sucessful responses'}, 
+  {value: '204', label: '204 - No Content', group:'Sucessful responses'},
+  {value: '301', label: '301 - Moved Permanently', group:'Redirection responses'},
+  {value: '302', label: '302 - Found / Moved Temporarily', group:'Redirection responses'},
+  {value: '304', label: '304 - Not Modified', group:'Redirection responses'},
+  {value: '307', label: '307 - Temporary Redirect', group:'Redirection responses'},
+  {value: '308', label: '308 - Permanent Redirect', group:'Redirection responses'},
+  {value: '400', label: '400 - Bad Request', group:'Client error responses'},
+  {value: '401', label: '401 - Unauthorized', group:'Client error responses'},
+  {value: '403', label: '403 - Forbidden', group:'Client error responses'},
+  {value: '404', label: '404 - Not Found', group:'Client error responses'},
+  {value: '408', label: '408 - Request Timeout', group:'Client error responses'},
+  {value: '410', label: '410 - Gone', group:'Client error responses'},
+  {value: '429', label: '429 - Too Many Requests', group:'Client error responses'},
+  {value: '500', label: '500 - Internal Server Error', group:'Server error responses'},
+  {value: '502', label: '502 - Bad Gateway', group:'Server error responses'},
+  {value: '503', label: '503 - Service Unavailable', group:'Server error responses'},
+  {value: '054', label: '504 - Gateway Timeout Error', group:'Server error responses'},
+  ];
+
+export const targets = [
+  {value: '_blank', label: 'New Tab'},
+  {value: '_top', label: 'Same Window'}
+]
+
 export const ServiceTypeList = [
   'Other',
   'Emby',
@@ -66,4 +92,6 @@ export interface serviceItem {
   password?: string;
   username?: string;
   openedUrl?: string;
+  status: string[];
+  target: string;
 }

From 544fae3808f8d414dfaf7b4d9868cd24a7ef4b82 Mon Sep 17 00:00:00 2001
From: Larvey <luisrvervaet@gmail.com>
Date: Thu, 16 Jun 2022 15:50:16 -0400
Subject: [PATCH 2/6] Added Scrollbar

---
 src/components/AppShelf/AddAppShelfItem.tsx | 148 +++++++++-----------
 1 file changed, 67 insertions(+), 81 deletions(-)

diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx
index e1d70382d..50013e639 100644
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -14,6 +14,7 @@ import {
   Text,
   Tabs,
   MultiSelect,
+  ScrollArea,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useEffect, useState } from 'react';
@@ -202,14 +203,15 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
         })}
       >
         <Tabs position="apart">
-          <Tabs.Tab label="Options">
-            <Group direction="column" grow>
-              <TextInput
-                required
-                label="Service name"
-                placeholder="Plex"
-                {...form.getInputProps('name')}
-              />
+        <Tabs.Tab label="Options">
+          <ScrollArea style={{height:'42vh'}} scrollbarSize={4}>
+          <Group direction="column" grow>
+            <TextInput
+              required
+              label="Service name"
+              placeholder="Plex"
+              {...form.getInputProps('name')}
+            />
 
               <TextInput
                 required
@@ -276,79 +278,63 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                       color: 'gray',
                     }}
                   >
-                    Tip: Get your API key{' '}
-                    <Anchor
-                      target="_blank"
-                      weight="bold"
-                      style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
-                      href={`${hostname}/settings/general`}
-                    >
-                      here.
-                    </Anchor>
-                  </Text>
-                </>
-              )}
-              {form.values.type === 'qBittorrent' && (
-                <>
-                  <TextInput
-                    required
-                    label="Username"
-                    placeholder="admin"
-                    value={form.values.username}
-                    onChange={(event) => {
-                      form.setFieldValue('username', event.currentTarget.value);
-                    }}
-                    error={form.errors.username && 'Invalid username'}
-                  />
-                  <TextInput
-                    required
-                    label="Password"
-                    placeholder="adminadmin"
-                    value={form.values.password}
-                    onChange={(event) => {
-                      form.setFieldValue('password', event.currentTarget.value);
-                    }}
-                    error={form.errors.password && 'Invalid password'}
-                  />
-                </>
-              )}
-              {(form.values.type === 'Deluge' ||
-                form.values.type === 'Transmission' ||
-                form.values.type === 'qBittorrent') && (
-                <>
-                  <TextInput
-                    label="Username"
-                    placeholder="admin"
-                    value={form.values.username}
-                    onChange={(event) => {
-                      form.setFieldValue('username', event.currentTarget.value);
-                    }}
-                    error={form.errors.username && 'Invalid username'}
-                  />
-                  <TextInput
-                    label="Password"
-                    placeholder="password"
-                    value={form.values.password}
-                    onChange={(event) => {
-                      form.setFieldValue('password', event.currentTarget.value);
-                    }}
-                    error={form.errors.password && 'Invalid password'}
-                  />
-                </>
-              )}
-            </Group>
-          </Tabs.Tab>
-          <Tabs.Tab label="Advanced Options">
-            <MultiSelect
-              required
-              label="HTTP Status Codes"
-              data={statusCodes}
-              placeholder="Select valid status codes"
-              clearButtonLabel="Clear selection"
-              nothingFound="Nothing found"
-              clearable
-              searchable
-              {...form.getInputProps('status')}
+                    here.
+                  </Anchor>
+                </Text>
+              </>
+            )}
+            {form.values.type === 'qBittorrent' && (
+              <>
+                <TextInput
+                  required
+                  label="Username"
+                  placeholder="admin"
+                  value={form.values.username}
+                  onChange={(event) => {
+                    form.setFieldValue('username', event.currentTarget.value);
+                  }}
+                  error={form.errors.username && 'Invalid username'}
+                />
+                <TextInput
+                  required
+                  label="Password"
+                  placeholder="adminadmin"
+                  value={form.values.password}
+                  onChange={(event) => {
+                    form.setFieldValue('password', event.currentTarget.value);
+                  }}
+                  error={form.errors.password && 'Invalid password'}
+                />
+              </>
+            )}
+            {(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
+              <>
+                <TextInput
+                  label="Password"
+                  placeholder="password"
+                  value={form.values.password}
+                  onChange={(event) => {
+                    form.setFieldValue('password', event.currentTarget.value);
+                  }}
+                  error={form.errors.password && 'Invalid password'}
+                />
+              </>
+            )}
+          </Group>
+          </ScrollArea>
+        </Tabs.Tab>
+        <Tabs.Tab label="Advanced Options">
+          <Group direction="column" grow>
+          <MultiSelect
+            required 
+            label="HTTP Status Codes"
+            data={statusCodes}
+            placeholder="Select valid status codes"
+            clearButtonLabel="Clear selection"
+            nothingFound="Nothing found"
+            clearable
+            searchable
+            {...form.getInputProps('status')}
             />
             <Select
               required

From 6ee7d6ec8d8030e15cb97e4cf1217e48e98fb957 Mon Sep 17 00:00:00 2001
From: Larvey <luisrvervaet@gmail.com>
Date: Thu, 16 Jun 2022 16:54:07 -0400
Subject: [PATCH 3/6] declutter config file

---
 src/components/AppShelf/AddAppShelfItem.tsx   | 145 ++++++++++--------
 .../modules/ping/PingModule.story.tsx         |   1 +
 2 files changed, 80 insertions(+), 66 deletions(-)

diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx
index 50013e639..e8fa39730 100644
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -178,6 +178,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       </Center>
       <form
         onSubmit={form.onSubmit(() => {
+          if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) {
+            form.values.status = undefined;
+          }
+          if (form.values.target === '_blank') {
+            form.values.target = undefined;
+          }
           // If service already exists, update it.
           if (config.services && config.services.find((s) => s.id === form.values.id)) {
             setConfig({
@@ -202,7 +208,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           form.reset();
         })}
       >
-        <Tabs position="apart">
+        <Tabs position="center">
         <Tabs.Tab label="Options">
           <ScrollArea style={{height:'42vh'}} scrollbarSize={4}>
           <Group direction="column" grow>
@@ -213,70 +219,77 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
               {...form.getInputProps('name')}
             />
 
-              <TextInput
-                required
-                label="Icon URL"
-                placeholder="/favicon.svg"
-                {...form.getInputProps('icon')}
-              />
-              <TextInput
-                required
-                label="Service URL"
-                placeholder="http://localhost:7575"
-                {...form.getInputProps('url')}
-              />
-              <TextInput
-                label="New tab URL"
-                placeholder="http://sonarr.example.com"
-                {...form.getInputProps('openedUrl')}
-              />
-              <Select
-                label="Service type"
-                defaultValue="Other"
-                placeholder="Pick one"
-                required
-                searchable
-                data={ServiceTypeList}
-                {...form.getInputProps('type')}
-              />
-              <Select
-                label="Category"
-                data={categoryList}
-                placeholder="Select a category or create a new one"
-                nothingFound="Nothing found"
-                searchable
-                clearable
-                creatable
-                onClick={(e) => {
-                  e.preventDefault();
-                }}
-                getCreateLabel={(query) => `+ Create "${query}"`}
-                onCreate={(query) => {}}
-                {...form.getInputProps('category')}
-              />
-              <LoadingOverlay visible={isLoading} />
-              {(form.values.type === 'Sonarr' ||
-                form.values.type === 'Radarr' ||
-                form.values.type === 'Lidarr' ||
-                form.values.type === 'Readarr') && (
-                <>
-                  <TextInput
-                    required
-                    label="API key"
-                    placeholder="Your API key"
-                    value={form.values.apiKey}
-                    onChange={(event) => {
-                      form.setFieldValue('apiKey', event.currentTarget.value);
-                    }}
-                    error={form.errors.apiKey && 'Invalid API key'}
-                  />
-                  <Text
-                    style={{
-                      alignSelf: 'center',
-                      fontSize: '0.75rem',
-                      textAlign: 'center',
-                      color: 'gray',
-                    }}
+            <TextInput
+              required
+              label="Icon URL"
+              placeholder="/favicon.svg"
+              {...form.getInputProps('icon')}
+            />
+            <TextInput
+              required
+              label="Service URL"
+              placeholder="http://localhost:7575"
+              {...form.getInputProps('url')}
+            />
+            <TextInput
+              label="On Click URL"
+              placeholder="http://sonarr.example.com"
+              {...form.getInputProps('openedUrl')}
+            />
+            <Select
+              label="Service type"
+              defaultValue="Other"
+              placeholder="Pick one"
+              required
+              searchable
+              data={ServiceTypeList}
+              {...form.getInputProps('type')}
+            />
+            <Select
+              label="Category"
+              data={categoryList}
+              placeholder="Select a category or create a new one"
+              nothingFound="Nothing found"
+              searchable
+              clearable
+              creatable
+              onClick={(e) => {
+                e.preventDefault();
+              }}
+              getCreateLabel={(query) => `+ Create "${query}"`}
+              onCreate={(query) => {}}
+              {...form.getInputProps('category')}
+            />
+            <LoadingOverlay visible={isLoading} />
+            {(form.values.type === 'Sonarr' ||
+              form.values.type === 'Radarr' ||
+              form.values.type === 'Lidarr' ||
+              form.values.type === 'Readarr') && (
+              <>
+                <TextInput
+                  required
+                  label="API key"
+                  placeholder="Your API key"
+                  value={form.values.apiKey}
+                  onChange={(event) => {
+                    form.setFieldValue('apiKey', event.currentTarget.value);
+                  }}
+                  error={form.errors.apiKey && 'Invalid API key'}
+                />
+                <Text
+                  style={{
+                    alignSelf: 'center',
+                    fontSize: '0.75rem',
+                    textAlign: 'center',
+                    color: 'gray',
+                  }}
+                >
+                  Tip: Get your API key{' '}
+                  <Anchor
+                    target="_blank"
+                    weight="bold"
+                    style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
+                    href={`${hostname}/settings/general`}
                   >
                     here.
                   </Anchor>
@@ -332,12 +345,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
             placeholder="Select valid status codes"
             clearButtonLabel="Clear selection"
             nothingFound="Nothing found"
+            defaultValue={['200']}
             clearable
             searchable
             {...form.getInputProps('status')}
             />
             <Select
-              required
               label="Open Tab in: "
               data={targets}
               defaultValue="_blank"
diff --git a/src/components/modules/ping/PingModule.story.tsx b/src/components/modules/ping/PingModule.story.tsx
index f00ca085a..1a9fefbf3 100644
--- a/src/components/modules/ping/PingModule.story.tsx
+++ b/src/components/modules/ping/PingModule.story.tsx
@@ -12,6 +12,7 @@ const service: serviceItem = {
   icon: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png',
   url: 'https://youtube.com/',
   status: ['200'],
+  target: "_blank",
 };
 
 export const Default = (args: any) => <PingComponent service={service} />;

From a8c0dfcd0cfb97d0802ae87f188f073247bc1a9e Mon Sep 17 00:00:00 2001
From: Larvey <luisrvervaet@gmail.com>
Date: Thu, 16 Jun 2022 17:07:29 -0400
Subject: [PATCH 4/6] Fix Capitalization

---
 src/components/AppShelf/AddAppShelfItem.tsx | 6 +++---
 src/tools/types.ts                          | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx
index e8fa39730..0c8071c83 100644
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -22,7 +22,7 @@ import { IconApps as Apps } from '@tabler/icons';
 import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList, statusCodes, targets } from '../../tools/types';
+import { ServiceTypeList, StatusCodes, Targets } from '../../tools/types';
 
 export function AddItemShelfButton(props: any) {
   const [opened, setOpened] = useState(false);
@@ -341,7 +341,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           <MultiSelect
             required 
             label="HTTP Status Codes"
-            data={statusCodes}
+            data={StatusCodes}
             placeholder="Select valid status codes"
             clearButtonLabel="Clear selection"
             nothingFound="Nothing found"
@@ -352,7 +352,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
             />
             <Select
               label="Open Tab in: "
-              data={targets}
+              data={Targets}
               defaultValue="_blank"
               placeholder="Pick one"
               {...form.getInputProps('target')}
diff --git a/src/tools/types.ts b/src/tools/types.ts
index dedff307d..eedac4f69 100644
--- a/src/tools/types.ts
+++ b/src/tools/types.ts
@@ -31,7 +31,7 @@ interface ConfigModule {
   };
 }
 
-export const statusCodes = [
+export const StatusCodes = [
   {value: '200', label: '200 - OK', group:'Sucessful responses'}, 
   {value: '204', label: '204 - No Content', group:'Sucessful responses'},
   {value: '301', label: '301 - Moved Permanently', group:'Redirection responses'},
@@ -52,7 +52,7 @@ export const statusCodes = [
   {value: '054', label: '504 - Gateway Timeout Error', group:'Server error responses'},
   ];
 
-export const targets = [
+export const Targets = [
   {value: '_blank', label: 'New Tab'},
   {value: '_top', label: 'Same Window'}
 ]

From 80d3f164738f4e2c1a6f4eaf2b72d7930bfd4cc7 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Mon, 20 Jun 2022 09:52:05 +0200
Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=94=A7=20Tweak=20UI=20and=20change=20?=
 =?UTF-8?q?the=20name=20of=20the=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppShelf/AddAppShelfItem.tsx | 288 ++++++++++----------
 src/components/AppShelf/AppShelfItem.tsx    |  12 +-
 src/components/AppShelf/AppShelfMenu.tsx    |  13 +-
 src/pages/api/modules/ping.ts               |   6 +-
 src/tools/types.ts                          |   4 +-
 5 files changed, 156 insertions(+), 167 deletions(-)

diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx
index 0c8071c83..cff74d57a 100644
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -15,6 +15,7 @@ import {
   Tabs,
   MultiSelect,
   ScrollArea,
+  Switch,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useEffect, useState } from 'react';
@@ -22,7 +23,7 @@ import { IconApps as Apps } from '@tabler/icons';
 import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList, StatusCodes, Targets } from '../../tools/types';
+import { ServiceTypeList, StatusCodes } from '../../tools/types';
 
 export function AddItemShelfButton(props: any) {
   const [opened, setOpened] = useState(false);
@@ -117,7 +118,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       password: props.password ?? (undefined as unknown as string),
       openedUrl: props.openedUrl ?? (undefined as unknown as string),
       status: props.status ?? ['200'],
-      target: props.target ?? '_blank',
+      newTab: props.newTab ?? true,
     },
     validate: {
       apiKey: () => null,
@@ -181,8 +182,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) {
             form.values.status = undefined;
           }
-          if (form.values.target === '_blank') {
-            form.values.target = undefined;
+          if (form.values.newTab === true) {
+            form.values.newTab = undefined;
           }
           // If service already exists, update it.
           if (config.services && config.services.find((s) => s.id === form.values.id)) {
@@ -208,155 +209,154 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           form.reset();
         })}
       >
-        <Tabs position="center">
-        <Tabs.Tab label="Options">
-          <ScrollArea style={{height:'42vh'}} scrollbarSize={4}>
-          <Group direction="column" grow>
-            <TextInput
-              required
-              label="Service name"
-              placeholder="Plex"
-              {...form.getInputProps('name')}
-            />
+        <Tabs grow>
+          <Tabs.Tab label="Options">
+            <ScrollArea style={{ height: 500 }} scrollbarSize={4}>
+              <Group direction="column" grow>
+                <TextInput
+                  required
+                  label="Service name"
+                  placeholder="Plex"
+                  {...form.getInputProps('name')}
+                />
 
-            <TextInput
-              required
-              label="Icon URL"
-              placeholder="/favicon.svg"
-              {...form.getInputProps('icon')}
-            />
-            <TextInput
-              required
-              label="Service URL"
-              placeholder="http://localhost:7575"
-              {...form.getInputProps('url')}
-            />
-            <TextInput
-              label="On Click URL"
-              placeholder="http://sonarr.example.com"
-              {...form.getInputProps('openedUrl')}
-            />
-            <Select
-              label="Service type"
-              defaultValue="Other"
-              placeholder="Pick one"
-              required
-              searchable
-              data={ServiceTypeList}
-              {...form.getInputProps('type')}
-            />
-            <Select
-              label="Category"
-              data={categoryList}
-              placeholder="Select a category or create a new one"
-              nothingFound="Nothing found"
-              searchable
-              clearable
-              creatable
-              onClick={(e) => {
-                e.preventDefault();
-              }}
-              getCreateLabel={(query) => `+ Create "${query}"`}
-              onCreate={(query) => {}}
-              {...form.getInputProps('category')}
-            />
-            <LoadingOverlay visible={isLoading} />
-            {(form.values.type === 'Sonarr' ||
-              form.values.type === 'Radarr' ||
-              form.values.type === 'Lidarr' ||
-              form.values.type === 'Readarr') && (
-              <>
                 <TextInput
                   required
-                  label="API key"
-                  placeholder="Your API key"
-                  value={form.values.apiKey}
-                  onChange={(event) => {
-                    form.setFieldValue('apiKey', event.currentTarget.value);
-                  }}
-                  error={form.errors.apiKey && 'Invalid API key'}
-                />
-                <Text
-                  style={{
-                    alignSelf: 'center',
-                    fontSize: '0.75rem',
-                    textAlign: 'center',
-                    color: 'gray',
-                  }}
-                >
-                  Tip: Get your API key{' '}
-                  <Anchor
-                    target="_blank"
-                    weight="bold"
-                    style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
-                    href={`${hostname}/settings/general`}
-                  >
-                    here.
-                  </Anchor>
-                </Text>
-              </>
-            )}
-            {form.values.type === 'qBittorrent' && (
-              <>
-                <TextInput
-                  required
-                  label="Username"
-                  placeholder="admin"
-                  value={form.values.username}
-                  onChange={(event) => {
-                    form.setFieldValue('username', event.currentTarget.value);
-                  }}
-                  error={form.errors.username && 'Invalid username'}
+                  label="Icon URL"
+                  placeholder="/favicon.svg"
+                  {...form.getInputProps('icon')}
                 />
                 <TextInput
                   required
-                  label="Password"
-                  placeholder="adminadmin"
-                  value={form.values.password}
-                  onChange={(event) => {
-                    form.setFieldValue('password', event.currentTarget.value);
-                  }}
-                  error={form.errors.password && 'Invalid password'}
+                  label="Service URL"
+                  placeholder="http://localhost:7575"
+                  {...form.getInputProps('url')}
                 />
-              </>
-            )}
-            {(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
-              <>
                 <TextInput
-                  label="Password"
-                  placeholder="password"
-                  value={form.values.password}
-                  onChange={(event) => {
-                    form.setFieldValue('password', event.currentTarget.value);
-                  }}
-                  error={form.errors.password && 'Invalid password'}
+                  label="On Click URL"
+                  placeholder="http://sonarr.example.com"
+                  {...form.getInputProps('openedUrl')}
                 />
-              </>
-            )}
-          </Group>
-          </ScrollArea>
-        </Tabs.Tab>
-        <Tabs.Tab label="Advanced Options">
-          <Group direction="column" grow>
-          <MultiSelect
-            required 
-            label="HTTP Status Codes"
-            data={StatusCodes}
-            placeholder="Select valid status codes"
-            clearButtonLabel="Clear selection"
-            nothingFound="Nothing found"
-            defaultValue={['200']}
-            clearable
-            searchable
-            {...form.getInputProps('status')}
-            />
-            <Select
-              label="Open Tab in: "
-              data={Targets}
-              defaultValue="_blank"
-              placeholder="Pick one"
-              {...form.getInputProps('target')}
-            />
+                <Select
+                  label="Service type"
+                  defaultValue="Other"
+                  placeholder="Pick one"
+                  required
+                  searchable
+                  data={ServiceTypeList}
+                  {...form.getInputProps('type')}
+                />
+                <Select
+                  label="Category"
+                  data={categoryList}
+                  placeholder="Select a category or create a new one"
+                  nothingFound="Nothing found"
+                  searchable
+                  clearable
+                  creatable
+                  onClick={(e) => {
+                    e.preventDefault();
+                  }}
+                  getCreateLabel={(query) => `+ Create "${query}"`}
+                  onCreate={(query) => {}}
+                  {...form.getInputProps('category')}
+                />
+                <LoadingOverlay visible={isLoading} />
+                {(form.values.type === 'Sonarr' ||
+                  form.values.type === 'Radarr' ||
+                  form.values.type === 'Lidarr' ||
+                  form.values.type === 'Readarr') && (
+                  <>
+                    <TextInput
+                      required
+                      label="API key"
+                      placeholder="Your API key"
+                      value={form.values.apiKey}
+                      onChange={(event) => {
+                        form.setFieldValue('apiKey', event.currentTarget.value);
+                      }}
+                      error={form.errors.apiKey && 'Invalid API key'}
+                    />
+                    <Text
+                      style={{
+                        alignSelf: 'center',
+                        fontSize: '0.75rem',
+                        textAlign: 'center',
+                        color: 'gray',
+                      }}
+                    >
+                      Tip: Get your API key{' '}
+                      <Anchor
+                        target="_blank"
+                        weight="bold"
+                        style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
+                        href={`${hostname}/settings/general`}
+                      >
+                        here.
+                      </Anchor>
+                    </Text>
+                  </>
+                )}
+                {form.values.type === 'qBittorrent' && (
+                  <>
+                    <TextInput
+                      required
+                      label="Username"
+                      placeholder="admin"
+                      value={form.values.username}
+                      onChange={(event) => {
+                        form.setFieldValue('username', event.currentTarget.value);
+                      }}
+                      error={form.errors.username && 'Invalid username'}
+                    />
+                    <TextInput
+                      required
+                      label="Password"
+                      placeholder="adminadmin"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+                {(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
+                  <>
+                    <TextInput
+                      label="Password"
+                      placeholder="password"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+              </Group>
+            </ScrollArea>
+          </Tabs.Tab>
+          <Tabs.Tab label="Advanced Options">
+            <Group direction="column" grow>
+              <MultiSelect
+                required
+                label="HTTP Status Codes"
+                data={StatusCodes}
+                placeholder="Select valid status codes"
+                clearButtonLabel="Clear selection"
+                nothingFound="Nothing found"
+                defaultValue={['200']}
+                clearable
+                searchable
+                {...form.getInputProps('status')}
+              />
+              <Switch
+                label="Open service in new tab"
+                defaultChecked={form.values.newTab}
+                {...form.getInputProps('newTab')}
+              />
+            </Group>
           </Tabs.Tab>
         </Tabs>
         <Group grow position="center" mt="xl">
diff --git a/src/components/AppShelf/AppShelfItem.tsx b/src/components/AppShelf/AppShelfItem.tsx
index c1cfdf6a2..109b873c2 100644
--- a/src/components/AppShelf/AppShelfItem.tsx
+++ b/src/components/AppShelf/AppShelfItem.tsx
@@ -83,7 +83,7 @@ export function AppShelfItem(props: any) {
       >
         <Card.Section>
           <Anchor
-            target={service.target !== undefined ? service.target : '_blank'}
+            target={service.newTab === false ? '_top' : '_blank'}
             href={service.openedUrl ? service.openedUrl : service.url}
             style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
           >
@@ -127,13 +127,9 @@ export function AppShelfItem(props: any) {
                   src={service.icon}
                   fit="contain"
                   onClick={() => {
-                    if (service.target === undefined || service.target === '_blank') {
-                      if (service.openedUrl) window.open(service.openedUrl, '_blank');
-                      else window.open(service.url);
-                    } else {
-                      if (service.openedUrl) window.location.href = service.openedUrl;
-                      else window.location.href = service.url;
-                    }
+                    if (service.openedUrl) {
+                      window.open(service.openedUrl, service.newTab === false ? '_top' : '_blank');
+                    } else window.open(service.url, service.newTab === false ? '_top' : '_blank');
                   }}
                 />
               </motion.i>
diff --git a/src/components/AppShelf/AppShelfMenu.tsx b/src/components/AppShelf/AppShelfMenu.tsx
index 84f573756..5aada187a 100644
--- a/src/components/AppShelf/AppShelfMenu.tsx
+++ b/src/components/AppShelf/AppShelfMenu.tsx
@@ -22,18 +22,7 @@ export default function AppShelfMenu(props: any) {
       >
         <AddAppShelfItemForm
           setOpened={setOpened}
-          name={service.name}
-          id={service.id}
-          category={service.category}
-          type={service.type}
-          url={service.url}
-          icon={service.icon}
-          apiKey={service.apiKey}
-          username={service.username}
-          password={service.password}
-          openedUrl={service.openedUrl}
-          status={service.status}
-          target={service.target}
+          {...service}
           message="Save service"
         />
       </Modal>
diff --git a/src/pages/api/modules/ping.ts b/src/pages/api/modules/ping.ts
index 751747ad4..6662cd8a6 100644
--- a/src/pages/api/modules/ping.ts
+++ b/src/pages/api/modules/ping.ts
@@ -10,7 +10,11 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
       res.status(response.status).json(response.statusText);
     })
     .catch((error) => {
-      res.status(error.response.status).json(error.response.statusText);
+      if (error.response) {
+        res.status(error.response.status).json(error.response.statusText);
+      } else {
+        res.status(500).json('Server Error');
+      }
     });
   // // Make a request to the URL
   // const response = await axios.get(url);
diff --git a/src/tools/types.ts b/src/tools/types.ts
index eedac4f69..1b3953a1f 100644
--- a/src/tools/types.ts
+++ b/src/tools/types.ts
@@ -92,6 +92,6 @@ export interface serviceItem {
   password?: string;
   username?: string;
   openedUrl?: string;
-  status: string[];
-  target: string;
+  newTab?: boolean;
+  status?: string[];
 }

From 7780ae3d7af4e0be7c197dfb06942d0bd84e1276 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Mon, 20 Jun 2022 10:17:49 +0200
Subject: [PATCH 6/6] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Re-implement=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppShelf/AddAppShelfItem.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx
index cff74d57a..f9229d220 100644
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -321,8 +321,19 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                     />
                   </>
                 )}
-                {(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
+                {(form.values.type === 'Deluge' ||
+                  form.values.type === 'Transmission' ||
+                  form.values.type === 'qBittorrent') && (
                   <>
+                    <TextInput
+                      label="Username"
+                      placeholder="admin"
+                      value={form.values.username}
+                      onChange={(event) => {
+                        form.setFieldValue('username', event.currentTarget.value);
+                      }}
+                      error={form.errors.username && 'Invalid username'}
+                    />
                     <TextInput
                       label="Password"
                       placeholder="password"