DEV Community

Cover image for Updating Laravel 8 User profile information using bootstrap livewire and fortify
Jasmine Tracey
Jasmine Tracey

Posted on • Updated on • Originally published at jasminetracey.com

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
Enter fullscreen mode Exit fullscreen mode

Open your newly created project in IDE of choice I will be using Visual Studio Code

Install Livewire

composer require livewire/livewire
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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');
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 = [];
Enter fullscreen mode Exit fullscreen mode

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();
}
Enter fullscreen mode Exit fullscreen mode

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');
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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' => '',
];
Enter fullscreen mode Exit fullscreen mode

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');
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo 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

Top comments (0)