ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature/server settings (#458)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/settings/ServerDirSetting.tsx
View File

@@ -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
View 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>
</>
);
};