LoginRegister customisation

[The Frayed Ends of Sanity]

Hello everyone,

I have some questions regarding some basic customisation for the new LoginRegister module markup.

If you look at the demo registration page you will notice it has the header of Register for an account which if you look at the source code equates to:

<h2>Register for an account</h2>

Now I've looked through the actual module code and I can't find where the H2 heading comes from, or how to change it? I'd like to be able to change the heading size, text and also to have the ability of not outputting the heading at all. But how do I do that?

I'm just generally at a loss as to how I can take control of the form output.

Also, profiles nowadays usually have an avatar or picture attached, so what's the best way to go about that if I already have an image field attached to the profile.

Thanks in advance.

[flydev]

Hi and welcome to the forum.

 

8 hours ago, The Frayed Ends of Sanity said:

Now I've looked through the actual module code and I can't find where the H2 heading comes from, or how to change it? I'd like to be able to change the heading size, text and also to have the ability of not outputting the heading at all. But how do I do that?

The H2 come from the code of the module on line 518 (link).

As it look like there is no option to define your own markup (maybe yes, I am taking my first coffee..), you must change it by translating the file.

To do so, first install the core's module LanguageSupport, then translate the module's file :

 

 

 

Once saved, you should be able to see the change on your page.

 

Quote

Also, profiles nowadays usually have an avatar or picture attached, so what's the best way to go about that if I already have an image field attached to the profile.

Did you mean you already added an image field to the system template user ?  if yes, then you need to add the permission profil-edit to the user so he can modify his profile. If its not the case, let us know.

 

If you encounter difficulties, just ask on the forum. Enjoy

Edited October 2, 2017 by flydev
Avatar / question

[The Frayed Ends of Sanity]

Thanks for that lengthy reply.

I did actually find the code you linked to, but It was the reference to the actual H2 heading I couldn't find. So it appears there is no easy way of changing that heading tag at the moment or indeed removing it from our markup? It seems we can only change the actual text?

In reference to the profile image (avatar) I was referring more to the fact of extending the module to allow the use of an image field. Currently it's not supported, so I was fishing around for ideas of the best way to achieve this from the front end.

Thanks again!

[bernhard]

hi @The Frayed Ends of Sanity and welcome to the forum,

of course you can change it! the easiest would be some css:

#LoginRegisterForm > h2 {
	display: none;
	/* or */
	font-size: 14px;
	color: red;
	font-weight: normal;
}

you can also hook into buildRegisterForm() and remove the description of the form. you can also add a markup inputfield to your form for any other HTML you need.

or you can modify the markup on the client side via JS (of course that would not be the cleanest solution but sometimes easy fixes have their place...)

[The Frayed Ends of Sanity]

Hi @bernhard 

I honestly didn't think about the css method, and I was thinking more along the api etc.

If I hook into buildRegisterForm() how would I actually remove the description of the form?

Thanks

[fbg13]

@The Frayed Ends of Sanity 

$pages->addHookAfter('LoginRegister::buildRegisterForm', null, 'changeHeader');
function changeHeader(HookEvent $e)
{
	$form = $e->return;
	// setting $form->description to false, null or "" (empty string) removes it from the form;
	$form->description = "Header text";
	$e->return = $form;
}

in ready.php

https://processwire.com/api/hooks/

[flydev]

On 03/10/2017 at 6:48 PM, The Frayed Ends of Sanity said:

In reference to the profile image (avatar) I was referring more to the fact of extending the module to allow the use of an image field. Currently it's not supported, so I was fishing around for ideas of the best way to achieve this from the front end.

Once again, you can do that by hooking processProfileForm().

Lets say you added a field 'images' to the system user template and you added the 'images' field to the module configuration, e.g. :

 

then in ready.php :

wire()->addHookAfter('LoginRegister::processProfileForm', function($e) {
    $form = $e->arguments[0]; // get the form
    foreach ($form->children as $field) {
        if($field instanceof InputfieldImage) {
            foreach ($field->getAttribute('value') as $value) {
                wire('user')->images->add($value);
            }
            wire('user')->save();
        }
    }
});

 

To show the image on the frontend, you can hook renderProfileForm().

 

[The Frayed Ends of Sanity]

Thanks a lot everyone it means a lot. I am not sure where you lot get this information from as I am new to all this but I do have one more related question for which I don't know where to look.

