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

ChrisvanRun

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

x00

some errors. should be

and

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

x00

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.

ChrisvanRun

Any suggestions would be welcome!

x00

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>

x00

some errors. should be

and

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

ChrisvanRun

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>

x00

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)

x00

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.