add cors / ssl ignore switches to all login components (#1606)

src/renderer/features/login/routes/login-route.tsx

@@ -13,6 +13,7 @@ import {
 import JellyfinIcon from '/@/renderer/features/servers/assets/jellyfin.png';
 import NavidromeIcon from '/@/renderer/features/servers/assets/navidrome.png';
 import SubsonicIcon from '/@/renderer/features/servers/assets/opensubsonic.png';
+import { IgnoreCorsSslSwitches } from '/@/renderer/features/servers/components/ignore-cors-ssl-switches';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { AppRoute } from '/@/renderer/router/routes';
@@ -229,6 +230,7 @@ const LoginRoute = () => {
                                     variant="filled"
                                     {...form.getInputProps('password')}
                                 />
+                                <IgnoreCorsSslSwitches />
                             </Stack>
 
                             <Button

src/renderer/features/servers/components/add-server-form.tsx

@@ -12,8 +12,10 @@ import {
 import JellyfinIcon from '/@/renderer/features/servers/assets/jellyfin.png';
 import NavidromeIcon from '/@/renderer/features/servers/assets/navidrome.png';
 import SubsonicIcon from '/@/renderer/features/servers/assets/opensubsonic.png';
+import { IgnoreCorsSslSwitches } from '/@/renderer/features/servers/components/ignore-cors-ssl-switches';
 import { useAuthStoreActions } from '/@/renderer/store';
 import { Checkbox } from '/@/shared/components/checkbox/checkbox';
+import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
 import { ModalButton } from '/@/shared/components/modal/model-shared';
 import { Paper } from '/@/shared/components/paper/paper';
@@ -334,6 +336,13 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
                             })}
                         />
                     )}
+                    {isElectron() && (
+                        <>
+                            <Divider />
+                            <IgnoreCorsSslSwitches />
+                            <Divider />
+                        </>
+                    )}
                     <Group grow justify="flex-end">
                         {onCancel && (
                             <ModalButton onClick={onCancel}>{t('common.cancel')}</ModalButton>

src/renderer/features/servers/components/ignore-cors-ssl-switches.tsx

@@ -0,0 +1,59 @@
+import isElectron from 'is-electron';
+import { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Group } from '/@/shared/components/group/group';
+import { Switch } from '/@/shared/components/switch/switch';
+import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
+
+const localSettings = isElectron() ? window.api.localSettings : null;
+
+export function IgnoreCorsSslSwitches() {
+    const { t } = useTranslation();
+
+    const [ignoreCORS, setIgnoreCORS] = useLocalStorage({
+        defaultValue: 'false',
+        key: 'ignore_cors',
+    });
+    const [ignoreSSL, setIgnoreSSL] = useLocalStorage({
+        defaultValue: 'false',
+        key: 'ignore_ssl',
+    });
+
+    const handleUpdateIgnoreCORS = (e: ChangeEvent<HTMLInputElement>) => {
+        setIgnoreCORS(String(e.currentTarget.checked));
+        localSettings?.set('ignore_cors', e.currentTarget.checked);
+    };
+
+    const handleUpdateIgnoreSSL = (e: ChangeEvent<HTMLInputElement>) => {
+        setIgnoreSSL(String(e.currentTarget.checked));
+        localSettings?.set('ignore_ssl', e.currentTarget.checked);
+    };
+
+    if (!isElectron()) {
+        return null;
+    }
+
+    return (
+        <>
+            <Group>
+                <Switch
+                    checked={ignoreCORS === 'true'}
+                    label={t('form.addServer.ignoreCors', {
+                        postProcess: 'sentenceCase',
+                    })}
+                    onChange={handleUpdateIgnoreCORS}
+                />
+            </Group>
+            <Group>
+                <Switch
+                    checked={ignoreSSL === 'true'}
+                    label={t('form.addServer.ignoreSsl', {
+                        postProcess: 'sentenceCase',
+                    })}
+                    onChange={handleUpdateIgnoreSSL}
+                />
+            </Group>
+        </>
+    );
+}

src/renderer/features/servers/components/server-list.tsx

@@ -1,12 +1,12 @@
 import { openContextModal } from '@mantine/modals';
 import isElectron from 'is-electron';
-import { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import JellyfinLogo from '/@/renderer/features/servers/assets/jellyfin.png';
 import NavidromeLogo from '/@/renderer/features/servers/assets/navidrome.png';
 import OpenSubsonicLogo from '/@/renderer/features/servers/assets/opensubsonic.png';
 import { AddServerForm } from '/@/renderer/features/servers/components/add-server-form';
+import { IgnoreCorsSslSwitches } from '/@/renderer/features/servers/components/ignore-cors-ssl-switches';
 import { ServerListItem } from '/@/renderer/features/servers/components/server-list-item';
 import { useCurrentServer, useServerList } from '/@/renderer/store';
 import { Accordion } from '/@/shared/components/accordion/accordion';
@@ -16,13 +16,9 @@ import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
 import { ContextModalVars } from '/@/shared/components/modal/modal';
 import { Stack } from '/@/shared/components/stack/stack';
-import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
-import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
 import { ServerType } from '/@/shared/types/domain-types';
 
-const localSettings = isElectron() ? window.api.localSettings : null;
-
 export const ServerList = () => {
     const { t } = useTranslation();
     const currentServer = useCurrentServer();
@@ -40,32 +36,6 @@ export const ServerList = () => {
         });
     };
 
-    const [ignoreCORS, setIgnoreCORS] = useLocalStorage({
-        defaultValue: 'false',
-        key: 'ignore_cors',
-    });
-
-    const [ignoreSSL, setIgnoreSSL] = useLocalStorage({
-        defaultValue: 'false',
-        key: 'ignore_ssl',
-    });
-
-    const handleUpdateIgnoreCORS = (e: ChangeEvent<HTMLInputElement>) => {
-        setIgnoreCORS(String(e.currentTarget.checked));
-
-        if (isElectron()) {
-            localSettings?.set('ignore_cors', e.currentTarget.checked);
-        }
-    };
-
-    const handleUpdateIgnoreSSL = (e: ChangeEvent<HTMLInputElement>) => {
-        setIgnoreSSL(String(e.currentTarget.checked));
-
-        if (isElectron()) {
-            localSettings?.set('ignore_ssl', e.currentTarget.checked);
-        }
-    };
-
     return (
         <>
             <Stack>
@@ -113,24 +83,7 @@ export const ServerList = () => {
                 {isElectron() && (
                     <>
                         <Divider />
-                        <Group>
-                            <Switch
-                                checked={ignoreCORS === 'true'}
-                                label={t('form.addServer.ignoreCors', {
-                                    postProcess: 'sentenceCase',
-                                })}
-                                onChange={handleUpdateIgnoreCORS}
-                            />
-                        </Group>
-                        <Group>
-                            <Switch
-                                checked={ignoreSSL === 'true'}
-                                label={t('form.addServer.ignoreSsl', {
-                                    postProcess: 'sentenceCase',
-                                })}
-                                onChange={handleUpdateIgnoreSSL}
-                            />
-                        </Group>
+                        <IgnoreCorsSslSwitches />
                     </>
                 )}
             </Stack>