Enhance Current password fields for better understanding

This commit is contained in:
Bubka 2020-02-28 15:21:12 +01:00
parent 9dcb8e0da9
commit dc5a6082ae
7 changed files with 28 additions and 7 deletions

View File

@ -1,5 +1,5 @@
<template>
<div class="field">
<div class="field" :class="{ 'with-offset' : hasOffset }">
<label class="label" v-html="label"></label>
<div class="control">
<input :id="fieldName" :type="inputType" class="input" v-model="form[fieldName]" :placeholder="placeholder" v-bind="$attrs" />
@ -51,6 +51,11 @@
type: String,
default: ''
},
hasOffset: {
type: Boolean,
default: false
}
}
}
</script>

View File

@ -22,7 +22,10 @@ export default {
"request_password_reset": "Request a password reset",
"reset_password": "Reset password",
"new_password": "New password",
"current_password": "Current password",
"current_password": {
"label": "Current password",
"help": "Fill in your current password to confirm that it's you"
},
"change_password": "Change password",
"send_password_reset_link": "Send password reset link",
"change_your_password": "Change your password",
@ -278,7 +281,10 @@ export default {
"request_password_reset": "Réinitialiser le",
"reset_password": "Mot de passe oublié",
"new_password": "Nouveau mot de passe",
"current_password": "Mot de passe actuel",
"current_password": {
"label": "Mot de passe actuel",
"help": "Indiquez votre mot de passe actuel pour confirmer qu'il s'agit bien de vous"
},
"change_password": "Modifier le mot de passe",
"send_password_reset_link": "Envoyer",
"change_your_password": "Modifier votre mot de passe",

View File

@ -3,7 +3,7 @@
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<form-field :form="form" fieldName="name" :label="$t('auth.forms.name')" autofocus />
<form-field :form="form" fieldName="email" inputType="email" :label="$t('auth.forms.email')" />
<form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.current_password')" />
<form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.current_password.label')" :help="$t('auth.forms.current_password.help')" :hasOffset="true" />
<form-buttons :isBusy="form.isBusy" :caption="$t('commons.update')" />
</form>
</form-wrapper>

View File

@ -3,7 +3,7 @@
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.new_password')" />
<form-field :form="form" fieldName="password_confirmation" inputType="password" :label="$t('auth.forms.confirm_new_password')" />
<form-field :form="form" fieldName="currentPassword" inputType="password" :label="$t('auth.forms.current_password')" />
<form-field :form="form" fieldName="currentPassword" inputType="password" :label="$t('auth.forms.current_password.label')" :help="$t('auth.forms.current_password.help')" :hasOffset="true" />
<form-buttons :isBusy="form.isBusy" :caption="$t('auth.forms.change_password')" />
</form>
</form-wrapper>

View File

@ -34,7 +34,10 @@
'request_password_reset' => 'Request a password reset',
'reset_password' => 'Reset password',
'new_password' => 'New password',
'current_password' => 'Current password',
'current_password' => [
'label' => 'Current password',
'help' => 'Fill in your current password to confirm that it\'s you'
],
'change_password' => 'Change password',
'send_password_reset_link' => 'Send password reset link',
'change_your_password' => 'Change your password',

View File

@ -33,7 +33,10 @@
'request_password_reset' => 'Réinitialiser le',
'reset_password' => 'Mot de passe oublié',
'new_password' => 'Nouveau mot de passe',
'current_password' => 'Mot de passe actuel',
'current_password' => [
'label' => 'Mot de passe actuel',
'help' => 'Indiquez votre mot de passe actuel pour confirmer qu\'il s\'agit bien de vous'
],
'change_password' => 'Modifier le mot de passe',
'send_password_reset_link' => 'Envoyer',
'change_your_password' => 'Modifier votre mot de passe',

View File

@ -294,6 +294,10 @@ footer .field.is-grouped {
width: 24px;
}
.field.with-offset {
padding-top: 1.5rem;
}
.field.is-grouped:last-child {
padding-top: 0.75rem;
}