Toggle show/hide password (#3865)

* Toggle show/hide password

* hoverでアンダーラインが中途半端に出てダサいので出さないように

* Update signin.vue

2 files changed, 30 insertions, 1 deletions

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