Quick Login Panel

* This topic is for testing, bugs may be present and if found should be reported to THIS topic *

Hello everyone,

Here you can test a quick log in panel for your forum. The panel displays by clicking the log in navigation button. It will drop down smoothly depending on the animation time. You can preview this by clicking the log in button on the forum navigation here.


This was mainly developed for PhpBB3, but it works on the other three versions as well, at the cost of some style.

To install and test this feature :
Administration Panel > Modules > Javascript codes management > Create a new script

Title : Quick Login Panel
Placement : In all the pages

Code:

$(function() {
    if (document.getElementById('logout')) { return; }
    
    var time = 750; // animation duration

    var style =
    'position:fixed;'+
    'background:#F7F7F7;'+
    'border:1px solid #DDD;'+
    'display:inline-block;'+
    'padding:10px;'+
    'z-index:99999;';

    var login =
    '<div id="quickLoginPanel" style="'+style+'">'+
        '<fieldset class="fields1 left fld_connexion">'+
            '<form name="form_login" method="post" action="/login">'+
                '<dl>'+
                    '<dt>'+
                        '<label for="username">'+
                            'Username:'+
                        '</label>'+
                    '</dt>'+
                    '<dd>'+
                        '<input id="username" class="inputbox autowidth" type="text" value="" maxlength="40" size="25" name="username" tabindex="1">'+
                    '</dd>'+
                '</dl>'+
                '<dl>'+
                    '<dt>'+
                        '<label for="password">'+
                            'Password:'+
                        '</label>'+
                    '</dt>'+
                    '<dd>'+
                        '<input id="password" class="inputbox autowidth" type="password" maxlength="25" size="25" name="password" tabindex="2">'+
                    '</dd>'+
                    '<dd>'+
                        '<a href="/profile?mode=sendpassword">'+
                            'I forgot my password'+
                        '</a>'+
                    '</dd>'+
                '</dl>'+
                '<dl>'+
                    '<dd>'+
                        '<label for="autologin">'+
                            '<input id="autologin" class="radio" type="checkbox" tabindex="4" name="autologin">'+
                            'Log in automatically'+
                        '</label>'+
                    '</dd>'+
                '</dl>'+
                '<dl>'+
                    '<dt>'+
                        '&nbsp;'+
                    '</dt>'+
                    '<dd>'+
                        '<input type="hidden" value="" name="redirect">'+
                        '<input type="hidden" value="" name="query">'+
                        '<input class="button1" type="submit" value="Log in" tabindex="6" name="login">'+
                    '</dd>'+
                '</dl>'+
                '<a href="" id="quickLoginClose">Close</a>'+
            '<form>'+
        '</fieldset>'+
    '</div>';
    
    $('a.mainmenu[href="/login"]').click(function() {
        if (!document.getElementById('quickLoginPanel')) {
            $('body').append(login);
            $('#quickLoginPanel').offset($(this).offset()).css('top','-25%').animate({top:'40px'}, time);
            
            $('#quickLoginClose').click(function() {
                $('#quickLoginPanel').animate({top:'-25%'}, time, function() {  
                    $('#quickLoginPanel').remove();        
                });
                return false;
            });
        }
        return false;
    });
});

Some things you should know !

Animation
To modify the animation duration edit the time variable. It is currently set to 0.750 seconds.

Style
You can edit the base panel style by editing the style variable, or by using the #quickLoginPanel ID to style it by the CSS stylesheet.

HTML
Lastly you can change the HTML to you liking, and add in classes for you to style the panel more.

If you have any comments or encounter a bug remember to leave a reply.

Thanks and happy testing !

Hi again, I've written up a variant for the logout. It is the same as the Quick Login only it is for logging out. I've got it working on phpbb3, I have not tested the other versions for the quick logout, yet, but I believe it should work for all.


Script :
Follow the same steps above for the login panel to install the logout panel.

Code:

