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.

Laravel 8 authentication with Bootstrap and Fortify

Jasmine Tracey ・ Oct 10 '20

#laravel #fortify #bootstrap #auth

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 [e-mail]: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">&times;</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">&times;</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.

jasminetracey / lara8auth

This is a simple auth starter setup for laravel 8 projects using bootstrap and laravel fortify

BOOTSTRAP 4 LARAVEL FORTIFY AUTHENTICATION

This is a simple auth starter setup for laravel 8 projects

Features

• User Login
• User Registration
• Email Verification
• Forget Password
• Reset Password
• Change Password
• Update User Profile
• TwoFactor Authentication
• Browser Session Management

View on GitHub