Jump to content

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


Recommended Posts

Hello everyone.  This login integration builds on the work done by licenesecart.  See the guide below.

 

https://licensecart.com/billing/plugin/support_manager/knowledgebase/view/31/external-login-form/1/

 

 

In my case, pure CSS was not enough to use the custom site integrated login.  The problem appears to be that the  data-toggle="modal" attribute will not work on my site due to the way it's already used in other modals.  The reason is not clear, (if anyone can shed light that would be great).  I simply could not submit a form from a modal window.

 

So my work around is to use javascript, to submit the form. I will start working on a spam catcher for the form later but for now here is my. ( data-toggle="modal") work around.   Starting from the top of the page.

 

Before you start, in order for it to work you need to do the following...Be extreamly care full here, as editing this page has risks if you make a mistake.  From licesecart's guide.

 

 

 

If you would like a external login form for your website you need to go to /config/blesta.php and find: Configure::set("Blesta.csrf_bypass", array());

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

 

 

Next, on your site, somewhere you need to call the modal.   I used a stacked font awesome icon. 
 

Font Awesome  (modal link)

<a href="#openModal" title="Customer Sign-in">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-sign-in fa-stack-1x fa-inverse"></i>
  </span>
</a>

Non-fontawesome, basic (modal link)

<a href="#openModal" title="Customer Sign-in">Sign-in</a>
 

Here is the main modal and the login form.   (I used a combination of the bootstrap core, the blesta bootstrap and this guide from JSFiddle. http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/ )

 

Remember to use https:// if you have a certificate.

<!--Start of Blesta Login Modal-->
<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close"><i class="fa fa-times"></i></a>
            <form id="blestalogin" action="http://yourwebsite.comy/client/login/" method="POST">
                <fieldset>
                    <div class="form-group">
                        <label for="login_username">Username</label>
                        <input type="text" name="username" value="" id="login_username" class="form-control" placeholder="Username" />
                    </div>
                    <div class="form-group">
                        <label for="login_password">Password</label>
                        <input type="password" name="password" id="login_password" class="form-control" placeholder="Password" />
                    </div>
                        </br>
                        <button type="submit" class="btn btn-success btn-block" name="login" value="Login" id="linktoblesta" hidefocus="true"><i class="fa fa-sign-in fa-lg"></i> sign in</button>
                </fieldset>
                    </br>
                    <a href="http://yourwebsite.comy/client/login/reset/">Reset My Password</a>
            </form>
    </div>
</div>
<!--End of Blesta Login Modal-->

The form is submitted with javascript at the bottom of your page is best, after the <body> tag.

<!--Blesta Login javascript-->
<script>
window.onload = function() {
    document.getElementById('linktoblesta').onclick = function() {
        document.getElementById('blestalogin').submit();
        return false;
    };
};
</script>
<!--End of Blesta Login script-->

Finally, the style sheet uses the JSfiddle exampe, (i removed the white to black gradient) but the rest is standard. 

Add this to your css file.  I used goolgle fonts, so remember to edit this to your needs.  and also declare google fonts link in your html header (99% will already have done this)

.modalDialog {
    position: fixed;
    font-family: 'Roboto Slab', serif;
    font-weight: 450;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 300px;
    position: relative;
    margin: 5% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;

}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #00d9ff;
}

The finished form will look something like this.

form_contact.png

 

 

 

 

Spam will be filtered by blesta. However there is no harm (as far as i can see) in adding an extra layer.  Basically i usually add an extra form field with a null or placeholder value in the form.  This field is hidden from humans with css, but spam bots tend to fill it out by default.  A PHP page then rejects logins where the hidden form has been filled out.  Simple and 90% effective in my experience.

Link to post
Share on other sites
  • 5 years later...
  • 2 weeks later...
On 8/22/2020 at 1:38 PM, vero said:

How do you cope with CSRF token error if Blesta installation is located in subdomain and request (form data) is coming from main domain?

Must be this - https://docs.blesta.com/display/user/Configuration+Files#ConfigurationFiles-Encryption

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.

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