$(function() {
    if (!document.getElementById('logout')) { return; }
    
    var time = 750; // animation duration

    var style =
    'position:fixed;'+
    'background:#F7F7F7;'+
    'border:1px solid #DDD;'+
    'display:inline-block;'+
    'padding:10px;'+
    'z-index:99999;'+
    'box-shadow:2px 2px 6px rgba(0,0,0,0.3)';

    var logout =
    '<div id="quickLogoutPanel" style="'+style+'">'+
       '<form method="post" action="/login?logout=true">'+
       '<p>'+
          'Are you sure you want to log out ?'+
       '</p>'+
       '<fieldset class="submit-buttons">'+
          '<div id="tid" style="display:none;"></div>'+
          '<div id="key" style="display:none;"></div>'+
          '<input class="button2" type="submit" value="Yes" name="confirm">'+
          '<input class="button2" type="submit" value="No" name="cancel">'+
       '</fieldset>'+
       '<a href="" id="quickLogoutClose">Close</a>'+
       '</form>'+
    '</div>';
    
    $('#logout').click(function() {
        if (!document.getElementById('quickLogoutPanel')) {
            $('body').append(logout);
            $('#tid').load('/login?logout=1 input[name="tid"]');
            $('#key').load('/login?logout=1 input[name="key"]');
            $('#quickLogoutPanel').offset($(this).offset()).css('top','-25%').animate({top:'40px'}, time);
            
            $('#quickLogoutClose').click(function() {
                $('#quickLogoutPanel').animate({top:'-25%'}, time, function() {  
                    $('#quickLogoutPanel').remove();        
                });
                return false;
            });
        }
        return false;
    });
});

If you encounter any bugs or have a comment, you can always leave them below. When I get time again I will see to putting both together into one code, maybe.

Thanks and have fun.

Hi again !

This should be the final update for the login / logout panels. I've gotten around to putting both together and adding some easy customization.

At the top of the script are some options to customize the panel :

time : changes the duration of the dropdown animation
background : change the color of the panel (you can use hex, names, ect..)
border : change the color of the panel border (you can use hex, names, ect..)
shadow : toggle the box shadow. 1 is on, and any other number will remove the shadow

Apply to all pages in javascript codes management :

Code:

$(function() {
   
    var panel = {
      time : 750, // animation duration
      background : '#F7F7F7', // background color
      border : '#DDDDDD', // border color
      shadow : 1 // panel shadow [ 1 = on || 0 = off ]
    };
   
    var t0 = 'style="margin:0px 2px;"';
    var t1 = panel["shadow"];
    var t2 = panel["time"];
   
    if (t1 == 1) { var t3 = 'box-shadow:2px 2px 6px rgba(0,0,0,0.3);' }
    else { var t3 = 'box-shadow:none;' }

    var style = 'position:fixed;background:'+panel["background"]+';border:1px solid '+panel["border"]+';display:inline-block;padding:10px;z-index:99999;'+t3;
    var login = '<div id="quickLoginPanel" style="'+style+'"><fieldset class="fields1 left fld_connexion"><form name="form_login" method="post" action="/login"><dl><dt><label for="username">Username:</label></dt><dd><input id="username" class="inputbox autowidth" type="text" value="" maxlength="40" size="25" name="username" tabindex="1"></dd></dl><dl><dt><label for="password">Password:</label></dt><dd><input id="password" class="inputbox autowidth" type="password" maxlength="25" size="25" name="password" tabindex="2"></dd><dd><a href="/profile?mode=sendpassword">I forgot my password</a></dd></dl><dl><dd><label for="autologin"><input id="autologin" class="radio" type="checkbox" tabindex="4" name="autologin">Log in automatically</label></dd></dl><dl><dt>&nbsp;</dt><dd><input type="hidden" value="" name="redirect"><input type="hidden" value="" name="query"><input class="button1" type="submit" value="Log in" tabindex="6" name="login"></dd></dl><a href="" id="quickLoginClose">Close</a><form></fieldset></div>';
    var logout = '<div id="quickLogoutPanel" style="'+style+'"><form method="post" action="/login?logout=true"><p>Are you sure you want to log out ?</p><fieldset class="submit-buttons"><div id="tid" style="display:none;"></div><div id="key" style="display:none;"></div><input class="button2" type="submit" value="Yes" name="confirm" '+t0+'><input class="button2" type="submit" value="No" name="cancel" id="quickLogoutClose" '+t0+'></fieldset></form></div>';
   
    if (!document.getElementById('logout')) {
        $('a.mainmenu[href="/login"]').click(function() {
            if (!document.getElementById('quickLoginPanel')) {
                $('body').append(login);
                $('#quickLoginPanel').offset($(this).offset()).css('top','-25%').animate({top:'40px'}, t2);
               
                $('#quickLoginClose').click(function() {
                    $('#quickLoginPanel').animate({top:'-25%'}, t2, function() { 
                        $('#quickLoginPanel').remove();       
                    });
                    return false;
                });
            }
            return false;
        });
    }

    else {
      $('#logout').click(function() {
          if (!document.getElementById('quickLogoutPanel')) {
              $('body').append(logout);
              $('#tid').load('/login?logout=1 input[name="tid"]');
              $('#key').load('/login?logout=1 input[name="key"]');
              $('#quickLogoutPanel').offset($(this).offset()).css('top','-25%').animate({top:'40px'}, t2);
           
              $('#quickLogoutClose').click(function() {
                  $('#quickLogoutPanel').animate({top:'-25%'}, t2, function() { 
                      $('#quickLogoutPanel').remove();       
                  });
                  return false;
              });
          }
          return false;
      });
    }
});

