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/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>