Enhance SSH dialog user experience

packages/playground/src/components/node_details.vue

@@ -11,14 +11,8 @@
   >
     <v-toolbar color="primary">
       <div class="d-flex justify-center">
-        <v-btn
-          icon
-          dark
-          @click="() => $emit('close-dialog', false)"
-        >
-          <v-icon color="anchor">
-            mdi-close
-          </v-icon>
+        <v-btn icon dark @click="() => $emit('close-dialog', false)">
+          <v-icon color="anchor"> mdi-close </v-icon>
         </v-btn>
       </div>
     </v-toolbar>
@@ -33,87 +27,37 @@
     <template v-else-if="isError">
       <v-card class="d-flex justify-center align-center h-screen">
         <div class="text-center w-100 pa-3">
-          <v-icon
-            variant="tonal"
-            color="error"
-            style="font-size: 50px"
-            icon="mdi-close-circle-outline"
-          />
+          <v-icon variant="tonal" color="error" style="font-size: 50px" icon="mdi-close-circle-outline" />
           <p class="mt-4 mb-4 font-weight-bold text-error">
             {{ errorMessage }}
           </p>
-          <v-btn
-            class="mr-4"
-            text="Try Again"
-            @click="requestNode"
-          />
-          <v-btn
-            color="error"
-            text="Cancel"
-            @click="(val: boolean) => closeDialog(val)"
-          />
+          <v-btn class="mr-4" text="Try Again" @click="requestNode" />
+          <v-btn color="error" text="Cancel" @click="(val: boolean) => closeDialog(val)" />
         </div>
       </v-card>
     </template>
 
     <template v-else>
       <v-card>
-        <node-resources-charts
-          :node="node"
-          :is-live-stats="isLiveStats"
-          :hint-message="errorLoadingStatsMessage"
-        />
-        <v-row
-          class="pa-8 mt-5"
-          justify-md="start"
-          justify-sm="center"
-        >
-          <v-col
-            cols="12"
-            md="6"
-            sm="12"
-          >
+        <node-resources-charts :node="node" :is-live-stats="isLiveStats" :hint-message="errorLoadingStatsMessage" />
+        <v-row class="pa-8 mt-5" justify-md="start" justify-sm="center">
+          <v-col cols="12" md="6" sm="12">
             <node-details-card :node="node" />
-            <farm-details-card
-              class="mt-5"
-              :node="node"
-            />
-            <interfaces-details-card
-              class="mt-5"
-              :node="node"
-            />
+            <farm-details-card class="mt-5" :node="node" />
+            <interfaces-details-card class="mt-5" :node="node" />
             <public-config-details-card
               v-if="node.publicConfig && node.publicConfig.domain"
               class="mt-5"
               :node="node"
             />
 
-            <cpu-benchmark-card
-              v-if="hasActiveProfile && node.healthy"
-              class="mt-5"
-              :node="node"
-            />
+            <cpu-benchmark-card v-if="hasActiveProfile && node.healthy" class="mt-5" :node="node" />
           </v-col>
-          <v-col
-            cols="12"
-            md="6"
-            sm="12"
-          >
+          <v-col cols="12" md="6" sm="12">
             <country-details-card :node="node" />
-            <twin-details-card
-              class="mt-3"
-              :node="node"
-            />
-            <gpu-details-card
-              v-if="node.gpus?.length"
-              class="mt-3"
-              :node="node"
-            />
-            <i-perf-card
-              v-if="hasActiveProfile && node.healthy"
-              class="mt-3"
-              :node="node"
-            />
+            <twin-details-card class="mt-3" :node="node" />
+            <gpu-details-card v-if="node.gpus?.length" class="mt-3" :node="node" />
+            <i-perf-card v-if="hasActiveProfile && node.healthy" class="mt-3" :node="node" />
           </v-col>
         </v-row>
       </v-card>
@@ -143,7 +87,6 @@ import { getNode, getNodeStatusColor } from "@/utils/get_nodes";
 import IPerfCard from "./node_details_cards/iperf_details_card.vue";
 import NodeResourcesCharts from "./node_resources_charts.vue";
 export default {
-
   components: {
     NodeResourcesCharts,
     NodeDetailsCard,

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);
   }
 }