Displaying info stored in a custom field on SignUpModal

lucasf

hey guys, I'm having trouble with an extension I'm building

what I want to do is to add a custom field in the signup modal, which I had no trouble doing

however, I'm having trouble on finding out how to store the info in this field and use this information to display it in the user hero

for example: on sign up, you have to inform which is your favorite ice cream flavor

and you enter something like "vanilla"

I'd like to have this info displayed in your profile-hero: "favorite ice-cream flavor: vanilla"

I watched Clark Winkelmann's Birthday Extension live coding session, and he seems to use the onsubmit(e) method to store the input on Flarum's databse

but since I'm meddling with the SignUpModal, I'm having difficulty to do something analogous to this

thank you all in advance! 😉

clarkwinkelmann

Can you share the code you have so far?

Any additional information you return in SignUpModal.submitData will be sent to the backend where you should be able to read it during the user Saving event.

It's very similar to using a standalone modal like I showed in my Birthday tutorial, unfortunately I don't think I show how to do it for SignUpModal in any video nor can I think of any open-source extension that does it.

I have used this method in multiple closed-source extensions without any issue. In summary: using extend() calls, in SignUpModal.oninit set new property on SignUpModal with default attribute value, in SignUpModal.fields add new field that manipulates the property value, in SignUpModal.submitData add the property to the returned object. In backend listen for Saving user event and validate + set value on Eloquent model. $event->user->exists can be used to know if it's a new user to change if/how authorization is applied.

luceos

lucasf you are missing the oninit part, see

clarkwinkelmann in SignUpModal.oninit set new property on SignUpModal with default attribute value,

This means you need to extend oninit as well and add a property or binding with a Stream property.

lucasf

sure! merci pour votre réponse

a bit of context: the users of the forum must input their company (empresa, in portuguese) and this info must be shown at their user card

in js/src/forum/index.ts:

extend(SignUpModal.prototype, 'fields', function(items) {
    items.add('Empresa',
        m('.Form-group', [
            m('input.FormControl', {
                name: 'empresa',
                type: 'text',
                id: 'empresa',
                placeholder: 'Empresa',
            })
        ]),
    );
});

extend(SignUpModal.prototype, 'submitData', function (data) {
        data.empresa = this.empresa();
})

extend(UserCard.prototype, 'infoItems', function(items) { 
items.add('display-empresa', m("p", "Empresa: ????????? ")
}

The "??????" should actually bear the value stored in the "Empresa" field. I know I should add a column in the forum's database with PHP, but I'm not knowing exactly how to do this (or even if it's really needed).

The code I inserted in submitData stems from the Nicknames extension source code, but the browser returns to me that "empresa" is not a function (it really isn't) and I don't know where exactly to define it.

clarkwinkelmann

You definitely need some PHP code as well.

The strict minimum would be an event listener like this:

<?php

namespace Vendor\Package\Listeners;

use Flarum\User\Event\Saving;
use Illuminate\Support\Arr;

class SaveMyAttribute
{
    public function handle(Saving $event)
    {
        $attributes = (array)Arr::get($event->data, 'attributes');

        if (array_key_exists('yourAttribute', $attributes)) {
            // Only allow editing if it's a new user being registered or if the user is editing themselves
            $event->actor->assertPermission(!$event->user->exists || $event->actor->id === $event->user->id);

            // Here you should add some validation to the value before saving, or just cast to string to avoid any database error

            // Set value to be saved in the database if no other extension throws any validation error
            $event->user->your_attribute_column = $attributes['yourAttribute'];
        }
    }
}

And can then be made visible by extending the serializer attributes:

<?php

namespace Vendor\Package;

use Flarum\Api\Serializer\UserSerializer;
use Flarum\User\User;

class UserAttributes
{
    public function __invoke(UserSerializer $serializer, User $user): array
    {
        // Make attribute value visible to everyone who can see the user
        return [
            'yourAttribute' => $user->your_attribute_column,
        ];
    }
}

And those 2 classes must be registered in extend.php like this (with correct imports / namespaces. UserAttributes and SaveMyAttribute are only suggestions, they can be called anything or placed anywhere in the extension namespace):

    (new Extend\ApiSerializer(UserSerializer::class))
        ->attributes(UserAttributes::class),

    (new Extend\Event())
        ->listen(Saving::class, Listeners\SaveMyAttribute::class),

lucasf

thank you two for your answers;

I'm still struggling to grasp these PHP concepts, but I hope I can learn them soon enough;

I'm comparing my code with the Nicknames extension to see if I can learn a thing or two