Projects

github.com/youra-h

Form Login

@see PHP class

@see JavaScript

PHP

use yh\mdc\ActiveForm;

<?php $form = ActiveForm::begin([
    'id' => 'loginform'
]); ?>
 
<?= $form->field($model, 'username')->textInput([
    'tabIndex' => 1,
    'autocomplete' => 'username',
    'required' => true,
    'property' => [
        'autoFocus' => true,
        'label' => Yii::t('backend/login', 'Введите логин'),
        'labelTemplate' => TextField::ALIGN_TOP,
        'labelSize' => Vars::LARGE,
        'textSize' => Vars::LARGE,
        'helper' => Yii::t('backend/login', 'email | логин'),
        'height' => Vars::LARGE
    ],
]) ?>
 
<?= $form->field($model, 'password')->passwordInput([
    'tabIndex' => 2,
    'autocomplete' => 'current-password',
    'required' => true,
    'property' => [
        'label' => Yii::t('backend/login', 'Введите пароль'),
        'labelTemplate' => TextField::ALIGN_TOP,
        'labelSize' => Vars::LARGE,
        'textSize' => Vars::LARGE,
        'icons' => [
            ['icon' => 'visibility', 'role' => 'button', 'toggle' => 'visibility_off']
        ],
        'helper' => '',
        'height' => Vars::LARGE
    ]
]) ?>
 
<?= $form->field($model, 'rememberMe')->checkbox([
    'tabIndex' => 3,
    'property' => [
        'label' => Yii::t('backend/login', 'Запомнить меня'),
        'value' => true
    ],
]) ?>
 
<?= Button::one(
        Yii::t('backend/login', 'Войти'),
        ['spinner' => Button::SP_AUTO],
        ['tabIndex' => 4]
    )
    ->setOwner($form)
    ->gray()
    ->submit() ?>
 
<?php ActiveForm::end(); ?>

The script will be added automatically

<script>
    app.controls.add('loginform-username','textField',[],'loginform');
    app.controls.add('loginform-password-visibility','iconButton',[]);
    app.controls.add('loginform-password','textField',[],'loginform');
    app.controls.add('loginform-rememberme','checkbox',[],'loginform');
    app.controls.add('loginform-submit','button',[],'loginform');
    app.controls.addObject(app.utils.FormProcessing('loginform',{"control":"submit","unblock":false}));
</script>

Add script for form

// In case of a successful answer
app.controls.item('loginform').onSuccess((data) => {
    location.href = data.data.url;
});
// Password
let password = app.controls.item("loginform-password");
password.minLength = 5;
password.trailingIcon.click(function () {
    if (this.parent.type === "text") {
        this.parent.type = "password";
    } else {
        this.parent.type = "text";
    }
    this.parent.focus();
}, password.trailingIcon);

We get

And server response

class Controller
{
    public static function encode($data, $type = 'success')
    {
        $result = array(
            'data' => $data,        
            'status' => $type,
        );
 
        return Json::encode($result);
    }
 
    public function actionLogin()
    {
        // ...`
        //Validate ajax Login form
        if (Yii::$app->request->isAjax) {
            if (validate($model)) {                
                return self::encode(['url' => Yii::$app->getUser()->getReturnUrl()]);
            } else {
                // return self::modelError($model);
            }
        }
        // ...
    }
}