Login + Registration form

[Marco Ro]

Hi, 

I use the login/registration modules, I tried to add the registration form on the same window as the login form. But I can't find the way for do it. 

I need because inside the page there is a link when you click the modal box opens with inside the login form, but if the user need make the registration, when click on the registration link the box closes and I have to click again on the link. So, one easy and good solution is render the registration form close to the login form, but how I can do this?

I tried with hook  ___execute, or force rendering of  ___buildRegisterForm, but or I wrong to write the hook code or did not find a working solution.

Thank you.

[flydev]

Quote

but if the user need make the registration, when click on the registration link the box closes and I have to click again on the link. So, one easy and good solution is render the registration form close to the login form, but how I can do this?

Sorry I can't understand all the post ?, can you please post some code or explain "better" what you are trying to achieve ?

 

You can use LiceCap to show us a screencast of what happen on your page.

 

[Marco Ro]

Thank you, sure add the code here below 

  <?php

        $addcart = $modules->get("PadRender")->addToCart();
        $file = $page->free_download;
        $logg = $user->isLoggedin();

        if($page->pad_price <= 0){
          if ($logg) {
                echo "<a class='btn-log' href='$file' download >download</a>";
            } else {
                echo "<button class='btn-log' id='btn-log'>Log For download</button>";
            }
        } else {
          echo $addcart;
        }

      ?>

This show me the Free Download button if the user its logged - (btw, also show me the paid version or the free version). 

But if the user is not logged he must first register before downloading the file. 

<div id="myModal" class="modal">


  <div class="modal-content">
    <span class="close">&times;</span>

    <?php
    $loginRegister = $modules->get('LoginRegister');
    $loginRegister->set('renderStyles', false);
    ?>
    <?php echo $loginRegister->execute();  ?>



  </div>

</div>

var modal = document.getElementById('myModal');

var btnlog = document.getElementById("btn-log");

var span = document.getElementsByClassName("close")[0];

btnlog.onclick = function() {
    modal.style.display = "block";
}

span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

