login cleanup and fixes #322

This commit is contained in:
Hannes Mannerheim 2015-12-03 16:06:02 +01:00
parent 71e9014bcd
commit 7534937fb7
5 changed files with 147 additions and 162 deletions

View File

@ -432,51 +432,55 @@ class QvitterAction extends ApiAction
print '<div id="site-notice">'.common_config('site', 'notice').'</div>';
}
?><div class="front-welcome-text <?php if ($registrationsclosed) { print 'registrations-closed'; } ?>">
</div>
<div id="user-container" style="display:none;">
<div id="login-content">
<form id="form_login" class="form_settings" action="<?php print common_local_url('qvitterlogin'); ?>" method="post">
<div id="username-container">
<input id="nickname" name="nickname" type="text" value="<?php print $logged_in_user_nickname ?>" tabindex="1" />
</div>
<table class="password-signin"><tbody><tr>
<td class="flex-table-primary">
<div class="placeholding-input">
<input id="password" name="password" type="password" tabindex="2" value="" />
</div>
</td>
<td class="flex-table-secondary">
<button class="submit" type="submit" id="submit-login" tabindex="4"></button>
</td>
</tr></tbody></table>
<div id="remember-forgot">
<input type="checkbox" id="rememberme" name="rememberme" value="yes" tabindex="3" checked="checked"> <span id="rememberme_label"></span> · <a id="forgot-password" href="<?php print $instanceurl ?>main/recoverpassword" ></a>
<input type="hidden" id="token" name="token" value="<?php print common_session_token(); ?>">
<?php
// welcome text, login and register container if logged out
if($logged_in_user === null) { ?>
<div class="front-welcome-text <?php if ($registrationsclosed) { print 'registrations-closed'; } ?>"></div>
<div id="login-register-container">
<div id="login-content">
<form id="form_login" class="form_settings" action="<?php print common_local_url('qvitterlogin'); ?>" method="post">
<div id="username-container">
<input id="nickname" name="nickname" type="text" value="<?php print $logged_in_user_nickname ?>" tabindex="1" />
</div>
<table class="password-signin"><tbody><tr>
<td class="flex-table-primary">
<div class="placeholding-input">
<input id="password" name="password" type="password" tabindex="2" value="" />
</div>
</td>
<td class="flex-table-secondary">
<button class="submit" type="submit" id="submit-login" tabindex="4"></button>
</td>
</tr></tbody></table>
<div id="remember-forgot">
<input type="checkbox" id="rememberme" name="rememberme" value="yes" tabindex="3" checked="checked"> <span id="rememberme_label"></span> · <a id="forgot-password" href="<?php print $instanceurl ?>main/recoverpassword" ></a>
<input type="hidden" id="token" name="token" value="<?php print common_session_token(); ?>">
<?php
if (array_key_exists('OpenID', StatusNet::getActivePlugins())) {
print '<a href="'.$instanceurl.'main/openid" id="openid-login" title="OpenID" donthijack>OpenID</a>';
}
if (array_key_exists('OpenID', StatusNet::getActivePlugins())) {
print '<a href="'.$instanceurl.'main/openid" id="openid-login" title="OpenID" donthijack>OpenID</a>';
}
?>
</div>
</form>
</div>
<?php
if($registrationsclosed === false && $client_ip_is_blocked === false) {
?><div class="front-signup">
<h2></h2>
<div class="signup-input-container"><input placeholder="" type="text" name="user[name]" autocomplete="off" class="text-input" id="signup-user-name"></div>
<div class="signup-input-container"><input placeholder="" type="text" name="user[email]" autocomplete="off" id="signup-user-email"></div>
<div class="signup-input-container"><input placeholder="" type="password" name="user[user_password]" class="text-input" id="signup-user-password"></div>
<button id="signup-btn-step1" class="signup-btn" type="submit"></button>
<div id="other-servers-link"></div>
<div id="qvitter-notice-logged-out"><?php print common_config('site', 'qvitternoticeloggedout'); ?></div>
</div><?php }
?>
</div>
</form>
</div>
<?php
if($registrationsclosed === false && $client_ip_is_blocked === false) {
?><div class="front-signup">
<h2></h2>
<div class="signup-input-container"><input placeholder="" type="text" name="user[name]" autocomplete="off" class="text-input" id="signup-user-name"></div>
<div class="signup-input-container"><input placeholder="" type="text" name="user[email]" autocomplete="off" id="signup-user-email"></div>
<div class="signup-input-container"><input placeholder="" type="password" name="user[user_password]" class="text-input" id="signup-user-password"></div>
<button id="signup-btn-step1" class="signup-btn" type="submit"></button>
</div>
<div id="other-servers-link"></div><?php }
?><div id="qvitter-notice-logged-out"><?php print common_config('site', 'qvitternoticeloggedout'); ?></div>
</div><?php
}
// box containing the logged in users queet count and compose form
if($logged_in_user) { ?>
// box containing the logged in users queet count and compose form
if($logged_in_user) { ?>
<div id="user-container" style="display:none;">
<div id="user-header" style="background-image:url('<?php print htmlspecialchars($logged_in_user_obj['cover_photo']) ?>')">
<div id="mini-edit-profile-button"></div>
<div class="profile-header-inner-overlay"></div>
@ -506,29 +510,29 @@ class QvitterAction extends ApiAction
</div>
</div>
</div>
</div><?php
}
</div>
<div id="main-menu" class="menu-container"><?php
?><div id="main-menu" class="menu-container"><?php
if($logged_in_user) {
?><a href="<?php print $instanceurl.$logged_in_user->nickname ?>/all" class="stream-selection friends-timeline"><i class="chev-right"></i></a>
<a href="<?php print $instanceurl.$logged_in_user->nickname ?>/notifications" class="stream-selection notifications"><span id="unseen-notifications"></span><i class="chev-right"></i></a>
<a href="<?php print $instanceurl.$logged_in_user->nickname ?>/replies" class="stream-selection mentions"><i class="chev-right"></i></a>
<a href="<?php print $instanceurl.$logged_in_user->nickname ?>" class="stream-selection my-timeline"><i class="chev-right"></i></a>
<a href="<?php print $instanceurl.$logged_in_user->nickname ?>/favorites" class="stream-selection favorites"><i class="chev-right"></i></a>
<a href="<?php print $instanceurl ?>main/public" class="stream-selection public-timeline"><i class="chev-right"></i></a>
<a href="<?php print $instanceurl ?>main/all" class="stream-selection public-and-external-timeline"><i class="chev-right"></i></a>
<?php
}
?>
</div>
<div class="menu-container" id="bookmark-container"></div>
<div class="menu-container" id="history-container"></div>
<div id="clear-history"></div>
<div id="qvitter-notice"><?php print common_config('site', 'qvitternotice'); ?></div>
</div><?php
} ?>
if($logged_in_user) {
?><a href="<?php print $instanceurl.$logged_in_user->nickname ?>/all" class="stream-selection friends-timeline"><i class="chev-right"></i></a>
<a href="<?php print $instanceurl.$logged_in_user->nickname ?>/notifications" class="stream-selection notifications"><span id="unseen-notifications"></span><i class="chev-right"></i></a>
<a href="<?php print $instanceurl.$logged_in_user->nickname ?>/replies" class="stream-selection mentions"><i class="chev-right"></i></a>
<a href="<?php print $instanceurl.$logged_in_user->nickname ?>" class="stream-selection my-timeline"><i class="chev-right"></i></a>
<a href="<?php print $instanceurl.$logged_in_user->nickname ?>/favorites" class="stream-selection favorites"><i class="chev-right"></i></a>
<a href="<?php print $instanceurl ?>main/public" class="stream-selection public-timeline"><i class="chev-right"></i></a>
<a href="<?php print $instanceurl ?>main/all" class="stream-selection public-and-external-timeline"><i class="chev-right"></i></a>
<?php
}
?>
</div>
<div class="menu-container" id="bookmark-container"></div>
<div class="menu-container" id="history-container"></div>
<div id="clear-history"></div>
<div id="qvitter-notice"><?php print common_config('site', 'qvitternotice'); ?></div>
</div>
<div id="feed">
<div id="feed">
<div id="feed-header">
<div id="feed-header-inner">
<h2></h2>

