[skip ci] Update server settings for Authentication modes (#984)

* Update GQL interface

* Update queried server settings

* package.json: Fix GQL script

* Basic AuthMode setting

* Setting disable, disclaimer on login page

* Update gql generated files

* Alphabetical sort en.json

* Fix constants name typos

* Move settings types and constants to corresponding files

* Rename setting constants

* Update required server version

---------

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

src/modules/settings/screens/ServerSettings.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useMemo } from 'react';
 import Link from '@mui/material/Link';
 import List from '@mui/material/List';
@@ -29,43 +29,11 @@ import {
 } from '@/modules/settings/services/ServerSettingsMetadata.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { MetadataUpdateSettings } from '@/modules/app-updates/AppUpdateChecker.types.ts';
-import { ServerSettings as GqlServerSettings } from '@/modules/settings/Settings.types.ts';
+import { ServerSettings as GqlServerSettings, ServerSettingsType } from '@/modules/settings/Settings.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
-import { SortOrder } from '@/lib/graphql/generated/graphql';
-
-type ServerSettingsType = Pick<
-    GqlServerSettings,
-    | 'ip'
-    | 'port'
-    | 'socksProxyEnabled'
-    | 'socksProxyVersion'
-    | 'socksProxyHost'
-    | 'socksProxyPort'
-    | 'socksProxyUsername'
-    | 'socksProxyPassword'
-    | 'debugLogsEnabled'
-    | 'systemTrayEnabled'
-    | 'maxLogFiles'
-    | 'maxLogFileSize'
-    | 'maxLogFolderSize'
-    | 'basicAuthEnabled'
-    | 'basicAuthUsername'
-    | 'basicAuthPassword'
-    | 'flareSolverrEnabled'
-    | 'flareSolverrTimeout'
-    | 'flareSolverrUrl'
-    | 'flareSolverrSessionName'
-    | 'flareSolverrSessionTtl'
-    | 'flareSolverrAsResponseFallback'
-    | 'opdsUseBinaryFileSizes'
-    | 'opdsItemsPerPage'
-    | 'opdsEnablePageReadProgress'
-    | 'opdsMarkAsReadOnDownload'
-    | 'opdsShowOnlyUnreadChapters'
-    | 'opdsShowOnlyDownloadedChapters'
-    | 'opdsChapterSortOrder'
->;
+import { AuthMode, SortOrder } from '@/lib/graphql/generated/graphql';
+import { AUTH_MODES_SELECT_VALUES } from '@/modules/settings/Settings.constants.ts';
 
 const extractServerSettings = (settings: GqlServerSettings): ServerSettingsType => ({
     ip: settings.ip,
@@ -81,9 +49,9 @@ const extractServerSettings = (settings: GqlServerSettings): ServerSettingsType
     maxLogFiles: settings.maxLogFiles,
     maxLogFileSize: settings.maxLogFileSize,
     maxLogFolderSize: settings.maxLogFolderSize,
-    basicAuthEnabled: settings.basicAuthEnabled,
-    basicAuthUsername: settings.basicAuthUsername,
-    basicAuthPassword: settings.basicAuthPassword,
+    authMode: settings.authMode,
+    authUsername: settings.authUsername,
+    authPassword: settings.authPassword,
     flareSolverrEnabled: settings.flareSolverrEnabled,
     flareSolverrTimeout: settings.flareSolverrTimeout,
     flareSolverrUrl: settings.flareSolverrUrl,
@@ -216,6 +184,7 @@ export const ServerSettings = () => {
     }
 
     const serverSettings = extractServerSettings(data!.settings);
+    const authModeDisabled = !serverSettings.authUsername.trim() || !serverSettings.authPassword.trim();
 
     return (
         <List sx={{ pt: 0 }}>
@@ -295,27 +264,25 @@ export const ServerSettings = () => {
                     </ListSubheader>
                 }
             >
-                <ListItem>
-                    <ListItemText primary={t('settings.server.auth.basic.label.enable')} />
-                    <Switch
-                        edge="end"
-                        checked={serverSettings.basicAuthEnabled}
-                        disabled={!serverSettings.basicAuthUsername.trim() && !serverSettings.basicAuthPassword.trim()}
-                        onChange={(e) => updateSetting('basicAuthEnabled', e.target.checked)}
-                    />
-                </ListItem>
-                <TextSetting
-                    settingName={t('settings.server.auth.basic.label.username')}
-                    value={serverSettings.basicAuthUsername}
-                    validate={(value) => !serverSettings.basicAuthEnabled || !!value.trim()}
-                    handleChange={(authUsername) => updateSetting('basicAuthUsername', authUsername)}
+                <SelectSetting<AuthMode>
+                    settingName={t('settings.server.auth.label.title')}
+                    value={serverSettings.authMode}
+                    values={AUTH_MODES_SELECT_VALUES}
+                    handleChange={(mode) => updateSetting('authMode', mode)}
+                    disabled={authModeDisabled}
                 />
                 <TextSetting
-                    settingName={t('settings.server.auth.basic.label.password')}
-                    value={serverSettings.basicAuthPassword}
+                    settingName={t('settings.server.auth.label.username')}
+                    value={serverSettings.authUsername}
+                    validate={(value) => serverSettings.authMode === AuthMode.None || !!value.trim()}
+                    handleChange={(authUsername) => updateSetting('authUsername', authUsername)}
+                />
+                <TextSetting
+                    settingName={t('settings.server.auth.label.password')}
+                    value={serverSettings.authPassword}
                     isPassword
-                    validate={(value) => !serverSettings.basicAuthEnabled || !!value.trim()}
-                    handleChange={(authPassword) => updateSetting('basicAuthPassword', authPassword)}
+                    validate={(value) => serverSettings.authMode === AuthMode.None || !!value.trim()}
+                    handleChange={(authPassword) => updateSetting('authPassword', authPassword)}
                 />
             </List>
             <List

src/modules/settings/screens/WebUISettings.tsx

@@ -14,11 +14,7 @@ import Switch from '@mui/material/Switch';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { WebUIUpdateIntervalSetting } from '@/modules/settings/components/webUI/WebUIUpdateIntervalSetting.tsx';
 import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
-import {
-    SelectSetting,
-    SelectSettingValue,
-    SelectSettingValueDisplayInfo,
-} from '@/modules/core/components/settings/SelectSetting.tsx';
+import { SelectSetting } from '@/modules/core/components/settings/SelectSetting.tsx';
 import { WebUiChannel, WebUiFlavor, WebUiInterface } from '@/lib/graphql/generated/graphql.ts';
 import { LoadingPlaceholder } from '@/modules/core/components/feedback/LoadingPlaceholder.tsx';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
@@ -29,84 +25,14 @@ import {
 } from '@/modules/settings/services/ServerSettingsMetadata.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { MetadataUpdateSettings } from '@/modules/app-updates/AppUpdateChecker.types.ts';
-import { ServerSettings } from '@/modules/settings/Settings.types.ts';
+import { ServerSettings, WebUISettingsType } from '@/modules/settings/Settings.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
-
-type WebUISettingsType = Pick<
-    ServerSettings,
-    | 'webUIFlavor'
-    | 'initialOpenInBrowserEnabled'
-    | 'webUIInterface'
-    | 'electronPath'
-    | 'webUIChannel'
-    | 'webUIUpdateCheckInterval'
->;
-
-const FLAVORS = Object.values(WebUiFlavor);
-const FLAVOR_TO_TRANSLATION_KEY: { [flavor in WebUiFlavor]: SelectSettingValueDisplayInfo } = {
-    [WebUiFlavor.Webui]: {
-        text: 'settings.webui.title.webui',
-        description: 'settings.webui.flavor.option.webui.label.description',
-        disclaimer: 'settings.webui.flavor.label.info',
-    },
-    [WebUiFlavor.Vui]: {
-        text: 'settings.webui.flavor.option.vui.label.title',
-        description: 'settings.webui.flavor.option.vui.label.description',
-        disclaimer: 'settings.webui.flavor.label.info',
-    },
-    [WebUiFlavor.Custom]: {
-        text: 'settings.webui.flavor.option.custom.label.title',
-        description: 'settings.webui.flavor.option.custom.label.description',
-    },
-};
-const FLAVOR_SELECT_VALUES: SelectSettingValue<WebUiFlavor>[] = FLAVORS.map((flavor) => [
-    flavor,
-    FLAVOR_TO_TRANSLATION_KEY[flavor],
-]);
-
-const CHANNELS = Object.values(WebUiChannel);
-const CHANNEL_TO_TRANSLATION_KEYS: {
-    [channel in WebUiChannel]: SelectSettingValueDisplayInfo;
-} = {
-    [WebUiChannel.Bundled]: {
-        text: 'settings.webui.channel.option.bundled.label.title',
-        description: 'settings.webui.channel.option.bundled.label.description',
-        disclaimer: 'settings.webui.flavor.label.info',
-    },
-    [WebUiChannel.Stable]: {
-        text: 'settings.webui.channel.option.stable.label.title',
-        description: 'settings.webui.channel.option.stable.label.description',
-        disclaimer: 'settings.webui.flavor.label.info',
-    },
-    [WebUiChannel.Preview]: {
-        text: 'settings.webui.channel.option.preview.label.title',
-        description: 'settings.webui.channel.option.preview.label.description',
-        disclaimer: 'settings.webui.channel.option.preview.label.disclaimer',
-    },
-};
-const CHANNEL_SELECT_VALUES: SelectSettingValue<WebUiChannel>[] = CHANNELS.map((channel) => [
-    channel,
-    CHANNEL_TO_TRANSLATION_KEYS[channel],
-]);
-
-const INTERFACES = Object.values(WebUiInterface);
-const INTERFACE_TO_TRANSLATION_KEYS: {
-    [webUIInterface in WebUiInterface]: SelectSettingValueDisplayInfo;
-} = {
-    [WebUiInterface.Browser]: {
-        text: 'settings.webui.interface.option.label.browser',
-        description: 'settings.webui.interface.label.description',
-    },
-    [WebUiInterface.Electron]: {
-        text: 'settings.webui.interface.option.label.electron',
-        description: 'settings.webui.interface.label.description',
-    },
-};
-const INTERFACE_SELECT_VALUES: SelectSettingValue<WebUiInterface>[] = INTERFACES.map((webUIInterface) => [
-    webUIInterface,
-    INTERFACE_TO_TRANSLATION_KEYS[webUIInterface],
-]);
+import {
+    WEB_UI_CHANNEL_SELECT_VALUES,
+    WEB_UI_FLAVOR_SELECT_VALUES,
+    WEB_UI_INTERFACE_SELECT_VALUES,
+} from '@/modules/settings/Settings.constants.ts';
 
 const extractWebUISettings = (settings: ServerSettings): WebUISettingsType => ({
     webUIFlavor: settings.webUIFlavor,
@@ -190,7 +116,7 @@ export const WebUISettings = () => {
             <SelectSetting<WebUiFlavor>
                 settingName={t('settings.webui.flavor.label.title')}
                 value={webUISettings.webUIFlavor}
-                values={FLAVOR_SELECT_VALUES}
+                values={WEB_UI_FLAVOR_SELECT_VALUES}
                 handleChange={(flavor) => updateSetting('webUIFlavor', flavor)}
             />
             <ListItem>
@@ -204,7 +130,7 @@ export const WebUISettings = () => {
             <SelectSetting<WebUiInterface>
                 settingName={t('settings.webui.interface.label.title')}
                 value={webUISettings.webUIInterface}
-                values={INTERFACE_SELECT_VALUES}
+                values={WEB_UI_INTERFACE_SELECT_VALUES}
                 handleChange={(webUIInterface) => updateSetting('webUIInterface', webUIInterface)}
             />
             <TextSetting
@@ -219,7 +145,7 @@ export const WebUISettings = () => {
             <SelectSetting<WebUiChannel>
                 settingName={t('settings.webui.channel.label.title')}
                 value={webUISettings.webUIChannel}
-                values={CHANNEL_SELECT_VALUES}
+                values={WEB_UI_CHANNEL_SELECT_VALUES}
                 handleChange={(channel) => updateSetting('webUIChannel', channel)}
                 disabled={isCustomWebUI}
             />