perf(ui/sidebar): mask sensitive input values in sidebar settings (#494)

ui/artalk-sidebar/src/components/PreferenceItem.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import settings, { patchOptionValue, type OptionNode } from '../lib/settings'
+import { isSensitiveConfigPath } from '@/lib/settings-sensitive'
 
 const props = defineProps<{
   node: OptionNode
 }>()
 
 const value = ref('')
 const disabled = ref(false)
+const sensitiveHidden = ref(true)
 
 const { t } = useI18n()
 
@@ -21,12 +23,19 @@ function onChange() {
   settings.get().setCustom(props.node.path, v)
   // console.log('[SET]', props.node.path, v)
 }
+
+const envVariableName = computed(() => `ATK_${props.node.path.replace(/\./g, '_').toUpperCase()}`)
+const isSensitive = computed(() => isSensitiveConfigPath(props.node.path))
+
+function toggleSensitiveHidden() {
+  sensitiveHidden.value = !sensitiveHidden.value
+}
 </script>
 
 <template>
   <div class="pf-item">
     <div class="info">
-      <div class="title">{{ node.title }}</div>
+      <div class="title" :title="envVariableName">{{ node.title }}</div>
       <div v-if="node.subTitle" class="sub-title">{{ node.subTitle }}</div>
     </div>
 
@@ -40,7 +49,7 @@ function onChange() {
         <PreferenceArr :node="node" />
       </template>
 
-      <!-- 候选框 -->
+      <!-- Dropdown -->
       <template v-else-if="node.selector">
         <select v-model="value" :disabled="disabled" @change="onChange">
           <option v-for="(item, i) in node.selector" :key="i" :value="item">
@@ -49,14 +58,24 @@ function onChange() {
         </select>
       </template>
 
-      <!-- 开关 -->
+      <!-- Toggle -->
       <template v-else-if="node.type === 'boolean'">
         <input v-model="value" type="checkbox" :disabled="disabled" @change="onChange" />
       </template>
 
-      <!-- 文本框 -->
+      <!-- Text -->
       <template v-else>
-        <input v-model="value" type="text" :disabled="disabled" @change="onChange" />
+        <input
+          v-model="value"
+          :type="!isSensitive || !sensitiveHidden ? 'text' : 'password'"
+          :disabled="disabled"
+          @change="onChange"
+        />
+        <div v-if="isSensitive" class="input-suffix">
+          <div class="hidden-switch" @click="toggleSensitiveHidden()">
+            <i :class="['atk-icon', `atk-icon-eye-${sensitiveHidden ? 'on' : 'off'}`]" />
+          </div>
+        </div>
       </template>
     </div>
   </div>
@@ -112,6 +131,29 @@ function onChange() {
       opacity: 0;
       transition: opacity 0.2s;
     }
+
+    .input-suffix {
+      margin-left: 5px;
+    }
+
+    .hidden-switch {
+      cursor: pointer;
+      padding-left: 10px;
+
+      .atk-icon {
+        &::after {
+          background-color: #697182;
+        }
+
+        &.atk-icon-eye-on::after {
+          mask-image: url('@/assets/icon-eye-on.svg');
+        }
+
+        &.atk-icon-eye-off::after {
+          mask-image: url('@/assets/icon-eye-off.svg');
+        }
+      }
+    }
   }
 }
 </style>

ui/artalk-sidebar/src/lib/settings-sensitive.ts

@@ -0,0 +1,44 @@
+/**
+ * List of sensitive config paths.
+ *
+ * (which should be hidden in the UI)
+ */
+export const SensitiveConfigPaths = [
+  'app_key',
+  'admin_notify.ding_talk.secret',
+  'admin_notify.line.channel_access_token',
+  'admin_notify.line.channel_secret',
+  'admin_notify.lark.webhook_url',
+  'admin_notify.slack.oauth_token',
+  'admin_notify.telegram.api_token',
+  'admin_notify.webhook.url',
+  'admin.notify.bark.server',
+  'auth.apple.client_secret',
+  'auth.auth0.client_secret',
+  'auth.discord.client_secret',
+  'auth.facebook.client_secret',
+  'auth.gitea.client_secret',
+  'auth.github.client_secret',
+  'auth.gitlab.client_secret',
+  'auth.google.client_secret',
+  'auth.line.client_secret',
+  'auth.mastodon.client_secret',
+  'auth.microsoft.client_secret',
+  'auth.patreon.client_secret',
+  'auth.slack.client_secret',
+  'auth.tiktok.client_secret',
+  'auth.twitter.client_secret',
+  'auth.wechat.client_secret',
+  'auth.steam.api_key',
+  'captcha.geetest.captcha_key',
+  'captcha.hcaptcha.secret_key',
+  'captcha.recaptcha.secret_key',
+  'captcha.turnstile.secret_key',
+  'db.password',
+  'email.ali_dm.access_key_secret',
+  'email.smtp.password',
+]
+
+export function isSensitiveConfigPath(path: string) {
+  return SensitiveConfigPaths.includes(path)
+}

ui/artalk-sidebar/src/pages/settings.vue

@@ -160,6 +160,7 @@ function save() {
   }
 
   :deep(input[type='text']),
+  :deep(input[type='password']),
   :deep(select) {
     font-size: 17px;
     width: 100%;