Kanji login sample

by tnhu

HTML

<script src="https://dl.dropboxusercontent.com/u/7677927/kanji/lib/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/7677927/kanji/lib/jsface.js"></script>
<script src="https://dl.dropboxusercontent.com/u/7677927/kanji/lib/jsface.ready.js"></script>
<script src="https://dl.dropboxusercontent.com/u/7677927/kanji/kanji.js"></script>
<form data-com="LoginForm" data-cfg="{ 'debug': true }">
  <input name="username"></input>
  <input type="password" name="password"></input>
  <input type="submit" value="Login"></input>
  
  <p class="prompt"></p>
</form>

JavaScript

Class(Kanji, {
  id   : "LoginForm",

  actions: {
    '[name=username]': 'keydown:checkUsername|keyup:checkUsername',
    '[name=password]': 'keydown:checkPassword',
    '[type=submit]':   'login'
  },

  init: function(form, config) {
    this.$prompt = form.find('.prompt');
    this.$prompt.text('initialization');
  },

  checkUsername: function(event, input) {
    this.$prompt.text('checking username');
  },

  checkPassword: function(event, input) {
    this.$prompt.text('checking password');
  },

  login: function(event, input) {
    this.$prompt.text('about to login');
    return false;
  }
});