change field to file upload

PeerDB-io · Feb 6, 2024 · 0cfeaec · 0cfeaec
1 parent 8ba31be
commit 0cfeaec
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 6 deletions.
diff --git a/ui/app/peers/create/[peerType]/helpers/pg.ts b/ui/app/peers/create/[peerType]/helpers/pg.ts
@@ -49,8 +49,18 @@ export const postgresSetting: PeerSetting[] = [
   },
 ];
 
-type sshSetter = Dispatch<SetStateAction<SSHConfig>>;
-export const sshSetting = [
+export type sshSetter = Dispatch<SetStateAction<SSHConfig>>;
+export interface SSHSetting {
+  label: string;
+  stateHandler: (value: string, setter: sshSetter) => void;
+  type?: string;
+  optional?: boolean;
+  tips?: string;
+  helpfulLink?: string;
+  default?: string | number;
+}
+
+export const sshSetting: SSHSetting[] = [
   {
     label: 'Host',
     stateHandler: (value: string, setter: sshSetter) =>
@@ -80,11 +90,12 @@ export const sshSetting = [
     tips: 'Password associated with the user you provided.',
   },
   {
-    label: 'BASE64 Private Key',
+    label: 'Private Key',
     stateHandler: (value: string, setter: sshSetter) =>
       setter((curr) => ({ ...curr, privateKey: value })),
     optional: true,
-    tips: 'Private key as a BASE64 string for authentication in order to SSH into your machine.',
+    type: 'file',
+    tips: 'Private key for authentication in order to SSH into your machine.',
   },
   {
     label: 'Host Key',

diff --git a/ui/components/PeerForms/PostgresForm.tsx b/ui/components/PeerForms/PostgresForm.tsx
@@ -2,7 +2,9 @@
 import { PeerSetter } from '@/app/dto/PeersDTO';
 import { PeerSetting } from '@/app/peers/create/[peerType]/helpers/common';
 import {
+  SSHSetting,
   blankSSHConfig,
+  sshSetter,
   sshSetting,
 } from '@/app/peers/create/[peerType]/helpers/pg';
 import { SSHConfig } from '@/grpc_generated/peers';
@@ -22,13 +24,45 @@ export default function PostgresForm({ settings, setter }: ConfigProps) {
   const [showSSH, setShowSSH] = useState<boolean>(false);
   const [sshConfig, setSSHConfig] = useState<SSHConfig>(blankSSHConfig);
 
+  const handleFile = (
+    file: File,
+    setFile: (value: string, configSetter: sshSetter) => void
+  ) => {
+    if (file) {
+      const reader = new FileReader();
+      reader.readAsText(file);
+      reader.onload = () => {
+        const fileContents = reader.result as string;
+        const base64EncodedContents = Buffer.from(
+          fileContents,
+          'utf-8'
+        ).toString('base64');
+        setFile(base64EncodedContents, setSSHConfig);
+      };
+      reader.onerror = (error) => {
+        console.log(error);
+      };
+    }
+  };
+
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement>,
     setting: PeerSetting
   ) => {
     setting.stateHandler(e.target.value, setter);
   };
 
+  const handleSSHParam = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    setting: SSHSetting
+  ) => {
+    if (setting.type === 'file') {
+      if (e.target.files) handleFile(e.target.files[0], setting.stateHandler);
+    } else {
+      setting.stateHandler(e.target.value, setSSHConfig);
+    }
+  };
+
   useEffect(() => {
     setter((prev) => {
       return {
@@ -130,12 +164,17 @@ export default function PostgresForm({ settings, setter }: ConfigProps) {
                 <TextField
                   variant='simple'
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    sshParam.stateHandler(e.target.value, setSSHConfig)
+                    handleSSHParam(e, sshParam)
+                  }
+                  style={
+                    sshParam.type === 'file'
+                      ? { border: 'none', height: 'auto' }
+                      : { border: 'auto' }
                   }
                   type={sshParam.type}
                   defaultValue={
                     (sshConfig as SSHConfig)[
-                      sshParam.label === 'BASE64 Private Key'
+                      sshParam.label === 'Private Key'
                         ? 'privateKey'
                         : sshParam.label === 'Host Key'
                           ? 'hostKey'