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 0717b104b..814b08827 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 5deb3851b..7efbde38b 100644
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -6,7 +6,7 @@
 		<span slot="prefix">@</span>
 		<span slot="suffix">@{{ host }}</span>
 	</ui-input>
-	<ui-input v-model="password" type="password" required styl="fill">
+	<ui-input v-model="password" type="password" :with-password-toggle="true" required styl="fill">
 		<span>{{ $t('password') }}</span>
 		<span slot="prefix"><fa icon="lock"/></span>
 	</ui-input>
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index d9683e2b9..2198b5bac 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 @@
 		</template>
 		<div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
 	</div>
+	<div class="toggle" v-if="withPasswordToggle">
+		<a @click='togglePassword'>
+			<span v-if="type == 'password'"><fa :icon="['fa', 'eye']"/> {{ $t('@.show-password') }}</span>
+			<span v-if="type != 'password'"><fa :icon="['far', 'eye-slash']"/> {{ $t('@.hide-password') }}</span>
+		</a>
+	</div>
 	<div class="desc"><slot name="desc"></slot></div>
 </div>
 </template>
@@ -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