Jump to content

Login + Registration form


Marco Ro
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

 

 

LoginRegisterAjax.thumb.gif.e35588e17b7fb79e1bb7d6bfb48d3178.gif

 

 

  • Like 3
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

options.png.238db4851c79c06cabbef13bb3a97bf8.png

Edited by flydev
screenshot
  • Like 3
  • Thanks 2
Link to comment
Share on other sites

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

	}

 

Link to comment
Share on other sites

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

 

  • Thanks 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...