Feature/server settings (#458)

* Move "Server Address" setting to server settings

* Rename "ServerDirSetting" to "TextSetting"

* Use "TextSetting" for server address

* Reset value when closing the dialog

* Support passwords in "TextSetting"

* Add server settings
This commit is contained in:
schroda
2023-11-18 19:55:44 +01:00
committed by GitHub
parent 482db4626a
commit cac60fed2c
11 changed files with 612 additions and 295 deletions

View File

@@ -6,14 +6,12 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useContext, useEffect, useMemo, useState } from 'react';
import { useContext, useEffect, useMemo } from 'react';
import AutoStoriesIcon from '@mui/icons-material/AutoStories';
import List from '@mui/material/List';
import ListAltIcon from '@mui/icons-material/ListAlt';
import BackupIcon from '@mui/icons-material/Backup';
import Brightness6Icon from '@mui/icons-material/Brightness6';
import DnsIcon from '@mui/icons-material/Dns';
import EditIcon from '@mui/icons-material/Edit';
import InfoIcon from '@mui/icons-material/Info';
import CachedIcon from '@mui/icons-material/Cached';
import ListItem from '@mui/material/ListItem';
@@ -21,21 +19,14 @@ import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import Switch from '@mui/material/Switch';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import TextField from '@mui/material/TextField';
import FavoriteIcon from '@mui/icons-material/Favorite';
import { Link, MenuItem, Select, Tooltip } from '@mui/material';
import { Link, MenuItem, Select } from '@mui/material';
import { useTranslation } from 'react-i18next';
import LanguageIcon from '@mui/icons-material/Language';
import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
import ViewModuleIcon from '@mui/icons-material/ViewModule';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import DnsIcon from '@mui/icons-material/Dns';
import { langCodeToName } from '@/util/language';
import { useLocalStorage } from '@/util/useLocalStorage';
import { ListItemLink } from '@/components/util/ListItemLink';
@@ -53,191 +44,133 @@ export function Settings() {
}, [t]);
const { darkTheme, setDarkTheme } = useContext(DarkTheme);
const [serverAddress, setServerAddress] = useLocalStorage<string>('serverBaseURL', '');
const [showNsfw, setShowNsfw] = useLocalStorage<boolean>('showNsfw', true);
const [useCache, setUseCache] = useLocalStorage<boolean>('useCache', true);
const [dialogOpen, setDialogOpen] = useState(false);
const [dialogValue, setDialogValue] = useState(serverAddress);
const DEFAULT_ITEM_WIDTH = 300;
const itemWidthIcon = useMemo(() => <ViewModuleIcon />, []);
const [itemWidth, setItemWidth] = useLocalStorage<number>('ItemWidth', DEFAULT_ITEM_WIDTH);
const handleDialogOpen = () => {
setDialogValue(serverAddress);
setDialogOpen(true);
};
const handleDialogCancel = () => {
setDialogOpen(false);
};
const handleDialogSubmit = () => {
setDialogOpen(false);
const serverBaseUrl = dialogValue.replaceAll(/(\/)+$/g, '');
setServerAddress(serverBaseUrl);
requestManager.updateClient({ baseURL: serverBaseUrl });
};
return (
<>
<List sx={{ padding: 0 }}>
<ListItemLink to="/settings/categories">
<ListItemIcon>
<ListAltIcon />
</ListItemIcon>
<ListItemText primary={t('category.title.categories')} />
</ListItemLink>
<ListItemLink to="/settings/defaultReaderSettings">
<ListItemIcon>
<AutoStoriesIcon />
</ListItemIcon>
<ListItemText primary={t('reader.settings.title.default_reader_settings')} />
</ListItemLink>
<ListItemLink to="/settings/librarySettings">
<ListItemIcon>
<CollectionsOutlinedBookmarkIcon />
</ListItemIcon>
<ListItemText primary={t('library.title')} />
</ListItemLink>
<ListItemLink to="/settings/downloadSettings">
<ListItemIcon>
<GetAppOutlinedIcon />
</ListItemIcon>
<ListItemText primary={t('download.title')} />
</ListItemLink>
<ListItemLink to="/settings/backup">
<ListItemIcon>
<BackupIcon />
</ListItemIcon>
<ListItemText primary={t('settings.backup.title')} />
</ListItemLink>
<ListItem>
<ListItemIcon>
<Brightness6Icon />
</ListItemIcon>
<ListItemText primary={t('settings.label.dark_theme')} />
<ListItemSecondaryAction>
<Switch edge="end" checked={darkTheme} onChange={() => setDarkTheme(!darkTheme)} />
</ListItemSecondaryAction>
</ListItem>
<NumberSetting
settingTitle={t('settings.label.manga_item_width')}
settingValue={`px:${itemWidth}`}
settingIcon={itemWidthIcon}
value={itemWidth}
defaultValue={DEFAULT_ITEM_WIDTH}
minValue={100}
maxValue={1000}
stepSize={10}
dialogTitle={t('settings.label.manga_item_width')}
valueUnit="px"
showSlider
handleUpdate={setItemWidth}
<List sx={{ padding: 0 }}>
<ListItemLink to="/settings/categories">
<ListItemIcon>
<ListAltIcon />
</ListItemIcon>
<ListItemText primary={t('category.title.categories')} />
</ListItemLink>
<ListItemLink to="/settings/defaultReaderSettings">
<ListItemIcon>
<AutoStoriesIcon />
</ListItemIcon>
<ListItemText primary={t('reader.settings.title.default_reader_settings')} />
</ListItemLink>
<ListItemLink to="/settings/librarySettings">
<ListItemIcon>
<CollectionsOutlinedBookmarkIcon />
</ListItemIcon>
<ListItemText primary={t('library.title')} />
</ListItemLink>
<ListItemLink to="/settings/downloadSettings">
<ListItemIcon>
<GetAppOutlinedIcon />
</ListItemIcon>
<ListItemText primary={t('download.title')} />
</ListItemLink>
<ListItemLink to="/settings/backup">
<ListItemIcon>
<BackupIcon />
</ListItemIcon>
<ListItemText primary={t('settings.backup.title')} />
</ListItemLink>
<ListItem>
<ListItemIcon>
<Brightness6Icon />
</ListItemIcon>
<ListItemText primary={t('settings.label.dark_theme')} />
<ListItemSecondaryAction>
<Switch edge="end" checked={darkTheme} onChange={() => setDarkTheme(!darkTheme)} />
</ListItemSecondaryAction>
</ListItem>
<NumberSetting
settingTitle={t('settings.label.manga_item_width')}
settingValue={`px:${itemWidth}`}
settingIcon={itemWidthIcon}
value={itemWidth}
defaultValue={DEFAULT_ITEM_WIDTH}
minValue={100}
maxValue={1000}
stepSize={10}
dialogTitle={t('settings.label.manga_item_width')}
valueUnit="px"
showSlider
handleUpdate={setItemWidth}
/>
<ListItem>
<ListItemIcon>
<FavoriteIcon />
</ListItemIcon>
<ListItemText
primary={t('settings.label.show_nsfw')}
secondary={t('settings.label.show_nsfw_description')}
/>
<ListItem>
<ListItemIcon>
<FavoriteIcon />
</ListItemIcon>
<ListItemText
primary={t('settings.label.show_nsfw')}
secondary={t('settings.label.show_nsfw_description')}
/>
<ListItemSecondaryAction>
<Switch edge="end" checked={showNsfw} onChange={() => setShowNsfw(!showNsfw)} />
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemIcon>
<CachedIcon />
</ListItemIcon>
<ListItemText
primary={t('settings.label.image_cache')}
secondary={t('settings.label.image_cache_description')}
/>
<ListItemSecondaryAction>
<Switch edge="end" checked={useCache} onChange={() => setUseCache(!useCache)} />
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemIcon>
<LanguageIcon />
</ListItemIcon>
<ListItemText
primary={t('global.language.label.language')}
secondary={
<>
<span>{t('settings.label.language_description')} </span>
<Link href="https://hosted.weblate.org/projects/suwayomi/tachidesk-webui">
{t('global.language.title.weblate')}
</Link>
</>
}
/>
<ListItemSecondaryAction>
<Select
MenuProps={{ PaperProps: { style: { maxHeight: 150 } } }}
value={i18n.language}
onChange={({ target: { value: language } }) => i18n.changeLanguage(language)}
>
{Object.keys(i18n.services.resourceStore.data).map((language) => (
<MenuItem key={language} value={language}>
{langCodeToName(language)}
</MenuItem>
))}
</Select>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemIcon>
<DnsIcon />
</ListItemIcon>
<ListItemText primary={t('settings.about.label.server_address')} secondary={serverAddress} />
<ListItemSecondaryAction>
<Tooltip title={t('global.button.edit')}>
<IconButton
onClick={() => {
handleDialogOpen();
}}
size="large"
>
<EditIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
<ListItemLink to="/settings/about">
<ListItemIcon>
<InfoIcon />
</ListItemIcon>
<ListItemText primary={t('settings.about.title')} />
</ListItemLink>
</List>
<Dialog open={dialogOpen} onClose={handleDialogCancel}>
<DialogContent>
<DialogContentText>{t('settings.server_address.dialog.label.enter_address')}</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label={t('settings.about.label.server_address')}
type="text"
fullWidth
value={dialogValue}
placeholder="http://127.0.0.1:4567"
onChange={(e) => setDialogValue(e.target.value)}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleDialogCancel} color="primary">
{t('global.button.cancel')}
</Button>
<Button onClick={handleDialogSubmit} color="primary">
{t('global.button.set')}
</Button>
</DialogActions>
</Dialog>
</>
<ListItemSecondaryAction>
<Switch edge="end" checked={showNsfw} onChange={() => setShowNsfw(!showNsfw)} />
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemIcon>
<CachedIcon />
</ListItemIcon>
<ListItemText
primary={t('settings.label.image_cache')}
secondary={t('settings.label.image_cache_description')}
/>
<ListItemSecondaryAction>
<Switch edge="end" checked={useCache} onChange={() => setUseCache(!useCache)} />
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemIcon>
<LanguageIcon />
</ListItemIcon>
<ListItemText
primary={t('global.language.label.language')}
secondary={
<>
<span>{t('settings.label.language_description')} </span>
<Link href="https://hosted.weblate.org/projects/suwayomi/tachidesk-webui">
{t('global.language.title.weblate')}
</Link>
</>
}
/>
<ListItemSecondaryAction>
<Select
MenuProps={{ PaperProps: { style: { maxHeight: 150 } } }}
value={i18n.language}
onChange={({ target: { value: language } }) => i18n.changeLanguage(language)}
>
{Object.keys(i18n.services.resourceStore.data).map((language) => (
<MenuItem key={language} value={language}>
{langCodeToName(language)}
</MenuItem>
))}
</Select>
</ListItemSecondaryAction>
</ListItem>
<ListItemLink to="/settings/server">
<ListItemIcon>
<DnsIcon />
</ListItemIcon>
<ListItemText primary={t('settings.server.title.server')} />
</ListItemLink>
<ListItemLink to="/settings/about">
<ListItemIcon>
<InfoIcon />
</ListItemIcon>
<ListItemText primary={t('settings.about.title')} />
</ListItemLink>
</List>
);
}