If we go back to the buildLoginForm hook we find the following for the submit button.....

        /** @var InputfieldSubmit $submitField */
        $submitField = $this->modules->get('InputfieldSubmit');
        $submitField->attr('name', 'login_submit');
        $submitField->attr('value', $this->_('Login')); // Login form: submit login button
        $submitField->appendMarkup = $this->wire('session')->CSRF->renderInput();
        $form->add($submitField);

Now again I have no idea how to change the login button name from the API. I know it can be done via the translation method above, but how would I do it via the API? I've tried many things and it all ends in failure.

I have the following code so far, but have no idea how to dig deeper....
 

$wire->addHookAfter('LoginRegister::buildLoginForm', function($event) {

$form = $event->return;
$form->description = false; // Remove the description
$event->return = $form;

});

Thanks again and sorry to be a pain

[flydev]

On 16/10/2017 at 12:55 AM, The Frayed Ends of Sanity said:

Now again I have no idea how to change the login button name from the API. I know it can be done via the translation method above, but how would I do it via the API? I've tried many things and it all ends in failure.

I have the following code so far, but have no idea how to dig deeper....

@The Frayed Ends of Sanity: modify your hook with the following code :

$wire->addHookAfter('LoginRegister::buildLoginForm', function($event) {

    $form = $event->return;
    $form->description = false; // Remove the description
    
    foreach ($form->children as $field) { // loop form fields
        if($field instanceof InputfieldSubmit) { // if we reach the submit button then
            $field->value = 'My Submit'; // change the value
        }
    }

    $event->return = $form;
});

 

Quote

I am not sure where you lot get this information from as I am new to all this but I do have one more related question for which I don't know where to look.

Just look at the source code, and learn ProcessWire's hooks. With a little more experience you will be able to find those tricks alone

 

Quote

Thanks again and sorry to be a pain

We are happy to help here dude

[fbg13]

10 hours ago, flydev said:

$wire->addHookAfter('LoginRegister::buildLoginForm', function($event) {

    $form = $event->return;
    $form->description = false; // Remove the description
    
    foreach ($form->children as $field) { // loop form fields
        if($field instanceof InputfieldSubmit) { // if we reach the submit button then
            $field->value = 'My Submit'; // change the value
        }
    }

    $event->return = $form;
});

 

I think just $form->login_submit = "???"; should do it.

$wire->addHookAfter('LoginRegister::buildLoginForm', function($event) {
    $form = $event->return;
    $form->description = false;

    $form->login_submit->value = "???";

    $event->return = $form;
});

 

[flydev]

@fbg13 Yes absolutely, just copypasted the previous post in case he was using the image field (and btw, the if condition do not make sense, thanks).

But should be $form->login_submit->value as $form->login_submit return an object.

[The Frayed Ends of Sanity]

I really really appreciate the solutions you guys are churning out. Thanks for sparing your time.

I have been reading up a bit more and decided to have a bash at something myself. I wanted an * placed before the labels of required Text and Textarea fields. So I came up with the following loop that works but I'm worried I've missed something.

foreach ($form->children as $field) { // loop form fields
    if($field instanceof InputfieldText || $field instanceof InputfieldTextarea) {
      if($field->required === "required") {
        $field->label = '* ' . $field->label;
      }
    }
}

Does this look good to you? Thanks again

[flydev]

15 hours ago, The Frayed Ends of Sanity said:

Does this look good to you?

Yes

[SamC]

This is an awesome thread! Thanks all.

@flydev can I ask how you created the animation in your first post? Something like this might be useful in my tutorials rather than tonnes of images.

[flydev]

@SamC I a using LiceCap to create screen animation. It works under OSX and Windows.

[SamC]

16 minutes ago, flydev said:

@SamC I a using LiceCap to create screen animation. It works under OSX and Windows.

Thanks, sure something like this will be useful.

[Marco Ro]

I @flydev sure think you for listening to us!

What I ask in the post about the new module of MailChimp, is it possible to integrate with loginRegister module. This could be very helpful.

The best is if we could have the possibility to add a check box in the registration form, to ask if want to subscribe for (eg) newsletter and connect directly with the MailChimp list. 

I see in the new MailChimp module (made by @daniels ) you can connect the form in this way

// ... validation of form data

$mc = $modules->get("SubscribeToMailchimp");
$email = $input->post->email;
$subscriber = [
  'FNAME' => $input->post->firstname,
  'LNAME' => $input->post->lastname,
];
$mc->subscribe($email, $subscriber);

I try to see if I can make a hook, but the only thing that I sensed and should be done to ___processRegisterForm, where is the validation. I'm not really know how do it... ?

