Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2025-04-19 13:32:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: use native a-input-password for password field

Browse source
This commit is contained in:
Shishkevich D. 2025-04-04 08:43:21 +00:00
parent 3aca18c9de
commit 1243a3cfe8
4 changed files with 11 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
web/html/component/aPasswordInput.html
View file

@ -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}}

11
web/html/login.html
View file

@ -507,14 +507,16 @@
</a-input> </a-input>
</a-form-item> </a-form-item>
<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"> 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>
<a-form-item v-if="secretEnable"> <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"> 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-form-item> <a-form-item>
<a-row justify="center" class="centered"> <a-row justify="center" class="centered">
@ -538,7 +540,6 @@
</a-layout> </a-layout>
{{template "js" .}} {{template "js" .}}
{{template "component/aThemeSwitch" .}} {{template "component/aThemeSwitch" .}}
{{template "component/aPasswordInput" .}}
<script> <script>
const app = new Vue({ const app = new Vue({
delimiters: ['[[', ']]'], delimiters: ['[[', ']]'],

4
web/html/settings.html
View file

@ -53,6 +53,9 @@
color: inherit; color: inherit;
font-size: 24px; font-size: 24px;
} }
.dark .ant-input-password-icon {
color: var(--dark-color-text-primary);
}
</style> </style>
<body> <body>
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme"> <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> <script src="{{ .base_path }}assets/js/model/setting.js?{{ .cur_ver }}"></script>
{{template "component/aSidebar" .}} {{template "component/aSidebar" .}}
{{template "component/aThemeSwitch" .}} {{template "component/aThemeSwitch" .}}
{{template "component/aPasswordInput" .}}
{{template "component/aSettingListItem" .}} {{template "component/aSettingListItem" .}}
<script> <script>
const app = new Vue({ const app = new Vue({

4
web/html/settings/panel/security.html
View file

@ -10,7 +10,7 @@
<a-setting-list-item paddings="small"> <a-setting-list-item paddings="small">
<template #title>{{ i18n "pages.settings.currentPassword"}}</template> <template #title>{{ i18n "pages.settings.currentPassword"}}</template>
<template #control> <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> </template>
</a-setting-list-item> </a-setting-list-item>
<a-setting-list-item paddings="small"> <a-setting-list-item paddings="small">
@ -22,7 +22,7 @@
<a-setting-list-item paddings="small"> <a-setting-list-item paddings="small">
<template #title>{{ i18n "pages.settings.newPassword"}}</template> <template #title>{{ i18n "pages.settings.newPassword"}}</template>
<template #control> <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> </template>
</a-setting-list-item> </a-setting-list-item>
<a-list-item> <a-list-item>