Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

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

edited April 2015 in Vanilla 2.0 - 2.8

Dear readers,

I have a small HTML form that posts to the /entry/singin. However, with a recent update to the Vanilla Forum it has broken down and I am looking for ways to fix this.

<form id="Form_User_SignIn" action="/forum/entry/signing.php" method="post" target="_blank"> <strong>Forum:</strong> <input type="text" id="Form_Email" name="Email" value="Username" class="required" onFocus="this.value=''"/> <input type="password" id="Form_Password" name="Password" value="Password" class="required" onFocus="this.value=''"/> <input type="submit" id="Form_SignIn" name="Sign_In" value="Login" /> </form>
It references, but requires the user to press submit AGAIN on the page in order to log-in. This has to do with the TransientKey not being with the original forum.

Vanilla is embeded in /forum/ on the same domain as the index.html which contains the reference HTML form.

Thank you for your help!

Yours kindly,

Chris

Best Answers

  • x00x00 MVP
    edited April 2015 Answer ✓

    some errors. should be


    and

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

    grep is your friend.

Answers

  • Any suggestions would be welcome! =)

  • x00x00 MVP
    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.

  • x00x00 MVP
    edited April 2015 Answer ✓

    some errors. should be


    and

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

    grep is your friend.

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

Sign In or Register to comment.