You can also copy from here : http://www.mediafire.com/view/at687oa2zm868ap/Quick_Login_&_Logout.txt

I have touched up the logout panel too. Clicking 'no' will no longer redirect you, instead the panel will close. If you encounter any bug, do not hesitate.

Enjoy !

HI! so should I remove the earlier 2 codes ?

thanx, these made my life much easier! +1

You're welcome.

Yes, you should remove last two codes. Since they're combined now, having the other codes may cause bugs.

Hi Again! Is there any way to place this panel in middle of page instead of upper side? Sone members from mobile find it unconfortable in my forun
Thanx

The horizontal position is determined by your login/logout position. You can try this I suppose :

Code:

$(function() {
    
    var panel = {
       time : 750, // animation duration
       background : '#F7F7F7', // background color
       border : '#DDDDDD', // border color
       shadow : 1, // panel shadow [ 1 = on || 0 = off ]
       offsetX : '50'
    };
    
    var t0 = 'style="margin:0px 2px;"';
    var t1 = panel["shadow"];
    var t2 = panel["time"];
    
    if (t1 == 1) { var t3 = 'box-shadow:2px 2px 6px rgba(0,0,0,0.3);' }
    else { var t3 = 'box-shadow:none;' }

    var style = 'position:fixed;background:'+panel["background"]+';border:1px solid '+panel["border"]+';display:inline-block;padding:10px;z-index:99999;'+t3;
    var login = '<div id="quickLoginPanel" style="'+style+'"><fieldset class="fields1 left fld_connexion"><form name="form_login" method="post" action="/login"><dl><dt><label for="username">Username:</label></dt><dd><input id="username" class="inputbox autowidth" type="text" value="" maxlength="40" size="25" name="username" tabindex="1"></dd></dl><dl><dt><label for="password">Password:</label></dt><dd><input id="password" class="inputbox autowidth" type="password" maxlength="25" size="25" name="password" tabindex="2"></dd><dd><a href="/profile?mode=sendpassword">I forgot my password</a></dd></dl><dl><dd><label for="autologin"><input id="autologin" class="radio" type="checkbox" tabindex="4" name="autologin">Log in automatically</label></dd></dl><dl><dt>&nbsp;</dt><dd><input type="hidden" value="" name="redirect"><input type="hidden" value="" name="query"><input class="button1" type="submit" value="Log in" tabindex="6" name="login"></dd></dl><a href="" id="quickLoginClose">Close</a><form></fieldset></div>';
    var logout = '<div id="quickLogoutPanel" style="'+style+'"><form method="post" action="/login?logout=true"><p>Are you sure you want to log out ?</p><fieldset class="submit-buttons"><div id="tid" style="display:none;"></div><div id="key" style="display:none;"></div><input class="button2" type="submit" value="Yes" name="confirm" '+t0+'><input class="button2" type="submit" value="No" name="cancel" id="quickLogoutClose" '+t0+'></fieldset></form></div>';
    
    if (!document.getElementById('logout')) {
        $('a.mainmenu[href="/login"]').click(function() {
            if (!document.getElementById('quickLoginPanel')) {
                $('body').append(login);
                $('#quickLoginPanel').css('left',panel["offsetX"]+'%').css('top','-25%').animate({top:'40px'}, t2);
                
                $('#quickLoginClose').click(function() {
                    $('#quickLoginPanel').animate({top:'-25%'}, t2, function() {  
                        $('#quickLoginPanel').remove();        
                    });
                    return false;
                });
            }
            return false;
        });
    }

    else {
       $('#logout').click(function() {
           if (!document.getElementById('quickLogoutPanel')) {
               $('body').append(logout);
               $('#tid').load('/login?logout=1 input[name="tid"]');
               $('#key').load('/login?logout=1 input[name="key"]');
               $('#quickLogoutPanel').css('left',panel["offsetX"]+'%').css('top','-25%').animate({top:'40px'}, t2);
            
               $('#quickLogoutClose').click(function() {
                   $('#quickLogoutPanel').animate({top:'-25%'}, t2, function() {  
                       $('#quickLogoutPanel').remove();        
                   });
                   return false;
               });
           }
           return false;
       });
    }
});

