add password component

1 files changed, 35 insertions, 0 deletions

diff --git a/web/html/xui/component/password.html b/web/html/xui/component/password.html
new file mode 100644
index 00000000..ebea3be6
--- /dev/null
+++ b/web/html/xui/component/password.html
@@ -0,0 +1,35 @@
+{{define "component/passwordInput"}}
+<template>
+    <a-input :value="value" :type="showPassword ? 'text' : 'password'"
+            :placeholder="placeholder"
+            @input="$emit('input', $event.target.value)">
+        <template v-if="icon" #prefix>
+            <a-icon :type="icon" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
+        </template>
+        <template #addonAfter>
+            <a-icon :type="showPassword ? 'eye-invisible' : 'eye'"
+                    @click="toggleShowPassword"
+                    :style="'font-size: 16px;' + themeSwitcher.textStyle" />
+        </template>
+    </a-input>
+</template>
+{{end}}
+
+{{define "component/password"}}
+<script>
+  Vue.component('password-input', {
+    props: ["title", "value", "placeholder", "icon"],
+    template: `{{template "component/passwordInput"}}`,
+    data() {
+      return {
+        showPassword: false,
+      };
+    },
+    methods: {
+      toggleShowPassword() {
+        this.showPassword = !this.showPassword;
+      },
+    },
+  });
+</script>
+{{end}}
\ No newline at end of file