Laravel 8 has interactive profile page. It works smoothly. You can update user's information blocks separately. But if we want to change/add some fields it can be quite complicated. Let's make challenge for ourselves:
- Instead of field "Name" we need "First name" and "Last name"
- To add new block "Profile contact information", where we can add fields like phone, street, city, country (for this example let's add only phone, other information can be added in the same way)
- When user clicks button "Save" it will automatically update information on the top right of navigation
So we need page view like this:
First of all we need to fix our migration file. If it is new project, we can easily edit /database/migrations/2014_10_12_000000_create_users_table.php file. In "up" method let's change
```php
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('first_name');
$table->string('last_name')->nullable();
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('phone')->nullable();
$table->string('password');
$table->rememberToken();
$table->foreignId('current_team_id')->nullable();
$table->text('profile_photo_path')->nullable();
$table->text('settings')->nullable();
$table->timestamps();
});
}
Or you can create new migration file where you could add/change fields of users table.
When we have prepared "users" table we can edit the first "Profile Information" block in profile page.
Change code in file resources/views/profile/update-profile-information-form.blade.php to this:
```html
<x-jet-form-section submit="updateProfileInformation">
<x-slot name="title">
{{ __('Profile Information') }}
</x-slot>
<x-slot name="description">
{{ __('Update your account\'s profile information and email address.') }}
</x-slot>
<x-slot name="form">
<!-- Profile Photo -->
@if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
<div x-data="{photoName: null, photoPreview: null}" class="col-span-6 sm:col-span-4">
<!-- Profile Photo File Input -->
<input type="file" class="hidden"
wire:model="photo"
x-ref="photo"
x-on:change="
photoName = $refs.photo.files[0].name;
const reader = new FileReader();
reader.onload = (e) => {
photoPreview = e.target.result;
};
reader.readAsDataURL($refs.photo.files[0]);
" />
<x-jet-label for="photo" value="{{ __('Photo') }}" />
<!-- Current Profile Photo -->
<div class="mt-2" x-show="! photoPreview">
<img src="{{ $this->user->profile_photo_url }}" alt="{{ $this->user->first_name }}" class="rounded-full h-20 w-20 object-cover">
</div>
<!-- New Profile Photo Preview -->
<div class="mt-2" x-show="photoPreview">
<span class="block rounded-full w-20 h-20"
x-bind:style="'background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url(\'' + photoPreview + '\');'">
</span>
</div>
<x-jet-secondary-button class="mt-2 mr-2" type="button" x-on:click.prevent="$refs.photo.click()">
{{ __('Select A New Photo') }}
</x-jet-secondary-button>
@if ($this->user->profile_photo_path)
<x-jet-secondary-button type="button" class="mt-2" wire:click="deleteProfilePhoto">
{{ __('Remove Photo') }}
</x-jet-secondary-button>
@endif
<x-jet-input-error for="photo" class="mt-2" />
</div>
@endif
<!-- First name -->
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="first_name" value="{{ __('First name') }}" />
<x-jet-input id="first_name" type="text" class="mt-1 block w-full" wire:model.defer="state.first_name" autocomplete="first_name" />
<x-jet-input-error for="first_name" class="mt-2" />
</div>
<!-- Last name -->
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="last_name" value="{{ __('Last name') }}" />
<x-jet-input id="last_name" type="text" class="mt-1 block w-full" wire:model.defer="state.last_name" autocomplete="last_name" />
<x-jet-input-error for="last_name" class="mt-2" />
</div>
<!-- Email -->
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="email" value="{{ __('Email') }}" />
<x-jet-input id="email" type="email" class="mt-1 block w-full" wire:model.defer="state.email" />
<x-jet-input-error for="email" class="mt-2" />
</div>
</x-slot>
<x-slot name="actions">
<x-jet-action-message class="mr-3" on="saved">
{{ __('Saved.') }}
</x-jet-action-message>
<x-jet-button wire:loading.attr="disabled" wire:target="photo">
{{ __('Save') }}
</x-jet-button>
</x-slot>
</x-jet-form-section>
Change code in file app/Actions/Fortify/UpdateUserProfileInformation.php to this:
<?php
namespace App\Actions\Fortify;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Support\Facades\Validator;
use Illuminate\Validation\Rule;
use Laravel\Fortify\Contracts\UpdatesUserProfileInformation;
class UpdateUserProfileInformation implements UpdatesUserProfileInformation
{
/**
* Validate and update the given user's profile information.
*
* @param mixed $user
* @param array $input
* @return void
*/
public function update($user, array $input)
{
Validator::make($input, [
'first_name' => ['required', 'string', 'max:255'],
'last_name' => ['nullable', 'string', 'max:255'],
'email' => ['required', 'email', 'max:255', Rule::unique('users')->ignore($user->id)],
'photo' => ['nullable', 'image', 'max:1024'],
])->validateWithBag('updateProfileInformation');
if (isset($input['photo'])) {
$user->updateProfilePhoto($input['photo']);
}
if ($input['email'] !== $user->email &&
$user instanceof MustVerifyEmail) {
$this->updateVerifiedUser($user, $input);
} else {
$user->forceFill([
'first_name' => $input['first_name'],
'last_name' => $input['last_name'],
'email' => $input['email'],
])->save();
}
}
/**
* Update the given verified user's profile information.
*
* @param mixed $user
* @param array $input
* @return void
*/
protected function updateVerifiedUser($user, array $input)
{
$user->forceFill([
'first_name' => $input['first_name'],
'last_name' => $input['last_name'],
'email' => $input['email'],
'email_verified_at' => null,
])->save();
$user->sendEmailVerificationNotification();
}
}
Now we can add our new "Profile Contact Information" block.
In directory app/Http/Livewire let's create new file
ProfileContactInformationForm.php and put code:
<?php
namespace App\Http\Livewire;
use Illuminate\Support\Facades\Auth;
use Laravel\Fortify\Contracts\UpdatesUserProfileInformation;
use Livewire\Component;
class ProfileContactInformationForm extends Component
{
/**
* The component's state.
*
* @var array
*/
public $state = [];
/**
* Prepare the component.
*
* @return void
*/
public function mount()
{
$this->state = Auth::user()->withoutRelations()->toArray();
}
/**
* Update the user's profile contact information.
*
* @return void
*/
public function updateProfileContactInformation()
{
$this->resetErrorBag();
$user = Auth::user();
$user->phone = $this->state['phone'];
$user->save();
$this->emit('saved');
$this->emit('refresh-navigation-menu');
}
/**
* Get the current user of the application.
*
* @return mixed
*/
public function getUserProperty()
{
return Auth::user();
}
/**
* Render the component.
*
* @return \Illuminate\View\View
*/
public function render()
{
return view('profile.profile-contact-information-form');
}
}
When we will save our contact information we need to refresh information on the top right of navigation, so we need to call
$this->emit('refresh-navigation-menu');
In resources/views/profile we need to create file
profile-contact-information-form.blade.php and put inside code:
<x-jet-form-section submit="updateProfileContactInformation">
<x-slot name="title">
{{ __('Profile Contact Information') }}
</x-slot>
<x-slot name="description">
{{ __('Update your account\'s profile contact information.') }}
</x-slot>
<x-slot name="form">
<!-- Phone -->
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="phone" value="{{ __('Phone') }}" />
<x-jet-input id="phone" type="text" class="mt-1 block w-full" wire:model.defer="state.phone" />
<x-jet-input-error for="phone" class="mt-2" />
</div>
</x-slot>
<x-slot name="actions">
<x-jet-action-message class="mr-3" on="saved">
{{ __('Saved.') }}
</x-jet-action-message>
<x-jet-button wire:loading.attr="disabled">
{{ __('Save') }}
</x-jet-button>
</x-slot>
</x-jet-form-section>
We need to register our new component in Jetstream service provider file. So our app/Providers/JetstreamServiceProvider.php file should look like this:
<?php
namespace App\Providers;
use App\Actions\Jetstream\AddTeamMember;
use App\Actions\Jetstream\CreateTeam;
use App\Actions\Jetstream\DeleteTeam;
use App\Actions\Jetstream\DeleteUser;
use App\Actions\Jetstream\InviteTeamMember;
use App\Actions\Jetstream\RemoveTeamMember;
use App\Actions\Jetstream\UpdateTeamName;
use Illuminate\Support\ServiceProvider;
use Laravel\Jetstream\Jetstream;
use Livewire\Livewire;
use App\Http\Livewire\ProfileContactInformationForm;
class JetstreamServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
//
}
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
$this->configurePermissions();
Jetstream::createTeamsUsing(CreateTeam::class);
Jetstream::updateTeamNamesUsing(UpdateTeamName::class);
Jetstream::addTeamMembersUsing(AddTeamMember::class);
Jetstream::inviteTeamMembersUsing(InviteTeamMember::class);
Jetstream::removeTeamMembersUsing(RemoveTeamMember::class);
Jetstream::deleteTeamsUsing(DeleteTeam::class);
Jetstream::deleteUsersUsing(DeleteUser::class);
Livewire::component('profile.profile-contact-information-form', ProfileContactInformationForm::class);
}
/**
* Configure the roles and permissions that are available within the application.
*
* @return void
*/
protected function configurePermissions()
{
Jetstream::defaultApiTokenPermissions(['read']);
Jetstream::role('admin', __('Administrator'), [
'create',
'read',
'update',
'delete',
])->description(__('Administrator users can perform any action.'));
Jetstream::role('editor', __('Editor'), [
'read',
'create',
'update',
])->description(__('Editor users have the ability to read, create, and update.'));
}
}
We added two new lines on the top
use Livewire\Livewire;
use App\Http\Livewire\ProfileContactInformationForm;
And one in boot method
Livewire::component('profile.profile-contact-information-form', ProfileContactInformationForm::class);
In file resources/views/profile/show.blade.php we need to add our new component
@livewire('profile.profile-contact-information-form')
So file show.blade.php should look like this:
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Profile') }}
</h2>
</x-slot>
<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
@if (Laravel\Fortify\Features::canUpdateProfileInformation())
@livewire('profile.update-profile-information-form')
<x-jet-section-border />
@livewire('profile.profile-contact-information-form')
<x-jet-section-border />
@endif
@if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::updatePasswords()))
<div class="mt-10 sm:mt-0">
@livewire('profile.update-password-form')
</div>
<x-jet-section-border />
@endif
@if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
<div class="mt-10 sm:mt-0">
@livewire('profile.two-factor-authentication-form')
</div>
<x-jet-section-border />
@endif
<div class="mt-10 sm:mt-0">
@livewire('profile.logout-other-browser-sessions-form')
</div>
@if (Laravel\Jetstream\Jetstream::hasAccountDeletionFeatures())
<x-jet-section-border />
<div class="mt-10 sm:mt-0">
@livewire('profile.delete-user-form')
</div>
@endif
</div>
</div>
</x-app-layout>
And finally in resources/views/navigation-menu.blade.php where we have "Settings Dropdown" need to add
{{ Auth::user()->first_name }} {{ Auth::user()->last_name }} {{ Auth::user()->phone }}
So this part of the file should look like this:
...
<x-slot name="trigger">
@if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
<button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out">
<img class="h-8 w-8 rounded-full object-cover" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}" />
</button>
@else
<span class="inline-flex rounded-md">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
{{ Auth::user()->first_name }} {{ Auth::user()->last_name }} {{ Auth::user()->phone }}
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</span>
@endif
</x-slot>
...
After these changes, we should have customized and interactive profile page. One thing that I didn't mention is that we changed field name "Name" to "First name" and "Last name". It means that you need to recheck all files where you are using user name field. Like registration form, or maybe you have installed teams. So you need to recheck all places where field "name" was used.
Top comments (4)
Powerfull articles's content, in Jetsream we have the ability to use user profile photo, but what do you think about uploading another photo such as user banner photo;
I tried hard to find a solution for this matter but no such a result.
I found a way 😎
Hello, thanks for this article. I m trying but get an empty input for last name, first name and email. Do you have an idea where is the problem ?
Thank you for this. I have been looking for this explanation for a while. This really helped me get unstuck.