How to add a Register link to the Login Interface

[turner2f]

As of November 2016 the NEW modification for adding a "Registration" link to the Login Interface is...

 

/app/views/client/bootstrap/client_login.pdt

Just change ...

<div class="panel-footer">
<a href="<?php echo $this->Html->safe($this->base_uri . "login/reset/");?>"><?php $this->_("ClientLogin.index.link_resetpassword");?></a>
</div>

to say...

<div class="panel-footer">
<a href="<?php echo $this->Html->safe($this->base_uri . "login/reset/");?>"><?php $this->_("ClientLogin.index.link_resetpassword");?></a>
     |     
<a href="http://<?php echo $this->Html->safe($this->Html->ifSet($system_company->hostname)); ?>/plugin/order/signup/index/Register">Click here to register</a>
<!--This adds a Register link to the Login Interface -->
</div>

[JNdev]

Very nice, helping other blestar

[turner2f]

Sure thing. 

Our pleasure.

[turner2f]

@Jawanet

 

We already have our website done.

But I took a look at your two themes at ( very nice, by the way ) ...

https://www.blesta.com/forums/index.php?/topic/7746-kit-material-blesta-html-hosting-theme-v2-huge-update/

https://www.blesta.com/forums/index.php?/topic/7609-e-theme-blesta-hosting-template/

===========

What we are curious to know is how do we get the login button to produce a "Modal" window for the login interface ?

We saw three tutorials on how to do it, bu figured you might be able to give advice that is more clearly understood.
 

External ClientLogin Form With Csrf Tokens Enable

External Login 

CustomLogin Integration From Your Own Site. No. (Data-Toggle="modal")

[JNdev]

First you need

Go to /config/blesta.php find the following line just at the bottom of the page:

Configure::set("Blesta.csrf_bypass", array());

and replace it with:

Configure::set("Blesta.csrf_bypass", array('client_login::index'));

 

Do you use a bootstrap to put modal login?

[turner2f]

@Jawanet

I tried your advice, and was still taken to the "stand-alone" Login page.

How do we get the login button to open up a Modal window that contains the  login interface?

1) - What do we need to do from start-to-finish ?

2) - What areas of which files, do we need to place specific code to make this happen ?

 

Here is a screenshot of our interface...

 

 

[JNdev]

Hello

If you already know the template that you use, then follow these steps.

Open header and footer template file, or using blesta theme open structure.pdt on app/views/client/your-theme

1. Add

data-target="#login-modal" data-toggle="modal"

 

to your button link

2. Finally like

<a href="#" data-toggle="modal" data-target="#myModalForm" class="btn btn-primary">LOG IN</a>

 

 

3. You can put this code to bottom page before </body> or put after button modal

<!-- Start Login Modal -->
<div class="modal fade" id="myModalForm" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">×</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
              
<!-- ==================Change This Url With Your Own Blesta Url =====================-->
	<form method="post" action="http://blesta-domain-url.com/client/login">
<!-- ==================Change This Url With Your Own Blesta Url =====================-->
                          
                          
							<div class="form-group">
								<label class="sr-only">Username or Email</label>
								<input type="text" name="username" id="login_username" class="form-control" placeholder="Username or Email">
							</div>
							<div class="form-group">
								<label class="sr-only">Password</label>
								<input type="password" name="password" id="login_password" class="form-control" placeholder="Password">
							</div>
							<div class="form-inline form-group">
								<button type="submit" class="btn btn-primary btn-block">Login</button>
							</div>
							<a href="#"><small>Lost your Password?</small></a>
						</form>
                
                
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-warning"
                        data-dismiss="modal">
                            Close
                </button>
            </div>
        </div>
    </div>
</div>
<!-- End Login Modal -->

 

 

Let me know if you are successful

[turner2f]

@Jawanet

THANK YOU !!

Go it to work for the "Reset Password" button by adding the code and CSS to the "client_login.pdt" file.

So at least we know that the modal action works.

BUT...

we are needing to know which Blesta file has the "Log In" link that appears in the top navigation menu shown in the screenshot we posted.

===========

Which Blesta file do we need to alter for the "Log In" link that appears in the top navigation menu  ?

And which line within the file ?

[turner2f]

@Jawanet

Just sent you a private email.

[JNdev]

Hi sir turner

 

Like my intructions open structure.pdt on app/views/client/bootstrap

After opened, scroll to bottom, you see

    </body>
</html>

Add login modal before </body> like this

		<?php echo $this->Javascript->getFiles("body");?>
		<?php echo $this->Javascript->getInline();?>
		<?php echo $this->Html->ifSet($body_end);?>

<!-- Start Login Modal -->
<div class="modal fade" id="myModalForm" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">×</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
              
<!-- ==================Change This Url With Your Own Blesta Url =====================-->
	<form method="post" action="http://blesta-domain-url.com/client/login">
<!-- ==================Change This Url With Your Own Blesta Url =====================-->
                          
                          
							<div class="form-group">
								<label class="sr-only">Username or Email</label>
								<input type="text" name="username" id="login_username" class="form-control" placeholder="Username or Email">
							</div>
							<div class="form-group">
								<label class="sr-only">Password</label>
								<input type="password" name="password" id="login_password" class="form-control" placeholder="Password">
							</div>
							<div class="form-inline form-group">
								<button type="submit" class="btn btn-primary btn-block">Login</button>
							</div>
							<a href="#"><small>Lost your Password?</small></a>
						</form>
                
                
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-warning"
                        data-dismiss="modal">
                            Close
                </button>
            </div>
        </div>
    </div>
</div>
<!-- End Login Modal -->

    </body>
</html>

 

You can call Modal on any page .

 

Other answer done by pm.

[turner2f]

@Jawanet

We want to thank you VERY much for your assistance

we are sorry for the delayed response.

Although we really loved the code modification solution for creating a MODAL LOGIN  we found that it would work in one area, but cause CSS and functional issues elsewhere.

==============

As an alternative we found a fantastic solution for embedding the Login / Registration interface into the website, with the website's navigation menu and header at the top.

We found the solution at ...

=================================

HERE IS WHAT WE DID...

We went to ... /app/views/client/bootstrap/structure.pdt


We replaced...

if ($this->Html->ifSet($show_header, true)) {

with...

if (true) {

Or you could just remove the " if " block altogether.

=================================

 

Again, thanks for your kind assist earlier.

[JNdev]

Glad to hear if it is successful.

Maybe I'm misunderstanding with your intent.

[turner2f]

@Jawanet

Thank you.

Just sent an email reply concerning the footer installation.

 

[Amit Kumar Mishra]

wonderful...

i was trying this, but was not successful, till i followed this tutorial

well explained

the only things here are

1. the reset/forgot password link

2. after logout from the client portal, should not redirect to the login page

will update here when i am able to solve the two mentioned points

 

but thanks