In this way I showing the login form inside a modal box  ( it's just a modal box that I usually take form the 3wc website, work well ) .

 

So, the box show the login form and the registration link. I would like show close to the login form the registration form, in this way the use can make both action in the same box.

I tried with hook  ___execute, or force rendering of  ___buildRegisterForm , but without find a working solution.

[alxndre]

2 hours ago, flydev said:

You can use LiceCap to show use a screencast of what happen on your page.

Unrelated, but I've been struggling with gif screen capture the whole morning, and your post saved my day. Thanks.

[flydev]

@MarcoPLY

You have to call the module by using an ajax request in order to avoid the redirection when the user click.

In the following example, I am using jQuery (I'm lazy) and the modal script from w3c and a new template LoginRegister.php for the example :

 

Code of the template :

Spoiler

<?php namespace ProcessWire;
$loginRegister = $modules->get('LoginRegister');
$loginRegister->set('renderStyles', true);
$out = '';

if(!$config->ajax) { // if not ajax, show markup
    $out .= '
            <!-- Trigger/Open The Modal -->
            <button id="myBtn">Open Modal</button>
            
            <!-- The Modal -->
            <div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close">×</span>
                    <div id="LoginRegisterDiv">';
}
// call the module LoginRegister
$out .= $loginRegister->execute();

if(!$config->ajax) { // if not ajax, show markup
    $out .= '    </div>
            </div>
        </div>';
}

$content = $out; // delayed output
// or
echo $out; // direct output

 

 

JavaScript code :

Spoiler

var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

$(document).ready(function () {
    $('.LoginRegisterLinksRegister > a:nth-child(1)').on('click', function (e) { // select the first link from the orignal div
        $.ajax({
                url: './', // target url (selff here)
                type: "get", // GET because LoginRegister use GET variables
                data: 'register=1', // url param
                beforeSend: (function () {
                  
                })
            })
            .done(function (response) {
                $('#LoginRegisterDiv').html(response); // replace the modal markup
            });
      
        e.preventDefault();
    })
});

 

 

 

 

 

[Marco Ro]

Thank you @flydev!  Yes this it's other option and works. You put me again on the right way, thank you!

Only I have to load just a part of the page, the form in #LoginRegister. So I have did this:

$.ajax({
    url: './', // target url (selff here)
    type: "get", // GET because LoginRegister use GET variables
    data: 'register=1', // url param
    success: function(data){
         $('#LoginRegisterDiv').html($(data).find('#LoginRegister').html());
      },
})

 

About the module, now it asks to be confirmed before activating the account. It's possible pass this function? and make active the account after the registration, and maybe just add a confirmed screen for let be more clear. 

 

Thank you flydev, you help me a lot!

[flydev]

35 minutes ago, MarcoPLY said:

About the module, now it asks to be confirmed before activating the account. It's possible pass this function? and make active the account after the registration, and maybe just add a confirmed screen for let be more clear. 

Nope, it's not possible in the current state of the module.

[Marco Ro]

umm ok, I try to make some change in the module. Hope I can do, because the alternative is to build a new login / registration system

Thank you flydev!

[Marco Ro]

Ok I don't think I can change the module.

The only things that I can do it's make a ajax call in the way the confirmation form  appears after registration without the window closing.

But I notice that If I try to use the button id in the ajax code this not work. same for the other buttons. 

 

Es: if someone fails to enter the pw the box reload the page, this not works

$('#Inputfield_login_submit').on('click', function (e) { // select the first link from the orignal div - If Button not work

      $.ajax({
              url: './', // 
              type: "get", // 
              data: '', // url param - Maybe here go somehting? but in this case what? 
              beforeSend: (function () {

              }),
          })
          .done(function(data){
            $('#LoginRegisterDiv').html($(data).find('#LoginRegister').html());
          });

      e.preventDefault();
  })

 

The same with all the button link.

[flydev]

Yes, do not hesitate to share your result, try to make your best and we will try to send a Pull Request on Github ✨

PS: I forgot to send my post.

 

I modified the module to bypass confirmation, if you wanna try and report back, rename your LoginRegister folder to .LoginRegister, then extract the zip in place of the original one in site/modules, refresh modules and check the box in the module's admin.

 

File :  LoginRegister.zip

 

Edited February 20, 2018 by flydev
screenshot

[Marco Ro]

Wow, again,  thank you @flydev!

Thanks for the encouragement. I tried to put some of mine ( I feel sorry to ask only) for create a send Welcome email after the registration. the idea look easy, but I try to do with the module. I tried first hook  ___createdUser, I  tried make a new protected function like sendConfirmationEmail (could be the best solution) . But obviously it doesn't work

Last attempt I did was add inside protected function ___createdUser. But not work. I think to not be so far...

 

	protected function ___createdUser(User $user) {

		$mail = new WireMail();
		$mail->subject('Welcome to our website');
		$mail->to($email);

		$body = "<p>" . "Welcome to our website" . $user->name . "</p>";

		$mail->body(strip_tags($body);
		$mail->bodyHTML($body . "<p><a href='$page->url?profile=1'>" . $this->_('Your Account') . "</a></p>");

		return $mail->send();

	}

 

[flydev]

No problem dude, feel free to ask, it will be benefit for other people too.

And you was close ?

 

Try this :

wire()->addHookBefore('LoginRegister::createdUser', function($event) {
    $u = $event->arguments[0]; // get user object
    $mail = WireMail(); // no keyword 'new'
    $mail->subject('Welcome to our website');
    $mail->to($u->email);
    $body = "<p>" . "Welcome to our website " . $u->name . "</p>";
    $mail->body(strip_tags($body));
    $mail->bodyHTML($body . "<p><a href='$this->page->url?profile=1'>" . $this->_('Your Account') . "</a></p>");
    $mail->send();
});

 

[Marco Ro]

yeah this work!

yes sure I also think that the growth of the forum can do interesting to many other people!

Btw I have discovery that I was so close! I have change my last code with add $mail= to($user->email) and now work well!
 I know is better not write the module, for this reason I will use your code in my _func.php file.

 

	/**
	 * Hook called after user is created
	 *
	 * @param User $user
	 *
	 */
	protected function ___createdUser(User $user) {

		$mail = new WireMail();
		$mail->subject('Welcome to our website');
		$mail->to($user->email);

		$body = "<p>" . "Welcome to our website" . $user->name . "</p>";

		$mail->body(strip_tags($body));
		$mail->bodyHTML($body . "<p><a href='$page->url?profile=1'>" . $this->_('Your Account') . "</a></p>");

		return $mail->send();

	}

Thank you again!