initial implementation for password saving (#132)

* initial implementation for password saving

* support restoring password in interceptor

* Fix modal overflow and position styles

* warn about 429, better error handling

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
Co-authored-by: Jeff <42182408+jeffvli@users.noreply.github.com>

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

@@ -4,12 +4,15 @@ import { Button, PasswordInput, SegmentedControl, TextInput, toast } from '/@/re
 import { useForm } from '@mantine/form';
 import { useFocusTrap } from '@mantine/hooks';
 import { closeAllModals } from '@mantine/modals';
+import isElectron from 'is-electron';
 import { nanoid } from 'nanoid/non-secure';
 import { AuthenticationResponse } from '/@/renderer/api/types';
 import { useAuthStore, useAuthStoreActions } from '/@/renderer/store';
 import { ServerType } from '/@/renderer/types';
 import { api } from '/@/renderer/api';
 
+const localSettings = isElectron() ? window.electron.localSettings : null;
+
 const SERVER_TYPES = [
   { label: 'Jellyfin', value: ServerType.JELLYFIN },
   { label: 'Navidrome', value: ServerType.NAVIDROME },
@@ -31,6 +34,7 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
       legacyAuth: false,
       name: '',
       password: '',
+      savePassword: false,
       type: ServerType.JELLYFIN,
       url: 'http://',
       username: '',
@@ -83,6 +87,13 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
       } else {
         toast.success({ message: 'Server has been added' });
       }
+
+      if (localSettings && values.savePassword) {
+        const saved = await localSettings.passwordSet(values.password, serverItem.id);
+        if (!saved) {
+          toast.error({ message: 'Could not save password' });
+        }
+      }
     } catch (err: any) {
       setIsLoading(false);
       return toast.error({ message: err?.message });
@@ -120,6 +131,14 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
           label="Password"
           {...form.getInputProps('password')}
         />
+        {localSettings && form.values.type === ServerType.NAVIDROME && (
+          <Checkbox
+            label="Save password"
+            {...form.getInputProps('savePassword', {
+              type: 'checkbox',
+            })}
+          />
+        )}
         {form.values.type === ServerType.SUBSONIC && (
           <Checkbox
             label="Enable legacy authentication"

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

@@ -1,18 +1,22 @@
 import { useState } from 'react';
-import { Checkbox, Stack, Group } from '@mantine/core';
-import { Button, PasswordInput, TextInput, toast, Tooltip } from '/@/renderer/components';
+import { Stack, Group } from '@mantine/core';
+import { Button, Checkbox, PasswordInput, TextInput, toast, Tooltip } from '/@/renderer/components';
 import { useForm } from '@mantine/form';
 import { useFocusTrap } from '@mantine/hooks';
 import { closeAllModals } from '@mantine/modals';
+import isElectron from 'is-electron';
 import { RiInformationLine } from 'react-icons/ri';
 import { AuthenticationResponse } from '/@/renderer/api/types';
 import { useAuthStoreActions } from '/@/renderer/store';
 import { ServerListItem, ServerType } from '/@/renderer/types';
 import { api } from '/@/renderer/api';
 
+const localSettings = isElectron() ? window.electron.localSettings : null;
+
 interface EditServerFormProps {
   isUpdate?: boolean;
   onCancel: () => void;
+  password?: string;
   server: ServerListItem;
 }
 
@@ -26,7 +30,7 @@ const ModifiedFieldIndicator = () => {
   );
 };
 
-export const EditServerForm = ({ isUpdate, server, onCancel }: EditServerFormProps) => {
+export const EditServerForm = ({ isUpdate, password, server, onCancel }: EditServerFormProps) => {
   const { updateServer } = useAuthStoreActions();
   const focusTrapRef = useFocusTrap();
   const [isLoading, setIsLoading] = useState(false);
@@ -35,7 +39,8 @@ export const EditServerForm = ({ isUpdate, server, onCancel }: EditServerFormPro
     initialValues: {
       legacyAuth: false,
       name: server?.name,
-      password: '',
+      password: password || '',
+      savePassword: server.savePassword || false,
       type: server?.type,
       url: server?.url,
       username: server?.username,
@@ -43,6 +48,7 @@ export const EditServerForm = ({ isUpdate, server, onCancel }: EditServerFormPro
   });
 
   const isSubsonic = form.values.type === ServerType.SUBSONIC;
+  const isNavidrome = form.values.type === ServerType.NAVIDROME;
 
   const handleSubmit = form.onSubmit(async (values) => {
     const authFunction = api.controller.authenticate;
@@ -71,6 +77,7 @@ export const EditServerForm = ({ isUpdate, server, onCancel }: EditServerFormPro
         credential: data.credential,
         name: values.name,
         ndCredential: data.ndCredential,
+        savePassword: values.savePassword,
         type: values.type,
         url: values.url,
         userId: data.userId,
@@ -79,6 +86,17 @@ export const EditServerForm = ({ isUpdate, server, onCancel }: EditServerFormPro
 
       updateServer(server.id, serverItem);
       toast.success({ message: 'Server has been updated' });
+
+      if (localSettings) {
+        if (values.savePassword) {
+          const saved = await localSettings.passwordSet(values.password, server.id);
+          if (!saved) {
+            toast.error({ message: 'Could not save password' });
+          }
+        } else {
+          localSettings.passwordRemove(server.id);
+        }
+      }
     } catch (err: any) {
       setIsLoading(false);
       return toast.error({ message: err?.message });
@@ -115,6 +133,14 @@ export const EditServerForm = ({ isUpdate, server, onCancel }: EditServerFormPro
           label="Password"
           {...form.getInputProps('password')}
         />
+        {localSettings && isNavidrome && (
+          <Checkbox
+            label="Save password"
+            {...form.getInputProps('savePassword', {
+              type: 'checkbox',
+            })}
+          />
+        )}
         {isSubsonic && (
           <Checkbox
             label="Enable legacy authentication"

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

@@ -1,24 +1,54 @@
+import { useCallback, useState } from 'react';
 import { Stack, Group, Divider } from '@mantine/core';
 import { Button, Text, TimeoutButton } from '/@/renderer/components';
 import { useDisclosure } from '@mantine/hooks';
+import isElectron from 'is-electron';
 import { RiDeleteBin2Line, RiEdit2Fill } from 'react-icons/ri';
 import { EditServerForm } from '/@/renderer/features/servers/components/edit-server-form';
 import { ServerSection } from '/@/renderer/features/servers/components/server-section';
 import { useAuthStoreActions } from '/@/renderer/store';
 import { ServerListItem as ServerItem } from '/@/renderer/types';
 
+const localSettings = isElectron() ? window.electron.localSettings : null;
+
 interface ServerListItemProps {
   server: ServerItem;
 }
 
 export const ServerListItem = ({ server }: ServerListItemProps) => {
   const [edit, editHandlers] = useDisclosure(false);
+  const [savedPassword, setSavedPassword] = useState('');
   const { deleteServer } = useAuthStoreActions();
 
   const handleDeleteServer = () => {
     deleteServer(server.id);
+    localSettings?.passwordRemove(server.name);
   };
 
+  const handleEdit = useCallback(() => {
+    if (!edit && localSettings && server.savePassword) {
+      localSettings
+        .passwordGet(server.id)
+        .then((password: string | null) => {
+          if (password) {
+            setSavedPassword(password);
+          } else {
+            setSavedPassword('');
+          }
+          editHandlers.open();
+          return null;
+        })
+        .catch((error: any) => {
+          console.error(error);
+          setSavedPassword('');
+          editHandlers.open();
+        });
+    } else {
+      setSavedPassword('');
+      editHandlers.open();
+    }
+  }, [edit, editHandlers, server.id, server.savePassword]);
+
   return (
     <Stack>
       <ServerSection
@@ -30,6 +60,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
       >
         {edit ? (
           <EditServerForm
+            password={savedPassword}
             server={server}
             onCancel={() => editHandlers.toggle()}
           />
@@ -50,7 +81,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
                 leftIcon={<RiEdit2Fill />}
                 tooltip={{ label: 'Edit server details' }}
                 variant="subtle"
-                onClick={() => editHandlers.toggle()}
+                onClick={() => handleEdit()}
               >
                 Edit
               </Button>