Use new modal for login

src/scripts/build.coffee

@@ -178,25 +178,6 @@ build.modal = (title, text, button, marginTop, closeButton) ->
 
 	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) ->
 
 	html =	"""

src/scripts/lychee.js

@@ -117,10 +117,10 @@ lychee.api = function(params, callback) {
 
 }
 
-lychee.login = function() {
+lychee.login = function(data) {
 
-	var user		= $('input#username').val(),
-		password	= md5($('input#password').val()),
+	var user		= data.username,
+		password	= md5(data.password),
 		params;
 
 	params = 'login&user=' + user + '&password=' + password;
@@ -137,8 +137,7 @@ lychee.login = function() {
 		} else {
 
 			// Show error and reactive button
-			$('#password').val('').addClass('error').focus();
-			$('.message .button.active').removeClass('pressed');
+			basicModal.error('password');
 
 		}
 
@@ -148,16 +147,34 @@ lychee.login = function() {
 
 lychee.loginDialog = function() {
 
-	var local_username;
-
-	$('body').append(build.signInModal());
-	$('#username').focus();
+	var localUsername,
+		msg = '';
+
+	msg += "<p class='signIn'>";
+	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) {
-		local_username = localStorage.getItem('lychee_username');
-		if (local_username!==null) {
-			if (local_username.length>0) $('#username').val(local_username);
-			$('#password').focus();
+		localUsername = localStorage.getItem('lychee_username');
+		if (localUsername!==null) {
+			if (localUsername.length>0) $('.basicModal input[data-name="username"]').val(localUsername);
+			$('.basicModal input[data-name="password"]').focus();
 		}
 	}
 
@@ -244,7 +261,7 @@ lychee.getUpdate = function() {
 
 	$.ajax({
 		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(); }
 	});
 
 }

src/styles/_message.scss

@@ -39,6 +39,10 @@
 		&:first-of-type { padding-top: 42px; }
 
 		&:last-of-type { padding-bottom: 40px; }
+
+		&.signIn:first-of-type { padding-top: 30px; }
+
+		&.signIn:last-of-type { padding-bottom: 30px; }
 	}
 
 	/* Buttons ------------------------------------------------*/
@@ -72,9 +76,11 @@
 		color: #fff;
 		text-shadow: $shadow;
 		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;
-		box-shadow: 0 1px 0 white(.08);
+		box-shadow: 0 1px 0 white(.05);
 		outline: none;
 
 		&: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 {