AjaxForm и Login

Здравствуйте, неоднократно задавался вопрос «Можно ли прикрутить AjaxFrom к сниппетам Login?»
Но ответа нигде не нашел. Есть ли решение данного вопроса?
Aleksandr
31 января 2015, 08:09
modx.pro
13
3 274
+1

Комментарии: 9

Николай Загумённов
31 января 2015, 21:01
0
Есть компонент Василия office
Там вроде через аякс авторизация
    Максим Кузнецов
    31 января 2015, 21:35
    5
    +3
    Помогу с решением.

    Вызываем сниппет Login:
    [[!Login? &loginTpl=`fastLoginTpl` &errTpl=`fastLoginError`]]

    Чанк формы для авторизации fastLoginTpl:
    <div style="display: none;" id="authErrors">[[+errors]]</div>
    <form class="loginForm" id="iWannaLogin" action="[[~[[*id]]]]" method="post">
    	<div class="login">
    		<input id="loginForm" name="username" class="roundInput" type="text" placeholder="Логин" title="Ваш логин">
    	</div>
    	<div class="password">
    		<input id="passwordForm" name="password" class="roundInput" type="password" placeholder="Пароль" title="Ваш пароль">
    	</div>
    	
    	<input class="returnUrl" type="hidden" name="returnUrl" value="[[+request_uri]]" />
    	<input class="loginLoginValue" type="hidden" name="service" value="login" />
    	
    	<div class="submit">
    		<a rel="nofollow" href="[[~17]]">Я - тупой, забыл пароль..</a>
    		<input id="ajaxLoginButton" type="submit" name="Login" value="Войти" />
    	</div>
    </form>

    Чанк для вывода ошибки fastLoginError:
    [[+msg]]

    Скрипт js, обрабатывающий событие отправки формы (нужен подключенный jquery):
    <script type="text/javascript">
    	$(document).ready(function(){
    		$("#iWannaLogin").bind("submit", function() {
    
    			$("#authErrors").text("");
    		
    			//здесь можно допилить подсветку полей с ошибкой
    			if ($("#loginForm").val().length < 1 && $("#passwordForm").val().length < 1) {
    				$.jGrowl("Введите логин и пароль", {group: "m-Error"});
    				return false;
    			}
    			if ($("#loginForm").val().length < 1) {
    				$.jGrowl("Введите логин", {group: "m-Error"});
    				return false;
    			}
    			if ($("#passwordForm").val().length < 1) {
    				$.jGrowl("Введите пароль", {group: "m-Error"});
    				return false;
    			}
    
    			$.ajax({
    				type: "POST",
    				cache: false,
    					url: "[[~[[*id]]]]",
    				data: $(this).serializeArray(),
    				beforeSend: function(){
    					$("#ajaxAuth .closeBlock").css("display", "none");
    					$("#ajaxAuth .ajaxLoad").css("display", "block");
    					
    					$("#ajaxLoginButton").prop("disabled", true);
    				},
    
    				success: function(data) {
    					$("#ajaxAuth .closeBlock").css("display", "block");
    					$("#ajaxAuth .ajaxLoad").css("display", "none");
    			
    					var errMessage = $(data).find("#authErrors").text();
    				
    					if(errMessage == ""){
    						window.location = "адрес для переадресации при успешной авторизации";
    					}
    					else{
    						$("#authErrors").text(errMessage);
    						$.jGrowl($("#authErrors").text(), {group: "m-Error"});
    					}
    				},
    				
    				complete: function(){
    					$("#ajaxLoginButton").prop("disabled", false);
    				}
    			});
    			return false;
    	
    		});
    	});
    </script>

    — я еще подключил плагин jgrowl для отправления алертов. В его же вызове group: «m-Error» — класс для всплывающего бокса (красный, с ошибкой).
    Если jgrowl не нужен — то вместо него вставляем в поле для ошибок желаемый ответ. Пример:
    $("#authErrors").text("текст ошибки").css("display", "block");

    #ajaxAuth .ajaxLoad — в моем примере форма с индикатором загрузки, которая появляется при обработке аякс-запроса.
      Aleksandr
      24 февраля 2015, 23:45
      0
      Спасибо большое!
        Виталий
        06 сентября 2016, 18:25
        0
        Спасибо. Работает, но не совсем, как хотелось. при регистрации происходит редирект на страницу, а можно, чтобы просто блок перегрузился и все. Понятно что можно заменить window.location на .html()/ Только как туда передать чанк?
          Денис
          24 мая 2017, 23:14
          0
          Не нашли вариант авторизации без перезагрузки страницы?
            Alex DOM
            12 июля 2017, 15:11
            1
            0
            Для вообще ленивых :), авторизация Login по ajax:
            Вызов:
            [[!Login? &loginTpl=`lgnLoginTpl` &logoutTpl=`lgnLogoutTpl` &errTpl=`lgnErrTpl` &loginResourceId=`52` &logoutResourceId=`[[*id]]`]]
            
            Форма:
            <div class="loginForm">
                <div class="loginLogin">
                    <div class="loginMessage">[[!+errors]]</div>
                    <form class="loginLoginForm auth" action="[[~[[*id]]]]" method="post">
                        <fieldset class="loginLoginFieldset">
                            <label class="loginUsernameLabel" for="login">[[%login.username]]</label>
                            <input class="loginUsername put-focus" type="text" name="username" id="login">
                            <span class="error error-login"></span>
                            
                            <label class="loginPasswordLabel" for="pass">[[%login.password]]</label>
                            <input class="loginPassword" type="password" name="password" id="pass">
                            <span class="error error-password"></span>
                                
                            <input class="loginRememberme" type="checkbox" name="rememberme" id="checkbox-1" checked>
                            <label class="loginRemembermeLabel new-check" for="checkbox-1">Запомнить меня</label>
                            
                            <input class="loginLoginValue" type="hidden" name="service" value="login">
                            <input type="submit" name="Login" value="[[+actionMsg]]">
                             
                            <input class="returnUrl" type="hidden" name="returnUrl" value="[[+request_uri]]">
                        </fieldset>
                        <div class="text-center">
                            <a class="forgot-login" href="[[~45]]">Забыли логин или пароль?</a>
                        </div>
                    </form>
                </div>
            </div>
            
            Скрипт:
            <script>
                    $(document).ready(function(){
                        $(".auth").bind("submit", function() {
                            $("span.error, .loginMessage").text("");
                            $("input.error, textarea.error").removeClass('error');
                            
                            if ($(".loginUsername").val().length < 1 && $(".loginPassword").val().length < 1) {
                                $(".error-login").text("Для входа введите Ваш логин");
                                $(".error-password").text("Для входа введите Ваш пароль");
                                $('.loginUsername, .loginPassword').addClass('error');
                                return false;
                            }
                            
                            if ($(".loginUsername").val().length < 1) {
                                $(".error-login").text("Для входа введите Ваш логин");
                                $('.loginUsername').addClass('error');
                                return false;
                            }
                            
                            if ($(".loginPassword").val().length < 1) {
                                $(".error-password").text("Для входа введите Ваш пароль");
                                $('.loginPassword').addClass('error');
                                return false;
                            }
                            
                            $.ajax({
                                    type    : "POST",
                                    cache   : false,
                                    url     : "[[~[[*id]]]]",
                                    data    : $(this).serializeArray(),
                                    success: function(data) {
                                        var errMessage = $(data).find(".loginMessage").text();
                                        if(errMessage == ""){
                                            window.location = "[[~[[*id]]]]";
                                        }else{
                                            $(".error-login").text('Неправильный логин или пароль');
                                            $('.loginUsername, .loginPassword').addClass('error');
                                        }
                                    }
                            });
                    
                            return false;
                    	});
                    });
                </script>
              Павел
              25 сентября 2019, 23:21
              0
              Скрипт можно вынести в отдельный файл. Если не указывать параметр url в $.ajax, функция автоматически отправит запрос на текущую страницу
            Alex DOM
            15 июня 2017, 22:38
            0
            У меня работает такой вариант:
            window.location = "[[~[[*id]]]]";
            Можно также переназначить на любой документ:
            window.location = "[[~85]]";
          Greza
          14 января 2020, 17:30
          0
          AjaxForm + Register
          modx.pro/help/19551
            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
            9