Toggle show/hide password (#3865)
* Toggle show/hide password * hoverでアンダーラインが中途半端に出てダサいので出さないように * Update signin.vue
This commit is contained in:
parent
af61a7a17f
commit
f6a8c8cf76
|
@ -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: "このユーザーは凍結されています。"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue