client: add support for Deluge

client/src/javascript/components/general/connection-settings/ClientConnectionSettingsForm.tsx

@@ -8,6 +8,7 @@ import {SUPPORTED_CLIENTS} from '@shared/schema/constants/ClientConnectionSettin
 
 import type {ClientConnectionSettings} from '@shared/schema/ClientConnectionSettings';
 
+import DelugeConnectionSettingsForm from './DelugeConnectionSettingsForm';
 import QBittorrentConnectionSettingsForm from './QBittorrentConnectionSettingsForm';
 import RTorrentConnectionSettingsForm from './RTorrentConnectionSettingsForm';
 import TransmissionConnectionSettingsForm from './TransmissionConnectionSettingsForm';
@@ -32,6 +33,9 @@ const ClientConnectionSettingsForm: FC<ClientConnectionSettingsFormProps> = ({
 
   let settingsForm: ReactNode = null;
   switch (selectedClient) {
+    case 'Deluge':
+      settingsForm = <DelugeConnectionSettingsForm onSettingsChange={onSettingsChange} />;
+      break;
     case 'qBittorrent':
       settingsForm = <QBittorrentConnectionSettingsForm onSettingsChange={onSettingsChange} />;
       break;

client/src/javascript/components/general/connection-settings/DelugeConnectionSettingsForm.tsx

@@ -0,0 +1,84 @@
+import {FC, useState} from 'react';
+import {Trans, useLingui} from '@lingui/react';
+
+import {FormGroup, FormRow, FormRowGroup, Textbox} from '@client/ui';
+
+import type {DelugeConnectionSettings} from '@shared/schema/ClientConnectionSettings';
+
+export interface DelugeConnectionSettingsProps {
+  onSettingsChange: (settings: DelugeConnectionSettings | null) => void;
+}
+
+const DelugeConnectionSettingsForm: FC<DelugeConnectionSettingsProps> = ({
+  onSettingsChange,
+}: DelugeConnectionSettingsProps) => {
+  const {i18n} = useLingui();
+  const [settings, setSettings] = useState<DelugeConnectionSettings>({
+    client: 'Deluge',
+    type: 'rpc',
+    version: 1,
+    host: '127.0.0.1',
+    port: 58846,
+    username: '',
+    password: '',
+  });
+
+  const handleFormChange = (field: 'host' | 'port' | 'username' | 'password', value: string | number): void => {
+    const newSettings = {
+      ...settings,
+      [field]: value,
+    };
+
+    if (!newSettings.host || Number.isNaN(newSettings.port)) {
+      onSettingsChange(null);
+    } else {
+      onSettingsChange(newSettings);
+    }
+
+    setSettings(newSettings);
+  };
+
+  return (
+    <FormRow>
+      <FormGroup>
+        <FormRowGroup>
+          <FormRow>
+            <Textbox
+              onChange={(e) => handleFormChange('host', e.target.value)}
+              id="host"
+              label={<Trans id="connection.settings.deluge.host" />}
+              placeholder={i18n._('connection.settings.deluge.host.input.placeholder')}
+            />
+            <Textbox
+              onChange={(e) => handleFormChange('port', Number(e.target.value))}
+              id="port"
+              label={<Trans id="connection.settings.deluge.port" />}
+              placeholder={i18n._('connection.settings.deluge.port.input.placeholder')}
+            />
+          </FormRow>
+        </FormRowGroup>
+        <FormRowGroup>
+          <FormRow>
+            <Textbox
+              onChange={(e) => handleFormChange('username', e.target.value)}
+              id="deluge-username"
+              label={<Trans id="connection.settings.deluge.username" />}
+              placeholder={i18n._('connection.settings.deluge.username.input.placeholder')}
+              autoComplete="off"
+            />
+            <Textbox
+              onChange={(e) => handleFormChange('password', e.target.value)}
+              id="deluge-password"
+              label={<Trans id="connection.settings.deluge.password" />}
+              placeholder={i18n._('connection.settings.deluge.password.input.placeholder')}
+              autoComplete="off"
+              type="password"
+            />
+          </FormRow>
+        </FormRowGroup>
+      </FormGroup>
+    </FormRow>
+  );
+};
+
+export default DelugeConnectionSettingsForm;

client/src/javascript/i18n/strings/en.json

@@ -45,6 +45,15 @@
   "connection-interruption.verification-error": "Connection could not be verified.",
   "connection.settings.client.select": "Client",
   "connection.settings.error.empty": "Connection settings can not be empty.",
+  "connection.settings.deluge": "Deluge",
+  "connection.settings.deluge.host": "Host",
+  "connection.settings.deluge.host.input.placeholder": "e.g. localhost",
+  "connection.settings.deluge.password": "Password",
+  "connection.settings.deluge.password.input.placeholder": "Password",
+  "connection.settings.deluge.port": "Port",
+  "connection.settings.deluge.port.input.placeholder": "e.g. 58846",
+  "connection.settings.deluge.username": "Username",
+  "connection.settings.deluge.username.input.placeholder": "e.g. localclient",
   "connection.settings.qbittorrent": "qBittorrent",
   "connection.settings.qbittorrent.password": "Password",
   "connection.settings.qbittorrent.password.input.placeholder": "Password",

shared/schema/constants/ClientConnectionSettings.ts

@@ -1 +1 @@
-export const SUPPORTED_CLIENTS = ['qBittorrent', 'rTorrent', 'Transmission'] as const;
+export const SUPPORTED_CLIENTS = ['Deluge', 'qBittorrent', 'rTorrent', 'Transmission'] as const;