From f6a8c8cf76189be47ceec6d7c790ac0a99c6d251 Mon Sep 17 00:00:00 2001 From: MeiMei <30769358+mei23@users.noreply.github.com> Date: Thu, 10 Jan 2019 10:22:45 +0900 Subject: [PATCH] Toggle show/hide password (#3865) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Toggle show/hide password * hoverでアンダーラインが中途半端に出てダサいので出さないように * Update signin.vue --- locales/ja-JP.yml | 2 ++ .../app/common/views/components/signin.vue | 2 +- .../app/common/views/components/ui/input.vue | 29 +++++++++++++++++++ 3 files changed, 32 insertions(+), 1 deletion(-) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 0717b104ba..814b08827b 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -132,6 +132,8 @@ common: line-width-thin: "細い" line-width-normal: "普通" line-width-thick: "太い" + hide-password: "パスワードを隠す" + show-password: "パスワードを表示する" do-not-use-in-production: "これは開発ビルドです。本番環境で使用しないでください。" user-suspended: "このユーザーは凍結されています。" diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue index 5deb3851b5..7efbde38b2 100644 --- a/src/client/app/common/views/components/signin.vue +++ b/src/client/app/common/views/components/signin.vue @@ -6,7 +6,7 @@ @ @{{ host }} - + {{ $t('password') }} diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue index d9683e2b90..2198b5bacb 100644 --- a/src/client/app/common/views/components/ui/input.vue +++ b/src/client/app/common/views/components/ui/input.vue @@ -39,6 +39,12 @@
+
+ + {{ $t('@.show-password') }} + {{ $t('@.hide-password') }} + +
@@ -97,6 +103,11 @@ export default Vue.extend({ required: false, default: false }, + withPasswordToggle: { + type: Boolean, + required: false, + default: false + }, inline: { type: Boolean, required: false, @@ -178,6 +189,13 @@ export default Vue.extend({ focus() { this.$refs.input.focus(); }, + togglePassword() { + if(this.type == 'password') { + this.type = 'text' + } else { + this.type = 'password' + } + }, chooseFile() { this.$refs.file.click(); }, @@ -356,6 +374,17 @@ root(fill) if fill padding-right 12px + > .toggle + cursor pointer + padding-left 0.5em + font-size 0.7em + opacity 0.7 + text-align left + + > a + color var(--inputLabel) + text-decoration none + > .desc margin 6px 0 font-size 13px