Login — Ошибка авторизации в отдельном окне

Версия MODX: Revolution

Сделал авторизацию в модальное окно, но после нажатия кнопки «Вход» оно закрывается, а если пароль неправильный ошибка остается в нем.

Подскажите как вывести ошибку в отдельную страницу, либо как сделать так чтобы Bootstrap modal не закрывался после нажатия кнопки))

Мой код LoginChunk

<div class="container">
  <div class="row">
    <div class="col-md-5 col-lg-6">
     <div class="panel-body">
          <p class="text-danger">[[+errors]]</p>
          <form class="form-horizontal" action="[[~[[*id]]]]" method="post">
            <div class="form-group">
              <label for="username" class="col-sm-3 control-label col-sm-3">Логин</label>
              <div class="col-sm-7">
                <input type="text" name="username" class="form-control" id="username">
              </div>      
            </div>
            <div class="form-group">
              <label for="password" class="col-sm-3 control-label">[[%login.password]]</label>
              <div class="col-sm-7">
                <input type="password" name="password" class="form-control" id="password">
              </div>      
            </div>              
            <input class="returnUrl" type="hidden" name="returnUrl" value="[[+request_uri]]" />
            <input class="loginLoginValue" type="hidden" name="service" value="login">
            <div class="col-sm-12">
            <input type="submit" value="[[+actionMsg]]" name="Login" id="Login" class="btn btn-primary pull-right">
                </div> 
          </form>
          <div class="clearfix"></div>
          <hr style="margin-top:10x;margin-bottom:5px;">
          <p><a href="[[~17]]" class="btn btn-link pull-right">Забыли пароль?</a></p>
          </div>
    </div>
  </div>
</div>

Теги:
login

Вадим Леонов
08.08.16 в 15:08

Комментарии (17)

Александр 08.08.2016 16:09 #

попробуй на ссылку кнопки дописать target="_parent" хотя мало вероятно что поможет
Комментарий был изменён 08.08.2016 в 16:11
1. Александр 08.08.2016 16:13 #
  ой, фигню написал тут же форма. На форму значит пробуй
  
  <form class="form-horizontal" action="[[~[[*id]]]]" method="post" target="_parent">
Павел Романов 08.08.2016 17:32 #

Используйте в окне iframe, в который подгружайте страницу с формой (Bootstrap это умеет).
Либо подцепите какой-нибудь лайтбокс типа colorbox или fancybox — там это совсем просто.
1. Вадим Леонов 09.08.2016 14:20 #
  
  FancyBox вроде более-менее подходит, но, страница не обновляется после входа, кнопка «Вход» остается/ только после обновления страницы меняется на «Пользователь».
  Обычное модальное окно Bootstrap хорошо подходит, можно ли вынести текст ошибки входа на отдельную страничку(вне окна)?
  1. Павел Романов 09.08.2016 15:06 #
    Создайте отдельную страницу с формой входа и сделайте так, чтобы она открывалась в iframe.
    Пропишите в чанке, который выводится после удачной авторизации:
    
    <script> $(document).ready(function(){ window.parent.location.reload(); }); </script>
    
    Этот скрипт перезагрузит родительское окно.
    Главное, больше этот чанк нигде не используйте — а то будет циклическая перезагрузка )
    1. Вадим Леонов 09.08.2016 15:36 #
      
      С этим скриптом ничего не вышло(
      
      <script> $(document).ready(function(){ window.parent.location.reload(); }); </script>
      
      Вот такого типа модальное окно, можно ли сделать чтобы после него выводилось в новую страницу строка удачной авторизации, кто-то писал что вывести можно
      
      <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Посмотреть демо </button>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Название модали</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button> <button type="button" class="btn btn-primary">Сохранить изменения</button> </div> </div> </div> </div>
      1. Павел Романов 09.08.2016 15:49 #
        
        Все нормально работает. jQuery подключен?
        Создаете пустую страницу с таким кодом:
        
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(document).ready(function(){ window.parent.location.reload(); }); </script>
        
        Вызываете Login в iframe:
        
        [[!Login? .... $loginResourceId=`ID_страницы_со_скриптом` ]]
        
        Вадим Леонов 09.08.2016 16:18 #
        
        Ура, заработало :) Можно ли еще задержку перед закрытием добавить ?)
        
        А вот как вариант
        
        &redirectToOnFailedAuth = `ID ресурса с ошибкой`
        
        С помощью этого параметра при ошибке входа должно перенаправлять из обычного модального окна Bootstrap на страницу
        
        Павел Романов 09.08.2016 16:26 #
        
        Можно, но зачем, если Все сообщения об ошибках тут же в форме и выдаются?
        
        Вадим Леонов 09.08.2016 16:30 #
        
        Да-да, так намного удобнее :) Подскажите пожалуйста как поставить задержку перед обновлением страницы в скрипте?
        
        Павел Романов 09.08.2016 16:40 #
        
        Вот на секунду (1000 миллисекунд):
        
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(document).ready(function(){ setTimeout(function(){ window.parent.location.reload(); }, 1000); }); </script>
        
        Вадим Леонов 10.08.2016 08:47 #
        
        Спасибо, получилось)
        
        Виталий 16.02.2017 13:31 #
        
        Вадим, Павел! Если не сложно, можно по-подробнее?
        Есть бутсрап модаль для аутентификации на сайте, вызываю ее из navbar
        
        <a title="Войти" href="#login-modal" style="line-height: 88px;" data-toggle="modal">Войти</a>
        внутри форма myLoginChunk. Код бустрап окна и вызова сниппета Login находится в templetes:
        ... <div id="login-modal" class="modal fade"> <div class="modal-dialog"> <div class="modal-body"> [[!Login? &tplType=`modChunk` &loginTpl=`myLoginChunk` &logoutTpl=`myLogoutChunk` &errTpl=`mylgnErrTpl` &loginResourceId=`12` - это id ресурса с java скриптом, который был предложен здесь &redirectToPrior=`1` ]] </div> </div> </div> ...
        
        проблема в том, что после события по кнопке «войти» (без заполнения полей) модальное окно пропадает, с перезагрузкой главной страницы. При повторном открытии окна в нем появляется ошибка аутентификации.
        Не понял зачем нужен iframe и как его правильно применить в этом случае? Помогите плз.
        
        Вадим Леонов 16.02.2017 13:42 #
        
        Опция &redirectToPrior=`1` насколько я помню переводит как раз таки на главную страницу, и лучше использовать FancyBox для этих целей, bootstrap не подходит здесь
        
        Виталий 16.02.2017 14:14 #
        
        Спасибо, Вадим!
        &redirectToPrior=`1` по документации — «If true, will redirect to the referring page (HTTP_REFERER) on successful login.» А я описывал выше ситуацию с fail login. А вы у себя использовали Fancybox?
        
        Вадим Леонов 16.02.2017 14:24 #
        
        Точно, а модалка Bootstrap будет пропадать после совершенного действия (в данном случае событие «вход») с FancyBox Iframe все прекрасно работает. Почитайте тему, там есть что взять для себя
Виталий 16.02.2017 15:45 #

Попробую с фэнси. Спасибо, еще раз!

Для добавления комментариев вы должны авторизоваться или зарегистрироваться.