Log in through custom jQuery dialogUI

Question

I'm looking for a way to leverage Magento's AccountController to allow the user to log in using a form I have created on the front page.

The user clicks a button, and can then search for the closest store, or have the option to log in.

I cant figure out how to leverage AccountController though. What I've tried is this:

function customerLogin()
{
    var email    = jQuery('#login-email').val();
    var password = jQuery('#login-password').val();
    jQuery.post("orderkickoff/login/login", { 'login[username]': email, 'login[password]': password } );

There's an HTML form on the front page where the user enters their info. This jQuery function grabs that info on the button click. It grabs the email address and the password, and then its supposed to pass it off to:

class Namespace_OrderKickoff_LoginController extends Mage_Core_Controller_Front_Action
{

    public function loginAction()
    {
        //if customer is not logged in
        if(!Mage::getSingleton('customer/session')->isLoggedIn())
        {
            // get the email and load the customer by id
            $login = $this->getRequest()->getPost('login');
            $email = $login['username'];
            $customer = Mage::getModel('customer/customer')->setWebsiteId(Mage::app()->getStore()->getWebsiteId())->loadByEmail($email);
            $quote = Mage::getSingleton('checkout/cart')->getQuote();

            //If the customer exists, log them in by forwarding to loginPost
            if($customer->getId())
            {
                // just make the customer log in
                $mysession = Mage::getSingleton('customer/session');
                $mysession->setBeforeAuthUrl(Mage::getUrl('checkout/cart'));
                $mysession->setAfterAuthUrl(Mage::getUrl('checkout/cart'));
                $this->_forward('loginPost','account','customer');
            }
            else
            {
                //There is no customer with that email.
            }
        }
        $this->_redirect('checkout/cart');
        return;
    }
}

It seems though that my controller is not getting hit, and so its not passing off to the Magento controller to continue the sign-in process.

Is there a step I am missing?

Anyone have some good experience with using Magento's login controller?

Thanks for the input!

EDIT/UPDATE:

I think the problem is with the jQuery POST method I am using. I can navigate to the page no problem. I have WAMP environment set up so going to localhost/storeLocator/magento/index.php/orderkickoff/login/login will resolve to the correct page.

Is there a different jQuery method I should be using to pass that data?

EDIT 2:

HTML from the form

<div id="order-wrapper">
    <div id="inline">
        <button id="orderstart"> Start Your Order </button>
        <form id="contact" name="contact">
            <div id="deliveryops">
                Delivery <input id="delivery" type="radio" onclick="delivery" name="method" />
                Carryout <input id="carryout" type="radio" onclick="carryout" name="method" />

            </div>
            <div id="addressfordelivery">
                <br />
                <br />
                <div id="descript"> Enter the address you would like your order delivered to. </div>
                <br />
                <br />
                <input id="deliveryaddress" class="txt" type="address" name="deliveryaddress" placeholder="Address"/>
                <input id="deliverycity" class="txt" type="city" name="deliverycity" placeholder="City" />
                <input id="deliverystate" class="txt" type="state" name="deliverystate" placeholder="State"/>
                <input id="deliveryzip" class="txt" type="zip" name="deliveryzip" placeholder="Zip Code"/>
                <div id="find"> Submit </div>
            </div>
            <div id="addressforpickup">
                <br />
                <br />
                <div id="descript"> Enter your address to find our closest location</div>
                <br />
                <br />
                <input id="pickupaddress" class="txt" type="address" name="pickupaddress" placeholder="Address"/>
                <input id="pickupcity" class="txt" type="city" name="pickupcity" placeholder="City" />
                <input id="pickupstate" class="txt" type="state" name="pickupstate" placeholder="State"/>
                <input id="pickupzip" class="txt" type="zip" name="pickupzip" placeholder="Zip Code"/>
                <br />
                Search within
                <select id="pickupradius" name="pickupradius">
                    <option selected disabled hidden value=""></option>
                    <option value="5"> 5 Miles </option>
                    <option value="10"> 10 Miles </option>
                    <option value="15"> 15 Miles </option>
                    <option value="20"> 20 Miles </option>
                </select>
                <div id="lookup"> Submit </div>
            </div>

            <div id="haveaccount">

                <br />
                <br />
                ---------------- OR ----------------
                <br />
                <br />

                Have an account with us? <br /> <br />

                <input id="login-email" class="input-text required-entry validate-email" type="text" name="login[username]" placeholder="email" />
                <input id="login-password" class="input-text required-entry" type="password" name="login[password]" placeholder="password" />
                <br />
                <br />
            </div>
            <div id="signin"> Log In </div>

            <div id="display_area">
            </div>
            <div id="googlemap" style="background-color: rgb(229, 227, 223); overflow: hidden;"></div>

        </form>

Answer 1

just an update! Finally got this working after someone told me about form keys!

I changed the way the html worked to this:

<button id="orderstart"> Start Your Order </button>
            <form action="<?php echo $this->getURL('customer/account/loginPost'); ?>" method="post" id="contact"  name="contact">
                <?php echo $this->getBlockHtml('formkey'); ?>

And I had to change the submit "div" to an actual submit button

<button type="submit" title="Login" id="signin"> <span> Log In </span> </button>

The problem was in Magento 1.9 there are now "form_keys" which I guess are meant to help with XSS attacks. I was completely clueless about this, and so was banging my head against an invisible wall! Adding in that form key, and passing the data to loginPost now works!

Thanks so much for your help and your suggestions!

Answer 2

From what I can see from your config.xml in the comment (better to edit your question and add it in there) you aren't even targeting your controller. Firstly it should be <frontName> not <frontname> (I would check your entire config.xml against core module equivalents) and you have defined it as login, but you use orderkickoff in your URL. The frontName is what links the request to the module so by using orderkickoff/login/login as your URL, the orderkickoff section is not matching against module name, or the <orderkickoff> node within <routers>, it's matching against the frontName. Hence in this situation the request is not reaching your controller because there is no frontName match.

Correct the frontName, check the syntax of the rest of the config.xml against core references, clear at least your config cache and retry.