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

Question

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

This is controller

<?php

namespace App\Http\Controllers\Api\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\ResetsPasswords;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Password;
use Illuminate\Support\Facades\Log;

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.

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

add this to validate method : 'password_confirmation' => 'required' — soma
– soma, Commented Nov 2, 2022 at 19:08
Thank you for your comment. In validate methods,I add 'password' => 'required|string|confirmed' confirmed validation confirm password and password_confirmation are same — yrkkoyanagi
– yrkkoyanagi, Commented Nov 3, 2022 at 2:24

scorpions78 · Accepted Answer · 2022-11-02 19:01:50Z

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>

answered Nov 2, 2022 at 19:01

scorpions78

5586 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

soma Over a year ago

he's using vue not blade so he's generating token in vue

scorpions78 Over a year ago

@soma it´s same to send token

soma Over a year ago

sure but @csrf is a laravel thing works only on blade, it kinda add a hidden field for token, looks like he's getting token from url

scorpions78 Over a year ago

@soma yes, but he´s sending this form with post with action post in your controller have csrf, his problem it´s 422 and this problem it´s for token it´s empty

yrkkoyanagi Over a year ago

Thank you for answer and comments. I tried to add @csrf to my vue component but errors doesn't change.

|

James Risner · Accepted Answer · 2022-11-06 01:31:56Z

I found a wonderful Laravel API to reset password.

I refer to this and changed Controller:

<?php

namespace App\Http\Controllers\Api\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\ResetsPasswords;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Password;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Str;
use Illuminate\Auth\Events\PasswordReset;

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>

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related