Complete and fix Request/Reset password feature

app/Http/Controllers/Auth/ForgotPasswordController.php

@@ -52,7 +52,6 @@ class ForgotPasswordController extends Controller
     protected function sendResetLinkResponse(Request $request, $response)
     {
         return ['status' => trans($response)];
-        // return response()->json(['status' => $response], 200);
     }
 
     /**
@@ -64,6 +63,6 @@ class ForgotPasswordController extends Controller
      */
     protected function sendResetLinkFailedResponse(Request $request, $response)
     {
-        return response()->json(['email' => trans($response)], 400);
+        return response()->json(['requestFailed' => trans($response)], 400);
     }
 }

app/Http/Controllers/Auth/ResetPasswordController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers\Auth;
 
+use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;
 use Illuminate\Foundation\Auth\ResetsPasswords;
 
@@ -51,6 +52,6 @@ class ResetPasswordController extends Controller
      */
     protected function sendResetFailedResponse(Request $request, $response)
     {
-        return response()->json(['email' => trans($response)], 400);
+        return response()->json(['resetFailed' => trans($response)], 400);
     }
 }

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

@@ -2,7 +2,7 @@
     <div class="section">
         <div class="columns is-mobile  is-centered">
             <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                <h1 class="title">{{ $t('auth.reset_password') }}</h1>
+                <h1 class="title">{{ $t('auth.forms.reset_password') }}</h1>
                 <form method="POST" action="/password/email">
                     <div class="field">
                         <label class="label">{{ $t('auth.forms.email') }}</label>
@@ -13,13 +13,17 @@
                     </div>
                     <div class="field is-grouped">
                         <div class="control">
-                            <button type="submit" class="button is-link" @click="handleSubmit">{{ $t('auth.send_password_reset_link') }}</button>
+                            <button type="submit" class="button is-link" @click="handleSubmit">{{ $t('auth.forms.send_password_reset_link') }}</button>
                         </div>
                         <div class="control">
                             <router-link :to="{ name: 'login' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
                         </div>
                     </div>
                 </form>
+                <br />
+                <span class="tag is-danger" v-if="errorMessage">
+                    {{ errorMessage }}
+                </span>
             </div>
         </div>
         <div class="columns is-mobile is-centered" v-if="response">
@@ -37,13 +41,16 @@
             return {
                 email : '',
                 validationErrors: {},
-                response: ''
+                response: '',
+                errorMessage: ''
             }
         },
         methods : {
             handleSubmit(e){
                 e.preventDefault()
 
+                this.validationErrors = {}
+
                 axios.post('/api/password/email', {
                     email: this.email
                 })
@@ -51,11 +58,11 @@
                     this.response = response.data.status
                 })
                 .catch(error => {
-                    console.log(error.response)
                     if( error.response.data.errors ) {
                         this.validationErrors = error.response.data.errors
-                    } else if( error.response.data ) {
-                        this.response = error.response.data.email
+                    }
+                    else if( error.response.data.requestFailed ) {
+                        this.errorMessage = error.response.data.requestFailed
                     }
                     else {
                         this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });

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

@@ -2,24 +2,24 @@
     <div class="section">
         <div class="columns is-mobile  is-centered">
             <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                <h1 class="title">{{ $t('auth.new_password') }}</h1>
-                <form method="POST" action="/password/reset">
+                <h1 class="title">{{ $t('auth.forms.new_password') }}</h1>
+                <form method="POST">
                     <div class="field">
                         <label class="label">{{ $t('auth.forms.email') }}</label>
                         <div class="control">
-                            <input id="email" type="email" class="input" v-model="email" required />
+                            <input id="email" type="email" class="input" v-model="email" disabled readonly />
                         </div>
                         <p class="help is-danger" v-if="validationErrors.email">{{ validationErrors.email.toString() }}</p>
                     </div>
                     <div class="field">
-                        <label class="label">{{ $t('auth.forms.password') }}</label>
+                        <label class="label">{{ $t('auth.forms.new_password') }}</label>
                         <div class="control">
                             <input id="password" type="password" class="input" v-model="password" required />
                         </div>
                         <p class="help is-danger" v-if="validationErrors.password">{{ validationErrors.password.toString() }}</p>
                     </div>
                     <div class="field">
-                        <label class="label">{{ $t('auth.forms.password_confirmation') }}</label>
+                        <label class="label">{{ $t('auth.forms.confirm_password') }}</label>
                         <div class="control">
                             <input id="password_confirmation" type="password" class="input" v-model="password_confirmation" required />
                         </div>
@@ -27,13 +27,17 @@
                     </div>
                     <div class="field is-grouped">
                         <div class="control">
-                            <button type="submit" class="button is-link" @click="handleSubmit">{{ $t('auth.register') }}</button>
+                            <button type="submit" class="button is-link" @click="handleSubmit">{{ $t('auth.forms.change_password') }}</button>
                         </div>
                         <div class="control">
                             <router-link :to="{ name: 'login' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
                         </div>
                     </div>
                 </form>
+                <br />
+                <span class="tag is-danger" v-if="errorMessage">
+                    {{ errorMessage }}
+                </span>
             </div>
         </div>
     </div>
@@ -43,11 +47,12 @@
     export default {
         data(){
             return {
-                token : '',
                 email : '',
                 password : '',
                 password_confirmation : '',
-                validationErrors: {}
+                token : '',
+                validationErrors: {},
+                errorMessage: ''
             }
         },
 
@@ -60,26 +65,24 @@
             handleSubmit(e) {
                 e.preventDefault()
 
-                axios.post('api/password/reset', {
+                this.validationErrors = {}
+
+                axios.post('/api/password/reset', {
                     email: this.email,
                     password: this.password,
                     password_confirmation : this.password_confirmation,
                     token: this.token
                 })
                 .then(response => {
-                    console.log(response)
-                    // localStorage.setItem('user',response.data.message.name)
-                    // localStorage.setItem('jwt',response.data.message.token)
-
-                    // if (localStorage.getItem('jwt') != null){
-                    //     this.$router.go('/');
-                    // }
+                    this.$router.go('/');
                 })
                 .catch(error => {
-                    console.log(error.response)
                     if( error.response.data.errors ) {
                         this.validationErrors = error.response.data.errors
                     }
+                    else if( error.response.data.resetFailed ) {
+                        this.errorMessage = error.response.data.resetFailed
+                    }
                     else {
                         this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
                     }