Feature/server settings

src/App.tsx

@@ -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 */}

src/components/settings/TextSetting.tsx

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

src/i18n/locale/en.json

@@ -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": {
-      "dialog": {
-        "label": {
-          "enter_address": "Enter 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"

src/lib/graphql/Fragments.ts

@@ -455,5 +455,8 @@ export const SERVER_SETTINGS = gql`
         backupTime
         backupInterval
         backupTTL
+
+        # local source
+        localSourcePath
     }
 `;