arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use new modal for login

Browse Source
This commit is contained in:
Tobias Reich 2015-01-29 22:57:42 +01:00
parent f9e604ed6f
commit 0d3593fe58
3 changed files with 50 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/scripts/build.coffee
View File

@ -178,25 +178,6 @@ build.modal = (title, text, button, marginTop, closeButton) ->
return html return html
build.signInModal = ->
html = """
<div class='message_overlay'>
<div class='message center'>
<h1><a class='icon-lock'></a> Sign In</h1>
<a class='close icon-remove-sign'></a>
<div class='sign_in'>
<input id='username' type='text' value='' placeholder='username' autocapitalize='off' autocorrect='off'>
<input id='password' type='password' value='' placeholder='password'>
</div>
<div id='version'>Version #{ lychee.version }<span> &#8211; <a target='_blank' href='#{ lychee.updateURL }'>Update available!</a><span></div>
<a onclick='lychee.login()' class='button active'>Sign in</a>
</div>
</div>
"""
return html
build.uploadModal = (title, files) -> build.uploadModal = (title, files) ->
html = """ html = """

43
src/scripts/lychee.js
View File

@ -117,10 +117,10 @@ lychee.api = function(params, callback) {
} }
lychee.login = function() { lychee.login = function(data) {
var user = $('input#username').val(), var user = data.username,
password = md5($('input#password').val()), password = md5(data.password),
params; params;
params = 'login&user=' + user + '&password=' + password; params = 'login&user=' + user + '&password=' + password;
@ -137,8 +137,7 @@ lychee.login = function() {
} else { } else {
// Show error and reactive button // Show error and reactive button
$('#password').val('').addClass('error').focus(); basicModal.error('password');
$('.message .button.active').removeClass('pressed');
} }
@ -148,16 +147,34 @@ lychee.login = function() {
lychee.loginDialog = function() { lychee.loginDialog = function() {
var local_username; var localUsername,
msg = '';
$('body').append(build.signInModal()); msg += "<p class='signIn'>";
$('#username').focus(); msg += "<input class='text' data-name='username' type='text' value='' placeholder='username' autocapitalize='off' autocorrect='off'>";
msg += "<input class='text' data-name='password' type='password' value='' placeholder='password'>";
msg += "</p>";
msg += "<p class='version'>Lychee " + lychee.version + "<span> &#8211; <a target='_blank' href='" + lychee.updateURL + "'>Update available!</a><span></p>";
basicModal.show({
body: msg,
buttons: {
action: {
title: 'Sign In',
fn: lychee.login
},
cancel: {
title: 'Cancel',
fn: basicModal.close
}
}
});
if (localStorage) { if (localStorage) {
local_username = localStorage.getItem('lychee_username'); localUsername = localStorage.getItem('lychee_username');
if (local_username!==null) { if (localUsername!==null) {
if (local_username.length>0) $('#username').val(local_username); if (localUsername.length>0) $('.basicModal input[data-name="username"]').val(localUsername);
$('#password').focus(); $('.basicModal input[data-name="password"]').focus();
} }
} }
@ -244,7 +261,7 @@ lychee.getUpdate = function() {
$.ajax({ $.ajax({
url: lychee.update_path, url: lychee.update_path,
success: function(data) { if (parseInt(data)>parseInt(lychee.version_code)) $('#version span').show(); } success: function(data) { if (parseInt(data)>parseInt(lychee.version_code)) $('.version span').show(); }
}); });
} }

22
src/styles/_message.scss
View File

@ -39,6 +39,10 @@
&:first-of-type { padding-top: 42px; } &:first-of-type { padding-top: 42px; }
&:last-of-type { padding-bottom: 40px; } &:last-of-type { padding-bottom: 40px; }
&.signIn:first-of-type { padding-top: 30px; }
&.signIn:last-of-type { padding-bottom: 30px; }
} }
/* Buttons ------------------------------------------------*/ /* Buttons ------------------------------------------------*/
@ -72,9 +76,11 @@
color: #fff; color: #fff;
text-shadow: $shadow; text-shadow: $shadow;
border: none; border: none;
border-bottom: 1px solid black(.4); // Do not use rgba() for border-bottom
// to avoid a blurry line in Safari on non-retina screens
border-bottom: 1px solid #222;
border-radius: 0; border-radius: 0;
box-shadow: 0 1px 0 white(.08); box-shadow: 0 1px 0 white(.05);
outline: none; outline: none;
&:focus { border-bottom-color: $colorBlue; } &:focus { border-bottom-color: $colorBlue; }
@ -161,6 +167,18 @@
} }
} }
/* Version ------------------------------------------------*/
.version {
padding: 0px 30px 20px;
color: #888;
font-size: 12px;
text-align: left;
span { display: none; }
span a { color: #888; }
}
} }
.message_overlay { .message_overlay {