You will instead set the left value yourself. This will be done in percent. The new option can be found in the panel settings at the top of the script.

offsetX : can be a number from 0 to 100, this determines its left position.

It was defaulty 50 so it should be in middle. But it didnt seem to work hmm :/

Did you remove the old script ? If you have, try changing the value of 50 to a lower or higher number.

Hi its me again
I recently realized that when i visit this and anothetmr forum of mine from mobile, im logged out..i have to relogin at each visit..and coincidentially these are the only forums with login popup enabled.. is it something related?
Can it be 'keep me logged in ' box doesnt work for this?

Are your fields saved when you tick 'log in automatically' ? I have not actually tested that since I have my browser clear my cache and cookies.

i think sometimes doesn't .. i have to fill in everytime :/

Hi.. so..with the new vertical nav bar im using..the popup comes off to the right a LOT.. i tried using your previous script to positiin it.. but i just cant move it to middle T.T any help is appreciated

You have used the script in this post and changed offset X to what you wanted ? It is at 50 so it should be about in the middle of the screen.

hi everything looks fine
but when i tried to use /login.forum?redirect=h1-page
it didnt work and still dont redirect like the toolbar login Script
also i like to make font more larger
thanks Ange

Modify the style of the popups here :

Code:

    var style =
    'position:fixed;'+
    'background:#F7F7F7;'+
    'border:1px solid #DDD;'+
    'display:inline-block;'+
    'padding:10px;'+
    'z-index:99999;';

I am not sure about the redirection.

i forget about that topic
this is the Script of the toolbar the redirect is Working with it also i like to add the log me on auto next time

Code:

$(window).load(function () {
        $('#fa_welcome').click(function () {
            $('#fa_menulist').fadeToggle();
        });
    });




          $(window).load(function () {
            document.getElementById("logout") || ($("#fa_toolbar").after('<div id="fa_menulist" style="display: none;"><form action="/login.forum?redirect=h1-page" method="post"><table style="width: 100%; text-align: center;"><tr><td style="width: 50%;">اسمك الحلو:</td><td style="width: 50%;"><input name="username" type="text" /></td></tr><tr><td style="width: 50%;">مفتاحك السرى:</td><td style="width: 50%;"><input name="password" type="password" /></td></tr></table><div style="text-align: center; padding: 5px;"><input type="submit" name="login" value="دخلنى ومتعنى" class="button2" /></div></form>'),
            $('#fa_right .rightHeaderLink:first').click(function (a) {
                a.preventDefault();
                document.getElementById("fa_menulist").style.left = $(this).offset().left - 500 + "px";
                document.getElementById("fa_menulist").style.top = $("#fa_toolbar").offset().top + 30 + "px";
                "rightHeaderLink" == this.className ? (this.className += " active", $(this).css({
                    color: "#FFF",
                    "background-color": "#333"
                })) : (this.className = "rightHeaderLink", $(this).css({
                    color: "",
                    "background-color": ""
                }));
                $("#fa_menulist").fadeToggle()
            }))
        });

so may be something missing from the other one that make redirect not working
the log out also not do true log out its take me to the conform page :/
thanks a lot for your all super coding

hi Ange i try to add this, for keep on the same page after login:

$('#quickLoginPanel').find('form')[0].redirect.value = window.location.href;

help with thiis please?

@Ch@lo Valdez,

In the script, find this :

Code:

'<input type="hidden" value="" name="redirect">'+

And replace it with this :

Code:

'<input type="hidden" value="'+window.location.pathname+'" name="redirect">'+

thanks Ange

Ch@lo Valdez wrote:thanks Ange

Anytime

I suggest adding a log in with facebook button (if the feature for fb login is enabled in the admin panel).