How can I code af custom HTML form for login to Vanilla from another page on same domain?

Answers

• ChrisvanRun New

  April 2015

  Any suggestions would be welcome!

  0
• x00 MVP

  April 2015 edited April 2015

  If in Vanilla, using the framwork.

  Outside suggest using javascript

  see

  http://vanillaforums.org/entry/signin?DeliveryType=VIEW

  That fetches the form (you will need to style it)

  example load this script (presumes you are using jQuery)

  jQuery(document).ready(function($){
      login= location.protocol + "//" + location.hostname + "/path/to/forum/signin?DeliveryType=VIEW"
      $('#LoginForm').load(login);
  });
  

  Put this in you markup

  <div class="LoginForm"></div>
  

  grep is your friend.

  2
• x00 MVP

  April 2015 edited April 2015 Answer ✓

  some errors. should be

  and

  <div id="LoginForm"></div>
  

  grep is your friend.

  1
• ChrisvanRun New

  April 2015 edited April 2015

  Works! Thanks to your lead and studying some Javascript (never used it) I have been able to fix it as follows. Note that it's not very clean but it works... =P Went with a part retrieval because the VIEW returned a complete form that did not fit the design of the website.

  Header:

  [...]
  <script src="./core/js/libs/jquery-1.6.2.min.js"></script>
  [...]
  

  Form:

  <form id="Form_User_SignIn" action="/forum/entry/signin" method="post">
      <div id="transientkeyinsertation"></div>
      <input type="text" id="Form_Email" name="Email" value="Email/Username" class="required" onFocus="this.value=''"/>
      <input type="password" id="Form_Password" name="Password" value="Password" class="required" onFocus="this.value=''"/>
      <button type="button" id="forum_signin_button" class="sc-button">Forum Log-In</button>
  </form>
  

  Related JS.

  • Prevents execution if the goal of the visitor is other then quickly go to the website.
  • waits until the HTML insertation has completed.

  <script>
      // Use a button to enable a wait until the jQuery call to load HTML files have completed.
      // This is a work-around for the added functionality of a transient_key. Ugly, but it works!
      $('#forum_signin_button').click(function() {
  
          var elements_to_retrieve = "#Form_TransientKey";
          var login_url = location.protocol + "//" + location.hostname + "/forum/entry/signin?DeliveryType=VIEW";
          var load_url = login_url + " " + elements_to_retrieve;
  
          $('#transientkeyinsertation').load(load_url, function() {
              $('#Form_User_SignIn').submit(); //important, we need to wait until it is completed before we submit!
          });
      });
  
      $("#Form_Password").keyup(function(event){
          if(event.keyCode == 13){
              $("#forum_signin_button").click();
          }
      });
  </script>
  

  0
• x00 MVP

  April 2015

  Some options

  You can create a module in Vanilla with a login form to suit your site, and load it directly, you can even use the same module on the vanilla pages. Obviously you would make use of the form builder, rather then hard coding.

  You don't have to use jQuery.load you can use jQuery.get or jQuery.ajax, there is no need to insert the div in the DOM to manipulate it with jQuery, it can simply be a standalone element frm_obj = $('<div>').htm(data)

  grep is your friend.

  0
• x00 MVP

  April 2015 Answer ✓

  That is an interesting feature of load the #target. Actually your solution is not too bad for inserting the TransientKey. I would go for the Vanilla module option for uniformity, but still ok.

  grep is your friend.

  5