Jump to content
The Frayed Ends of Sanity

LoginRegister customisation

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 :

 

translate.thumb.gif.a3fff2dd9bf7b4703cbc8bfb5922ec58.gif 

 

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 by flydev
Avatar / question
  • Like 7
  • Thanks 1

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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...)

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

@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/

  • Like 4

Share this post


Link to post
Share on other sites
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. :

loginregister_image.thumb.png.51c15dde552809daffd72cb6e8b9f4c4.png

 

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().

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 :)

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites
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;
});

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

@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.

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

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 ^-^

Share this post


Link to post
Share on other sites
15 hours ago, The Frayed Ends of Sanity said:

Does this look good to you?

Yes :)

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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!

  • Like 1

Share this post


Link to post
Share on other sites

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 😏

  • Like 2

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

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:

mailchimp.thumb.gif.d4ea57680fc045f6a27d4ccf32f51738.gif

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

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?

 

Share this post


Link to post
Share on other sites

@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);
        }
    }
});

 

options.thumb.gif.9c3df5d3ee603053e69f67f5bb944b15.gif

 

🙂

Edited by flydev
code correction
  • Like 4

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...