View File

@ -605,7 +605,6 @@ body.rtl .dropdown-menu li:not(.dropdown-caret) {
margin:10px 0 20px 0;
text-align: left;
text-shadow: 0 1px 2px #fff;
display:none;
background-color:rgba(255,255,255,0.8);
position:relative;
border-radius:3px;
@ -700,7 +699,6 @@ body.rtl .front-welcome-text {
color:#fff;
font-size:11px;
padding:10px;
display:none;
}
#qvitter-notice a {
color:#fff;
@ -735,6 +733,10 @@ body.rtl .front-welcome-text {
text-decoration:none;
}
#login-register-container {
width:290px;
float:left;
}
#login-content,
.front-signup {
font-family: Arial,sans-serif;
@ -767,13 +769,12 @@ body.rtl .front-welcome-text {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px 0px;
position:absolute;
opacity:0;
position:relative;
margin-top:1px;
z-index:2000;
}
.front-signup {
margin-top:123px;
margin-top:10px;
height: auto;
padding-bottom: 12px;
text-align:right;
@ -1165,9 +1166,7 @@ button#submit-login:hover {
}
#other-servers-link {
height:150px;
position: absolute;
bottom:-170px;
position: relative;
padding:10px;
text-shadow:1px 1px 3px rgba(0, 0, 0, 0.6);
color:rgba(255,255,255,0.8);
@ -1175,10 +1174,9 @@ button#submit-login:hover {
}
#qvitter-notice-logged-out {
position: absolute;
bottom:-240px;
height:150px;
position: relative;
width:290px;
margin-top:15px;
}
#page-container {
@ -1213,11 +1211,6 @@ body.rtl #footer-spinner-container {
float:left;
padding-top: 1px;
}
#user-header,
#user-body,
#user-footer {
opacity:0;
}
#user-header {
border:0 none;
border-radius: 6px 6px 0 0;
@ -1240,7 +1233,6 @@ body.rtl #footer-spinner-container {
line-height: 16px;
margin-bottom: 10px;
overflow:hidden;
opacity:0;
position: relative;
}
.menu-container a:first-child {
@ -5214,9 +5206,7 @@ body.rtl #feed-header-inner h2 {
border-top-color:#fff; }
.front-welcome-text {
opacity:0;
height:320px;
overflow:hidden;
display: none;
}
.front-welcome-text.registrations-closed {
height:35px;
@ -5226,15 +5216,11 @@ body.rtl #feed-header-inner h2 {
background-color:transparent;
}
#login-content,
.front-signup {
left: 50%;
margin-left: -150px;
z-index:1;
margin-top:10px;
}
.front-signup {
margin-top:130px;
#login-register-container {
left: -150px;
margin-left: 50%;
position: relative !important;
z-index: 1;
}
#feed,
@ -5721,7 +5707,12 @@ body.rtl #feed-header-inner h2 {
}
ul.queet-actions li {
margin-right: 30px;
margin-right: 0;
text-align: center;
width: 25%;
}
ul.queet-actions li .icon {
margin-left: 26px;
}
ul.queet-actions li .with-icn {
margin-left: 0;

View File

@ -113,14 +113,14 @@ function checkLogin(username,password,actionOnSuccess) {
},
dataType: 'json',
error: function() {
logoutWithoutReload(true);
shakeLoginBox();
},
success: function(data) {
if(typeof data.error == 'undefined' && data !== false) {
actionOnSuccess(data);
}
else {
logoutWithoutReload(true);
shakeLoginBox();
}
}
});

