phireuk Posted May 4, 2015 Report Share Posted May 4, 2015 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. 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. Jono, Joseph H, Michael and 3 others 6 Quote Link to comment Share on other sites More sharing options...
vero Posted August 22, 2020 Report Share Posted August 22, 2020 How do you cope with CSRF token error if Blesta installation is located in subdomain and request (form data) is coming from main domain? Quote Link to comment Share on other sites More sharing options...
vero Posted August 30, 2020 Report Share Posted August 30, 2020 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 Quote Link to comment Share on other sites More sharing options...
PERECEH Posted September 3, 2020 Report Share Posted September 3, 2020 I will try. thanks for sharing ? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.