Jump to content

How to add a Register link to the Login Interface


turner2f

Recommended Posts

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

@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")

Link to comment
Share on other sites

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

 

 

login_button_screenshot.jpg

Link to comment
Share on other sites

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 :blesta:

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
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.

Loading...
×
×
  • Create New...