From dc5a6082ae7999f5d91c8a591a91962f7fed0b68 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Fri, 28 Feb 2020 15:21:12 +0100
Subject: [PATCH] Enhance Current password fields for better understanding

---
 resources/js/components/FormField.vue   |  7 ++++++-
 resources/js/langs/locales.js           | 10 ++++++++--
 resources/js/views/profile/Account.vue  |  2 +-
 resources/js/views/profile/Password.vue |  2 +-
 resources/lang/en/auth.php              |  5 ++++-
 resources/lang/fr/auth.php              |  5 ++++-
 resources/sass/app.scss                 |  4 ++++
 7 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
index bf8aa955..6e9f1a9f 100644
--- a/resources/js/components/FormField.vue
+++ b/resources/js/components/FormField.vue
@@ -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>
\ No newline at end of file
diff --git a/resources/js/langs/locales.js b/resources/js/langs/locales.js
index 1fcf70e6..3d6e9246 100644
--- a/resources/js/langs/locales.js
+++ b/resources/js/langs/locales.js
@@ -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",
diff --git a/resources/js/views/profile/Account.vue b/resources/js/views/profile/Account.vue
index c1778f04..4b6be917 100644
--- a/resources/js/views/profile/Account.vue
+++ b/resources/js/views/profile/Account.vue
@@ -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>
diff --git a/resources/js/views/profile/Password.vue b/resources/js/views/profile/Password.vue
index 3db32bbc..4b68edb6 100644
--- a/resources/js/views/profile/Password.vue
+++ b/resources/js/views/profile/Password.vue
@@ -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>
diff --git a/resources/lang/en/auth.php b/resources/lang/en/auth.php
index 52123768..34052f21 100644
--- a/resources/lang/en/auth.php
+++ b/resources/lang/en/auth.php
@@ -34,7 +34,10 @@ return [
         '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',
diff --git a/resources/lang/fr/auth.php b/resources/lang/fr/auth.php
index 8953e2ed..ff8015ba 100644
--- a/resources/lang/fr/auth.php
+++ b/resources/lang/fr/auth.php
@@ -33,7 +33,10 @@ return [
         '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',
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 3492da6f..32c9f6f5 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -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;
 }