Enhance SSH dialog user experience (#4260)

Author: 0oM4R

packages/playground/src/components/profile_manager/ConnectWallet.vue

@@ -336,12 +336,12 @@ 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));
-    await handlePostLogin(grid!, password.value, email.value);
     const profile = await loadProfile(grid!);
     if (email.value && profile.email !== email.value) {
       profile.email = email.value;
     }
     profileManager.set({ ...profile, mnemonic: mnemonic.value });
+    await handlePostLogin(grid!, password.value, email.value);
   } catch (e) {
     if (e instanceof TwinNotExistError) {
       isNonActiveMnemonic.value = true;

packages/playground/src/components/profile_manager/LoginWallet.vue

@@ -74,8 +74,8 @@ async function login() {
           : KeypairType.sr25519;
 
         const grid = await getGrid({ mnemonic: mnemonic, keypairType: keypairType as KeypairType });
-        await handlePostLogin(grid!, password.value);
         profileManager.set({ ...(await loadProfile(grid!)), mnemonic });
+        await handlePostLogin(grid!, password.value);
         emit("closeDialog");
       }
     } else {

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

@@ -7,6 +7,7 @@
     @keydown.esc="() => $emit('close')"
   >
     <template #default>
+      <v-form v-model="isValidForm">
       <v-card>
         <v-toolbar color="primary" class="custom-toolbar">
           <p class="mb-5">SSH-Key Details</p>
@@ -60,24 +61,26 @@
         <v-card-actions class="justify-end mb-1 mr-2">
           <v-btn color="anchor" text @click="$emit('close')">Close</v-btn>
 
-          <v-tooltip v-model="showTooltip" text="No changes have been made" bottom>
+          <v-tooltip :disabled="hasChanges" text="No changes have been made" bottom>
             <template #activator="{ props }">
-              <div v-on="props">
-                <v-btn text :loading="loading" :disabled="!hasChanges" v-bind="props" @click="updateKey"> Save </v-btn>
+              <div v-bind="props">
+                <v-btn text :loading="loading" :disabled="!hasChanges || !isValidForm" v-bind="props" @click="updateKey"> Save </v-btn>
               </div>
             </template>
           </v-tooltip>
         </v-card-actions>
       </v-card>
+    </v-form>
     </template>
   </v-dialog>
 </template>
 
 <script lang="ts">
-import { capitalize, defineComponent, computed, type PropType, ref, watch } from "vue";
+import { capitalize, defineComponent, type PropType, ref, watch } from "vue";
 
 import type { SSHKeyData } from "@/types";
 import SSHKeysManagement from "@/utils/ssh";
+import { isAlphanumericWithSpace } from "@/utils/validators";
 
 export default defineComponent({
   name: "SSHDataDialog",
@@ -101,7 +104,8 @@ export default defineComponent({
     const loading = ref<boolean>(false);
     const hasChanges = ref<boolean>(false);
     const originalKey = ref<SSHKeyData>({ ...props.selectedKey });
-    const showTooltip = computed(() => !hasChanges.value);
+    const isValidForm = ref<boolean>(false);
+
     watch(
       () => props.open,
       newValue => {
@@ -150,6 +154,12 @@ export default defineComponent({
       if (name === props.selectedKey.name) {
         return true;
       }
+      if (isAlphanumericWithSpace("Invalid name")(name) !== true) {
+        return "Key name must only contain letters, numbers, and spaces within the name.";
+      }
+      if (name.length > 30) {
+        return "Please enter a key name with fewer than 30 characters.";
+      }
       const found = props.allKeys.find(key => key.name === name);
       return found ? "You have another key with the same name." : true;
     }
@@ -161,9 +171,9 @@ export default defineComponent({
       currentKey,
       sshRules,
       loading,
+      isValidForm,
       validateName,
       hasChanges,
-      showTooltip,
     };
   },
 });

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

@@ -3,8 +3,16 @@
     v-model="$props.open"
     max-width="800"
     attach="#modals"
-    @click:outside="() => $emit('close')"
-    @keydown.esc="() => $emit('close')"
+    @click:outside="
+      () => {
+        if (!generating && !savingKey) $emit('close');
+      }
+    "
+    @keydown.esc="
+      () => {
+        if (!generating && !savingKey) $emit('close');
+      }
+    "
   >
     <template #default>
       <v-form v-model="isValidForm">
@@ -23,7 +31,7 @@
             >
               <v-text-field
                 v-model="keyName"
-                hint="Leave this field empty to generate a name automatically, or enter a custom name to save it with your key."
+                hint="Enter a unique name (letters, numbers, and spaces only, less than 30 characters) to identify your SSH key."
                 class="mb-4"
                 hide-details="auto"
                 label="Name"
@@ -68,7 +76,7 @@
           </v-card-text>
 
           <v-card-actions class="justify-end mb-1 mr-2">
-            <v-btn color="anchor" text="Close" @click="$emit('close')" />
+            <v-btn color="anchor" :disabled="generating || savingKey" text="Close" @click="$emit('close')" />
 
             <v-btn
               v-if="$props.dialogType === SSHCreationMethod.Generate"
@@ -103,6 +111,7 @@ import { type Profile, useProfileManager } from "@/stores/profile_manager";
 import { SSHCreationMethod, type SSHKeyData } from "@/types";
 import { type Balance, loadBalance } from "@/utils/grid";
 import SSHKeysManagement from "@/utils/ssh";
+import { isAlphanumericWithSpace } from "@/utils/validators";
 
 const props = defineProps({
   open: {
@@ -156,7 +165,7 @@ function generateSSHKey() {
     id: keyId,
     publicKey: "",
     createdAt: sshKeysManagement.formatDate(now),
-    name: keyName.value,
+    name: keyName.value.trimEnd(),
     isActive: true,
   };
 
@@ -171,7 +180,7 @@ function createNewSSHKey() {
     id: keyId,
     publicKey: sshKey.value,
     createdAt: sshKeysManagement.formatDate(now),
-    name: keyName.value,
+    name: keyName.value.trimEnd(),
     isActive: true,
   };
 
@@ -185,7 +194,7 @@ function createNewSSHKey() {
     }
   }
 
-  createdKey.value.name = keyName.value;
+  createdKey.value.name = keyName.value.trimEnd();
 
   emits("save", createdKey.value);
 }
@@ -256,8 +265,9 @@ function sshRules(value: any) {
 
 function sshNameRules(value: any) {
   return [
+    (v: string) => !!v || "Key name is required.",
+    isAlphanumericWithSpace("Key name must only contain letters, numbers, and spaces within the name."),
     (v: string) => v.length < 30 || "Please enter a key name with fewer than 30 characters.",
-    (v: string) => !v.includes(" ") || "Key names cannot include spaces. Please use a name without spaces.",
     (v: string) => sshKeysManagement.availableName(v) || "You have another key with the same name.",
   ];
 }

packages/playground/src/utils/profile_manager.ts

@@ -1,6 +1,7 @@
 import type { GridClient } from "@threefold/grid_client";
 
 import router from "@/router";
+import type { SSHKeyData } from "@/types";
 
 import { createCustomToast, ToastType } from "./custom_toast";
 import { readEmail } from "./grid";
@@ -33,8 +34,15 @@ export async function handlePostLogin(grid: GridClient, password: string, email?
 
   // Migrate the ssh-key
   const sshKeysManagement = new SSHKeysManagement();
+  let newKeys: SSHKeyData[] = [];
   if (!sshKeysManagement.migrated()) {
-    const newKeys = sshKeysManagement.migrate();
+    newKeys = sshKeysManagement.migrate();
+  }
+  if (sshKeysManagement.needsDefaultNameAssignment()) {
+    newKeys = sshKeysManagement.assignDefaultNames();
+  }
+  if (newKeys.length > 0) {
     await sshKeysManagement.update(newKeys);
+    createCustomToast("SSH keys have been recovered successfully.", ToastType.success);
   }
 }

packages/playground/src/utils/ssh.ts

@@ -3,6 +3,7 @@ import crypto from "crypto";
 import { useProfileManager } from "@/stores/profile_manager";
 import type { SSHKeyData } from "@/types";
 
+import { isAlphanumericWithSpace } from "../utils/validators";
 import { createCustomToast, ToastType } from "./custom_toast";
 import { getGrid, storeSSH } from "./grid";
 import { downloadAsJson } from "./helpers";
@@ -11,7 +12,6 @@ import { downloadAsJson } from "./helpers";
  * Manages SSH key operations including migration, updating, exporting, deleting, and listing.
  */
 class SSHKeysManagement {
-  private oldKey = "";
   updateCost = 0.01;
   private words = [
     "moon",
@@ -36,20 +36,29 @@ class SSHKeysManagement {
     "cosmos",
   ];
 
+  /**
+   * Can be a string (legacy), SSHKeyData[] (current), or undefined.
+   * The string type is only for migration and should be removed after migration is complete.
+   */
+  private oldKeys: string | SSHKeyData[] | undefined;
+
   constructor() {
     const profileManager = useProfileManager();
-    this.oldKey = profileManager.profile?.ssh as unknown as string;
+    this.oldKeys = profileManager.profile?.ssh;
   }
 
   /**
    * Migrates an old SSH key string to the new SSHKeyData format.
    * @returns An array containing the migrated SSHKeyData.
    */
   migrate(): SSHKeyData[] {
+    if (this.migrated()) {
+      return this.oldKeys as SSHKeyData[];
+    }
     const userKeys: SSHKeyData[] = [];
 
     let keyName = "";
-    const parts = this.oldKey.split(" ");
+    const parts = (this.oldKeys as string).split(" ");
 
     if (parts.length < 3) {
       keyName = this.generateName()!;
@@ -61,7 +70,7 @@ class SSHKeysManagement {
       name: keyName,
       id: 1,
       isActive: true,
-      publicKey: this.oldKey,
+      publicKey: this.oldKeys as string,
     };
     userKeys.push(newKey);
     return userKeys;
@@ -72,7 +81,7 @@ class SSHKeysManagement {
    * @returns A boolean indicating whether the key has not been migrated.
    */
   migrated(): boolean {
-    return typeof this.oldKey !== "string";
+    return typeof this.oldKeys !== "string";
   }
 
   /**
@@ -94,24 +103,48 @@ class SSHKeysManagement {
 
     await storeSSH(grid!, copiedKeys);
     profileManager.updateSSH(copiedKeys);
+    this.oldKeys = profileManager.profile?.ssh;
   }
 
   /**
    * Generates a random name for an SSH key that is not included in the blocked names<user keys>.
    * @returns The generated SSH key name.
    * @throws Error if all names are blocked.
    */
-  generateName(): string | null {
-    // Filter out names that are already used
-    const blockedNames = this.list().map(key => key.name);
-    const availableNames = this.words.filter(name => !blockedNames.includes(name));
-
-    if (availableNames.length === 0) {
-      return null;
+  /**
+   * Generates a unique name for an SSH key.
+   * Tries to use the words list for random names, falls back to 'default', 'default1', ...
+   * @param existingNames Set of already used names
+   * @param useWords Whether to use the words list (default: true)
+   */
+  private getUniqueName(existingNames: Set<string>, useWords: boolean = true): string {
+    if (useWords) {
+      const availableNames = this.words.filter(name => !existingNames.has(name));
+      if (availableNames.length > 0) {
+        const name = availableNames[Math.floor(Math.random() * availableNames.length)];
+        existingNames.add(name);
+        return name;
+      }
     }
+    // Fallback to default naming
+    let i = 0;
+    let name = "default";
+    while (existingNames.has(name)) {
+      i++;
+      name = `default${i}`;
+    }
+    existingNames.add(name);
+    return name;
+  }
 
-    // Generate a random name from the available names
-    return availableNames[Math.floor(Math.random() * availableNames.length)];
+  /**
+   * Generates a random name for an SSH key that is not included in the blocked names<user keys>.
+   * @returns The generated SSH key name.
+   */
+  generateName(): string {
+    const blockedNames = new Set(this.list().map(key => key.name));
+    // Try to use words, fallback to default naming if all words are used
+    return this.getUniqueName(blockedNames, true);
   }
 
   /**
@@ -166,7 +199,7 @@ class SSHKeysManagement {
     let keys: SSHKeyData[] = [];
 
     if (this.migrated()) {
-      keys = this.oldKey as unknown as SSHKeyData[];
+      keys = this.oldKeys as unknown as SSHKeyData[];
     }
 
     // Profile created for the first time.
@@ -218,6 +251,35 @@ class SSHKeysManagement {
   availablePublicKey(publicKey: string): boolean {
     return !this.list().some(key => key.publicKey === publicKey);
   }
+  needsDefaultNameAssignment(keys?: SSHKeyData[]): boolean {
+    if (!keys) {
+      keys = this.oldKeys as SSHKeyData[];
+    }
+    return keys.some(key => isAlphanumericWithSpace("Invalid name")(key.name) !== true);
+  }
+
+  /**
+   * Checks all user keys for empty names and assigns a unique default name (default, default1, ...).
+   * Updates the keys in-place and returns the updated array.
+   * @param keys The SSH keys to check and update.
+   * @returns The updated array of SSH keys.
+   */
+  assignDefaultNames(keys?: SSHKeyData[]): SSHKeyData[] {
+    if (!keys) {
+      keys = this.oldKeys as SSHKeyData[];
+    }
+    const existingValidNames = new Set(
+      keys.map(k => k.name).filter(name => name && isAlphanumericWithSpace("Invalid name")(name) === true),
+    );
+    for (const key of keys) {
+      if (!key.name || isAlphanumericWithSpace("Invalid name")(key.name) !== true) {
+        key.name = this.getUniqueName(existingValidNames, false);
+      } else {
+        existingValidNames.add(key.name);
+      }
+    }
+    return keys;
+  }
 }
 
 export default SSHKeysManagement;

packages/playground/src/utils/validators.ts

@@ -158,6 +158,24 @@ export interface IsAlphanumeric {
   locale?: validator.AlphanumericLocale;
   options?: validator.IsAlphanumericOptions;
 }
+/**
+ * Validates that a string contains only alphanumeric characters and spaces.
+ * - No leading spaces allowed
+ * - No consecutive spaces allowed
+ * - Must contain at least one alphanumeric character
+ * - Spaces can only appear between alphanumeric characters
+ * @param msg - The error message to return if validation fails
+ * @returns A validation function that checks if a string meets the alphanumeric with space criteria
+ */
+export function isAlphanumericWithSpace(msg: string) {
+  return (value: string) => {
+    if (value.endsWith("  ") || !/^[a-zA-Z0-9]+( [a-zA-Z0-9]+)*$/.test(value.trimEnd())) {
+      return msg;
+    }
+    return true;
+  };
+}
+
 export function isAlphanumeric(msg: string, config: IsAlphanumeric = {}) {
   const { locale, options } = config;
   return (value: string) => {