Anyway, if you want to integrate inside the module this function will not need to do hooks. in this case, for not doing each one's own hook will be good if we can set form the backend the field to pass to MailChimp, eg I use also ask the country. Need some place where connect the $country to the MailChimp field. 

 

I hope this can be useful as an idea and to have explained myself well! ?

Thank you!

[flydev]

I will install the Mailchimp module to see how it work.

From what I already see, we could add a checkbox by hooking into LoginRegister::buildRegisterForm and we can do the newsletter registration stuff in LoginRegister::processRegisterForm

stay tuned ?

[Marco Ro]

For the checkbox in the RegisterForm I have already add a checkbox (for the privacy, putting obligatory) in the user template and than in the setting of the module I have add the field. We can do the same and have back an ID to use for the newsletter registration. or not?

[flydev]

1 hour ago, MarcoPLY said:

We can do the same and have back an ID to use for the newsletter registration. or not?

Yes, I dont know why I was looking to hooks to insert the checkbox.. Adding it to the fields list will be a lot easier.

[daniels]

Thanks for your effort @flydev, let me know if you need some updates in the SubscribeToMailchimp module. The module would not be what it is made for, if you cant use it with the loginregister or any other way a dev prefers. I just want it to stay lightweight and flexible.

[flydev]

So to get it working, nothing fancy, all easy. In this example, only the email user field is used.

Thanks @daniels for this module ?

 

Assuming the checkbox field is called "subscribe_newsletter" and added to the "Registration form fields" in LoginRegister settings,

in ready.php :

wire()->addHookAfter('LoginRegister::processRegisterForm', function($event) {
    $form = $event->arguments[0];
    foreach($form->getAll() as $f) {
        $name = $f->attr('name');
        if(strpos($name, 'register_') !== 0) continue;
        if($name == 'register_subscribe_newsletter' && wire('input')->post->register_subscribe_newsletter == 1) {
            $mc = wire('modules')->get("SubscribeToMailchimp");
            $email = wire('input')->post->register_email; // Do not forget to saninitize the email field
            $mc->subscribe($email);
        }
    }
});

 

Result:

 

[wbmnfktr]

That's nice!

[Marco Ro]

Awesome! work so well! Thank you @flydev

I did this, that work well but not very well..

wire()->addHookAfter('LoginRegister::processRegisterForm', function($event) {
    $form = $event->arguments[0];
    foreach($form->getAll() as $f) {
        $name = $f->attr('name');
        if(strpos($name, 'register_') !== 0) continue;
        if($name == 'register_subscribe_newsletter' && wire('input')->post->register_subscribe_newsletter == 1) {
		$mc = wire('modules')->get("SubscribeToMailchimp");
        	$email = wire('input')->post->register_email;
		$subscriber = [
			'FNAME' => wire('input')->post->register_pad_firstname, // work well 
			'MMERGE4' => wire('input')->post->register_shipping_countrycode, // send me the ID number
		];
		$mc->subscribe($email, $subscriber);
        }
    }
});

 

I just followed the example usage of the Mailchimp module I just have change from $input->post-> to wire('input')->post-> as @flydev did and this work well!

But for the country code it send me the ID of the option filed that I have created in the backend.  I tried different things as to use 
register_shipping_countrycode->title like I use in others pages where I have an option flied (eg for category) but here didn't work.  I look in the documentation but still not find a way, What I can do?

 

[flydev]

@MarcoPLY  more info about options fieldtype there.

 

There you go  ( should support multi-language) :

wire()->addHookAfter('LoginRegister::processRegisterForm', function ($event) {
    $form = $event->arguments[0];
    foreach($form->getAll() as $f) {
        $name = $f->attr('name');
        if(strpos($name, 'register_') !== 0) continue;
        if($name == 'register_subscribe_newsletter' && wire('input')->post->register_subscribe_newsletter == 1) {
            $options = wire('fieldtypes')->get('FieldtypeOptions')->getOptions(wire('fields')->get('shipping_countrycode')); // get the field
            foreach ($options as $value) { // loop
                if(wire('input')->post->register_shipping_countrycode == $value->id) { // check field options id
                    $country_title = $value->title; // assign country option title
                }
            }
            $mc = wire('modules')->get("SubscribeToMailchimp");
            $email = wire('input')->post->register_email;
            $subscriber = [
                'FNAME' => wire('input')->post->register_pad_firstname,
                'MMERGE4' => $country_title,
            ];
            $mc->subscribe($email, $subscriber);
        }
    }
});

 

 

?

Edited May 15, 2018 by flydev
code correction