feat: add visibility toggle to inputs (#3940)
Co-authored-by: Arc <ben@arc.wales>
This commit is contained in:
+1
-1
File diff suppressed because one or more lines are too long
@@ -452,7 +452,9 @@ window.app.component('username-password', {
|
|||||||
confirmationMethod: 'code',
|
confirmationMethod: 'code',
|
||||||
confirmationEmail: '',
|
confirmationEmail: '',
|
||||||
confirmationCode: this.invitationCode || '',
|
confirmationCode: this.invitationCode || '',
|
||||||
showConfirmationCode: false
|
showConfirmationCode: false,
|
||||||
|
showPwd: false,
|
||||||
|
showPwdRepeat: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
@@ -774,7 +774,13 @@ include('components/lnbits-error.vue') %}
|
|||||||
v-model="password"
|
v-model="password"
|
||||||
name="password"
|
name="password"
|
||||||
:label="$t('password') + ' *'"
|
:label="$t('password') + ' *'"
|
||||||
type="password"
|
:type="showPwd ? 'text' : 'password'"
|
||||||
|
><template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
:name="showPwd ? 'visibility' : 'visibility_off'"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="showPwd = !showPwd"
|
||||||
|
/> </template
|
||||||
></q-input>
|
></q-input>
|
||||||
<div class="row justify-end">
|
<div class="row justify-end">
|
||||||
<q-btn
|
<q-btn
|
||||||
@@ -803,16 +809,28 @@ include('components/lnbits-error.vue') %}
|
|||||||
filled
|
filled
|
||||||
v-model="password"
|
v-model="password"
|
||||||
:label="$t('password') + ' *'"
|
:label="$t('password') + ' *'"
|
||||||
type="password"
|
:type="showPwd ? 'text' : 'password'"
|
||||||
:rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
|
:rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
|
||||||
|
><template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
:name="showPwd ? 'visibility' : 'visibility_off'"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="showPwd = !showPwd"
|
||||||
|
/> </template
|
||||||
></q-input>
|
></q-input>
|
||||||
<q-input
|
<q-input
|
||||||
dense
|
dense
|
||||||
filled
|
filled
|
||||||
v-model="passwordRepeat"
|
v-model="passwordRepeat"
|
||||||
:label="$t('password_repeat') + ' *'"
|
:label="$t('password_repeat') + ' *'"
|
||||||
type="password"
|
:type="showPwdRepeat ? 'text' : 'password'"
|
||||||
:rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
|
:rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
|
||||||
|
><template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
:name="showPwdRepeat ? 'visibility' : 'visibility_off'"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="showPwdRepeat = !showPwdRepeat"
|
||||||
|
/> </template
|
||||||
></q-input>
|
></q-input>
|
||||||
<div
|
<div
|
||||||
v-if="confirmationMethodsCount > 1"
|
v-if="confirmationMethodsCount > 1"
|
||||||
@@ -925,16 +943,28 @@ include('components/lnbits-error.vue') %}
|
|||||||
filled
|
filled
|
||||||
v-model="password"
|
v-model="password"
|
||||||
:label="$t('password') + ' *'"
|
:label="$t('password') + ' *'"
|
||||||
type="password"
|
:type="showPwd ? 'text' : 'password'"
|
||||||
:rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
|
:rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
|
||||||
|
><template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
:name="showPwd ? 'visibility' : 'visibility_off'"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="showPwd = !showPwd"
|
||||||
|
/> </template
|
||||||
></q-input>
|
></q-input>
|
||||||
<q-input
|
<q-input
|
||||||
dense
|
dense
|
||||||
filled
|
filled
|
||||||
v-model="passwordRepeat"
|
v-model="passwordRepeat"
|
||||||
:label="$t('password_repeat') + ' *'"
|
:label="$t('password_repeat') + ' *'"
|
||||||
type="password"
|
:type="showPwdRepeat ? 'text' : 'password'"
|
||||||
:rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
|
:rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
|
||||||
|
><template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
:name="showPwdRepeat ? 'visibility' : 'visibility_off'"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="showPwdRepeat = !showPwdRepeat"
|
||||||
|
/> </template
|
||||||
></q-input>
|
></q-input>
|
||||||
<div class="row justify-end">
|
<div class="row justify-end">
|
||||||
<q-btn
|
<q-btn
|
||||||
|
|||||||
Reference in New Issue
Block a user