From 9c6e761680a46c1fee14cbda9ead8b7268027aeb Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Wed, 31 May 2023 18:26:16 +0800
Subject: [PATCH] refactor(module): Improved some details of the GCP

---
 src/i18n/Modules.js                           |  2 +-
 .../components/GCPIoT/DeviceDialog.vue        | 14 ++++-----
 .../components/GCPIoT/PubKeyDialog.vue        | 29 ++++++++++++-------
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/i18n/Modules.js b/src/i18n/Modules.js
index 5e72da4d..c711f904 100644
--- a/src/i18n/Modules.js
+++ b/src/i18n/Modules.js
@@ -396,7 +396,7 @@ export default {
   },
   devicePublicKey: {
     zh: '设备公钥',
-    en: 'Device public key',
+    en: 'Device Public Key',
   },
   devicePublicKeyTip: {
     zh: '添加至多 3 个用于对此设备进行身份验证的公钥',
diff --git a/src/views/Modules/components/GCPIoT/DeviceDialog.vue b/src/views/Modules/components/GCPIoT/DeviceDialog.vue
index f46dfc81..dae13761 100644
--- a/src/views/Modules/components/GCPIoT/DeviceDialog.vue
+++ b/src/views/Modules/components/GCPIoT/DeviceDialog.vue
@@ -79,13 +79,11 @@ import moment from 'moment'
 import { createDevice, updateDevice } from '@/api/modules.js'
 import PubKeyDialog from './PubKeyDialog.vue'
 
-const keyBeginning = `-----BEGIN PUBLIC KEY-----\n`
-const keyEnding = `\n-----END PUBLIC KEY-----`
+const keyBeginningReg = /^(\n)*-----(\w|\s)+-----\n/
+const keyEndingReg = /\n-----(\w|\s)+-----(\n)*$/
 const cutKeyToShow = (key) => {
-  const beginningIndex = key.indexOf(keyBeginning)
-  const endingIndex = key.indexOf(keyEnding)
-  const beginning = beginningIndex > -1 ? key.slice(keyBeginning.length, keyBeginning.length + 10) : key.slice(0, 10)
-  const ending = endingIndex > -1 ? key.slice(endingIndex - 10, endingIndex) : key.slice(-10)
+  const beginning = key.replace(keyBeginningReg, '').slice(0, 10)
+  const ending = key.replace(keyEndingReg, '').slice(-10)
   return `${beginning}....${ending}`
 }
 
@@ -111,7 +109,7 @@ export default {
     return {
       device: createRawDevice(),
       rules: {
-        deviceid: { required: true },
+        deviceid: { required: true, message: this.$t('Tools.pleaseEnter') },
       },
       isPubKeyDialogShow: false,
       isSubmitting: false,
@@ -193,7 +191,7 @@ export default {
     },
     async save() {
       try {
-        this.$refs.recordForm.validate()
+        await this.$refs.recordForm.validate()
         this.isSubmitting = true
         if (this.editedDevice) {
           await this.requestUpdateDevice()
diff --git a/src/views/Modules/components/GCPIoT/PubKeyDialog.vue b/src/views/Modules/components/GCPIoT/PubKeyDialog.vue
index a7f51f7f..78e05e61 100644
--- a/src/views/Modules/components/GCPIoT/PubKeyDialog.vue
+++ b/src/views/Modules/components/GCPIoT/PubKeyDialog.vue
@@ -18,7 +18,12 @@
         </el-col>
         <el-col :span="24">
           <el-form-item prop="key">
-            <FileEditor v-model="keyFile" :accept="CER_FILE_ACCEPTS" @update="setKeyValue" />
+            <FileEditor
+              v-model="keyFile"
+              :raw-accept="CER_FILE_ACCEPTS"
+              @update="setKeyValue"
+              :placeholder="textareaPlaceholder"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="9">
@@ -28,13 +33,15 @@
               type="datetime"
               format="yyyy-MM-dd HH:mm:ss"
               value-format="timestamp"
+              :placeholder="$t('General.neverExpire')"
+              clearable
             />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-align-footer">
-      <el-button plain size="small" @click="closeDialog">{{ $t('Base.cancel') }}'</el-button>
+      <el-button plain size="small" @click="closeDialog">{{ $t('Base.cancel') }}</el-button>
       <el-button type="primary" size="small" @click="save">{{ $t('Base.confirm') }}</el-button>
     </div>
   </el-dialog>
@@ -43,12 +50,16 @@
 <script>
 import FileEditor from '@/components/FileEditor.vue'
 
+const textareaPlaceholder = `-----BEGIN PUBLIC KEY-----
+(Public key value must be in PEM format)
+-----END PUBLIC KEY-----`
+
 const keyTypeOpts = ['RSA_PEM', 'RSA_X509_PEM', 'ES256_PEM', 'ES256_X509_PEM']
 
 const createRawRecord = () => ({
   key_type: keyTypeOpts[0],
   key: '',
-  expires_at: '',
+  expires_at: undefined,
 })
 
 export default {
@@ -65,10 +76,11 @@ export default {
     return {
       CER_FILE_ACCEPTS,
       keyTypeOpts,
+      textareaPlaceholder,
       keyFile: {},
       record: createRawRecord(),
       rules: {
-        key: { required: true },
+        key: { required: true, message: this.$t('Tools.pleaseEnter') },
       },
     }
   },
@@ -86,14 +98,11 @@ export default {
   watch: {
     dialogVisible(val) {
       if (!val) {
-        this.record = createRawRecord()
-        this.keyFile = {}
-      } else {
+        this.$refs.record.clearValidate()
         this.$nextTick(() => {
-          if (this.$refs.record.clearValidate) {
-            this.$refs.record.clearValidate()
-          }
+          this.record = createRawRecord()
         })
+        this.keyFile = {}
       }
     },
   },