extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-08-17 00:51:04 +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>

2
resources/js/views/auth/Login.vue
View File

@ -19,7 +19,7 @@
<div v-if="isTesting" class="notification is-warning has-text-centered is-radiusless" v-html="$t('auth.forms.welcome_to_testing_app_use_those_credentials')" />
<form id="frmLegacyLogin" @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<form-field :form="form" fieldName="email" inputType="email" :label="$t('auth.forms.email')" autofocus />
<form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.password')" />
<form-password-field :form="form" fieldName="password" :label="$t('auth.forms.password')" />
<form-buttons :isBusy="form.isBusy" :caption="$t('auth.sign_in')" :submitId="'btnSignIn'"/>
</form>
<div class="nav-links">

5
resources/js/views/auth/Register.vue
View File

@ -25,8 +25,8 @@
<form @submit.prevent="handleRegisterSubmit" @keydown="registerForm.onKeydown($event)">
<form-field :form="registerForm" fieldName="name" inputType="text" :label="$t('auth.forms.name')" autofocus />
<form-field :form="registerForm" fieldName="email" inputType="email" :label="$t('auth.forms.email')" />
<form-field :form="registerForm" fieldName="password" inputType="password" :label="$t('auth.forms.password')" />
<form-field :form="registerForm" fieldName="password_confirmation" inputType="password" :label="$t('auth.forms.confirm_password')" />
<form-password-field :form="registerForm" fieldName="password" :showRules="true" :label="$t('auth.forms.password')" />
<!-- <form-field :form="registerForm" fieldName="password_confirmation" inputType="password" :label="$t('auth.forms.confirm_password')" /> -->
<form-buttons :isBusy="registerForm.isBusy" :isDisabled="registerForm.isDisabled" :caption="$t('auth.register')" :submitId="'btnRegister'" />
</form>
<div class="nav-links">
@ -66,6 +66,7 @@
*/
async handleRegisterSubmit(e) {
e.preventDefault()
this.registerForm.password_confirmation = this.registerForm.password
this.registerForm.post('/user', {returnError: true})
.then(response => {

2
resources/js/views/settings/Account.vue
View File

@ -16,7 +16,7 @@
<form @submit.prevent="submitPassword" @keydown="formPassword.onKeydown($event)">
<h4 class="title is-4 pt-6 has-text-grey-light">{{ $t('settings.change_password') }}</h4>
<fieldset :disabled="isRemoteUser">
<form-field :form="formPassword" fieldName="password" inputType="password" :label="$t('auth.forms.new_password')" />
<form-password-field :form="formPassword" fieldName="password" :showRules="true" :label="$t('auth.forms.new_password')" />
<form-field :form="formPassword" fieldName="password_confirmation" inputType="password" :label="$t('auth.forms.confirm_new_password')" />
<form-field :form="formPassword" fieldName="currentPassword" inputType="password" :label="$t('auth.forms.current_password.label')" :help="$t('auth.forms.current_password.help')" />
<form-buttons :isBusy="formPassword.isBusy" :caption="$t('auth.forms.change_password')" />