diff --git a/client/src/javascript/components/general/connection-settings/ClientConnectionSettingsForm.tsx b/client/src/javascript/components/general/connection-settings/ClientConnectionSettingsForm.tsx index f6768069..90632611 100644 --- a/client/src/javascript/components/general/connection-settings/ClientConnectionSettingsForm.tsx +++ b/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 = ({ let settingsForm: ReactNode = null; switch (selectedClient) { + case 'Deluge': + settingsForm = ; + break; case 'qBittorrent': settingsForm = ; break; diff --git a/client/src/javascript/components/general/connection-settings/DelugeConnectionSettingsForm.tsx b/client/src/javascript/components/general/connection-settings/DelugeConnectionSettingsForm.tsx new file mode 100644 index 00000000..bf70ad51 --- /dev/null +++ b/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 = ({ + onSettingsChange, +}: DelugeConnectionSettingsProps) => { + const {i18n} = useLingui(); + const [settings, setSettings] = useState({ + 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 ( + + + + + handleFormChange('host', e.target.value)} + id="host" + label={} + placeholder={i18n._('connection.settings.deluge.host.input.placeholder')} + /> + handleFormChange('port', Number(e.target.value))} + id="port" + label={} + placeholder={i18n._('connection.settings.deluge.port.input.placeholder')} + /> + + + + + handleFormChange('username', e.target.value)} + id="deluge-username" + label={} + placeholder={i18n._('connection.settings.deluge.username.input.placeholder')} + autoComplete="off" + /> + handleFormChange('password', e.target.value)} + id="deluge-password" + label={} + placeholder={i18n._('connection.settings.deluge.password.input.placeholder')} + autoComplete="off" + type="password" + /> + + + + + ); +}; + +export default DelugeConnectionSettingsForm; diff --git a/client/src/javascript/i18n/strings/en.json b/client/src/javascript/i18n/strings/en.json index 300a28ce..33d57e75 100644 --- a/client/src/javascript/i18n/strings/en.json +++ b/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", diff --git a/shared/schema/constants/ClientConnectionSettings.ts b/shared/schema/constants/ClientConnectionSettings.ts index 8d140018..ae6e2232 100644 --- a/shared/schema/constants/ClientConnectionSettings.ts +++ b/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;