View File

@ -429,7 +429,7 @@ function cacheSyntaxHighlightingGroups() {
·
· User array cache
·
· Stored in localStorage with unique key like instance_url/nickname
· Stored in window.userArrayCache with unique key like instance_url/nickname
· with protocol (http:// or https://) trimmed off, e.g. "quitter.se/hannes2peer"
·
· · · · · · · · · */
@ -767,7 +767,6 @@ function searchForUpdatedNoticeData(obj) {
}
/* ·
·
· Removes a deleted stream item from the feed gracefully, if not already hidden
@ -817,6 +816,7 @@ function rememberStreamStateInLocalStorage() {
feed.find('.expanded-content').remove();
feed.find('.inline-reply-queetbox').remove();
feed.children('.stream-item').removeClass('not-seen');
feed.children('.stream-item').removeClass('selected-by-keyboard');
feed.find('.show-full-conversation').remove();
feed.find('.stream-item').removeClass('expanded').removeClass('next-expanded').removeClass('hidden').addClass('visible');
var feedHtml = feed.html();

View File

@ -441,10 +441,11 @@ $(window).scroll(function(e){
}
if ($(this).scrollTop() > (feedOrProfileCardOffsetTop-55) && $('#login-content').css('position') != 'fixed'){
$('#login-content, .front-signup').not('#popup-signup').css({'position': 'fixed', 'top': '55px'});
var loginAndSignUpBoxesHeight = $('#login-content').outerHeight() + $('.front-signup').not('#popup-signup').outerHeight();
$('#login-register-container').css({'position': 'fixed', 'top': '55px'});
}
else if ($(this).scrollTop() < (feedOrProfileCardOffsetTop-55) && $('#login-content').css('position') != 'absolute'){
$('#login-content, .front-signup').not('#popup-signup').css({'position': 'absolute', 'top': 'auto'});
$('#login-register-container').css({'position': 'relative', 'top': 'auto'});
}
});
@ -821,51 +822,43 @@ function proceedToSetLanguageAndLogin(data){
$('button.shorten').attr('data-tooltip',window.sL.tooltipShortenUrls);
$('.reload-stream').attr('data-tooltip',window.sL.tooltipReloadStream);
$('#clear-history').html(window.sL.clearHistory);
$('#user-screen-name, #user-avatar, #user-name').attr('data-tooltip', window.sL.viewMyProfilePage);
// show site body now
$('#user-container').css('display','block');
$('#feed').css('display','block');
// login or not
// logged in or not?
if(window.loggedIn) {
doLogin(getStreamFromUrl());
proceedLoggedIn();
}
else {
display_spinner();
setNewCurrentStream(getStreamFromUrl(),true,false,function(){
logoutWithoutReload(false);
remove_spinner();
});
proceedLoggedOut();
}
}
/* ·
·
· Login action
· Stuff we do on load specifically for logged out users
·
· · · · · · · · · · · · · */
$('#form_login').submit(function(e) {
if(typeof window.loginCheckSuccessful == 'undefined') {
e.preventDefault();
checkLogin($('input#nickname').val(),$('input#password').val(),function(data){
window.loginCheckSuccessful = true;
$('#form_login').submit();
});
}
});
function doLogin(streamObjectToSet) {
$('#submit-login').attr('disabled','disabled');
$('#submit-login').focus(); // prevents submit on enter to close alert-popup on wrong credentials
function proceedLoggedOut() {
display_spinner();
setNewCurrentStream(getStreamFromUrl(),true,false,function(){
$('input#nickname').focus();
$('#page-container').css('opacity','1');
});
}
// add user data to DOM, show search form, remeber user id, show the feed
$('#user-container').css('z-index','1000');
$('#top-compose').removeClass('hidden');
$('#qvitter-notice').show();
$('#user-screen-name, #user-avatar, #user-name').attr('data-tooltip', window.sL.viewMyProfilePage);
/* ·
·
· Stuff we do on load specifically for logged in users
·
· · · · · · · · · · · · · */
function proceedLoggedIn() {
display_spinner();
// get everyone we follow, block and our memberships and stor in global objects
getAllFollowsMembershipsAndBlocks(function(){
@ -886,16 +879,10 @@ function doLogin(streamObjectToSet) {
appendAllBookmarks(window.qvitterProfilePrefs.bookmarks);
// set stream
setNewCurrentStream(streamObjectToSet,true,false,function(){
setNewCurrentStream(getStreamFromUrl(),true,false,function(){
$('.language-dropdown').css('display','none');
$('#user-header').animate({opacity:'1'},800);
$('#user-body').animate({opacity:'1'},800);
$('#user-footer').animate({opacity:'1'},800);
$('.menu-container').animate({opacity:'1'},800);
$('#page-container').animate({opacity:'1'},200);
$('#search').fadeIn('slow');
$('#login-content').css('display','none');
$('.front-signup').css('display','none');
$('#settingslink .dropdown-toggle').fadeIn('slow');
$('#top-compose').fadeIn('slow');
$('input#nickname').blur();
@ -904,6 +891,23 @@ function doLogin(streamObjectToSet) {
}
/* ·
·
· Shake the login box, i.e. when indicating an error
·
· · · · · · · · · · · · · */
function shakeLoginBox() {
$('input#nickname').css('background-color','pink');
$('input#password').css('background-color','pink');
$('#login-content').effect('shake',{distance:5,times:2},function(){
$('input#nickname').animate({backgroundColor:'#fff'},1000);
$('input#password').animate({backgroundColor:'#fff'},1000);
});
}
/* ·
·
· In the login form, we want to check the remember-me-checkbox when its label is clicked
@ -921,6 +925,21 @@ $('#rememberme_label').click(function(){
$('#rememberme_label').disableSelection();
/* ·
·
· Submit login form
·
· · · · · · · · · · · · · */
$('#form_login').submit(function(e) {
if(typeof window.loginCheckSuccessful == 'undefined') {
e.preventDefault();
checkLogin($('input#nickname').val(),$('input#password').val(),function(data){
window.loginCheckSuccessful = true;
$('#form_login').submit();
});
}
});
/* ·
@ -965,35 +984,6 @@ $('#classic-link, #accessibility-toggle-link').click(function(){
});
/* ·
·
· Do a logout without reloading, i.e. on login errors
·
· · · · · · · · · · · · · */
function logoutWithoutReload(doShake) {
$('input#nickname').focus();
$('.front-signup').animate({opacity:'1'},200);
if(doShake) {
$('input#nickname').css('background-color','pink');
$('input#password').css('background-color','pink');
}
$('#login-content').animate({opacity:'1'},200, function(){
if(doShake) {
$('#login-content').effect('shake',{distance:5,times:2},function(){
$('input#nickname').animate({backgroundColor:'#fff'},1000);
$('input#password').animate({backgroundColor:'#fff'},1000);
});
}
$('.front-welcome-text').show();
});
$('#page-container').animate({opacity:'1'},200);
}
/* ·
·
· Handling the language dropdown selection