Create Scaffold with Laravel 5.7 — Profile (Part 3.2) Change password

Create Scaffold with Laravel 5.

7 — Profile (Part 3.

2) Change passwordAlfredo BarronBlockedUnblockFollowFollowingNov 1, 2018In this part we will add to profile module the feature change password of Auth user.

Table of ContentsCreate RoutesUpdate ControllerCreate ViewCreate Vuejs ComponentAdd RoutesInto file routes/profile/profile.

php add the next routes<?phpRoute::middleware('auth')->group(function () { Route::group(['namespace' => 'Profile'], function() { // view Route::view('/profile', 'profile.

profile'); Route::view('/password', 'profile.

password'); // api Route::group(['prefix' => 'api/profile'], function() { Route::get('/getAuthUser', 'ProfileController@getAuthUser'); Route::put('/updateAuthUser', 'ProfileController@updateAuthUser'); Route::put('/updateAuthUserPassword', 'ProfileController@updateAuthUserPassword'); }); });});Update ControllerInto app/Http/Controllersr/Pofile/ProfileController.

php file add the next code<?phpnamespace AppHttpControllersProfile;use IlluminateHttpRequest;use AppHttpControllersController;use IlluminateSupportFacadesAuth;use IlluminateSupportFacadesHash;use AppUser;class ProfileController extends Controller{ .

public function updateAuthUserPassword(Request $request) { $this->validate($request, [ 'current' => 'required', 'password' => 'required|confirmed', 'password_confirmation' => 'required' ]); $user = User::find(Auth::id()); if (!Hash::check($request->current, $user->password)) { return response()->json(['errors' => ['current'=> ['Current password does not match']]], 422); } $user->password = Hash::make($request->password); $user->save(); return $user; }}Create ViewIn your terminal typing the next command to create the password.


php view# create viewmkdir resources/views/profile/password.


phpInto password.


php file write next code@extends('layouts.

app')@section('header') @include('layouts.

header')@endsection@section('sidebar') @include('layouts.

sidebar')@endsection@section('content')<div class="py-4"> <div class="row justify-content-center"> <div class="col-md-12"> <profile-password></profile-password> </div> </div></div>@endsectionCreate Vuejs ComponentIn your terminal typing the next command to create the Password.

vue component# create componentmkdir resources/js/components/profile/Password.

vueInto Password.

vue file write next code<template> <div class="card"> <div class="card-header"> <i class="fas fa-pencil-alt"></i> Edit Password </div> <div class="card-body"> <form class="form-horizontal"> <div class="form-group row"> <label class="col-md-3">Current password</label> <div class="col-md-9"> <input class="form-control" :class="{'is-invalid': errors.

current}" type="password" v-model="password.

current"> <span class="help-block">You must provide your current password in order to change it.

</span> <div class="invalid-feedback" v-if="errors.


current[0]}}</div> </div> </div> <div class="form-group row"> <label class="col-md-3">New password</label> <div class="col-md-9"> <input class="form-control" :class="{'is-invalid': errors.

password}" type="password" v-model="password.

password"> <div class="invalid-feedback" v-if="errors.


password[0]}}</div> </div> </div> <div class="form-group row"> <label class="col-md-3">Password confirmation</label> <div class="col-md-9"> <input class="form-control" :class="{'is-invalid': errors.

password_confirmation}" type="password" v-model="password.

password_confirmation"> <div class="invalid-feedback" v-if="errors.


password_confirmation[0]}}</div> </div> </div> </form> </div> <div class="card-footer"> <div class="form-group row"> <div class="col-md-9 offset-md-3"> <button class="btn btn-primary" type="button" :disabled="submiting" @click="updateAuthUserPassword" > <i class="fas fa-spinner fa-spin" v-if="submiting"></i> Save </button> </div> </div> </div> </div></template><script>export default { data () { return { password: {}, errors: {}, submiting: false } }, methods: { updateAuthUserPassword () { this.

submiting = true axios.

put(`/api/profile/updateAuthUserPassword`, this.

password) .

then(response => { this.

password = {} this.

errors = {} this.

submiting = false this.



error('Password changed!'); }) .

catch(error => { this.

errors = error.



errors this.

submiting = false }) } }}</script>Into resources/js/app.

js file write the next code line to call Password.

vue component.


Vue = require('vue');Vue.

component('profile', require('.



component('profile-password', require('.


vue'));const app = new Vue({ el: '#app'});Finally Compiling Assets (Laravel Mix) with the next commans:npm run dev// ornpm run watchNow we have the next screen when enter the http://localhost:3000/password route in browserThanks for reading.

If you like this… Give me your clapping and follow me!!Whats NextPart 1.

AuthenticationPart 2.

Add Core UI TemplatePart 3.

Profile— 3.

1 Edit Profile — Part 3.

2 Change password — 3.

3 Generate & Upload AvatarIf ($applaud ≥ 1000) { Part 4.

Users → Coming soon Part 5.

Roles → Coming soon}Repositorymodulr/laravel-scaffoldContribute to modulr/laravel-scaffold development by creating an account on GitHub.


comResourcesvue-toasted by shakee93Check out vue-toasted in action here, tweak the options and toast it !!.Checkout Documentation at Git Repositoryshakee93.


ioReferencesControllers — Laravel — The PHP Framework For Web ArtisansLaravel — The PHP framework for web artisans.


comHashing – Laravel – The PHP Framework For Web ArtisansLaravel – The PHP framework for web artisans.


comViews — Laravel — The PHP Framework For Web ArtisansLaravel — The PHP framework for web artisans.


com.. More details

Leave a Reply