Adding Custom Fields to Spark User Registration

Hey Spark team! I'm trying to modify the user registration for spark. I want to stay within the Vuejs and native framework, so I'd prefer not to reference a model.

I've followed the instructions in [the documentation for adding registrations fields] (https://spark.laravel.com/docs/4.0/adding-registration-fields) but My new user registration form is saying errors but doesnt show specifics.

I'll go through it again and show the code below:

My Migration:

'''

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->tinyInteger('age')->nullable();
        $table->string('email')->unique();
        $table->string('password', 60);
        $table->rememberToken();
        $table->text('photo_url')->nullable();
        $table->tinyInteger('uses_two_factor_auth')->default(0);
        $table->string('authy_id')->nullable();
        $table->string('country_code', 10)->nullable();
        $table->string('phone', 25)->nullable();
        $table->string('two_factor_reset_code', 100)->nullable();
        $table->integer('current_team_id')->nullable();
        $table->string('stripe_id')->nullable();
        $table->string('current_billing_plan')->nullable();
        $table->string('card_brand')->nullable();
        $table->string('card_last_four')->nullable();
        $table->string('card_country')->nullable();
        $table->string('billing_address')->nullable();
        $table->string('billing_address_line_2')->nullable();
        $table->string('billing_city')->nullable();
        $table->string('billing_state')->nullable();
        $table->string('billing_zip', 25)->nullable();
        $table->string('billing_country', 2)->nullable();
        $table->string('vat_id', 50)->nullable();
        $table->text('extra_billing_information')->nullable();
        $table->timestamp('trial_ends_at')->nullable();
        $table->timestamp('last_read_announcements_at')->nullable();
        $table->timestamps();
    });
}

'''

My Modified form, having added the age in the register-common-form.blade field as per the instructions:

'''

@if (Spark::usesTeams() && Spark::onlyTeamPlans()) {{ ucfirst(Spark::teamString()) }} Name

        <div class="col-md-6">
            <input type="text" class="form-control" name="team" v-model="registerForm.team" autofocus>

            <span class="help-block" v-show="registerForm.errors.has('team')">
                @{{ registerForm.errors.get('team') }}
            </span>
        </div>
    </div>

    @if (Spark::teamsIdentifiedByPath())
        <!-- Team Slug (Only Shown When Using Paths For Teams) -->
        <div class="form-group" :class="{'has-error': registerForm.errors.has('team_slug')}" v-if=" ! invitation">
            <label class="col-md-4 control-label">{{ ucfirst(Spark::teamString()) }} Slug</label>

            <div class="col-md-6">
                <input type="text" class="form-control" name="team_slug" v-model="registerForm.team_slug" autofocus>

                <p class="help-block" v-show=" ! registerForm.errors.has('team_slug')">
                    This slug is used to identify your {{ Spark::teamString() }} in URLs.
                </p>

                <span class="help-block" v-show="registerForm.errors.has('team_slug')">
                    @{{ registerForm.errors.get('team_slug') }}
                </span>
            </div>
        </div>
    @endif
@endif

<!-- Name -->
<div class="form-group" :class="{'has-error': registerForm.errors.has('name')}">
    <label class="col-md-4 control-label">Name</label>

    <div class="col-md-6">
        <input type="text" class="form-control" name="name" v-model="registerForm.name" autofocus>

        <span class="help-block" v-show="registerForm.errors.has('name')">
            @{{ registerForm.errors.get('name') }}
        </span>
    </div>
</div>

    {{--Age
    This field has been added as per the --}}
<div class="form-group" :class="{'has-error': registerForm.errors.has('age')}">
    <label class="col-md-4 control-label">Age</label>

    <div class="col-md-6">
        <input type="text" class="form-control" name="age" v-model="registerForm.age" autofocus>

        <span class="help-block" v-show="registerForm.errors.has('age')">
            @{{ registerForm.errors.get('age') }}
        </span>
    </div>
</div>

<!-- E-Mail Address -->
<div class="form-group" :class="{'has-error': registerForm.errors.has('email')}">
    <label class="col-md-4 control-label">E-Mail Address</label>

    <div class="col-md-6">
        <input type="email" class="form-control" name="email" v-model="registerForm.email">

        <span class="help-block" v-show="registerForm.errors.has('email')">
            @{{ registerForm.errors.get('email') }}
        </span>
    </div>
</div>

<!-- Password -->
<div class="form-group" :class="{'has-error': registerForm.errors.has('password')}">
    <label class="col-md-4 control-label">Password</label>

    <div class="col-md-6">
        <input type="password" class="form-control" name="password" v-model="registerForm.password">

        <span class="help-block" v-show="registerForm.errors.has('password')">
            @{{ registerForm.errors.get('password') }}
        </span>
    </div>
</div>

<!-- Password Confirmation -->
<div class="form-group" :class="{'has-error': registerForm.errors.has('password_confirmation')}">
    <label class="col-md-4 control-label">Confirm Password</label>

    <div class="col-md-6">
        <input type="password" class="form-control" name="password_confirmation" v-model="registerForm.password_confirmation">

        <span class="help-block" v-show="registerForm.errors.has('password_confirmation')">
            @{{ registerForm.errors.get('password_confirmation') }}
        </span>
    </div>
</div>

<!-- Terms And Conditions -->
<div v-if=" ! selectedPlan || selectedPlan.price == 0">
    <div class="form-group" :class="{'has-error': registerForm.errors.has('terms')}">
        <div class="col-md-6 col-md-offset-4">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="terms" v-model="registerForm.terms">
                    I Accept The <a href="/terms" target="_blank">Terms Of Service</a>
                </label>

                <span class="help-block" v-show="registerForm.errors.has('terms')">
                    @{{ registerForm.errors.get('terms') }}
                </span>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-6 col-md-offset-4">
            <button class="btn btn-primary" @click.prevent="register" :disabled="registerForm.busy">
                <span v-if="registerForm.busy">
                    <i class="fa fa-btn fa-spinner fa-spin"></i>Registering
                </span>

                <span v-else>
                    <i class="fa fa-btn fa-check-circle"></i>Register
                </span>
            </button>
        </div>
    </div>
</div>

'''

