10 Replies Latest reply on Jul 29, 2014 7:49 PM by zeaochoa

    Pop-up Login for Jive

    zeaochoa

      Hi,

       

      I really need help, first of all i am not a developer to easily create this.

      I already came across buck wilsons - lightbox_me i have created an html that pops but i cant really put in the login of jive i have no idea.

       

      I am an absolute beginner so if someone can walk me through that will be a big help.

       

      I just need a popup login where users must login first before they can access the community.

       

      Thank You

       

      This is actually what i would like to happen, automatically pop this up when ur not logged in.

       

      login.JPG

        • Re: Pop-up Login for Jive
          whoiskevin

          This is difficult to answer.  A Jive community can be configured to either allow anonymous users or not.  In the case of not allowing anonymous users they are presenting with a login.  Once you allow anonymous users then the question is how much can they access without authenticating.   In that scenario (just like community.jivesoftware.com) the login is already a popup. 

           

          Currently there is not a functionality to render the home page and then have a popup for a login.  It would require an anonymous home page and anonymous access to the site or at least a part of the site.

            • Re: Pop-up Login for Jive
              zeaochoa

              Hi Kevin Brown,

               

              Thanks! will look into it, currently thats what they want to happen they want people to register to the community before they view the content.

              but if there is another way this can be done i am always open for suggestions.

               

              Thank You

                • Re: Pop-up Login for Jive
                  whoiskevin

                  In that case setting the community to not allow anonymous will accomplish the requirement.  If this is an on-premise installation you can set the system property  jive.auth.disallowGuest  =  true

                  Otherwise contact you system administrator to have it set up.

                  1 person found this helpful
                    • Re: Pop-up Login for Jive
                      zeaochoa

                      Thanks Kevin, sorry i am not familiar where to change that can you give me guidance to where to find this.

                      • Re: Pop-up Login for Jive
                        zeaochoa

                        Hi Kevin,

                         

                        Ive made it false but the problem here is the whole page is putting me in the login page, now i get it i can put it in jive.auth.disallowGuest  =  true then put a popup login currently our community is not popping up the log in. is that an app or widget to add?

                         

                        Thanks for helping me out.

                         

                        Thanks

                          • Re: Pop-up Login for Jive
                            mcollinge

                            Personally, I'd code this up in a piece of JavaScript that always runs when the page loads.. we have ours in a plugin (for ease of deployment) but it's a really basic plugin with a few JavaScript libraries that we'll always want loaded across every page on the site. Something like this..

                             

                            $j(document).ready(function() {

                                // DETECT USER NOT LOGGED IN.. POP UP THE LOGIN PROMPT

                            });

                             

                            The current user is kept in the _jive_current_user variable.

                            1 person found this helpful
                              • Re: Pop-up Login for Jive
                                zeaochoa

                                Hi Matt,

                                 

                                Thank You, can you help me code it up and how to do it in jive im really a newbie to this, i have already made my code using lightbox_me but i dont really know how i will put it in jive community.

                                 

                                This is what i did for the standalone html file now i dont know how to integrate the login into jive.

                                 

                                <html>

                                <head>

                                <title>

                                  Testing Login

                                </title>

                                <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>

                                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

                                <script src="http://buckwilson.me/lightboxme/jquery.lightbox_me.js" type="text/javascript" charset="utf-8"></script>

                                 

                                 

                                 

                                 

                                  <style>

                                 

                                  #sign_up {

                                        -moz-border-radius: 6px;

                                        background: #eef2f7;

                                        -webkit-border-radius: 6px;

                                        border: 1px solid #536376;

                                        -webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;

                                        -moz-box-shadow:  rgba(0,0,0,.6) 0px 2px 12px;;

                                        padding: 14px 22px;

                                        width: 661px;

                                  height: 461px;

                                        position: relative;

                                        display: none;

                                    }

                                    #sign_up #sign_up_form {

                                        margin-top: 13px;

                                    }

                                    #sign_up label {

                                        display: block;

                                        margin-bottom: 10px;

                                        color: #536376;

                                        font-size: .9em;

                                    }

                                 

                                    #sign_up label input {

                                        display: block;

                                        width: 393px;

                                        height: 31px;

                                        background-position: -201px 0;

                                        padding: 2px 8px;

                                        font-size: 1.2em;

                                        line-height: 31px;

                                    }

                                   

                                    #see_id {

                                        width: 228px;

                                        height: 23px;

                                        background-position: -202px -133px;

                                    }

                                    #left_out {

                                        background-position: -202px -158px;

                                        width: 113px; height: 16px;

                                    }

                                    #sign_up_form {

                                        position: relative;

                                        background: url(divider.png) repeat-x bottom left;

                                        padding-bottom: 54px;

                                        margin-bottom: 12px;

                                    }

                                    #actions {

                                        float: left;

                                        position: absolute;

                                        right: 0;

                                        height: 31px;

                                        bottom: 20px;

                                    }

                                    a.form_button {

                                        float: left;

                                        width: 93px; height: 31px;

                                        margin-right: 15px;

                                    }

                                    #cancel { background-position: -198px -36px; }

                                    #log_in { background-position: -291px -36px; }

                                    #cancel:hover { background-position: -198px -67px; }

                                    #cancel:active { background-position: -198px -98px; }

                                    #log_in:hover { background-position: -291px -67px; }

                                    #log_in:active { background-position: -291px -98px; }

                                    #close_x {

                                        width: 24px; height: 23px;

                                        overflow: hidden; line-height: 1000px;

                                        display: block;

                                        position: absolute; top: 5px; right: 5px;

                                        background-position: -387px -102px;

                                    }

                                    #usage { background-position: -323px -172px; width: 67px; height: 22px;}

                                  </style>

                                </head>

                                <body>

                                 

                                 

                                    <div id="sign_up">

                                                <div id="welcome-custom">

                                 

                                  </div>

                                            </div>

                                </body>

                                <script type="text/javascript">

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

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

                                    }});

                                </script>

                                </html>

                                  • Re: Pop-up Login for Jive

                                    Eric,

                                     

                                    Have you tried using jQuery to invoke a click on Log In link when present.  In essence it would be, Matt Collinge's code but it would instead look for the Log In link in the header via it's ID ... if present, it would click on it, such as:

                                    $('#thecssselectorfortheloginlinkintheheaderbar').click();

                                    if the item is not in the header bar, then they are logged in and this code will not find the element and it will not fire the click.

                                     

                                    That is what I would recommend, but I would caution you.  This would get VERY annoying if a user opted to dismiss the popup and continue to navigate the site as it would continue to fire each page load.  With great power comes great responsibility =)

                                     

                                    Hope this helps.

                                • Re: Pop-up Login for Jive
                                  whoiskevin

                                  You cannot view the site if the disallowGuest is set to true.  That is the point I was trying to make.  A combination of permissions can be used while allowing anonymous but you are getting into some configuration of content and permissions that is beyond this question. Out of the box the login link will produce a popup.

                                   

                                  I think you need some help with your community setup and business requirements. Sorry I am no clear how I can help.