View File

@@ -45,7 +45,7 @@ export function About() {
<List>
<ListItem>
<ListItemText
primary={t('settings.about.label.server')}
primary={t('settings.server.title.server')}
secondary={`${about.name} ${about.buildType}`}
/>
</ListItem>

View File

@@ -21,7 +21,7 @@ import { ListItemLink } from '@/components/util/ListItemLink';
import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext';
import { BackupRestoreState } from '@/lib/graphql/generated/graphql.ts';
import { Progress } from '@/components/util/Progress.tsx';
import { ServerDirSetting } from '@/components/settings/ServerDirSetting.tsx';
import { TextSetting } from '@/components/settings/TextSetting.tsx';
import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
import { TimeSetting } from '@/components/settings/TimeSetting.tsx';
import { ServerSettings } from '@/typings.ts';
@@ -188,11 +188,11 @@ export function Backup() {
</ListSubheader>
}
>
<ServerDirSetting
<TextSetting
settingName={t('settings.backup.automated.location.label.title')}
dialogDescription={t('settings.backup.automated.location.label.description')}
dirPath={backupSettings?.backupPath}
handlePathChange={(path) => updateSetting('backupPath', path)}
value={backupSettings?.backupPath}
handleChange={(path) => updateSetting('backupPath', path)}
/>
<TimeSetting
settingName={t('settings.backup.automated.label.time')}

View File

@@ -12,7 +12,7 @@ import List from '@mui/material/List';
import { ListItem, ListItemText, Switch } from '@mui/material';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import ListSubheader from '@mui/material/ListSubheader';
import { ServerDirSetting } from '@/components/settings/ServerDirSetting';
import { TextSetting } from '@/components/settings/TextSetting.tsx';
import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
import { ServerSettings } from '@/typings.ts';
import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -59,11 +59,11 @@ export const DownloadSettings = () => {
return (
<List>
<ServerDirSetting
<TextSetting
settingName={t('download.settings.download_path.label.title')}
dialogDescription={t('download.settings.download_path.label.description')}
dirPath={downloadSettings?.downloadsPath}
handlePathChange={(path) => updateSetting('downloadsPath', path)}
value={downloadSettings?.downloadsPath}
handleChange={(path) => updateSetting('downloadsPath', path)}
/>
<ListItem>
<ListItemText primary={t('download.settings.file_type.label.cbz')} />

View File

@@ -0,0 +1,272 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useTranslation } from 'react-i18next';
import { useContext, useEffect } from 'react';
import { List, ListItem, ListItemText, Switch } from '@mui/material';
import ListSubheader from '@mui/material/ListSubheader';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { useLocalStorage } from '@/util/useLocalStorage.tsx';
import { TextSetting } from '@/components/settings/TextSetting.tsx';
import { ServerSettings as GqlServerSettings } from '@/typings.ts';
import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
type ServerSettingsType = Pick<
GqlServerSettings,
| 'ip'
| 'port'
| 'socksProxyEnabled'
| 'socksProxyHost'
| 'socksProxyPort'
| 'debugLogsEnabled'
| 'gqlDebugLogsEnabled'
| 'systemTrayEnabled'
| 'basicAuthEnabled'
| 'basicAuthUsername'
| 'basicAuthPassword'
| 'maxSourcesInParallel'
| 'localSourcePath'
>;
const extractDownloadSettings = (settings: GqlServerSettings): ServerSettingsType => ({
ip: settings.ip,
port: settings.port,
socksProxyEnabled: settings.socksProxyEnabled,
socksProxyHost: settings.socksProxyHost,
socksProxyPort: settings.socksProxyPort,
debugLogsEnabled: settings.debugLogsEnabled,
gqlDebugLogsEnabled: settings.gqlDebugLogsEnabled,
systemTrayEnabled: settings.systemTrayEnabled,
basicAuthEnabled: settings.basicAuthEnabled,
basicAuthUsername: settings.basicAuthUsername,
basicAuthPassword: settings.basicAuthPassword,
maxSourcesInParallel: settings.maxSourcesInParallel,
localSourcePath: settings.localSourcePath,
});
export const ServerSettings = () => {
const { t } = useTranslation();
const { setTitle, setAction } = useContext(NavBarContext);
useSetDefaultBackTo('settings');
useEffect(() => {
setTitle(t('settings.server.title.settings'));
setAction(null);
}, [t]);
const { data } = requestManager.useGetServerSettings();
const serverSettings = data ? extractDownloadSettings(data.settings) : undefined;
const [mutateSettings] = requestManager.useUpdateServerSettings();
const [serverAddress, setServerAddress] = useLocalStorage<string>('serverBaseURL', '');
const handleServerAddressChange = (address: string) => {
const serverBaseUrl = address.replaceAll(/(\/)+$/g, '');
setServerAddress(serverBaseUrl);
requestManager.updateClient({ baseURL: serverBaseUrl });
};
const updateSetting = <Setting extends keyof ServerSettingsType>(
setting: Setting,
value: ServerSettingsType[Setting],
) => {
mutateSettings({ variables: { input: { settings: { [setting]: value } } } });
};
return (
<List>
<List
subheader={
<ListSubheader component="div" id="server-settings-client">
{t('global.label.client')}
</ListSubheader>
}
>
<TextSetting
settingName={t('settings.about.label.server_address')}
handleChange={handleServerAddressChange}
value={serverAddress}
placeholder="http://localhost:4567"
/>
</List>
<List
subheader={
<ListSubheader component="div" id="server-settings-requests">
{t('settings.server.requests.title')}
</ListSubheader>
}
>
<NumberSetting
settingTitle={t('settings.server.requests.sources.parallel.label.title')}
settingValue={t('settings.server.requests.sources.parallel.label.value', {
value: serverSettings?.maxSourcesInParallel,
count: serverSettings?.maxSourcesInParallel,
})}
valueUnit={t('source.title')}
value={serverSettings?.maxSourcesInParallel ?? 6}
defaultValue={6}
minValue={1}
maxValue={20}
showSlider
stepSize={1}
dialogTitle={t('settings.server.requests.sources.parallel.label.title')}
handleUpdate={(parallelSources) => updateSetting('maxSourcesInParallel', parallelSources)}
/>
</List>
<List
subheader={
<ListSubheader component="div" id="server-settings-requests">
{t('settings.server.requests.title')}
</ListSubheader>
}
>
<TextSetting
settingName={t('settings.server.local_source.path.label.title')}
dialogDescription={t('settings.server.local_source.path.label.description')}
value={serverSettings?.localSourcePath}
handleChange={(path) => updateSetting('localSourcePath', path)}
/>
</List>
<List
subheader={
<ListSubheader component="div" id="server-settings-server-address">
{t('settings.server.address.server.title')}
</ListSubheader>
}
>
<TextSetting
settingName={t('settings.server.address.server.label.ip')}
handleChange={(ip) => updateSetting('ip', ip)}
value={serverSettings?.ip}
placeholder="0.0.0.0"
/>
<NumberSetting
settingTitle={t('settings.server.address.server.label.port')}
settingValue={serverSettings?.port.toString()}
dialogTitle={t('settings.server.address.server.label.port')}
handleUpdate={(port) => updateSetting('port', port)}
value={serverSettings?.port ?? 4567}
defaultValue={4567}
valueUnit={t('settings.server.address.server.label.port')}
/>
</List>
<List
subheader={
<ListSubheader component="div" id="server-settings-socks-proxy">
{t('settings.server.socks_proxy.title')}
</ListSubheader>
}
>
<ListItem>
<ListItemText primary={t('settings.server.socks_proxy.label.enable')} />
<ListItemSecondaryAction>
<Switch
edge="end"
checked={!!serverSettings?.socksProxyEnabled}
onChange={(e) => updateSetting('socksProxyEnabled', e.target.checked)}
/>
</ListItemSecondaryAction>
</ListItem>
{!!serverSettings?.socksProxyEnabled && (
<>
<TextSetting
settingName={t('settings.server.socks_proxy.label.host')}
value={serverSettings.socksProxyHost}
handleChange={(proxyHost) => updateSetting('socksProxyHost', proxyHost)}
/>
<TextSetting
settingName={t('settings.server.socks_proxy.label.port')}
value={serverSettings.socksProxyPort}
handleChange={(proxyPort) => updateSetting('socksProxyPort', proxyPort)}
/>
</>
)}
</List>
<List
subheader={
<ListSubheader component="div" id="server-settings-auth">
{t('settings.server.auth.title')}
</ListSubheader>
}
>
<ListItem>
<ListItemText primary={t('settings.server.auth.basic.label.enable')} />
<ListItemSecondaryAction>
<Switch
edge="end"
checked={!!serverSettings?.basicAuthEnabled}
onChange={(e) => updateSetting('basicAuthEnabled', e.target.checked)}
/>
</ListItemSecondaryAction>
</ListItem>
{!!serverSettings?.basicAuthEnabled && (
<>
<TextSetting
settingName={t('settings.server.auth.basic.label.username')}
value={serverSettings?.basicAuthUsername}
handleChange={(authUsername) => updateSetting('basicAuthUsername', authUsername)}
/>
<TextSetting
settingName={t('settings.server.auth.basic.label.password')}
value={serverSettings?.basicAuthPassword}
isPassword
handleChange={(authPassword) => updateSetting('basicAuthPassword', authPassword)}
/>
</>
)}
</List>
<List
subheader={
<ListSubheader component="div" id="server-settings-misc">
{t('settings.server.misc.title')}
</ListSubheader>
}
>
<ListItem>
<ListItemText primary={t('settings.server.misc.log_level.label.server')} />
<ListItemSecondaryAction>
<Switch
edge="end"
checked={!!serverSettings?.debugLogsEnabled}
onChange={(e) => updateSetting('debugLogsEnabled', e.target.checked)}
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemText
primary={t('settings.server.misc.log_level.graphql.label.title')}
secondary={t('settings.server.misc.log_level.graphql.label.description')}
/>
<ListItemSecondaryAction>
<Switch
edge="end"
checked={!!serverSettings?.gqlDebugLogsEnabled}
onChange={(e) => updateSetting('gqlDebugLogsEnabled', e.target.checked)}
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemText
primary={t('settings.server.misc.tray_icon.label.title')}
secondary={t('settings.server.misc.tray_icon.label.description')}
/>
<ListItemSecondaryAction>
<Switch
edge="end"
checked={!!serverSettings?.systemTrayEnabled}
onChange={(e) => updateSetting('systemTrayEnabled', e.target.checked)}
/>
</ListItemSecondaryAction>
</ListItem>
</List>
</List>
);
};