From 9ce65149d66df3ae7d1baa8bafe6c6eb8f2b3256 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Thu, 18 Apr 2024 09:39:34 +0200
Subject: [PATCH] Enhanced the 'SSH-Keys' page with the following:

- The validation rule was modified to accept keys without names

- Take the key name when importing an 'SSH key' if exists or generate a new one

- Migrating the old ssh key after activating the 'profile manager'

- Created a class named 'SSHKeyData' that holds all 'SSH' functionality, to avoid code duplication since there are some functions that need to be imported into other places

- Disable the 'Import', 'Generate', and 'Export' buttons while 'Deleteing', 'Creating', and 'Updating' keys to avoid errors

- Wait on the chain to finish the task then update the table of 'ssh keys'
---
 .../src/components/ssh_keys/SshFormDialog.vue |  48 +-
 .../src/components/ssh_keys/SshTable.vue      |  79 ++--
 packages/playground/src/utils/date.ts         |   4 -
 packages/playground/src/utils/ssh.ts          | 174 ++++++++
 packages/playground/src/utils/strings.ts      |  29 --
 packages/playground/src/utils/validators.ts   |  10 -
 packages/playground/src/views/sshkey_view.vue | 422 +++++++-----------
 .../src/weblets/profile_manager.vue           |  18 +-
 8 files changed, 413 insertions(+), 371 deletions(-)
 create mode 100644 packages/playground/src/utils/ssh.ts

diff --git a/packages/playground/src/components/ssh_keys/SshFormDialog.vue b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
index 094b4cb5f7..719483dc0f 100644
--- a/packages/playground/src/components/ssh_keys/SshFormDialog.vue
+++ b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
@@ -8,8 +8,11 @@
     <template v-slot:default>
       <v-card>
         <v-toolbar color="primary" class="custom-toolbar">
-          <p v-if="$props.dialogType === SSHCreationMethod.Generate" class="mb-5">Add new SSH Key</p>
-          <p v-else-if="$props.dialogType === SSHCreationMethod.Import" class="mb-5">Import an exact SSH Key</p>
+          <p class="mb-5">
+            {{
+              $props.dialogType === SSHCreationMethod.Generate ? "Generate a new SSH Key" : "Import an exact SSH Key"
+            }}
+          </p>
         </v-toolbar>
 
         <v-card-text>
@@ -21,7 +24,7 @@
             <v-text-field
               hint="Leave this field empty to generate a name automatically, or enter a custom name to save it with your key."
               :rules="[
-                keyName.length < 15 || 'Please enter a key name with fewer than 15 characters.',
+                keyName.length < 30 || 'Please enter a key name with fewer than 30 characters.',
                 !keyName.includes(' ') || 'Key names cannot include spaces. Please use a name without spaces.',
               ]"
               class="mb-4"
@@ -32,7 +35,8 @@
           </input-tooltip>
 
           <v-alert width="95%" class="mb-4" type="info">
-            Updating or generating SSH key will cost you up to 0.01 TFT
+            {{ $props.dialogType === SSHCreationMethod.Generate ? "Generating" : "Importing" }}
+            a new SSH key will cost you up to 0.01 TFT
           </v-alert>
 
           <div v-if="$props.dialogType === SSHCreationMethod.Generate" class="create">
@@ -82,7 +86,7 @@
             <v-btn
               v-if="$props.dialogType === SSHCreationMethod.Import"
               :loading="$props.savingKey"
-              :disabled="!sshKey || !isValidSSHKey(sshKey)"
+              :disabled="!sshKey || !sshKeysManagement.isValidSSHKey(sshKey) || keyName.length >= 30"
               color="secondary"
               variant="outlined"
               text="Save"
@@ -100,11 +104,10 @@ import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { type Profile, useProfileManager } from "@/stores/profile_manager";
 import { SSHCreationMethod, type SSHKeyData } from "@/types";
-import { formatSSHKeyTableCreatedAt } from "@/utils/date";
+import { createCustomToast, ToastType } from "@/utils/custom_toast";
 import { type Balance, getGrid, loadBalance } from "@/utils/grid";
 import { isEnoughBalance } from "@/utils/helpers";
