login_controller.js

Pq.loginController = SC.ObjectController.create({
    userName: null,
    password: null
});

login_page.js

Pq.loginPage = SC.Page.design({
  mainPane: SC.MainPane.design({
    defaultResponder: 'Pq.Statechart',
    childViews: 'form'.w(),

    form: SC.View.design({
      layout: { width: 200, height: 160, centerX: 0, centerY: 0 },
      childViews: 'header userName password loginButton'.w(),

      header: SC.LabelView.design({
        layout: { width: 200, height: 24, top: 0, centerX: 0 },
        controlSize: SC.LARGE_CONTROL_SIZE,
        value: 'Авторизация',
        textAlign: SC.ALIGN_CENTER
      }),

      userName: SC.TextFieldView.design({
        layout: { width: 150, height: 30, top: 30, centerX: 0},
        hint: 'Логин',
        valueBinding: 'Pq.loginController.userName'
      }),

      password: SC.TextFieldView.design({
        layout: {  width: 150, height: 30, top: 80, centerX: 0 },
        hint: 'Пароль',
        isPassword: YES,
        valueBinding: 'Pq.loginController.password'
      }),

      loginButton: SC.ButtonView.design({
        layout: { width: 100, height: 30, top: 120, centerX: 0 },
        conrolSize: SC.HUGE_CONTROL_SIZE,
        title: 'Войти',
        action: 'authenticate'
      })
    })
  })
});

main.js

require('statechart');
Pq.main = function main() {
  Pq.Statechart.initStatechart();
};

function main() { Pq.main(); }

statechart.js

Pq.Statechart = SC.Statechart.create({
    rootState: SC.State.design({
	initialSubstate: 'loggedOut',

	loggedOut: SC.State.design({
	    enterState: function() {
		Pq.getPath('loginPage.mainPane').append();
	    },
	    exitState: function(){ 
		Pq.getPath('loginPage.mainPane').remove();
	    },
	    authenticate: function(){
		var userName = Pq.getPath('loginController.userName');
		var password = Pq.getPath('loginController.password');
		SC.Request.postUrl('/auth/', {login: userName, password: password}).notify(this, 'didCompleteAuthentication').json().send();
	    },
	    didCompleteAuthentication: function(response){
		if (SC.ok(response)) {
		    this.gotoState('loggedIn');
		} else {
		    SC.AlertPane.error({message:'Неверные реквизиты доступа!',description:'Возможно, вы допустили опечатку. Попробуйте снова.',caption:'Ошибка авторизации'});
		}
	    }
	}),
	
	loggedIn: SC.State.design({
	    enterState: function() { 
		Pq.getPath('mainPage.mainPane').append();
	    }
	})
    }