11 Replies Latest reply on Jul 21, 2014 2:29 AM by zeaochoa

    Pop Up Login Fix

    zeaochoa

      Hi All,

       

      I managed to get a pop up working, but still i have some issues to tackle.

       

      - The login page in the pop up dont know where and how to get the code from that

      - The Pop Up to stay as pop up unless the user logs in.

       

      Someone suggested that i just turn off the Guest part so that everyone must login to view the community but i guess thats a bad user experience so im not considering that.

       

      Thanks for the help!

        • Re: Pop Up Login Fix
          craig.reeves

          Not sure if there is a way to programmatically call the login page, but you could iframe the login page inside your popup, but you would then have to write something to detect a successful login. I guess that would be something like detecting the redirect from cs_login to the /welcome page?

            • Re: Pop Up Login Fix
              zeaochoa

              Thank Craig,

               

              Ive done the iframe idea but i have no idea how to detect or do a redirect, im really new at this so im not really sure what i am doing i just placed the script parts on the third party analytics for the pop up. and theres another problem the pop up must stop appearing after the user has logged in, im not really sure how these things work. sorry a complete noob.

                • Re: Re: Pop Up Login Fix
                  craig.reeves

                  Hi Eric,

                   

                  I've just digested your post properly now that I've had my morning coffee.. What is it that you are trying to achieve with the pop up? Are you trying to protect content or trying to increase your member count? I would suggest that if you are overlying it like a light box then that is both insecure and imo annoying for a user - in these situations I'd go with the general community consensus that you disable guest access. If on the other hand, you are simply displaying a login form somewhere on the pagein order to increase your participation, then thats a good idea and you could achieve that simply by inserting the HTML from the login page into your popup rather than loading it as an iFrame.

                   

                  Here is the code for the login form - I pulled it from /login.jspa and you should be able to copy and paste this and it would work without any redirection detection, because the form action determines how to handle the login request. In the event of a successful login your user would be directed to /welcome, and in the event of a failed login, should be directed back to /login.jspa with a nice error.

                   

                   

                  <div id="regular-auth-login-block" class="j-box j-enhanced jive-box jive-box-form jive-standard-formblock-container jive-login-reg-formblock clearfix jive-login-short-width">
                                  <div class="jive-box-body jive-standard-formblock clearfix">
                                      <div id="jive-login-formblock" class="jive-login-only-box">
                  
                                          <h1>Login</h1>
                  
                                          <form action="/cs_login" id="loginform" method="post" class="j-form" name="loginform01" autocomplete="off">
                  
                                              <div id="jive-login-username" class="clearfix">
                                                      <label for="username01" class="font-color-meta">Username</label>
                                                  <input type="text" name="username" size="30" maxlength="150" value="" id="username01">
                                              </div>
                  
                  
                                              <div id="jive-login-password" class="clearfix">
                                                  <label for="password01" class="font-color-meta">Password</label>
                                                  <input type="password" name="password" size="30" maxlength="150" value="" id="password01" autocomplete="off">
                                              </div>
                  
                                              <div id="jive-login-rememberme" class="clearfix">
                                                  <input type="checkbox" name="autoLogin" id="autoLoginCb" value="true">
                                                  <label for="autoLoginCb">Keep me logged in</label>
                                              </div>
                  
                                              <div id="jive-login-button" class="clearfix">
                                                  <input type="submit" name="login" id="login-submit" class="jive-form-button-submit j-btn-callout" value="Log in">
                                              </div>
                  
                                                  <div id="jive-login-forgotpwd" class="jive-login-forgotpwd">
                                                      <a href="/emailPasswordToken!input.jspa">I forgot my password</a>
                                                  </div>
                                                  <div id="jive-login-forgot-username" class="jive-login-forgot-username">
                                                      <a href="/forgot-username!input.jspa">I forgot my username</a>
                                                  </div>
                                          </form>
                                          
                                      </div>
                  
                                      <script type="text/javascript" language="JavaScript">
                                          $j('#username01').focus();
                                      </script>
                                  </div>
                              </div>
                  

                   

                   

                  Hope this helps!

                    • Re: Re: Pop Up Login Fix
                      zeaochoa

                      Thanks Craig!! this really helped!! now i just have to figure out how i can identify the users who are logged in so that this pop wont have to come out evertime i open the page

                        • Re: Re: Re: Pop Up Login Fix
                          craig.reeves

                          Glad to help. To work out if a user is logged in or not you can use the following variable window.parent._jive_current_user.ID, which gives you the user id if the user is logged in, or -1 if the user is not logged in.

                           

                          function testLogin() {
                              if (window.parent._jive_current_user.ID == "-1") {
                                    alert("Logged out");
                              } else {
                                    alert(window.parent._jive_current_user.ID);
                              }
                          
                          }
                          
                          
                          



                          I'm sure there are more elegant ways of doing it, but this seems to work.

                            • Re: Re: Pop Up Login Fix
                              zeaochoa

                              Hi Craig,

                               

                              Do i add this on my javascript?

                               

                              <script type="text/javascript">

                                  $("#sign_up").lightbox_me({centered: true, preventScroll: true, onLoad: function() {

                                      $("#sign_up").find("input:first").focus();

                                

                                  }});

                               

                              </script>

                               

                              Thanks for really helping i appreciate this so much.. been having trouble for almost a week already

                                • Re: Re: Re: Pop Up Login Fix
                                  craig.reeves

                                  Yeah so you could do something like this....

                                   

                                  <script type="text/javascript">
                                    if (window.parent._jive_current_user.ID == "-1") {
                                     $("#sign_up").lightbox_me({centered: true, preventScroll: true, onLoad: function() {
                                          $("#sign_up").find("input:first").focus();
                                    
                                     }});
                                      } else {
                                      alert("Welcome back!");
                                      } 
                                  </script>
                                  

                                   

                                  You might have to wrap that script in a $(function() { }) so that it loads when the DOM is ready.