Updating Laravel 8 User profile information using bootstrap livewire and fortify
In part one of this article, we created our authentication setup using fortify, laravel and bootstrap.
In this tutorial, We will cover:
- updating your profile information using livewire
- changing your password from your profile page using livewire
Clone part one of our project
git clone --branch starter git@github.com:jasminetracey/lara8auth.git
cd lara8auth
Open your newly created project in IDE of choice I will be using Visual Studio Code
Install Livewire
composer require livewire/livewire
Next, we will load livewire assets in our layout files:
...
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<livewire:styles />
...
<livewire:scripts />
</body>
</html>
also, we will publish the config file php artisan livewire:publish --config
Create profile page
Add profile page touch resources/views/profile.blade.php
After doing that we will add a route in our routes/web.php file so that we can access the page.
Route::middleware(['auth', 'verified'])->group(function () {
Route::view('home', 'home')->name('home');
Route::view('profile','profile')->name('profile');
});
Now we will update our navbar section in our resources/layouts/app.blade.php file so will we have a visible link to navigate to our page.
@else
<li class="nav-item {{ request()->routeIs('home') ? 'active' : '' }}">
<a class="nav-link" href="{{ route('home') }}">{{ __('Home') }}</a>
</li>
<li class="nav-item {{ request()->routeIs('profile') ? 'active' : '' }}">
<a class="nav-link" href="{{ route('profile') }}">{{ __('Profile') }}</a>
</li>
Create livewire profile information form
If you are are new to livewire Caleb the creator of laravel-livewire have created some tutorial videos here to get you started
From your terminal run the following command
php artisan livewire:make profile-form
This will create our first livewire component.
In your resources/views/livewire/profile-form.blade.php add the following code to create our form fields.
<section class="my-5">
@if (session()->has('status'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{ session('status') }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@endif
<div class="card">
<div class="card-body">
<h5 class="card-title">Update Profile Information</h5>
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form wire:submit.prevent="updateProfileInformation" role="form">
<div class="form-group">
<label for="state.email">Name</label>
<input
type="text"
class="form-control"
id="state.name"
wire:model="state.name"
/>
</div>
<div class="form-group">
<label for="state.email">Email Address</label>
<input
type="email"
class="form-control"
id="state.email"
wire:model="state.email"
/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Update Info</button>
</div>
</form>
</div>
</div>
</section>
After adding our view we need to add the code in the livewire component file app\Http\Livewire\ProfileForm.php to interact with fields.
We will first add a public array which will store the fields that we will interact with
public $state = [];
Then we will add the mount method. This is a function that runs when the component is populated. We will use this method to populate the state array.
public function mount()
{
$this->state = auth()->user()->withoutRelations()->toArray();
}
Next, we will add the updateProfileInformation method that will use the UpdateUserProfileInformation action that comes with Fortify.
public function updateProfileInformation(UpdateUserProfileInformation $updater)
{
$this->resetErrorBag();
$updater->update(auth()->user(), $this->state);
session()->flash('status', 'Profile successfully updated');
}
Remember to import the UpdateUserProfileInformation action
Finally, we will add our component to the resources/views/profile.blade.php page so that we can see the form when we visit the profile page.
@extends('layouts.app') @section('content')
<div class="container">
<livewire:profile-form />
</div>
@endsection
Create livewire password change form
From your terminal run the following command
php artisan livewire:make password-change-form
This will create our livewire component.
In your resources/views/livewire/password-change-form.blade.php add the following code to create our form fields.
<section class="my-5">
@if (session()->has('status'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{ session('status') }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@endif
<div class="card">
<div class="card-body">
<h5 class="card-title">Update Password</h5>
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form wire:submit.prevent="updateProfileInformation" role="form">
<div class="form-group">
<label for="state.current_password">Current Password</label>
<input
type="password"
class="form-control"
id="state.current_password"
wire:model="state.current_password"
/>
</div>
<div class="form-group">
<label for="state.password">New Password</label>
<input
type="password"
class="form-control"
id="state.password"
wire:model="state.password"
/>
</div>
<div class="form-group">
<label for="state.password_confirmation">Confirm Password</label>
<input
type="password"
class="form-control"
id="state.password_confirmation"
wire:model="state.password_confirmation"
/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Change Password</button>
</div>
</form>
</div>
</div>
</section>
After adding our view we need to add the code in the livewire component file app/Http/Livewire/PasswordChangeForm.php to interact with fields.
We will first add a public array which will store the fields that we will interact with
public $state = [
'current_password' => '',
'password' => '',
'password_confirmation' => '',
];
Next, we will add the changePassword method that will use the UpdateUserPassword action that comes with Fortify.
public function updateProfileInformation(UpdateUserPassword $updater)
{
$this->resetErrorBag();
$updater->update(auth()->user(), $this->state);
$this->state = [
'current_password' => '',
'password' => '',
'password_confirmation' => '',
];
session()->flash('status', 'Password successfully changed');
}
Remember to import the UpdateUserPassword action
Finally, we will add our component to the resources/views/profile.blade.php page so that we can see the form when we visit the profile page.
@extends('layouts.app') @section('content')
<div class="container">
<livewire:profile-form />
<livewire:password-change-form />
</div>
@endsection
Now when you go to /profile you should have two working forms for updating user info and changing their password.
Conclusion
To find out more about laravel fortify features you can go the the github respository Fortify and for livewire documentation you can go to livewire
Thanks for reading please comment below and share if you found this article helpful.
In my next article, I will cover Two Factor Authentication. Part 3