-import { generateSSHKeyName } from "@/utils/strings";
-import { isValidSSHKey } from "@/utils/validators";
+import SSHKeysManagement from "@/utils/ssh";
 
 export default defineComponent({
   emits: ["close", "save", "generate"],
@@ -137,6 +140,8 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const profileManager = useProfileManager();
+    const sshKeysManagement = new SSHKeysManagement();
+
     const sshKey = ref<string>("");
     const keyName = ref<string>(generateUniqueSSHKeyName());
     const createdKey = ref<SSHKeyData | null>(null); // Initialize createdKey with null
@@ -150,17 +155,18 @@ export default defineComponent({
       isOpen => {
         if (isOpen) {
           const now = new Date();
-          const lastID = props.allKeys.length ? props.allKeys[props.allKeys.length - 1].id : 1;
+          const keyId = props.allKeys.length ? props.allKeys[props.allKeys.length - 1].id + 1 : 1;
 
-          keyName.value = generateUniqueSSHKeyName();
           sshKey.value = "";
           createdKey.value = {
-            id: lastID + 1,
+            id: keyId,
             publicKey: props.generatedSshKey as string,
-            createdAt: formatSSHKeyTableCreatedAt(now),
-            name: keyName.value.length === 0 ? generateUniqueSSHKeyName() : keyName.value,
+            createdAt: sshKeysManagement.formatDate(now),
+            name: keyName.value,
             isActive: true,
           };
+        } else {
+          keyName.value = generateUniqueSSHKeyName();
         }
       },
       { deep: true },
@@ -184,12 +190,22 @@ export default defineComponent({
       if (createdKey.value) {
         const isNewSSHKey = ref<boolean>(props.dialogType === SSHCreationMethod.Generate);
         createdKey.value.publicKey = isNewSSHKey.value ? props.generatedSshKey || "" : sshKey.value;
+        const parts = createdKey.value.publicKey.split(" ");
+
+        if (parts.length === 3) {
+          if (parts[parts.length - 1].length < 30) {
+            keyName.value = parts[parts.length - 1];
+          }
+        }
+
+        createdKey.value.name = keyName.value;
         emit("save", createdKey.value);
       }
     }
 
     function generateUniqueSSHKeyName(depth = 0): string {
-      const keyName: string = generateSSHKeyName();
+      const keyName: string = sshKeysManagement.generateName();
+
       if (!props.allKeys.length) {
         return keyName;
       }
@@ -241,7 +257,7 @@ export default defineComponent({
       return [
         (v: any) => !!v || "SSH key is required.",
         (v: string) =>
-          isValidSSHKey(v) ||
+          sshKeysManagement.isValidSSHKey(v) ||
           "The SSH key you provided is not valid. Please double-check that it is copied correctly and follows the correct format.",
       ];
     }
@@ -252,12 +268,12 @@ export default defineComponent({
       hasEnoughBalance,
       sshKey,
       SSHCreationMethod,
+      sshKeysManagement,
 
       generateUniqueSSHKeyName,
       createNewSSHKey,
       sshRules,
       generateSSHKey,
-      isValidSSHKey,
     };
   },
 });
diff --git a/packages/playground/src/components/ssh_keys/SshTable.vue b/packages/playground/src/components/ssh_keys/SshTable.vue
index 36af3b87a9..daa82386b5 100644
--- a/packages/playground/src/components/ssh_keys/SshTable.vue
+++ b/packages/playground/src/components/ssh_keys/SshTable.vue
@@ -2,8 +2,8 @@
   <v-card class="pt-6 pl-6 pr-6 mb-4">
     <div class="head">
       <h3 class="text-light">
-        <v-icon>{{ headerIcon }}</v-icon>
-        {{ headerTitle }}
+        <v-icon>mdi-key-chain</v-icon>
+        SSH Keys
       </h3>
     </div>
 
@@ -24,7 +24,11 @@
         loading-text="Loading..."
         @click:row="(_, { item }) => $emit('view', item.raw)"
       >
-        <template #loading> </template>
+        <template #loading>
+          <div class="w-100 text-center" v-if="loading && loadingMessage">
+            <small>{{ loadingMessage }}</small>
+          </div>
+        </template>
         <template #[`item.createdAt`]="{ item }">
           <v-tooltip location="bottom" :text="`The date when this SSH key was created.`">
             <template #activator="{ props }">
@@ -64,8 +68,11 @@
         <template #[`item.activation`]="{ item }">
           <v-tooltip
             location="bottom"
-            v-if="item.raw.isActive"
-            :text="`The '${item.raw.name}' key is currently activated and will be utilized in deployments.`"
+            :text="
+              item.raw.isActive
+                ? `The '${item.raw.name}' key is currently activated and will be utilized in deployments.`
+                : `Click to activate the '${item.raw.name}' for use in deployments.`
+            "
           >
             <template #activator="{ props }">
               <v-progress-circular
@@ -80,32 +87,9 @@
                 class="d-inline"
                 v-bind="props"
                 color="secondary"
-                @click.stop="activateKey(item.raw)"
-                :model-value="item.raw.isActive"
-              />
-            </template>
-          </v-tooltip>
-
-          <v-tooltip
-            location="bottom"
-            v-else
-            :text="`Click to activate the '${item.raw.name}' for use in deployments.`"
-          >
-            <template #activator="{ props }">
-              <v-progress-circular
-                v-if="item.raw.activating"
-                :size="20"
-                :width="2"
-                color="info"
-                indeterminate
-              ></v-progress-circular>
-              <VCheckboxBtn
-                v-else
-                class="d-inline"
-                v-bind="props"
-                :color="theme.name.value === AppThemeSelection.light ? '' : 'grey-lighten-1'"
-                @click.stop="activateKey(item.raw)"
+                @click.stop="toggleKeyActivation(item.raw)"
                 :model-value="item.raw.isActive"
+                :disabled="deleting"
               />
             </template>
           </v-tooltip>
@@ -165,11 +149,7 @@ export default defineComponent({
       type: Array as PropType<SSHKeyData[]>,
       required: true,
     },
-    headerTitle: {
-      type: String,
-      required: true,
-    },
-    headerIcon: {
+    loadingMessage: {
       type: String,
       required: true,
     },
@@ -183,7 +163,7 @@ export default defineComponent({
     },
   },
 
-  emits: ["inactive", "active", "delete", "view", "update:keys", "export"],
+  emits: ["delete", "view", "update:activation", "export"],
 
   setup(props, { emit }) {
     const selectedKeys = ref<number[]>([]); // IDs
@@ -226,20 +206,26 @@ export default defineComponent({
       emit("delete", [key]);
     };
 
-    const activateKey = (key: SSHKeyData) => {
-      if (key.isActive) {
-        emit("inactive", key);
-      } else {
-        emit("active", key);
-      }
+    const toggleKeyActivation = (key: SSHKeyData) => {
+      console.log(key.isActive);
+      emit("update:activation", key);
     };
 
-    return { headers, selectedKeys, capitalize, theme, AppThemeSelection, deleteSelected, deleteKey, activateKey };
+    return {
+      headers,
+      selectedKeys,
+      theme,
+      AppThemeSelection,
+      capitalize,
+      deleteSelected,
+      deleteKey,
+      toggleKeyActivation,
+    };
   },
 });
 </script>
 
-<style scoped>
+<style>
 .head {
   border-bottom: 1px solid #8d848d;
   padding-bottom: 15px;
@@ -253,4 +239,9 @@ export default defineComponent({
 .activation {
   cursor: pointer;
 }
+.v-data-table-rows-loading td {
+  padding: 0 !important;
+  margin: 0 !important;
+  height: 25px !important;
+}
 </style>
diff --git a/packages/playground/src/utils/date.ts b/packages/playground/src/utils/date.ts
index 934e5b838c..849f97ca84 100644
--- a/packages/playground/src/utils/date.ts
+++ b/packages/playground/src/utils/date.ts
@@ -3,7 +3,3 @@ import moment from "moment";
 export default function toHumanDate(timeInSeconds: number): string {
   return moment(timeInSeconds * 1000).format("M/D/YY, h:m A");
 }
-
-export function formatSSHKeyTableCreatedAt(date: Date) {
-  return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
-}
diff --git a/packages/playground/src/utils/ssh.ts b/packages/playground/src/utils/ssh.ts
new file mode 100644
index 0000000000..36171e51a7
--- /dev/null
+++ b/packages/playground/src/utils/ssh.ts
@@ -0,0 +1,174 @@
+import crypto from "crypto";
+
+import { useProfileManager } from "@/stores/profile_manager";
+import type { SSHKeyData } from "@/types";
+
+import { createCustomToast, ToastType } from "./custom_toast";
+import { getGrid, storeSSH } from "./grid";
+import { downloadAsJson } from "./helpers";
+
+/**
+ * Manages SSH key operations including migration, updating, exporting, deleting, and listing.
+ */
+class SSHKeysManagement {
+  /**
+   * Migrates an old SSH key string to the new SSHKeyData format.
+   * @param oldKey The old SSH key string to migrate.
+   * @returns An array containing the migrated SSHKeyData.
+   */
+  migrate(oldKey: string): SSHKeyData[] {
+    const userKeys: SSHKeyData[] = [];
+    const parts = oldKey.split(" ");
+    let keyName = "";
+    if (parts.length < 3) {
+      keyName = this.generateName();
+    } else {
+      keyName = parts[parts.length - 1];
+    }
+    const newKey: SSHKeyData = {
+      createdAt: this.formatDate(new Date()),
+      name: keyName,
+      id: 1,
+      isActive: true,
+      publicKey: oldKey,
+    };
+    userKeys.push(newKey);
+    return userKeys;
+  }
+
+  /**
+   * Checks if the SSH key has not been migrated yet.
+   * @param key The SSH key to check for migration.
+   * @returns A boolean indicating whether the key has not been migrated.
+   */
+  notMigrated(key: string | SSHKeyData[]): boolean {
+    return typeof key === "string";
+  }
+
+  /**
+   * Updates SSH keys in the profile and stores them in the grid.
+   * @param keys The SSH keys to update.
+   */
+  async update(keys: SSHKeyData[]): Promise<void> {
+    const profileManager = useProfileManager();
+    const grid = await getGrid(profileManager.profile!);
+    if (!grid) {
+      createCustomToast(`Error occurred because the grid has not initialized yet.`, ToastType.danger);
+      return;
+    }
+    const copiedKeys = keys.map(
+      ({ fingerPrint, activating, deleting, ...keyWithoutSensitiveProps }) => keyWithoutSensitiveProps,
+    );
+    await storeSSH(grid!, copiedKeys);
+    profileManager.updateSSH(copiedKeys);
+  }
+
+  /**
+   * Generates a random name for an SSH key.
+   * @returns The generated SSH key name.
+   */
+  generateName(): string {
+    const words = [
+      "moon",
+      "earth",
+      "sun",
+      "star",
+      "galaxy",
+      "nebula",
+      "comet",
+      "planet",
+      "asteroid",
+      "satellite",
+      "mercury",
+      "venus",
+      "mars",
+      "jupiter",
+      "saturn",
+      "uranus",
+      "neptune",
+      "pluto",
+      "meteor",
+      "cosmos",
+    ];
+    const keyName = words.sort(() => Math.random() - 0.5)[0];
+    return keyName;
+  }
+
+  /**
+   * Parses an SSH public key string.
+   * @param publicKey The SSH public key string to parse.
+   * @returns An object containing the parsed parts of the public key.
+   */
+  parsePublicKey(publicKey: string) {
+    const parts = publicKey.split(" ");
+    return {
+      type: parts[0],
+      data: parts[1],
+      comment: parts[2],
+    };
+  }
+
+  /**
+   * Calculates the fingerprint of an SSH public key.
+   * @param publicKey The SSH public key string.
+   * @returns The calculated fingerprint.
+   */
+  calculateFingerprint(publicKey: string): string {
+    if (publicKey.length) {
+      const sshPublicKey = this.parsePublicKey(publicKey);
+      const md5 = crypto.createHash("md5");
+      if (sshPublicKey.data) {
+        md5.update(sshPublicKey.data);
+        const fingerprint = md5
+          .digest("hex")
+          .replace(/(.{2})(?=.)/g, "$1:")
+          .toUpperCase();
+        return fingerprint;
+      }
+    }
+    return "-";
+  }
+
+  /**
+   * Exports SSH keys as a JSON file.
+   * @param keys The SSH keys to export.
+   */
+  async export(keys: SSHKeyData[]): Promise<void> {
+    const exportKeys: SSHKeyData[] = keys.map(({ deleting, activating, ...rest }) => rest);
+    downloadAsJson(exportKeys, `ssh_keys.json`);
+  }
+
+  /**
+   * Retrieves and formats SSH keys from the profile.
+   * @returns An array of formatted SSHKeyData.
+   */
+  list(): SSHKeyData[] {
+    const profileManager = useProfileManager();
+    const keys = profileManager.profile!.ssh.map(key => ({
+      ...key,
+      fingerPrint: this.calculateFingerprint(key.publicKey),
+    }));
+    return keys;
+  }
+
+  /**
+   * Formats a date into a string.
+   * @param date The date to format.
+   * @returns The formatted date string.
+   */
+  formatDate(date: Date): string {
+    return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
+  }
+
+  /**
+   * Checks if a given string is a valid SSH key.
+   * @param key - The SSH key string to be validated.
+   * @returns True if the key is a valid SSH key, false otherwise.
+   */
+  isValidSSHKey(key: string): boolean {
+    const sshKeyRegex = /^(ssh-rsa|ssh-dss|ecdsa-[a-zA-Z0-9-]+|ssh-ed25519)\s+(\S+)+\S/;
+    return sshKeyRegex.test(key);
+  }
+}
+
+export default SSHKeysManagement;
diff --git a/packages/playground/src/utils/strings.ts b/packages/playground/src/utils/strings.ts
index 839c664d47..ea3543e008 100644
--- a/packages/playground/src/utils/strings.ts
+++ b/packages/playground/src/utils/strings.ts
@@ -24,32 +24,3 @@ function generateString(from: string, length: number): string {
   }
   return str;
 }
-
-export function generateSSHKeyName() {
-  // List of words to choose from
-  const words = [
-    "moon",
-    "earth",
-    "sun",
-    "star",
-    "galaxy",
-    "nebula",
-    "comet",
-    "planet",
-    "asteroid",
-    "satellite",
-    "mercury",
-    "venus",
-    "mars",
-    "jupiter",
-    "saturn",
-    "uranus",
-    "neptune",
-    "pluto",
-    "meteor",
-    "cosmos",
-  ];
-
-  const keyName = words.sort(() => Math.random() - 0.5)[0];
-  return keyName;
-}
diff --git a/packages/playground/src/utils/validators.ts b/packages/playground/src/utils/validators.ts
index f5a95b223a..340a933749 100644
--- a/packages/playground/src/utils/validators.ts
+++ b/packages/playground/src/utils/validators.ts
@@ -733,16 +733,6 @@ export function pattern(msg: string, config: RegexPattern) {
   };
 }
 
-/**
- * Checks if a given string is a valid SSH key.
- * @param key - The SSH key string to be validated.
- * @returns True if the key is a valid SSH key, false otherwise.
- */
-export function isValidSSHKey(key: string): boolean {
-  const sshKeyRegex = /^(ssh-rsa|ssh-dss|ecdsa-[a-zA-Z0-9-]+|ssh-ed25519)\s+(\S+)\s+(\S+)/;
-  return sshKeyRegex.test(key);
-}
-
 export function isValidDecimalNumber(length: number, msg: string) {
   return (value: string) => {
     if (!(value.toString().split(".").length > 1 ? value.toString().split(".")[1].length <= length : true)) {
diff --git a/packages/playground/src/views/sshkey_view.vue b/packages/playground/src/views/sshkey_view.vue
index 6ede3c9121..6f62b830c0 100644
--- a/packages/playground/src/views/sshkey_view.vue
+++ b/packages/playground/src/views/sshkey_view.vue
@@ -14,14 +14,7 @@
     </div>
   </v-card>
 
-  <div v-if="migrating">
-    <v-progress-linear color="info" indeterminate></v-progress-linear>
-    <v-alert type="info" class="mb-3 pa-6" variant="tonal">
-      Migrating the old key. This process may require 15 to 30 seconds. Thank you for your patience.
-    </v-alert>
-  </div>
-
-  <v-card v-else class="mb-3 pa-3" color="transparent">
+  <v-card class="mb-3 pa-3" color="transparent">
     <v-col class="d-flex justify-end">
       <v-btn
         variant="outlined"
@@ -29,24 +22,35 @@
         @click="() => openDialog(SSHCreationMethod.Import)"
         prepend-icon="mdi-key-plus"
         color="secondary"
-        :disabled="loading"
+        :disabled="loading || deleting || generatingSSH || savingKey || activating"
       >
         Import
       </v-btn>
+
       <v-btn
-        :loading="isExporting"
-        @click="exportKeys(allKeys)"
+        @click="exportAllKeys"
         variant="outlined"
         class="mr-2"
         prepend-icon="mdi-export"
         color="secondary"
-        :disabled="!allKeys || allKeys.length === 0 || loading"
+        :disabled="
+          !allKeys ||
+          allKeys.length === 0 ||
+          loading ||
+          deleting ||
+          generatingSSH ||
+          savingKey ||
+          isExporting ||
+          activating
+        "
+        :loading="isExporting"
       >
         Export
       </v-btn>
+
       <v-btn
         class="mr-2"
-        :disabled="loading"
+        :disabled="loading || deleting || generatingSSH || savingKey || activating"
         @click="openDialog(SSHCreationMethod.Generate)"
         prepend-icon="mdi-key-plus"
         color="primary"
@@ -57,16 +61,13 @@
   </v-card>
 
   <ssh-table
-    v-if="!migrating"
-    @active="setActiveKey"
-    @inactive="setInactiveKey"
-    @delete="deleteKey($event)"
+    @delete="deleteKey"
     @view="viewSelectedKey"
-    @export="exportKeys($event)"
-    :header-icon="'mdi-key-chain'"
-    :header-title="'SSH Keys'"
+    @export="exportSelectedKeys"
+    @update:activation="updateActivation"
     :ssh-keys="allKeys"
     :loading="loading"
+    :loading-message="tableLoadingMessage"
     :deleting="deleting"
   />
 
@@ -101,10 +102,8 @@
   <ssh-data-dialog :open="isViewKey" :selected-key="selectedKey" @close="isViewKey = false" />
 </template>
 
-<script lang="ts">
-import crypto from "crypto";
-import { computed, defineComponent, ref } from "vue";
-import { onMounted } from "vue";
+<script lang="ts" setup>
+import { defineComponent, onMounted, ref } from "vue";
 import { generateKeyPair } from "web-ssh-keygen";
 
 import SshDataDialog from "@/components/ssh_keys/SshDataDialog.vue";
@@ -113,250 +112,145 @@ import SshTable from "@/components/ssh_keys/SshTable.vue";
 import { useProfileManager } from "@/stores";
 import { SSHCreationMethod, type SSHKeyData } from "@/types";
 import { createCustomToast, ToastType } from "@/utils/custom_toast";
-import { formatSSHKeyTableCreatedAt } from "@/utils/date";
-import { getGrid, getMetadata, storeSSH } from "@/utils/grid";
-import { downloadAsFile, downloadAsJson } from "@/utils/helpers";
-import { generateSSHKeyName } from "@/utils/strings";
-export default defineComponent({
-  name: "SSHView",
-  components: {
-    SshTable,
-    SshFormDialog,
-    SshDataDialog,
-  },
-
-  setup() {
-    const isViewKey = ref(false);
-    const isExporting = ref(false);
-    const generatingSSH = ref(false);
-    const generatedSSHKey = ref("");
-    const selectedKey = ref<SSHKeyData>({
-      id: 0,
-      publicKey: "",
-      name: "",
-      createdAt: "",
-      isActive: false,
-    });
-    const migrating = ref(false);
-
-    const openDialog = (type: SSHCreationMethod) => {
-      dialogType.value = type;
-    };
-
-    const closeDialog = () => {
-      dialogType.value = SSHCreationMethod.None;
-      generatedSSHKey.value = "";
-    };
-
-    // Add SSH key
-    const addKey = async (key: SSHKeyData) => {
-      savingKey.value = true;
-      if (!key.fingerPrint) {
-        key.fingerPrint = calculateFingerprint(key.publicKey);
-      }
-
-      allKeys.value.push(key);
-      await updateSSHKeysInChain();
-      createCustomToast(`The created ${key.name} key has been saved.`, ToastType.success);
-      savingKey.value = false;
-      closeDialog();
-    };
-
-    const viewSelectedKey = (key: SSHKeyData) => {
-      selectedKey.value = key;
-      isViewKey.value = true;
-    };
-
-    const setActiveKey = async (key: SSHKeyData) => {
-      key.activating = true;
-      key.isActive = true;
-      await updateSSHKeysInChain();
-      createCustomToast(`The activation of ${key.name} key has been enabled.`, ToastType.success);
-      key.activating = false;
-    };
-
-    const setInactiveKey = async (key: SSHKeyData) => {
-      key.activating = true;
-      key.isActive = false;
-      await updateSSHKeysInChain();
-      createCustomToast(`The activation of ${key.name} key has been disabled.`, ToastType.success);
-      key.activating = false;
-    };
-
-    const deleteKey = async (selectedKeys: SSHKeyData[]) => {
-      deleting.value = true;
-      const ids: number[] = selectedKeys.map(key => key.id);
-      allKeys.value = allKeys.value.filter(_key => !ids.includes(_key.id));
-      selectedKeys.map(key => (key.deleting = true));
-      await updateSSHKeysInChain();
-      selectedKeys.map(key => (key.deleting = false));
-      createCustomToast(
-        `The selected ${selectedKeys.length > 1 ? "keys" : "key"} has been deleted successfully.`,
-        ToastType.success,
-      );
-      deleting.value = false;
-    };
-
-    const generateSSHKeys = async (key: SSHKeyData) => {
-      generatingSSH.value = true;
-      const keys = await generateKeyPair({
-        alg: "RSASSA-PKCS1-v1_5",
-        hash: "SHA-256",
-        name: key.name,
-        size: 4096,
-      });
-
-      generatedSSHKey.value = keys.publicKey;
-      key.fingerPrint = calculateFingerprint(keys.publicKey);
-      downloadAsFile("id_rsa", keys.privateKey);
-      createCustomToast(`${key.name} key has been generated successfully.`, ToastType.success);
-      generatingSSH.value = false;
-    };
-
-    const exportKeys = async (keys: SSHKeyData[] | number[]) => {
-      isExporting.value = true;
-      let exportKeys: SSHKeyData[] = [];
-
-      if (Array.isArray(keys) && keys.length > 0 && typeof keys[0] === "number") {
-        exportKeys = allKeys.value.filter(key => keys.includes(key.id as SSHKeyData & number));
-      } else {
-        exportKeys = keys as SSHKeyData[];
-      }
-
-      exportKeys.forEach(key => {
-        delete key.deleting;
-        delete key.activating;
-      });
-
-      downloadAsJson(exportKeys, `ssh_keys.json`);
-      isExporting.value = false;
-    };
-
-    const migrateOldKey = async (publicSSHKey: string) => {
-      migrating.value = true;
-      const parts = publicSSHKey.split(" ");
-      let keyName = "";
-      if (parts.length < 3) {
-        keyName = generateSSHKeyName();
-      } else {
-        keyName = parts[parts.length - 1];
-      }
-      const newKey: SSHKeyData = {
-        createdAt: formatSSHKeyTableCreatedAt(new Date()),
-        name: keyName,
-        id: 1,
-        isActive: true,
-        publicKey: publicSSHKey,
-      };
-
-      allKeys.value.push(newKey);
-      await updateSSHKeysInChain();
-      newKey.fingerPrint = calculateFingerprint(publicSSHKey);
-      migrating.value = false;
-    };
-
-    const profileManager = useProfileManager();
-    const userSshKey = ref<SSHKeyData[] | string>(profileManager.profile!.ssh);
-
-    const loading = ref<boolean>(false);
-    const savingKey = ref<boolean>(false);
-    const deleting = ref<boolean>(false);
-    const allKeys = ref<SSHKeyData[]>([]);
-    const activeKeys = computed(() => (allKeys.value.length ? allKeys.value.filter(key => key.isActive) : []));
-    const dialogType = ref<SSHCreationMethod>(SSHCreationMethod.None);
-
-    const parsePublicKey = (publicKey: string) => {
-      const parts = publicKey.split(" ");
-      return {
-        type: parts[0],
-        data: parts[1],
-        comment: parts[2],
-      };
-    };
-
-    const calculateFingerprint = (publicKey: string) => {
-      if (publicKey.length) {
-        const sshPublicKey = parsePublicKey(publicKey);
-        const md5 = crypto.createHash("md5");
-
-        if (sshPublicKey.data) {
-          md5.update(sshPublicKey.data);
-          const fingerprint = md5
-            .digest("hex")
-            .replace(/(.{2})(?=.)/g, "$1:")
-            .toUpperCase();
-          return fingerprint;
-        }
-      }
-      return "-";
-    };
-
-    const updateSSHKeysInChain = async () => {
-      const copiedKeys = allKeys.value.map(key => {
-        // Remove the fingerprint, activating, and deleting before saving the key to the chain
-        const { fingerPrint, activating, deleting, ...keyWithoutSensitiveProps } = key;
-        return keyWithoutSensitiveProps;
-      });
-
-      // Update the chain with the current sshkeys => this.allkeys
-      const grid = await getGrid(profileManager.profile!);
-      await getMetadata(grid!);
-      await storeSSH(grid!, copiedKeys);
-      profileManager.updateSSH(copiedKeys);
-    };
-
-    onMounted(async () => {
-      if (typeof userSshKey.value === "string") {
-        migrateOldKey(userSshKey.value);
-      } else {
-        loading.value = true;
-        if (!userSshKey.value) {
-          profileManager.updateSSH(allKeys.value);
-        }
-
-        const grid = await getGrid(profileManager.profile!);
-        await getMetadata(grid!);
+import { downloadAsFile } from "@/utils/helpers";
+import SSHKeysManagement from "@/utils/ssh";
+
+const loading = ref<boolean>(false);
+const savingKey = ref<boolean>(false);
+const deleting = ref<boolean>(false);
+const activating = ref<boolean>(false);
+const isViewKey = ref<boolean>(false);
+const isExporting = ref<boolean>(false);
+const generatingSSH = ref<boolean>(false);
+
+const allKeys = ref<SSHKeyData[]>([]);
+const dialogType = ref<SSHCreationMethod>(SSHCreationMethod.None);
+const generatedSSHKey = ref("");
+const tableLoadingMessage = ref("");
+
+const selectedKey = ref<SSHKeyData>({
+  id: 0,
+  publicKey: "",
+  name: "",
+  createdAt: "",
+  isActive: false,
+});
 
-        allKeys.value = userSshKey.value || [];
-        if (allKeys.value) {
-          // Calculate the fingerprint for each key after saving them to the chain
-          allKeys.value = allKeys.value.map(key => {
-            const fingerprint = calculateFingerprint(key.publicKey);
-            return { ...key, fingerPrint: fingerprint };
-          });
-        }
+const profileManager = useProfileManager();
+const sshKeysManagement = new SSHKeysManagement();
+
+onMounted(async () => {
+  loading.value = true;
+  let profileSSH = profileManager.profile?.ssh;
+
+  if (sshKeysManagement.notMigrated(profileSSH!)) {
+    tableLoadingMessage.value = "Migrating your old key...";
+    const migrationInterval = setInterval(async () => {
+      profileSSH = profileManager.profile?.ssh;
+      const migrated = !sshKeysManagement.notMigrated(profileSSH!);
+      if (migrated) {
+        clearInterval(migrationInterval);
+        allKeys.value = sshKeysManagement.list();
         loading.value = false;
+        tableLoadingMessage.value = "";
       }
-    });
+    }, 1000);
+  } else {
+    allKeys.value = sshKeysManagement.list();
+    tableLoadingMessage.value = "";
+    loading.value = false;
+  }
+});
 
-    return {
-      loading,
-      deleting,
-      allKeys,
-      activeKeys,
-      SSHCreationMethod,
-      dialogType,
-      savingKey,
-      generatingSSH,
-      migrating,
-      isExporting,
-      generatedSSHKey,
-      isViewKey,
-      selectedKey,
+const openDialog = (type: SSHCreationMethod) => {
+  dialogType.value = type;
+};
+
+const closeDialog = () => {
+  dialogType.value = SSHCreationMethod.None;
+  generatedSSHKey.value = "";
+};
+
+const exportAllKeys = () => {
+  sshKeysManagement.export(allKeys.value);
+};
+
+const exportSelectedKeys = (keys: SSHKeyData[]) => {
+  sshKeysManagement.export(keys);
+};
+
+const updateActivation = async (key: SSHKeyData) => {
+  activating.value = key.activating = true;
+  key.isActive = !key.isActive;
+  await sshKeysManagement.update(allKeys.value);
+  createCustomToast(
+    `The activation of ${key.name} key has been ${key.isActive ? "enabled" : "disabled"}.`,
+    ToastType.success,
+  );
+  activating.value = key.activating = false;
+};
+
+const deleteKey = async (selectedKeys: SSHKeyData[]) => {
+  deleting.value = true;
+  const ids: number[] = selectedKeys.map(key => key.id);
+  const keysToNotDelete = allKeys.value.filter(_key => !ids.includes(_key.id));
+  selectedKeys.map(key => (key.deleting = true));
+  await sshKeysManagement.update(keysToNotDelete);
+  selectedKeys.map(key => (key.deleting = false));
+  allKeys.value = keysToNotDelete;
+  createCustomToast(
+    `The selected ${selectedKeys.length > 1 ? "keys have" : "key has"} been deleted successfully.`,
+    ToastType.success,
+  );
+  deleting.value = false;
+};
+
+const addKey = async (key: SSHKeyData) => {
+  savingKey.value = true;
+  if (!key.fingerPrint) {
+    key.fingerPrint = sshKeysManagement.calculateFingerprint(key.publicKey);
+  }
+
+  const copiedAllkeys = [...allKeys.value, key];
+  await sshKeysManagement.update(copiedAllkeys);
+  loading.value = true;
+  allKeys.value = copiedAllkeys;
+  savingKey.value = false;
+  loading.value = false;
+  closeDialog();
+};
+
+const generateSSHKeys = async (key: SSHKeyData) => {
+  generatingSSH.value = true;
+  const keys = await generateKeyPair({
+    alg: "RSASSA-PKCS1-v1_5",
+    hash: "SHA-256",
+    name: key.name,
+    size: 4096,
+  });
+
+  generatedSSHKey.value = keys.publicKey;
+  key.fingerPrint = sshKeysManagement.calculateFingerprint(keys.publicKey);
+
+  const copiedAllkeys = [...allKeys.value, key];
+  await sshKeysManagement.update(copiedAllkeys);
+  loading.value = true;
+  downloadAsFile("id_rsa", keys.privateKey);
+  createCustomToast(`${key.name} key has been generated successfully.`, ToastType.success);
+  allKeys.value = copiedAllkeys;
+  generatingSSH.value = false;
+  loading.value = false;
+  closeDialog();
+};
+
+const viewSelectedKey = (key: SSHKeyData) => {
+  selectedKey.value = key;
+  isViewKey.value = true;
+};
+</script>
 
-      openDialog,
-      closeDialog,
-      addKey,
-      viewSelectedKey,
-      setActiveKey,
-      setInactiveKey,
-      deleteKey,
-      generateSSHKeys,
-      exportKeys,
-      migrateOldKey,
-      calculateFingerprint,
-      updateSSHKeysInChain,
-    };
-  },
+<script lang="ts">
+export default defineComponent({
+  name: "SSHView",
 });
 </script>
diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index 8c0c3765d9..38890ba8f5 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -549,7 +549,7 @@ async function mounted() {
     password.value = sessionPassword;
 
     if (credentials.passwordHash) {
-      return login();
+      return await login();
     }
   } else {
     activeTab.value = 1;
@@ -704,6 +704,14 @@ async function activate(mnemonic: string, keypairType: KeypairType) {
 
     profileManager.set({ ...profile, mnemonic });
     emit("update:modelValue", false);
+    // Migrate the ssh-key
+    const sshKeysManagement = new SSHKeysManagement();
+    const profileSSH = profileManager.profile?.ssh;
+
+    if (sshKeysManagement.notMigrated(profileSSH!)) {
+      const newKeys = sshKeysManagement.migrate(profileSSH as unknown as string);
+      await sshKeysManagement.update(newKeys);
+    }
   } catch (e) {
     loginError.value = normalizeError(e, "Something went wrong while login.");
   } finally {
@@ -786,7 +794,7 @@ async function __loadBalance(profile?: Profile, tries = 1) {
 }
 profileManagerController.set({ loadBalance: __loadBalance });
 
-function login() {
+async function login() {
   const credentials: Credentials = getCredentials();
   if (credentials.mnemonicHash && credentials.passwordHash) {
     if (credentials.passwordHash === md5(password.value)) {
@@ -795,7 +803,7 @@ function login() {
       const keypairType = credentials.keypairTypeHash
         ? cryptr.decrypt(credentials.keypairTypeHash)
         : KeypairType.sr25519;
-      activate(mnemonic, keypairType as KeypairType);
+      await activate(mnemonic, keypairType as KeypairType);
     }
   }
 }
@@ -808,7 +816,7 @@ async function storeAndLogin() {
     const grid = await getGrid({ mnemonic: mnemonic.value, keypairType: keypairType.value });
     storeEmail(grid!, email.value);
     setCredentials(md5(password.value), mnemonicHash, keypairTypeHash, md5(email.value));
-    activate(mnemonic.value, keypairType.value);
+    await activate(mnemonic.value, keypairType.value);
   } catch (e) {
     if (e instanceof TwinNotExistError) {
       isNonActiveMnemonic.value = true;
@@ -900,6 +908,8 @@ function onScroll(e: UIEvent) {
 import { TwinNotExistError } from "@threefold/types";
 import { capitalize } from "vue";
 
+import SSHKeysManagement from "@/utils/ssh";
+
 import QrcodeGenerator from "../components/qrcode_generator.vue";
 import type { Profile } from "../stores/profile_manager";
 export default {