Toggle show/hide password (#3865)

* Toggle show/hide password

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

* Update signin.vue
This commit is contained in:
MeiMei 2019-01-10 10:22:45 +09:00 committed by syuilo
parent af61a7a17f
commit f6a8c8cf76
3 changed files with 32 additions and 1 deletions

View file

@ -132,6 +132,8 @@ common:
line-width-thin: "細い" line-width-thin: "細い"
line-width-normal: "普通" line-width-normal: "普通"
line-width-thick: "太い" line-width-thick: "太い"
hide-password: "パスワードを隠す"
show-password: "パスワードを表示する"
do-not-use-in-production: "これは開発ビルドです。本番環境で使用しないでください。" do-not-use-in-production: "これは開発ビルドです。本番環境で使用しないでください。"
user-suspended: "このユーザーは凍結されています。" user-suspended: "このユーザーは凍結されています。"

View file

@ -6,7 +6,7 @@
<span slot="prefix">@</span> <span slot="prefix">@</span>
<span slot="suffix">@{{ host }}</span> <span slot="suffix">@{{ host }}</span>
</ui-input> </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>{{ $t('password') }}</span>
<span slot="prefix"><fa icon="lock"/></span> <span slot="prefix"><fa icon="lock"/></span>
</ui-input> </ui-input>

View file

@ -39,6 +39,12 @@
</template> </template>
<div class="suffix" ref="suffix"><slot name="suffix"></slot></div> <div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
</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 class="desc"><slot name="desc"></slot></div>
</div> </div>
</template> </template>
@ -97,6 +103,11 @@ export default Vue.extend({
required: false, required: false,
default: false default: false
}, },
withPasswordToggle: {
type: Boolean,
required: false,
default: false
},
inline: { inline: {
type: Boolean, type: Boolean,
required: false, required: false,
@ -178,6 +189,13 @@ export default Vue.extend({
focus() { focus() {
this.$refs.input.focus(); this.$refs.input.focus();
}, },
togglePassword() {
if(this.type == 'password') {
this.type = 'text'
} else {
this.type = 'password'
}
},
chooseFile() { chooseFile() {
this.$refs.file.click(); this.$refs.file.click();
}, },
@ -356,6 +374,17 @@ root(fill)
if fill if fill
padding-right 12px 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 > .desc
margin 6px 0 margin 6px 0
font-size 13px font-size 13px