title: Simple Login implementation for Dojo MVC
body: <p>Is there any example on how to implement a simple login page/dialog? I have been trying to do it with dojo boilerplate (check my previous questions : <a href="https://stackoverflow.com/questions/10953316/layout-implementation-for-dojo-mvc">Layout implementation for Dojo MVC</a>). So far, I have been able to display my dialog box. But I want to be able to get my data and on click event want to have an alert box for example (with his content).</p>
  
  <p>My view:</p>
  
  <pre><code>&lt;form action="Login" method="post" validate="true" id="loginForm"&gt;
    &lt;table width="258"&gt;
      &amp;nbsp;
      &lt;tr&gt;
        &lt;td&gt;&lt;label&gt;Login&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input class="cell" type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="login" id="userId"/&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;label&gt;Password&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input class="cell" type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="password"/&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;&lt;td colspan="2"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;
        &lt;td colspan="2" align="center"&gt;
        &lt;table border="0" cellspacing="0" cellpadding="0"&gt;
            &lt;tr&gt;
              &lt;td align="center" valign="top"&gt;&lt;button dojoType="dijit.form.Button" type="submit" id="LoginButton" onClick="connect"&gt;Ok&lt;/button&gt;&lt;/td&gt;
              &amp;nbsp;
              &lt;td align="left" valign="top"&gt;&lt;button dojoType="dijit.form.Button" type="submit" onclick="document.Login.reset()" id="Cancel"&gt;Cancel&lt;/button&gt;&lt;/td&gt;
              &amp;nbsp;
              &lt;td&gt;&lt;button dojoType="dijit.form.Button" type="submit" onclick="showDialog();" id="resetPassword"&gt; Show Dialog &lt;/button&gt;&lt;/td&gt;
            &lt;/tr&gt;
       &lt;/table&gt;
       &amp;nbsp;
       &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My Widget module/class</p>
  
  <pre><code>define([
      "dojo/_base/declare",
      "dijit/_Widget",
      "dijit/_TemplatedMixin",
      "dijit/_WidgetsInTemplateMixin",
      "dojo/text!app/views/Login/Login.html",
      "dijit/Dialog",
      "dijit/form/Button",
      "dijit/form/TextBox"
  ], function(
      declare,
      _Widget,
      _TemplatedMixin, 
      _WidgetsInTemplateMixin,
      template,
      Dialog
  ){
      return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, Dialog], {
  
          templateString: template
      });
  });
  </code></pre>
  
  <p>Now, if you check the HTML the element id LoginButton should call in this case a "connection" function. Which should show (on an alert box) the username and password current input. </p>
  
  <p>Where do I put my function? kind of...</p>
  
  <pre><code>    connect : function(){
      alert("username :" + dom.byId("userId").value() 
  + "  Password: " + dom.byId("password").value());
      }
  </code></pre>
  
  <p><strong>EDIT: New code</strong></p>
  
  <pre><code>define([
      "dojo/_base/declare",
      "dijit/_Widget",
      "dojo/dom",
      "dijit/_TemplatedMixin",
      "dijit/_WidgetsInTemplateMixin",
      "dojo/text!app/views/Login/Login.html",
      "dijit/Dialog",
      "dijit/form/Button",
      "dijit/form/TextBox"
  ], function(
      declare,
      dom,
      _Widget,
      _TemplatedMixin, 
      _WidgetsInTemplateMixin,
      template,
      Dialog
  ){
      return declare("login", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, Dialog], {
  
          templateString: template,
  
          postCreate: function() {
             this.inherited(arguments);
             // make reference to widget from the node attachment
             this.submitButton = dijit.getEnclosingWidget(this.submitButtonNode);
             // override its onSubmit
             this.submitButton.onClick = function(){
               alert("username :" + dom.byId("userId").value() 
                   + "  Password: " + dom.byId("password").value());
             };
          },
          // and a sample on how to implement widget-in-template stateful get/setter pattern
          // e.g. if submitbutton label should change on some event, call as such:
          // dijit.byId('loginForm').set("submitLabel", "Sendin login, please wait");
          _setSubmitLabelAttr : function(value) {
              return this.submitButton.set("label", value);
          },
          _getSubmitLabelAttr : function() {
              return this.submitButton.get("label");
          },
      });
  });
  </code></pre>
  
  <p>My main.js: </p>
  
  <pre><code>define([ 'dojo/has', 'require', 'dojo/_base/sniff'], function (has, require) {
      var app = {};
  
      if (has('host-browser')) {
  
          require([ './views/Login', 'dojo/domReady!' ], function (Login) {
              app.login = new Login().placeAt(document.body);
  
              app.login.startup();
  
              // And now…
              app.login.show();
          });
      }
      else {
          console.log('Hello from the server!');
      }
  });
  </code></pre>