Simple Login implementation for Dojo MVC

http://stackoverflow.com/questions/10984855/simple-login-implementation-for-dojo-mvc

by phusick

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<script type="text/template" id="dialog-template">
    <div style="width:300px;">
      
        <div class="dijitDialogPaneContentArea">
            <div data-dojo-attach-point="contentNode">
                {form}              
            </div>
        </div>
    
        <div class="dijitDialogPaneActionBar">
            <div 
                class="message"
                data-dojo-attach-point="messageNode"                
            ></div>      
            <button
                data-dojo-type="dijit.form.Button"
                data-dojo-props=""                
                data-dojo-attach-point="submitButton"
            >
                OK
            </button>
            
            <button
                data-dojo-type="dijit.form.Button"
                data-dojo-attach-point="cancelButton"
            >
                Cancel
            </button>
        </div>      
    </div>
</script>

<script type="text/template" id="login-form-template">
    <form
        data-dojo-type="dijit.form.Form"
        data-dojo-attach-point="form"
    >
        
        <table class="form">
            <tr>
                <td>Username</td>
                <td>
                    <input data-dojo-type="dijit.form.ValidationTextBox"
                        data-dojo-props='
                            name: "username",
                            required: true,
                            maxLength: 64,
                            trim: true,
                            style: "width: 200px;"
                            '
                    />
                </td>
            </tr>
            
            <tr>
                <td>Password</td>
                <td>
                    <input data-dojo-type="dijit.form.ValidationTextBox"
                        type="password"
                        data-dojo-props='
                         ...

CSS

body {
    padding: 30px;
    font: 12px Myriad,Helvetica,Tahoma,Arial,clean,sans-serif;
}

table.form td {
    padding: 5px;
}
.message {
    position: absolute;
    left: 0;
    padding: 7px;
    color: red;
}

JavaScript

require([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/on",
    "dojo/dom",
    "dojo/Evented",
    "dojo/_base/Deferred",
    "dojo/json",
    
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    
    "dijit/Dialog",
    "dijit/form/Form",
    "dijit/form/ValidationTextBox",
    "dijit/form/Button",
    
    "dojo/domReady!"
], function(
    declare,
    lang,
    on,
    dom,
    Evented,
    Deferred,
    JSON,
        
    _Widget,
    _TemplatedMixin, 
    _WidgetsInTemplateMixin,
        
     Dialog
) {

    var LoginDialog = declare([Dialog, Evented], {
        
        READY: 0,
        BUSY: 1,
        
        title: "Login Dialog",
        message: "",
        busyLabel: "Working...",
        
        // Binding property values to DOM nodes in templates
        // see: http://www.enterprisedojo.com/2010/10/02/lessons-in-widgetry-binding-property-values-to-dom-nodes-in-templates/
        attributeMap: lang.delegate(dijit._Widget.prototype.attributeMap, {
            message: {
                node: "messageNode",
                type: "innerHTML"               
            }            
        }),
        
        constructor: function(/*Object*/ kwArgs) {
            lang.mixin(this, kwArgs);            
            var dialogTemplate = dom.byId("dialog-template").textContent; 
            var formTemplate = dom.byId("login-form-template").textContent;
            var template = lang.replace(dialogTemplate, {
                form: formTemplate                
            });

            var contentWidget = new (declare(
                [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin],
                {
                    templateString: template                   
                }
            )); 
            contentWidget.startup();
            var content = this.content = contentWidget;
            this.form = content.form;
            // shortcuts
            this.submitButton =...