Base CSS themes Bootstrap Material Design Filled Material Design Outlined Floating Navbars, Sidebars & Footers All 74 SPA layouts AJAX Requests File uploads User account Authentication forms Roles & Permissions

User Account Management
User Account Management

Here we explore writing forms that allow users to modify their main account information such as email, password and username.

Change Account's Email

To change the user's email, we only need a simple form with an input field.

We display it in our routes under the `auth` middleware and protect the submit with a check that the user is authenticated in our `authorize` method.

In the handle method, we set the new email for the authenticated user and make sure the `email_verified_at` column is back to null.

Finally, we call the `sendEmailVerificationNotification` method that our User model has from the `Illuminate\Auth\MustVerifyEmail` trait (this is from the default Laravel framework).

Change Account's Password

For changing the password, we first need to ensure that the user entered his old password correctly. We do this by writing a custom validation check.

If the check fails, we throw a `ValidationException` with the desired message.

If the check succeeds, we use Laravel's default `resetPassword` method (coming from the `Illuminate\Foundation\Auth\ResetsPasswords`) to change the user's password.

Finally, we send a success response in a modal. Notice how easy it is thanks to the `responseInSuccessModal` helper function provided by kompo.

Change Account's Username

We will be creating the same functionality as twitter's username change form. Hence, we need to create a debounced AJAX validation when the user inputs in the username field. To do so, we may submit to a custom method whose only job is to check for unicity.

If the check fails, we throw a `ValidationException` with the desired message.

If the check succeeds, we simply set the user's new username and save the model.

Finally, we may send a successful response in a modal again thanks to the convenient `responseInSuccessModal` helper function provided by kompo.

Routes & layout for account settings

Finally, let us create a basic dashboard layout to include all of the above account settings forms.

All we need is a base template that extends the `kompo::app` and a sidebar to switch between the forms. Then we connect the links to the routes we previously set.