Jump to content

Leaderboard

Popular Content

Showing content with the highest reputation on 08/31/2020 in all areas

  1. phireuk
    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. 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.
    1 point
  2. blestamodules
    Hello, Although I cannot promise a completion date I have recently started working on a xero integration - as it stands it currently syncs contacts only I have many projects on the go now but have something in the works; this one along with Jira software bug tracking and IBP auto-registration are some of the first plugins we have planned as we are integrating into our own setups. Kind Regards
    1 point
×
×
  • Create New...