feat: improve secrets dialog #2

Signed-off-by: seven <[email protected]>
geek-fun · Feb 22, 2024 · 82378b4 · 82378b4
1 parent aa5d534
commit 82378b4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 28 deletions.
diff --git a/src/views/secret/components/key-list.vue b/src/views/secret/components/key-list.vue
@@ -13,6 +13,16 @@ const { secrets } = toRefs(secretStore);
 </script>
 
 <style lang="scss" scoped>
+.secret-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 16px;
+}
+.secret-list .n-card:hover {
+  cursor: pointer;
+}
+
 .n-card {
   max-width: 300px;
 }

diff --git a/src/views/secret/components/new-key-dialog.vue b/src/views/secret/components/new-key-dialog.vue
@@ -1,13 +1,12 @@
 <template>
-  <n-modal v-model:show="showModal">
+  <n-modal v-model:show="showModal" @esc="closeModal" @mask-click="closeModal">
     <n-card
       style="width: 600px"
       role="dialog"
       aria-modal="true"
       :title="modalTitle"
       :bordered="false"
       class="secret-modal-card"
-      @mask-click="closeModal"
     >
       <template #header-extra>
         <n-icon size="26" @click="closeModal">
@@ -16,7 +15,7 @@
       </template>
       <div class="modal-content">
         <n-form
-          ref="connectFormRef"
+          ref="secretFormRef"
           label-placement="left"
           label-width="100"
           :model="formData"
@@ -31,7 +30,7 @@
           </n-grid>
         </n-form>
       </div>
-      <n-tabs type="line" animated>
+      <n-tabs type="line" animated class="secret-tabs">
         <n-tab-pane name="sshKeys" tab="SSH Keys">
           <n-grid cols="8" item-responsive responsive="screen" x-gap="10" y-gap="10">
             <n-grid-item span="8">
@@ -115,7 +114,7 @@ const { saveSecret } = secretStore;
 
 const lang = useLang();
 // DOM
-const connectFormRef = ref();
+const secretFormRef = ref();
 
 const showModal = ref(false);
 const modalTitle = ref(lang.t('secret.new'));
@@ -151,39 +150,20 @@ const showMedal = (secret: Secret | null) => {
 };
 
 const closeModal = () => {
-  if (formData.value) {
-    formData.value = defaultFormData;
-  }
+  formData.value = defaultFormData;
   showModal.value = false;
 };
 
 const validationPassed = watch(formData.value, async () => {
   try {
-    return await connectFormRef.value?.validate((errors: Array<FormValidationError>) => !errors);
+    return await secretFormRef.value?.validate((errors: Array<FormValidationError>) => !errors);
   } catch (e) {
     return false;
   }
 });
 
-// const verify = async (event: MouseEvent) => {
-//   event.preventDefault();
-//   testLoading.value = !testLoading.value;
-//   try {
-//     // @TODO: verify secret
-//     // await testConnection({ ...formData.value });
-//     message.success(lang.t('connection.testSuccess'));
-//   } catch (e) {
-//     const error = e as CustomError;
-//     message.error(`status: ${error.status}, details: ${error.details}`, {
-//       closable: true,
-//       keepAliveOnHover: true,
-//       duration: 10000,
-//     });
-//   } finally {
-//     testLoading.value = !testLoading.value;
-//   }
-// };
-//
+// @TODO: verify secret
+
 const submitSaveSecret = async (event: MouseEvent) => {
   event.preventDefault();
   saveLoading.value = !saveLoading.value;
@@ -201,6 +181,9 @@ defineExpose({ showMedal });
       cursor: pointer;
     }
   }
+  .secret-tabs {
+    min-height: 320px;
+  }
   .n-card__footer {
     .card-footer {
       display: flex;