mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-06-19 11:26:48 +02:00
Add Vue PasswordField component with readability toggling
This commit is contained in:
parent
4348b7067b
commit
f2c90fb924
79
resources/js/components/FormPasswordField.vue
Normal file
79
resources/js/components/FormPasswordField.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="field" :class="{ 'pt-3' : hasOffset }">
|
||||
<label :for="this.inputId(inputType,fieldName)" class="label" v-html="label"></label>
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input :disabled="isDisabled" :id="this.inputId(inputType,fieldName)" :type="inputType" class="input" v-model="form[fieldName]" :placeholder="placeholder" v-bind="$attrs" v-on:change="$emit('field-changed', form[fieldName])"/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a v-if="!showPassword" class="button is-dark field-lock" @click="showPassword = true" :title="$t('auth.forms.reveal_password')">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="['fas', 'eye-slash']" />
|
||||
</span>
|
||||
</a>
|
||||
<a v-else class="button is-dark field-lock" @click="showPassword = false" :title="$t('auth.forms.hide_password')">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="['fas', 'eye']" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<field-error :form="form" :field="fieldName" />
|
||||
<p class="help" v-html="help" v-if="help"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormPasswordField',
|
||||
inheritAttrs: false,
|
||||
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
fieldName: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true
|
||||
},
|
||||
|
||||
inputType: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
help: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
hasOffset: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
2
resources/js/components/index.js
vendored
2
resources/js/components/index.js
vendored
@ -4,6 +4,7 @@ import Button from './Button'
|
||||
import FieldError from './FieldError'
|
||||
import FormWrapper from './FormWrapper'
|
||||
import FormField from './FormField'
|
||||
import FormPasswordField from './FormPasswordField'
|
||||
import FormSelect from './FormSelect'
|
||||
import FormSwitch from './FormSwitch'
|
||||
import FormToggle from './FormToggle'
|
||||
@ -20,6 +21,7 @@ import SettingTabs from './SettingTabs'
|
||||
FieldError,
|
||||
FormWrapper,
|
||||
FormField,
|
||||
FormPasswordField,
|
||||
FormSelect,
|
||||
FormSwitch,
|
||||
FormToggle,
|
||||
|
4
resources/js/packages/fontawesome.js
vendored
4
resources/js/packages/fontawesome.js
vendored
@ -34,6 +34,8 @@ import {
|
||||
faCopy,
|
||||
faSortAlphaDown,
|
||||
faSortAlphaUp,
|
||||
faEye,
|
||||
faEyeSlash,
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
import {
|
||||
@ -72,6 +74,8 @@ library.add(
|
||||
faCopy,
|
||||
faSortAlphaDown,
|
||||
faSortAlphaUp,
|
||||
faEye,
|
||||
faEyeSlash,
|
||||
);
|
||||
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon)
|
@ -79,6 +79,8 @@ return [
|
||||
'webauthn_login' => 'WebAuthn login',
|
||||
'email' => 'Email',
|
||||
'password' => 'Password',
|
||||
'reveal_password' => 'Reveal password',
|
||||
'hide_password' => 'Hide password',
|
||||
'confirm_password' => 'Confirm password',
|
||||
'confirm_new_password' => 'Confirm new password',
|
||||
'dont_have_account_yet' => 'Don\'t have your account yet?',
|
||||
|
Loading…
x
Reference in New Issue
Block a user