Then I've modified the app.js in resources/assets/js/app.js and executed npm run dev, just in case.

'''

require('spark-bootstrap');

require('./components/bootstrap');

Spark.forms.register = { age: '' };

var app = new Vue({ mixins: [require('spark')] });

'''

Next, I did a copy and paste job from the instructions into the booted() method of app/Providers/SparkServiceProvider.php

'''

public function booted()
{
    Cashier::useCurrency('aud', '$');

    Spark::useStripe()->noCardUpFront()->teamTrialDays(65);

    Spark::identifyTeamsByPath();

    Spark::useTwoFactorAuth();

    Spark::validateUsersWith(function () {
        return [
            'name' => 'required|max:255',
            'age' => 'required|integer|min:1',
            'email' => 'required|email|max:255|unique:users',
            'password' => 'required|confirmed|min:6',
            'vat_id' => 'max:50|vat_id',
            'terms' => 'required|accepted',
        ];
    });

    Spark::createUsersWith(function ($request) {
        $user = Spark::user();

        $data = $request->all();

        $user->forceFill([
            'name' => $data['name'],
            'email' => $data['email'],
            'age' => $data['age'],
            'password' => bcrypt($data['password']),
            'last_read_announcements_at' => Carbon::now(),
            'trial_ends_at' => Carbon::now()->addDays(Spark::trialDays()),
        ])->save();

        return $user;
    });


    //plans for subscriptions

    Spark::freeTeamPlan()
        ->features([
            'Free'
        ]);


    Spark::teamPlan('Big 3', 'provider-id-1')
        ->price(149)
        ->maxTeamMembers(3)
        ->features([
            '3 team members',
            'all future features and upgrades'
        ]);

}

}

'''

So now it's at the end of the page instructions. When I try to register a user I get

Something went wrong. Please try again or contact customer support.

I will want to change this from Age to dob, after I figure out what is going wrong. And, in fact, I will want to switch the new user reg form to show 'first_name', 'last_name', 'dob', 'mobile_number'.

I'm running Homestead latest version, installed fresh spark 4 a few days ago.

It's worth mentioning I'm a noob to webdev in general, but I'm forcing myself to absorb everything I can. I want to be proficient with Laravel and Vuejs.