Question 7830 in PHP Versions Question posted in
You can find a list of all versions here.

I want to send password reset request to laravel API from vue.js component – PHP Versions

I am making laravel API to reset password by diverting laravel standard password reset function.

This is controller

<?php

namespace AppHttpControllersApiAuth;

use AppHttpControllersController;
use IlluminateFoundationAuthResetsPasswords;
use IlluminateHttpRequest;
use IlluminateSupportFacadesPassword;
use IlluminateSupportFacadesLog;

class ResetPasswordController extends Controller
{
    use ResetsPasswords;

    public function __construct()
    {
        $this->middleware('guest');
    }

    public function resetPassword()
    {
        $credentials = request()->validate([
            'email' => 'required|email',
            'token' => 'required|string',
            'password' => 'required|string|confirmed'
        ]);

        $reset_password_status = Password::reset($credentials, function ($user, $password) {
            $user->password = bcrypt($password);
            $user->save();
        });

        if ($reset_password_status == Password::INVALID_TOKEN) {
            return ['success' => false];
        }

        return ['success' => true];
    }
}

and api.php

Route::post('password/reset/{token}', [ResetPasswordController::class, 'resetPassword']);

Finally, vue.component code

<template>
    <div class="l-form">
        <form v-on:submit.prevent="submit">

            <div class="p-input">
                <input id="email" type="email" class="c-input" placeholder="email" name="email" v-model="passResetRequest.email"
                       required autocomplete="email" autofocus>
            </div>

            <div class="p-input">
                <input id="password" type="password" class="c-input" placeholder="password" name="password"
                       v-model="passResetRequest.password" required autocomplete="new-password">
            </div>

            <div class="p-input">
                <input id="password-confirm" type="password" class="c-input" placeholder="password-confirm"
                       name="password_confirmation" v-model="passResetRequest.password_confirmation" required
                       autocomplete="new-password">
            </div>

            <div class="p-buttonbox">
                <button type="submit" class="c-button u-mt60">
                    reset
                </button>
            </div>
        </form>
    </div>
</template>
<script>
import axios from 'axios';

export default {
    data: function () {
        return {
            passResetRequest: {
                email: '',
                token: '',
                password: '',
                password_confirmation: ''
            }

        }
    },
    methods: {
        submit() {
            axios.post('/api/password/reset/' + this.passResetRequest)
                .then((res) => {
                    this.message = "success!";
                }).catch(error => {
            });
        },
        getToken(){
            const params = document.location.search;
            const splitedParams = params.split( '=' );
            this.passResetRequest.token = splitedParams[2];
        },

    },
    mounted() {
        this.getToken();
    }
}
</script>

However, I try to get response,I get error messages with 422 error code.
"email is required"
"password is required"
"token is required"

Where should I confirm to send parameters to API?

I confirmed request object can get parameters which are entered.

enter image description here

Version
Laravel v8.83.23
PHP v7.4.18
"axios": "^0.21.4",
"vue": "^2.5.17",

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a wonderful Laravel API to reset password.

    I refer to this and changed Controller:

    <?php

namespace AppHttpControllersApiAuth;

use AppHttpControllersController;
use IlluminateFoundationAuthResetsPasswords;
use IlluminateHttpRequest;
use IlluminateSupportFacadesPassword;
use IlluminateSupportFacadesLog;
use IlluminateSupportFacadesHash;
use IlluminateSupportStr;
use IlluminateAuthEventsPasswordReset;

class ResetPasswordController extends Controller
{
    use ResetsPasswords;

    public function __construct()
    {
        $this->middleware('guest');
    }

    public function resetPassword(Request $request)
    {
        $request->validate([
            'token' => 'required',
            'email' => 'required|email',
            'password' => ['required', 'confirmed'],
        ]);

        $status = Password::reset(
            $request->only('email', 'password', 'password_confirmation', 'token'),
            function ($user) use ($request) {
                $user->forceFill([
                    'password' => Hash::make($request->password),
                    'remember_token' => Str::random(60),
                ])->save();

                $user->tokens()->delete();

                event(new PasswordReset($user));
            }
        );

        if ($status == Password::PASSWORD_RESET) {
            return response([
                'message'=> 'Password reset successfully'
            ]);
        }

        return response([
            'message'=> __($status)
        ], 500);

    }
}

    api.php:

    
Route::post('password/reset', [ResetPasswordController::class, 'resetPassword']);

    vue component script:

    <script>
import axios from 'axios';

export default {
    data: function () {
        return {
            passResetRequest: {
                email: '',
                token: '',
                password: '',
                password_confirmation: ''
            }

        }
    },
    methods: {
        submit() {
            axios.post('/api/password/reset' , this.passResetRequest)
                .then((res) => {
                    this.message = "success!";
                }).catch(error => {
                console.log(error.response);
            });
        },
        getToken() {
            const params = document.location.search;
            const splitedParams = params.split('=');
            this.passResetRequest.token = splitedParams[2];
        },

    },
    mounted() {
        this.getToken();
    }
}
</script>

  2. 0

    in your form, try this:

    <form v-on:submit.prevent="submit">
<!-- put csrf token in your form -->
           @csrf

            <div class="p-input">
                <input id="email" type="email" class="c-input" placeholder="email" name="email" v-model="passResetRequest.email"
                       required autocomplete="email" autofocus>
            </div>

            <div class="p-input">
                <input id="password" type="password" class="c-input" placeholder="password" name="password"
                       v-model="passResetRequest.password" required autocomplete="new-password">
            </div>

            <div class="p-input">
                <input id="password-confirm" type="password" class="c-input" placeholder="password-confirm"
                       name="password_confirmation" v-model="passResetRequest.password_confirmation" required
                       autocomplete="new-password">
            </div>

            <div class="p-buttonbox">
                <button type="submit" class="c-button u-mt60">
                    reset
                </button>
            </div>
        </form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search