From 1243a3cfe81d85666c4714ee09886af756c47a4d Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Fri, 4 Apr 2025 08:43:21 +0000
Subject: [PATCH] refactor: use native `a-input-password` for password field

---
 web/html/component/aPasswordInput.html | 57 --------------------------
 web/html/login.html                    | 11 ++---
 web/html/settings.html                 |  4 +-
 web/html/settings/panel/security.html  |  4 +-
 4 files changed, 11 insertions(+), 65 deletions(-)
 delete mode 100644 web/html/component/aPasswordInput.html

diff --git a/web/html/component/aPasswordInput.html b/web/html/component/aPasswordInput.html
deleted file mode 100644
index e688eba6..00000000
--- a/web/html/component/aPasswordInput.html
+++ /dev/null
@@ -1,57 +0,0 @@
-{{define "component/passwordInput"}}
-<template>
-  <a-input :value="value" :type="showPassword ? 'text' : 'password'" :placeholder="placeholder"
-    :autocomplete="autocomplete" :name="name" @input="$emit('input', $event.target.value)">
-    <template v-if="icon" #prefix>
-      <a-icon :type="icon" :style="{ fontSize: '16px' }" />
-    </template>
-    <template #addonAfter>
-      <a-icon :type="showPassword ? 'eye-invisible' : 'eye'" @click="toggleShowPassword" :style="{ fontSize: '16px' }" />
-    </template>
-  </a-input>
-</template>
-{{end}}
-
-{{define "component/aPasswordInput"}}
-<script>
-  Vue.component('a-password-input', {
-    props: {
-      'title': {
-        type: String,
-        required: false,
-      },
-      'value': {
-        type: String,
-        required: false,
-      },
-      'placeholder': {
-        type: String,
-        required: false,
-      },
-      'autocomplete': {
-        type: String,
-        required: false,
-      },
-      'name': {
-        type: String,
-        required: false,
-      },
-      'icon': {
-        type: undefined,
-        required: false
-      }
-    },
-    template: `{{template "component/passwordInput"}}`,
-    data() {
-      return {
-        showPassword: false,
-      };
-    },
-    methods: {
-      toggleShowPassword() {
-        this.showPassword = !this.showPassword;
-      },
-    },
-  });
-</script>
-{{end}}
\ No newline at end of file
diff --git a/web/html/login.html b/web/html/login.html
index a2e843ec..08512af8 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -507,14 +507,16 @@
                       </a-input>
                     </a-form-item>
                     <a-form-item>
-                      <a-password-input autocomplete="password" name="password" icon="lock" v-model.trim="user.password"
+                      <a-input-password autocomplete="password" name="password" icon="lock" v-model.trim="user.password"
                         placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
-                      </a-password-input>
+                        <a-icon slot="prefix" type="lock" :style="{ fontSize: '16px' }"></a-icon>
+                      </a-input-password>
                     </a-form-item>
                     <a-form-item v-if="secretEnable">
-                      <a-password-input autocomplete="secret" name="secret" icon="key" v-model.trim="user.loginSecret"
+                      <a-input-password autocomplete="secret" name="secret" icon="lock" v-model.trim="user.loginSecret"
                         placeholder='{{ i18n "secretToken" }}' @keydown.enter.native="login">
-                      </a-password-input>
+                        <a-icon slot="prefix" type="key" :style="{ fontSize: '16px' }"></a-icon>
+                      </a-input-password>
                     </a-form-item>
                     <a-form-item>
                       <a-row justify="center" class="centered">
@@ -538,7 +540,6 @@
   </a-layout>
   {{template "js" .}}
   {{template "component/aThemeSwitch" .}}
-  {{template "component/aPasswordInput" .}}
   <script>
     const app = new Vue({
       delimiters: ['[[', ']]'],
diff --git a/web/html/settings.html b/web/html/settings.html
index 2cd37cdb..c8bfabad 100644
--- a/web/html/settings.html
+++ b/web/html/settings.html
@@ -53,6 +53,9 @@
     color: inherit;
     font-size: 24px;
   }
+  .dark .ant-input-password-icon {
+    color: var(--dark-color-text-primary);
+  }
 </style>
 <body>
   <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
@@ -119,7 +122,6 @@
 <script src="{{ .base_path }}assets/js/model/setting.js?{{ .cur_ver }}"></script>
 {{template "component/aSidebar" .}}
 {{template "component/aThemeSwitch" .}}
-{{template "component/aPasswordInput" .}}
 {{template "component/aSettingListItem" .}}
 <script>
   const app = new Vue({
diff --git a/web/html/settings/panel/security.html b/web/html/settings/panel/security.html
index 5a13cc8a..48e7796f 100644
--- a/web/html/settings/panel/security.html
+++ b/web/html/settings/panel/security.html
@@ -10,7 +10,7 @@
         <a-setting-list-item paddings="small">
             <template #title>{{ i18n "pages.settings.currentPassword"}}</template>
             <template #control>
-                <a-password-input autocomplete="current-password" v-model="user.oldPassword"></a-password-input>
+                <a-input-password autocomplete="current-password" v-model="user.oldPassword"></a-input-password>
             </template>
         </a-setting-list-item>
         <a-setting-list-item paddings="small">
@@ -22,7 +22,7 @@
         <a-setting-list-item paddings="small">
             <template #title>{{ i18n "pages.settings.newPassword"}}</template>
             <template #control>
-                <a-password-input autocomplete="new-password" v-model="user.newPassword"></a-password-input>
+                <a-input-password autocomplete="new-password" v-model="user.newPassword"></a-input-password>
             </template>
         </a-setting-list-item>
         <a-list-item>