Add punchlines to auth forms

app/Http/Controllers/Auth/RegisterController.php

@@ -35,8 +35,14 @@ class RegisterController extends Controller
     {
 
         $count = DB::table('users')->count();
+        $username = DB::table('users')->where('id', 1)->value('name');
 
-        return response()->json(['userCount' => $count], 200);
+        if( $count === 1 ) {
+            return response()->json(['userCount' => $count, 'username' => $username], 200);
+        }
+        else {
+            return response()->json(['userCount' => $count], 200);
+        }
     }
 
     /**

resources/js/components/FormWrapper.vue

@@ -2,6 +2,7 @@
     <div class="columns is-centered">
         <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
             <h1 class="title" v-html="title" v-if="title"></h1>
+            <div v-if="punchline" class="block" v-html="punchline"></div>
             <slot />
         </div>
     </div>    
@@ -22,6 +23,11 @@
                 type: String,
                 default: ''
             },
+
+            punchline: {
+                type: String,
+                default: ''
+            },
         }
     }
 </script>

resources/js/views/auth/Login.vue

@@ -1,6 +1,6 @@
 <template>
-    <form-wrapper :title="$t('auth.forms.login')" v-if="userCount === 1">
-        <div v-if="$root.appSettings.isDemoApp" class="notification is-info has-text-centered" v-html="$t('auth.forms.welcome_to_demo_app_use_those_credentials')" />
+    <form-wrapper :title="$t('auth.forms.login')" :punchline="punchline" v-if="userCount === 1">
+        <div v-if="isDemo" class="notification is-info has-text-centered" v-html="$t('auth.forms.welcome_to_demo_app_use_those_credentials')" />
         <form @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')" />
@@ -18,7 +18,10 @@
     export default {
         data(){
             return {
+
                 userCount: null,
+                username: '',
+                isDemo: this.$root.appSettings.isDemoApp,
                 form: new Form({
                     email: '',
                     password: ''
@@ -26,6 +29,12 @@
             }
         },
 
+        computed : {
+            punchline: function() {
+                return this.isDemo ? '' : this.$t('auth.welcome_back_x', [this.username])
+            }
+        },
+
         methods : {
             handleSubmit(e) {
                 e.preventDefault()
@@ -66,6 +75,7 @@
                 }
                 else {
                     vm.userCount = data.userCount
+                    vm.username = data.username
                 }
             });
 

resources/js/views/auth/Register.vue

@@ -1,8 +1,6 @@
 <template>
-    <form-wrapper :title="$t('auth.register')">
+    <form-wrapper :title="$t('auth.register')" :punchline="$t('auth.forms.register_punchline')">
         <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
-            <p class="block" v-html="$t('auth.forms.punchline')">
-            </p>
             <form-field :form="form" fieldName="name" inputType="text" :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.password')" />

resources/js/views/auth/password/Request.vue

@@ -1,5 +1,5 @@
 <template>
-    <form-wrapper :title="$t('auth.forms.reset_password')">
+    <form-wrapper :title="$t('auth.forms.reset_password')" :punchline="$t('auth.forms.reset_punchline')">
         <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
             <form-field :form="form" fieldName="email" inputType="email" :label="$t('auth.forms.email')" autofocus />
             <form-buttons :isBusy="form.isBusy" :caption="$t('auth.forms.send_password_reset_link')" :showCancelButton="true" cancelLandingView="login" />

resources/lang/en/auth.php

@@ -21,7 +21,7 @@ return [
     'sign_out' => 'Sign out',
     'sign_in' => 'Sign in',
     'register' => 'Register',
-    'hello' => 'Hi {username} !',
+    'welcome_back_x' => 'Welcome back {0}',
     'already_authenticated' => 'Already authenticated',
     'confirm' => [
         'logout' => 'Are you sure you want to log out?',
@@ -37,7 +37,7 @@ return [
         'already_register' => 'Already registered?',
         'password_do_not_match' => 'Password do not match',
         'forgot_your_password' => 'Forgot your password?',
-        'request_password_reset' => 'Request a password reset',
+        'request_password_reset' => 'Reset it',
         'reset_password' => 'Reset password',
         'no_reset_password_in_demo' => 'No reset in Demo mode',
         'new_password' => 'New password',
@@ -52,8 +52,9 @@ return [
         'edit_account' => 'Edit account',
         'profile_saved' => 'Profile successfully updated!',
         'welcome_to_demo_app_use_those_credentials' => 'Welcome to the 2FAuth demo.<br><br>You can connect using the email address <strong>demo@2fauth.app</strong> and the password <strong>demo</demo>',
-        'punchline' => 'Welcome to 2FAuth.<br/>
+        'register_punchline' => 'Welcome to 2FAuth.<br/>
                 You need an account to go further. Fill this form to register yourself, and please, choose a strong password, 2FA data are sensitives.',
+        'reset_punchline' => '2FAuth will send you a password reset link to this address. Click the link in the received email to set a new password.',
     ],
 
 ];