Make ssh key editable

packages/playground/src/components/ssh_keys/SshDataDialog.vue

@@ -8,23 +8,29 @@
     <template v-slot:default>
       <v-card>
         <v-toolbar color="primary" class="custom-toolbar">
-          <p class="mb-5">SSH-Key Detials</p>
+          <p class="mb-5">SSH-Key Details</p>
         </v-toolbar>
 
         <v-card-text>
           <template v-for="[_key, value] of Object.entries(selectedKey).sort()" :key="_key">
             <template v-if="!notNeededFields.includes(_key)">
               <CopyInputWrapper v-if="_key !== 'publicKey'" :data="value" #="{ props: copyInputProps }">
-                <v-text-field v-bind="{ ...copyInputProps }" :label="_key" :model-value="value" :readonly="true" />
+                <v-text-field
+                  v-bind="{ ...copyInputProps }"
+                  :label="_key"
+                  v-model="currentKey[_key as keyof SSHKeyData]"
+                  :readonly="_key === 'fingerPrint'"
+                  :rules="[(value: string) => !!value || `${_key} is required.`]"
+                />
               </CopyInputWrapper>
               <CopyInputWrapper v-else :data="value" #="{ props: copyInputProps }">
                 <v-textarea
                   :class="value.length ? 'ssh-key' : ''"
-                  :model-value="value"
-                  :readonly="true"
+                  v-model="currentKey[_key]"
                   label="Public SSH Key"
                   no-resize
                   :spellcheck="false"
+                  :rules="sshRules(currentKey[_key])"
                   v-bind="{ ...copyInputProps }"
                 />
               </CopyInputWrapper>
@@ -49,6 +55,7 @@
           <v-spacer></v-spacer>
           <div class="mt-2">
             <v-btn color="white" variant="outlined" text="Close" @click="$emit('close')"></v-btn>
+            <v-btn color="primary" variant="outlined" text="Save" @click="updateKey" :loading="loading"></v-btn>
           </div>
         </v-card-actions>
       </v-card>
@@ -57,13 +64,14 @@
 </template>
 
 <script lang="ts">
-import { capitalize, defineComponent, type PropType } from "vue";
+import { capitalize, defineComponent, type PropType, ref, watch } from "vue";
 
 import type { SSHKeyData } from "@/types";
+import SSHKeysManagement from "@/utils/ssh";
 
 export default defineComponent({
   name: "SSHDataDialog",
-  emits: ["close"],
+  emits: ["close", "update"],
   props: {
     open: {
       type: Boolean,
@@ -74,11 +82,44 @@ export default defineComponent({
       required: true,
     },
   },
-  setup() {
+  setup(props, ctx) {
+    const currentKey = ref<SSHKeyData>(props.selectedKey);
+    const loading = ref<boolean>(false);
+
+    watch(
+      () => props.open,
+      newValue => {
+        if (newValue) {
+          currentKey.value = { ...props.selectedKey };
+        }
+      },
+    );
+
     const notNeededFields = ["id", "activating", "deleting", "isActive", "createdAt"];
+    const sshKeysManagement = new SSHKeysManagement();
+    const updateKey = () => {
+      loading.value = true;
+      ctx.emit("update", currentKey);
+      ctx.emit("close");
+      loading.value = false;
+    };
+
+    function sshRules(value: any) {
+      return [
+        (v: string) => !!v || "SSH key is required.",
+        (v: string) =>
+          sshKeysManagement.isValidSSHKey(v) ||
+          "The SSH key you provided is not valid. Please double-check that it is copied correctly and follows the correct format.",
+      ];
+    }
+
     return {
       notNeededFields,
       capitalize,
+      updateKey,
+      currentKey,
+      sshRules,
+      loading,
     };
   },
 });

packages/playground/src/views/sshkey_view.vue

@@ -97,7 +97,7 @@
   />
 
   <!-- View -->
-  <ssh-data-dialog :open="isViewKey" :selected-key="selectedKey" @close="isViewKey = false" />
+  <ssh-data-dialog :open="isViewKey" :selected-key="selectedKey" @close="isViewKey = false" @update="updateKeys" />
 </template>
 
 <script lang="ts" setup>
@@ -276,6 +276,17 @@ const addKey = async (key: SSHKeyData) => {
   closeDialog();
 };
 
+const updateKeys = async (updatedKey: any) => {
+  const index = allKeys.value.findIndex(key => key.id === updatedKey.value.id);
+  allKeys.value[index] = { ...updatedKey.value };
+  try {
+    await sshKeysManagement.update(allKeys.value);
+    createCustomToast("SSH Key updated successfully.", ToastType.success);
+  } catch (error) {
+    createCustomToast("Failed to update your SSH Key!", ToastType.danger);
+  }
+};
+
 const generateSSHKeys = async (key: SSHKeyData) => {
   generatingSSH.value = true;
   const keys = await generateKeyPair({