I need to build a login box satisfying the following requirements:

  • Build it as a UI Component that can be used in multiple locations on a site
  • Two instances of this component can exist on the same page
  • Use jQuery, HTML5 and CSS3
  • Your site supports IE9+ and current versions of Safari, Chrome, Firefox
  • Your site supports iOS6
  • Login form submits username and password data using AJAX to: api.yoursite.com/login


I'm trying to determine the best approach, but am struggling with the following:
  1. By "UI component" I'm assuming this is supposed to be done using jQuery UI? In that case, dialogue box seems like a viable option, but maybe I've overlooked something?
  2. If needing to exist in multiple locations on a site and/or two instances on the same page, should I take this as a cue to avoid IDs and only use classes, or are there larger implications beyond the CSS?
  3. This is a demo/test login page, so the site itself doesn't actually exist. How can I go about testing various logins without hard-coding in some fake user IDs and passwords? Is that even possible?
  4. I'm confused by the URL provided: api.yoursite.com/login. Is it assumed that /login is tied to a PHP file?
  5. I don't see how this can't involve a server-side language, but the requirements only permit me to use jQuery, HTML and CSS. Is cross-domain Ajax the answer?


Here's the HTML I've come up with. Pretty basic...
Code:
    <div class="loginContainer">
        <div class="loginModule">
            <form class="loginForm" method="post">
                <fieldset class="loginFields">
                <legend>User Login</legend>
                <h1>User Login</h1>
                    <input autofocus class="loginID" type="email" placeholder="Apple ID" required />
                    <input class="loginPassword" type="password" placeholder="Password" required />
                    <button class="loginSubmit" name="submit" type="submit" >Login to your account</button>
                </fieldset>
            </form>
        </div>
    </div>
As for the jQuery, I have this:
Code:
    $.ajax({
        url: 'http://api.yoursite.com/login',
        type: 'POST',
        data: {
            username: $(".loginID").val(),
            password: $(".loginPassword").val();
        },
        success: function (data) {
            if (data.success) {

            } else {

            }
        }
   });