UI Component Login

This is a simple jQuery UI Component for authentication. This demonstrates sending a password back to the server by AJAX for authentication. It merely generates a success or fail message though much more sophistication can hinge upon that. Multiple instances of the UI component can be used with their display and functionality indpendant where required.

The two fields are required and will give an error message if its empty. There is only one correct Apple ID and Password combination: Apple ID => guest , Password => pass. Any other password will generate a failure message. When successfully logged in the text link will change to "Logout: and you can click it to logout.

Tested in Chrome, IE9+ and iPad2 on iOS 6.1.3 and Firefox. Known bug in Firefox23; Text fields do not accept focus from mouse, can tab into it. (FIXED!)
Update: Oops! not quite modularized - see login.js. Put code into self-invoking function, then called with DOM-ready function.
Update: Also moved Javascript to end of body element for performance.
Update: A fix for absent placeholder text in IE9

Click on "Login" below to run demo: