feat: Implement secret readability control based on system settings

src/components/Apps/AccountListTable/ViewSecret.vue

@@ -62,6 +62,7 @@ import Dialog from '@/components/Dialog/index.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
 import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
 import { encryptPassword } from '@/utils/secure'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'ShowSecretInfo',
@@ -111,6 +112,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      publicSettings: 'publicSettings'
+    }),
     secretTypeLabel() {
       return this.account['secret_type'].label || 'Password'
     },
@@ -146,7 +150,11 @@ export default {
       })
     },
     showSecretDialog() {
-      return this.$axios.get(this.url, { disableFlashErrorMsg: true }).then((res) => {
+      if (!this.publicSettings.SECURITY_ACCOUNT_SECRET_READ) {
+        this.$message.warning(this.$tc('AccountSecretReadDisabled'))
+        return
+      }
+      return this.$axios.get(this.url).then((res) => {
         this.secretInfo = res
         this.sshKeyFingerprint = res?.spec_info?.ssh_key_fingerprint || '-'
         this.showSecret = true
@@ -167,54 +175,54 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .item-textarea ::v-deep .el-textarea__inner {
+.item-textarea ::v-deep .el-textarea__inner {
-    height: 110px;
+  height: 110px;
+}
+
+.el-form-item {
+  border-bottom: 1px solid #EBEEF5;
+  padding: 5px 0;
+  margin-bottom: 0;
+
+  &:last-child {
+    border-bottom: none;
   }
 
-  .el-form-item {
+  ::v-deep .el-form-item__label {
-    border-bottom: 1px solid #EBEEF5;
+    display: flex;
-    padding: 5px 0;
+    align-items: center;
-    margin-bottom: 0;
+    justify-content: flex-start;
-
+    padding-right: 20px;
-    &:last-child {
+    line-height: 30px;
-      border-bottom: none;
+    word-break: keep-all;
-    }
+    overflow-wrap: break-word;
-
+    white-space: normal;
-    ::v-deep .el-form-item__label {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      padding-right: 20px;
-      line-height: 30px;
-      word-break: keep-all;
-      overflow-wrap: break-word;
-      white-space: normal;
-    }
-
-    ::v-deep .el-form-item__content {
-      line-height: 30px;
-
-      pre {
-        margin: 0;
-      }
-    }
   }
 
-  ul {
+  ::v-deep .el-form-item__content {
-    margin: 0;
+    line-height: 30px;
-  }
 
-  li {
+    pre {
-    display: block;
+      margin: 0;
-    font-size: 13px;
-    margin-bottom: 8px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    .title {
-      color: #303133;
-      font-weight: 500;
     }
   }
+}
+
+ul {
+  margin: 0;
+}
+
+li {
+  display: block;
+  font-size: 13px;
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .title {
+    color: #303133;
+    font-weight: 500;
+  }
+}
 </style>

src/components/Table/TableFormatters/SecretViewerFormatter.vue

@@ -38,6 +38,7 @@
 <script>
 import { copy, downloadText } from '@/utils/common/index'
 import BaseFormatter from '@/components/Table/TableFormatters/base.vue'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'SecretViewerFormatter',
@@ -69,6 +70,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      publicSettings: 'publicSettings'
+    }),
     hasShow: function() {
       return this.formatterArgs.hasShow
     },
@@ -140,6 +144,10 @@ export default {
   },
   methods: {
     async getAccountSecret() {
+      if (!this.publicSettings.SECURITY_ACCOUNT_SECRET_READ) {
+        this.$message.warning(this.$tc('AccountSecretReadDisabled'))
+        return
+      }
       if (this.formatterArgs.secretFrom === 'cellValue' || this.getIt) {
         return
       }
@@ -178,48 +186,48 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-  .content {
+.content {
-    display: inline-block;
+  display: inline-block;
-    width: 100%;
+  width: 100%;
+  overflow: hidden;
+  //white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 13px;
+
+  .text {
+    flex: 1;
+    display: inline;
+    margin: 0;
+    padding: 0;
     overflow: hidden;
-    //white-space: nowrap;
+    white-space: nowrap;
     text-overflow: ellipsis;
+  }
+
+  .action {
     font-size: 13px;
+    cursor: pointer;
+    margin-left: 1px;
+    display: inline;
 
-    .text {
+    &.right {
-      flex: 1;
+      float: right;
-      display: inline;
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
     }
 
-    .action {
+    .fa {
-      font-size: 13px;
+      margin-right: 5px;
-      cursor: pointer;
-      margin-left: 1px;
-      display: inline;
 
-      &.right {
+      &:hover {
-        float: right;
+        color: var(--color-primary);
-      }
-
-      .fa {
-        margin-right: 5px;
-
-        &:hover {
-          color: var(--color-primary);
-        }
       }
     }
   }
+}
 
-  .edit-input ::v-deep input {
+.edit-input ::v-deep input {
-    border-left: none;
+  border-left: none;
-    border-right: none;
+  border-right: none;
-    border-top: none;
+  border-top: none;
-    height: 30px;
+  height: 30px;
-  }
+}
 </style>