extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-08-08 21:44:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add rules and live validation to Password Field component

Browse Source
This commit is contained in:
Bubka
2022-09-13 17:13:17 +02:00
parent f2c90fb924
commit acdaa73e62
6 changed files with 74 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
resources/js/components/FormPasswordField.vue
View File

@ -1,25 +1,30 @@
<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>
<label :for="this.inputId('password',fieldName)" class="label" v-html="label"></label>
<div class="control has-icons-right">
<input :disabled="isDisabled" :id="this.inputId('password',fieldName)" :type="currentType" class="input" v-model="form[fieldName]" :placeholder="placeholder" v-bind="$attrs" v-on:change="$emit('field-changed', form[fieldName])"/>
<span v-if="currentType == 'password'" class="icon is-small is-right is-clickable" @click="currentType = 'text'" :title="$t('auth.forms.reveal_password')">
<font-awesome-icon :icon="['fas', 'eye-slash']" />
</span>
<span v-else class="icon is-small is-right is-clickable" @click="currentType = 'password'" :title="$t('auth.forms.hide_password')">
<font-awesome-icon :icon="['fas', 'eye']" />
</span>
</div>
<field-error :form="form" :field="fieldName" />
<p class="help" v-html="help" v-if="help"></p>
<div v-if="showRules" class="columns is-mobile is-size-7 mt-0">
<div class="column is-one-third">
<span class="has-text-weight-semibold">{{ $t("auth.forms.mandatory_rules") }}</span><br />
<span class="is-underscored" :class="{'has-background-success-dark is-dot' : IsLongEnough}"></span>{{ $t('auth.forms.is_long_enough') }}<br/>
</div>
<div class="column">
<span class="has-text-weight-semibold">{{ $t("auth.forms.optional_rules_you_should_follow") }}</span><br />
<span class="is-underscored" :class="{'has-background-success-dark is-dot' : hasLowerCase}"></span>{{ $t('auth.forms.has_lower_case') }}<br/>
<span class="is-underscored" :class="{'has-background-success-dark is-dot' : hasUpperCase}"></span>{{ $t('auth.forms.has_upper_case') }}<br/>
<span class="is-underscored" :class="{'has-background-success-dark is-dot' : hasSpecialChar}"></span>{{ $t('auth.forms.has_special_char') }}<br/>
<span class="is-underscored" :class="{'has-background-success-dark is-dot' : hasNumber}"></span>{{ $t('auth.forms.has_number') }}
</div>
</div>
</div>
</template>
@ -30,9 +35,28 @@
data() {
return {
currentType: this.inputType
}
},
computed: {
hasLowerCase() {
return /[a-z]/.test(this.form[this.fieldName])
},
hasUpperCase() {
return /[A-Z]/.test(this.form[this.fieldName])
},
hasNumber() {
return /[0-9]/.test(this.form[this.fieldName])
},
hasSpecialChar() {
return /[^A-Za-z0-9]/.test(this.form[this.fieldName])
},
IsLongEnough() {
return this.form[this.fieldName].length >= 8
},
},
props: {
label: {
type: String,
@ -47,7 +71,7 @@
inputType: {
type: String,
default: 'text'
default: 'password'
},
form: {
@ -73,7 +97,12 @@
isDisabled: {
type: Boolean,
default: false
}
},
showRules: {
type: Boolean,
default: false
},
},
}
</script>