Заметки WEB-разработчика

Полезные материалы для web-разработки

Создание формы авторизации в extjs 3 и yii

В этой статье я расскажу, как создается  форма авторизации на javascript фреймворке extjs 3 и php фреймворке yii 1.x.  Хотя от yii нам  понадобится только небольшой экшен авторизации . Что использовать в качестве бэкенда маловажно.

Создание формы авторизации в extjs 3 и yii

Html - документ

Создаем html документ, в котором подключаем extjs 3 фреймворк и файл, в котором и будет наш код login.js

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="/css/extjs/css/ext-all.css" />
	<script src="/js/extjs/adapter/ext/ext-base.js"></script>
	<script src="/js/extjs/ext-all.js"></script>
	<title>Авторизация</title>
	<script src="/js/extjs/app/login.js"></script>
</head>
<body>
</body>
</html>

Файл login.js

Состав файла довольно очевиден, читайте комментарии

// когда dom дерево готово
Ext.onReady(function(){
	// активируем подсказки
    Ext.QuickTips.init();
	
	// создаем форму
    var login = new Ext.FormPanel({
        labelWidth:80,
		// action формы ссылается на контроллер
        url:'/extjs',
        frame:true,
        title:'Авторизация',
        defaultType:'textfield',
        monitorValid:true,
		// поля формы
        items:[{
            fieldLabel:'Username',
            name:'email',
			// позволить быть пустым
            allowBlank:false
        },{
            fieldLabel:'Password',
            name:'password',
            inputType:'password',
			// позволить быть пустым
            allowBlank:false
        }],

        buttons:[{
            text:'Login',
            formBind: true,
            handler:function(){
                login.getForm().submit({
                    method:'POST',
                    waitTitle:'Соединение',
                    waitMsg:'Отсылаем данные...',
					// если в ответ приходит success
                    success:function(){
                        Ext.Msg.alert('Внимание!', 'Успешная авторизация.', function(btn, text){
                            if (btn == 'ok'){
                                var redirect = '/test.asp';
                                window.location = redirect;
                            }
                        });
                    },
					// если в ответ приходит сообщение о неудаче
                    failure:function(form, action){
                        if(action.failureType == 'server'){
                            var obj = Ext.util.JSON.decode(action.response.responseText);
                            Ext.Msg.alert('Внимание!', obj.errors.reason);
                        }else{
                            Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
                        }
                        login.getForm().reset();
                    }
                });
            }
        }]
    });

	// создаем окно, в котором будет форма
    var win = new Ext.Window({
        layout:'fit',
        width:300,
        height:150,
        closable: false,
        resizable: false,
        plain: true,
        border: false,
        items: [login]
    });
    win.show();
});

Контроллер extjs с action index

Типичный экшен авторизации в yii

//Сюда будет приходить запрос от формы авторизации
public function actionIndex()
{
   if($_POST){
      $identity = new UserIdentity($_POST['email'], $_POST['password']);
      if($identity->authenticate()) {
         Yii::app()->user->login($identity);
         $result["success"] = true;
      }else{
         $result["success"] = false;
         $result["errors"]["reason"] = 'Логин или пароль не верен.';
      }
      echo json_encode($result);
      die;
   }

   $this->render('index');

}

Комментарии

Комментарии через Вконтакте