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

lucasf

First of all, thanks for the tips. After learning the basics of PHP and JS, I could implement the custom field and store the input info in a database column.

However, I'm still struggling to display this data in the UserCard. My code is as follows:

src/UserSerializer.php

<?php

namespace Indigo\CustomField;

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

class UserAttributes
{
    public function __invoke(UserSerializer $serializer, User $user): array
    {

        return [    'empresa' => $user->empresa     ];
    }
}

js/src/forum/index.ts:

import UserCard from 'flarum/forum/components/UserCard';

extend(UserCard.prototype, 'infoItems', function(items) {

//      const empresa = this.props.user.attribute('empresa');

        items.add('empresa', m('span', [
                 icon('fas fa-address-card'), '  ', this.props.user.attribute('empresa')
                  ]))

})

extend.php

<?php

namespace Indigo\CustomField;

use Indigo\CustomField\SaveUserAttr;
use Flarum\Extend;
use Flarum\User\Event\Saving;

return [
    (new Extend\Frontend('forum'))
        ->js(__DIR__.'/js/dist/forum.js')
        ->css(__DIR__.'/less/forum.less'),
    (new Extend\Frontend('admin'))
        ->js(__DIR__.'/js/dist/admin.js')
        ->css(__DIR__.'/less/admin.less'),
        new Extend\Locales(__DIR__.'/locale'),
        (new Extend\ApiSerializer(UserSerializer::class))->attributes(UserAttributes::class),
        (new Extend\Event())->listen(Saving::class, SaveEmpresaToDatabase::class),
];

I tried to reproduce what Clark does in his Poke extension, but with no success – Console yields "TypeError: Cannot read properties of undefined (reading 'user')" and "TypeError: Cannot read properties of undefined (reading 'onbeforeupdate')"

I also tried to use this.attrs.user.empresa, and this yields no error, but it also doesn't return me anything. I wasn't able to learn what to do by looking the code of other extensions as well.

It seems like a trivial matter, but I'm really grinding with this one. If anyone could lend me a hand, I'd be very glad.

clarkwinkelmann

lucasf try replacing this.props.user with this.attrs.user

I'm not sure if that will solve the onbeforeupdate error though. If you still see that error, can you share the remaining of your javascript?

lucasf

clarkwinkelmann it works! thank you so much for the quick response

and thank you also for the live coding sessions on youtube – they're really helpful

have a good day!