Awwwards
Swap It Like It's Hot's Hero Image

Swap It Like It's Hot

The other day I was looking into how to augment the registration form for Laravel Spark and saw the very helpful cookbook recipe on how to do just that. It was, of course, very thorough and incredibly quick and easy to make our application require first_name and last_name instead of just name.

The cookbook recipe calls for the following...

// file: SparkServiceProvider.php

public function booted()
{
    // other Sparky code...
    
    Spark::validateUsersWith(function () {
        return [
            'first_name' => 'required|max:255',
            'last_name' => 'required|max:255',
            'email' => 'required|email|max:255|unique:users',
            'password' => 'required|min:6',
            'vat_id' => 'max:50|vat_id',
            'terms' => 'required|accepted',
        ];
    });
    
    Spark::createUsersWith(function ($request) {
        $user = Spark::user();
        
        $data = $request->all();
        
        $user->forceFill([
            'first_name' => $data['first_name'],
            'last_name' => $data['last_name'],
            'email' => $data['email'],
            'password' => bcrypt($data['password']),
            'last_read_announcements_at' => Carbon::now(),
            'trial_ends_at' => Carbon::now()->addDays(Spark::trialDays()),
        ])->save();
        
        return $user;
    });
}

Then you make the appropriate changes in the database, either with a new migration explicitly adding the new columns and dropping the old or with modifying the existing create_users_table migration. Then you make a couple Vue.js changes so the front-end component submits the forms with the correct information and you're done!

The next part is where we differed from the cookbook. The documentation provides an example of adding age to the User profile. Then it says to create a new component altogether to let the User update the age. But in our case, we weren't simply adding a new field, we were changing the default fields. We needed a different approach to let the User change or update their name after they signup for our app.

Through some source diving, I found that the aforementioned Spark::validateUsersWith and Spark::createUsersWith function were just glorified Spark::swap() functions!

What if we did this...

// file: SparkServiceProvider.php

public function booted()
{
    // other Sparky code...
    // Spark::validateUsersWith()
    // Spark::createUsersWith()
    
    Spark::swap('UpdateContactInformation@validator', function ($user, $data) {
        return Validator::make($data, [
            'first_name' => 'required|max:255',
            'last_name' => 'required|max:255',
            'email' => 'required|email|unique:users,email,'.$user->id,
        ]);
    });

    Spark::swap('UpdateContactInformation@handle', function ($user, $data) {
        $user->forceFill([
            'first_name' => $data['first_name'],
            'last_name' => $data['last_name'],
            'email' => $data['email'],
        ])->save();

        event(new ContactInformationUpdated($user));

        return $user;
    });
    
}

And voila! The updates go through without a hitch. The Spark::swap() function actually allows us to override and handle any situation where the default implementation isn't enough. Now, in most cases, the cookbook suggestion is a way better option for adding data to your User's register/profile forms, but we had a different use-case and opted for a not-so-routine solution.

Thanks for reading! Merry Christmas and Happy Holidays from all of us at Metric Loop!


Patrick Guevara's Profile Picture

Patrick Guevara


Chief Software Engineer

Patrick cofounded Metric Loop on the dream of building really great software with a clean, transparent approach. He lives in Austin, Texas with his wife Jess and their dog named Moose.