Updating Laravel 8 User profile information using bootstrap livewire and fortify
Tags: bootstrap, laravel, livewire, fortify
Published: 2021-01-29 14:09:42

In part one of this article, we created our authentication setup using fortify, laravel and bootstrap.  

{% link https://dev.to/jasminetracey/laravel-8-with-bootstrap-livewire-and-fortify-5d33 %}

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
```bash
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](https://visualstudio.microsoft.com/)

## Install [Livewire](https://laravel-livewire.com/docs/2.x/installation)

```bash
composer require livewire/livewire
```

Next, we will load livewire assets in our layout files:

```html
...

<!-- 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. 

```php
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. 

```html

@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](https://laravel-livewire.com/screencasts/installation) 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.

```html
<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

```php
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.

```php
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.

```php
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.

```html
@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.

```html
<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

```php
public $state = [
     'current_password' => '',
     'password' => '',
     'password_confirmation' => '',
];
```

Next, we will add the `changePassword` method that will use the UpdateUserPassword action that comes with Fortify.

```php
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.

```html
@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](https://github.com/laravel/fortify) and for livewire documentation you can go to [livewire](https://laravel-livewire.com/)

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 jasminetracey/lara8auth %}