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
@@ -33,6 +33,7 @@ import '@/i18n';
|
||||
import { LibrarySettings } from '@/screens/settings/LibrarySettings';
|
||||
import { DefaultNavBar } from '@/components/navbar/DefaultNavBar';
|
||||
import { DownloadSettings } from '@/screens/settings/DownloadSettings.tsx';
|
||||
import { ServerSettings } from '@/screens/settings/ServerSettings.tsx';
|
||||
|
||||
if (__DEV__) {
|
||||
// Adds messages only in a dev environment
|
||||
@@ -66,6 +67,7 @@ export const App: React.FC = () => (
|
||||
<Route path="librarySettings" element={<LibrarySettings />} />
|
||||
<Route path="downloadSettings" element={<DownloadSettings />} />
|
||||
<Route path="backup" element={<Backup />} />
|
||||
<Route path="server" element={<ServerSettings />} />
|
||||
</Route>
|
||||
|
||||
{/* Manga Routes */}
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
/*
|
||||
* 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 { Button, Dialog, DialogTitle, ListItemText } from '@mui/material';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import DialogContentText from '@mui/material/DialogContentText';
|
||||
|
||||
export const ServerDirSetting = ({
|
||||
settingName,
|
||||
dialogDescription,
|
||||
dirPath,
|
||||
handlePathChange,
|
||||
}: {
|
||||
settingName: string;
|
||||
dialogDescription: string;
|
||||
dirPath?: string;
|
||||
handlePathChange: (path: string) => void;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [dialogDirPath, setDialogDirPath] = useState(dirPath ?? '');
|
||||
|
||||
useEffect(() => {
|
||||
if (!dirPath) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDialogDirPath(dirPath);
|
||||
}, [dirPath]);
|
||||
|
||||
const closeDialog = () => {
|
||||
setIsDialogOpen(false);
|
||||
};
|
||||
|
||||
const updateSetting = () => {
|
||||
closeDialog();
|
||||
handlePathChange(dialogDirPath);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ListItemButton onClick={() => setIsDialogOpen(true)}>
|
||||
<ListItemText
|
||||
primary={settingName}
|
||||
secondary={dirPath ?? t('global.label.loading')}
|
||||
secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
|
||||
<Dialog open={isDialogOpen} onClose={closeDialog} fullWidth>
|
||||
<DialogContent>
|
||||
<DialogTitle sx={{ paddingLeft: 0 }}>{settingName}</DialogTitle>
|
||||
<DialogContentText sx={{ paddingBottom: '10px' }}>{dialogDescription}</DialogContentText>
|
||||
<TextField
|
||||
sx={{
|
||||
width: '100%',
|
||||
margin: 'auto',
|
||||
}}
|
||||
autoFocus
|
||||
value={dialogDirPath}
|
||||
type="text"
|
||||
onChange={(e) => setDialogDirPath(e.target.value)}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={closeDialog} color="primary">
|
||||
{t('global.button.cancel')}
|
||||
</Button>
|
||||
<Button onClick={() => updateSetting()} color="primary">
|
||||
{t('global.button.ok')}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
117
src/components/settings/TextSetting.tsx
Normal file
117
src/components/settings/TextSetting.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
/*
|
||||
* 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 { Button, Dialog, DialogTitle, InputAdornment, ListItemText } from '@mui/material';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import DialogContentText from '@mui/material/DialogContentText';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import { Visibility, VisibilityOff } from '@mui/icons-material';
|
||||
|
||||
export const TextSetting = ({
|
||||
settingName,
|
||||
dialogDescription,
|
||||
value,
|
||||
handleChange,
|
||||
isPassword = false,
|
||||
placeholder = '',
|
||||
}: {
|
||||
settingName: string;
|
||||
dialogDescription?: string;
|
||||
value?: string;
|
||||
handleChange: (value: string) => void;
|
||||
isPassword?: boolean;
|
||||
placeholder?: string;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [dialogValue, setDialogValue] = useState(value ?? '');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const handleClickShowPassword = () => setShowPassword((show) => !show);
|
||||
|
||||
useEffect(() => {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDialogValue(value);
|
||||
}, [value]);
|
||||
|
||||
const closeDialog = (resetValue: boolean = true) => {
|
||||
if (resetValue) {
|
||||
setDialogValue(value ?? '');
|
||||
}
|
||||
|
||||
setShowPassword(false);
|
||||
setIsDialogOpen(false);
|
||||
};
|
||||
|
||||
const updateSetting = () => {
|
||||
closeDialog(false);
|
||||
handleChange(dialogValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ListItemButton onClick={() => setIsDialogOpen(true)}>
|
||||
<ListItemText
|
||||
primary={settingName}
|
||||
secondary={isPassword ? value?.replace(/./g, '*') : value ?? t('global.label.loading')}
|
||||
secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
|
||||
<Dialog open={isDialogOpen} onClose={() => closeDialog()} fullWidth>
|
||||
<DialogContent>
|
||||
<DialogTitle sx={{ paddingLeft: 0 }}>{settingName}</DialogTitle>
|
||||
{!!dialogDescription && (
|
||||
<DialogContentText sx={{ paddingBottom: '10px' }}>{dialogDescription}</DialogContentText>
|
||||
)}
|
||||
<TextField
|
||||
sx={{
|
||||
width: '100%',
|
||||
margin: 'auto',
|
||||
}}
|
||||
autoFocus
|
||||
placeholder={placeholder}
|
||||
value={dialogValue}
|
||||
type={isPassword && !showPassword ? 'password' : 'text'}
|
||||
onChange={(e) => setDialogValue(e.target.value)}
|
||||
InputProps={{
|
||||
endAdornment: isPassword ? (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="toggle password visibility"
|
||||
onClick={handleClickShowPassword}
|
||||
edge="end"
|
||||
>
|
||||
{showPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
) : null,
|
||||
}}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => closeDialog()} color="primary">
|
||||
{t('global.button.cancel')}
|
||||
</Button>
|
||||
<Button onClick={() => updateSetting()} color="primary">
|
||||
{t('global.button.ok')}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -283,13 +283,16 @@
|
||||
},
|
||||
"label": {
|
||||
"browse": "Browse",
|
||||
"client": "Client",
|
||||
"display": "Display",
|
||||
"filter": "Filter",
|
||||
"loading": "Loading…",
|
||||
"never": "Never",
|
||||
"none": "None",
|
||||
"password": "Password",
|
||||
"sort": "Sort",
|
||||
"unknown": "Unknown"
|
||||
"unknown": "Unknown",
|
||||
"username": "Username"
|
||||
},
|
||||
"language": {
|
||||
"label": {
|
||||
@@ -488,7 +491,6 @@
|
||||
"build_time": "Build time",
|
||||
"discord": "Discord",
|
||||
"github": "GitHub",
|
||||
"server": "Server",
|
||||
"server_address": "Server address",
|
||||
"server_version": "Server version"
|
||||
},
|
||||
@@ -534,11 +536,86 @@
|
||||
"show_nsfw": "Show NSFW",
|
||||
"show_nsfw_description": "Hide NSFW extensions and sources"
|
||||
},
|
||||
"server_address": {
|
||||
"server": {
|
||||
"address": {
|
||||
"client": {
|
||||
"dialog": {
|
||||
"label": {
|
||||
"enter_address": "Enter server address"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"description": "The address the client will use to connect to the server"
|
||||
}
|
||||
},
|
||||
"server": {
|
||||
"label": {
|
||||
"ip": "IP",
|
||||
"port": "Port"
|
||||
},
|
||||
"title": "Server bindings"
|
||||
}
|
||||
},
|
||||
"auth": {
|
||||
"basic": {
|
||||
"label": {
|
||||
"enable": "Use basic authentication",
|
||||
"password": "Basic authentication $t(global.label.password, lowercase)",
|
||||
"username": "Basic authentication $t(global.label.username, lowercase)"
|
||||
}
|
||||
},
|
||||
"title": "Authentication"
|
||||
},
|
||||
"local_source": {
|
||||
"path": {
|
||||
"label": {
|
||||
"description": "The path to the directory on the server where local source files are saved in",
|
||||
"title": "Local source location"
|
||||
}
|
||||
}
|
||||
},
|
||||
"misc": {
|
||||
"log_level": {
|
||||
"graphql": {
|
||||
"label": {
|
||||
"description": "This includes logs with non privacy safe information",
|
||||
"title": "Enable graphql debug logs"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"server": "Enable debug logs"
|
||||
}
|
||||
},
|
||||
"title": "Misc",
|
||||
"tray_icon": {
|
||||
"label": {
|
||||
"description": "This icon will be shown on the system that is running the server",
|
||||
"title": "Show icon in system tray"
|
||||
}
|
||||
}
|
||||
},
|
||||
"requests": {
|
||||
"sources": {
|
||||
"parallel": {
|
||||
"label": {
|
||||
"title": "Parallel source requests",
|
||||
"value": "{{value}} $t(source.title)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"title": "Requests"
|
||||
},
|
||||
"socks_proxy": {
|
||||
"label": {
|
||||
"enable": "Use SOCKS5 proxy",
|
||||
"host": "SOCKS5 host",
|
||||
"port": "SOCKS5 port"
|
||||
},
|
||||
"title": "SOCKS proxy"
|
||||
},
|
||||
"title": {
|
||||
"server": "Server",
|
||||
"settings": "Server Settings"
|
||||
}
|
||||
},
|
||||
"title": "Settings"
|
||||
|
||||
@@ -455,5 +455,8 @@ export const SERVER_SETTINGS = gql`
|
||||
backupTime
|
||||
backupInterval
|
||||
backupTTL
|
||||
|
||||
# local source
|
||||
localSourcePath
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -2108,7 +2108,7 @@ export type WebuiUpdateInfoFragment = { __typename?: 'WebUIUpdateInfo', channel:
|
||||
|
||||
export type WebuiUpdateStatusFragment = { __typename?: 'WebUIUpdateStatus', progress: number, state: UpdateState, info: { __typename?: 'WebUIUpdateInfo', channel: string, tag: string, updateAvailable: boolean } };
|
||||
|
||||
export type ServerSettingsFragment = { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number };
|
||||
export type ServerSettingsFragment = { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number, localSourcePath: string };
|
||||
|
||||
export type CreateBackupMutationVariables = Exact<{
|
||||
input: CreateBackupInput;
|
||||
@@ -2388,14 +2388,14 @@ export type ResetServerSettingsMutationVariables = Exact<{
|
||||
}>;
|
||||
|
||||
|
||||
export type ResetServerSettingsMutation = { __typename?: 'Mutation', resetSettings: { __typename?: 'ResetSettingsPayload', clientMutationId?: string | null, settings: { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number } } };
|
||||
export type ResetServerSettingsMutation = { __typename?: 'Mutation', resetSettings: { __typename?: 'ResetSettingsPayload', clientMutationId?: string | null, settings: { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number, localSourcePath: string } } };
|
||||
|
||||
export type UpdateServerSettingsMutationVariables = Exact<{
|
||||
input: SetSettingsInput;
|
||||
}>;
|
||||
|
||||
|
||||
export type UpdateServerSettingsMutation = { __typename?: 'Mutation', setSettings: { __typename?: 'SetSettingsPayload', clientMutationId?: string | null, settings: { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number } } };
|
||||
export type UpdateServerSettingsMutation = { __typename?: 'Mutation', setSettings: { __typename?: 'SetSettingsPayload', clientMutationId?: string | null, settings: { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number, localSourcePath: string } } };
|
||||
|
||||
export type GetSourceMangasFetchMutationVariables = Exact<{
|
||||
input: FetchSourceMangaInput;
|
||||
@@ -2591,7 +2591,7 @@ export type GetWebuiUpdateStatusQuery = { __typename?: 'Query', getWebUIUpdateSt
|
||||
export type GetServerSettingsQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
export type GetServerSettingsQuery = { __typename?: 'Query', settings: { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number } };
|
||||
export type GetServerSettingsQuery = { __typename?: 'Query', settings: { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number, localSourcePath: string } };
|
||||
|
||||
export type GetSourceQueryVariables = Exact<{
|
||||
id: Scalars['LongString']['input'];
|
||||
|
||||
@@ -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,34 +44,14 @@ 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>
|
||||
@@ -188,24 +159,12 @@ export function Settings() {
|
||||
</Select>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemLink to="/settings/server">
|
||||
<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>
|
||||
<ListItemText primary={t('settings.server.title.server')} />
|
||||
</ListItemLink>
|
||||
<ListItemLink to="/settings/about">
|
||||
<ListItemIcon>
|
||||
<InfoIcon />
|
||||
@@ -213,31 +172,5 @@ export function Settings() {
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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')}
|
||||
|
||||
@@ -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')} />
|
||||
|
||||
272
src/screens/settings/ServerSettings.tsx
Normal file
272
src/screens/settings/ServerSettings.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user