Merge pull request #1641 from nextcloud/log-in-button

bring back dedicated log in button to make log in more usable

6 files changed, 48 insertions, 47 deletions

diff --git a/core/css/icons.css b/core/css/icons.css
index 50dcf51fd3a..df36ae58710 100644
--- a/core/css/icons.css
+++ b/core/css/icons.css
@@ -147,7 +147,10 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
 }
 
 .icon-confirm {
-	background-image: url('../img/actions/confirm.svg?v=1');
+	background-image: url('../img/actions/confirm.svg?v=2');
+}
+.icon-confirm-white {
+	background-image: url('../img/actions/confirm-white.svg?v=2');
 }
 
 .icon-delete,
diff --git a/core/css/styles.css b/core/css/styles.css
index 958a93a600c..8fa7691ca7a 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -286,32 +286,10 @@ body {
 	margin: -13px;
 }
 
-/* position log in button as confirm icon in right of password field */
-#body-login #submit.login {
-	position: absolute;
-	right: 0;
-	top: 0;
-	border: none;
-	background-color: transparent;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-	opacity: .3;
-}
-#body-login #submit.login:hover,
-#body-login #submit.login:focus {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-	opacity: .7;
-}
-#body-login input[type="password"],
-#body-login input[name="adminpass-clone"] {
-	padding-right: 40px;
-	box-sizing: border-box;
-	min-width: 269px;
-}
-
 #body-login form {
 	position: relative;
 	width: 280px;
-	margin: 32px auto;
+	margin: 16px auto;
 	padding: 0;
 }
 #body-login form fieldset {
@@ -420,7 +398,6 @@ label.infield {
 	position: relative;
 	margin: 0;
 	padding: 14px;
-	padding-left: 28px;
 	vertical-align: middle;
 	-webkit-user-select: none;
 	-moz-user-select: none;
@@ -442,6 +419,8 @@ label.infield {
 
 #body-login #remember_login:hover+label,
 #body-login #remember_login:focus+label,
+#body-login #forgot-password:hover,
+#body-login #forgot-password:focus,
 #body-login p.info a:hover,
 #body-login p.info a:focus  {
 	opacity: .6;
@@ -617,8 +596,8 @@ label.infield {
 	width: 249px;
 }
 #body-login input.login {
-	width: auto;
-	float: right;
+	width: 269px;
+	background-position: right 16px center;
 }
 #body-login input[type="submit"] {
 	padding: 10px 20px; /* larger log in and installation buttons */
@@ -627,8 +606,15 @@ label.infield {
 	margin: 18px 5px 0 16px !important;
 }
 #body-login .remember-login-container {
-	margin-top: 10px;
+	display: inline-block;
+	margin: 10px 0;
 	text-align: center;
+	width: 100%;
+}
+#body-login #forgot-password {
+	padding: 11px;
+	float: right;
+	color: #fff;
 }
 
 /* Sticky footer */
diff --git a/core/img/actions/confirm-white.svg b/core/img/actions/confirm-white.svg
new file mode 100644
index 00000000000..266f2bc1abc
--- /dev/null
+++ b/core/img/actions/confirm-white.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1">
+ <path d="m8.6328 0.63477c-0.2556 0-0.5112 0.0971-0.707 0.29296-0.3918 0.39177-0.3918 1.0224 0 1.4141l4.6582 4.6582h-11.584c-0.554 0-1 0.446-1 1s0.446 1 1 1h11.586l-4.6583 4.658c-0.3917 0.392-0.3917 1.023 0 1.414 0.3918 0.392 1.0224 0.392 1.4141 0l6.3632-6.363v-0.002h0.002c0.093-0.093 0.166-0.2041 0.217-0.3281l0.002-0.0019v-0.002c0.02-0.0508 0.019-0.1053 0.031-0.1582 0.016-0.0718 0.043-0.14 0.043-0.2168 0-0.0714-0.027-0.1341-0.041-0.2012-0.012-0.0578-0.012-0.1202-0.033-0.1738v-0.002c-0.001-0.0013-0.002-0.0026-0.002-0.0039-0.051-0.1233-0.124-0.2335-0.217-0.3261-0.001-0.0007-0.001-0.0013-0.002-0.002l-6.3632-6.3633c-0.1959-0.19583-0.4534-0.29293-0.709-0.29293z" fill-rule="evenodd" fill="#fff"/>
+</svg>
diff --git a/core/img/actions/confirm.svg b/core/img/actions/confirm.svg
index e3c41453d88..f12084ed40e 100644
--- a/core/img/actions/confirm.svg
+++ b/core/img/actions/confirm.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M1 11V5h7V1l7 7-7 7v-4z"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1">
+ <path d="m8.6328 0.63477c-0.2556 0-0.5112 0.0971-0.707 0.29296-0.3918 0.39177-0.3918 1.0224 0 1.4141l4.6582 4.6582h-11.584c-0.554 0-1 0.446-1 1s0.446 1 1 1h11.586l-4.6583 4.658c-0.3917 0.392-0.3917 1.023 0 1.414 0.3918 0.392 1.0224 0.392 1.4141 0l6.3632-6.363v-0.002h0.002c0.093-0.093 0.166-0.2041 0.217-0.3281l0.002-0.0019v-0.002c0.02-0.0508 0.019-0.1053 0.031-0.1582 0.016-0.0718 0.043-0.14 0.043-0.2168 0-0.0714-0.027-0.1341-0.041-0.2012-0.012-0.0578-0.012-0.1202-0.033-0.1738v-0.002c-0.001-0.0013-0.002-0.0026-0.002-0.0039-0.051-0.1233-0.124-0.2335-0.217-0.3261-0.001-0.0007-0.001-0.0013-0.002-0.002l-6.3632-6.3633c-0.1959-0.19583-0.4534-0.29293-0.709-0.29293z" fill-rule="evenodd"/>
+</svg>
diff --git a/core/js/login.js b/core/js/login.js
index 62aa8e9f37a..034bb169c52 100644
--- a/core/js/login.js
+++ b/core/js/login.js
@@ -13,18 +13,18 @@
 OC.Login = _.extend(OC.Login || {}, {
 	onLogin: function () {
 		$('#submit')
-			.removeClass('icon-confirm')
+			.removeClass('icon-confirm-white')
 			.addClass('icon-loading-small')
-			.css('opacity', '1');
+			.attr('value', t('core', 'Logging in …'));
 		return true;
 	},
 
 	rememberLogin: function(){
 		if($(this).is(":checked")){
-	    	if($("#user").val() && $("#password").val()) {
-	     	 	$('#submit').trigger('click');
-	    	} 
-        }
+			if($("#user").val() && $("#password").val()) {
+				$('#submit').trigger('click');
+			}
+		}
 	}
 });
 
diff --git a/core/templates/login.php b/core/templates/login.php
index 49fa0dd6aff..36ed59e9309 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -43,7 +43,7 @@ script('core', [
 				placeholder="<?php p($l->t('Username or email')); ?>"
 				value="<?php p($_['loginName']); ?>"
 				<?php p($_['user_autofocus'] ? 'autofocus' : ''); ?>
-				autocomplete="on" autocapitalize="off" autocorrect="off" required tabindex="1">
+				autocomplete="on" autocapitalize="off" autocorrect="off" required>
 			<label for="user" class="infield"><?php p($l->t('Username or email')); ?></label>
 		</p>
 
@@ -51,9 +51,8 @@ script('core', [
 			<input type="password" name="password" id="password" value=""
 				placeholder="<?php p($l->t('Password')); ?>"
 				<?php p($_['user_autofocus'] ? '' : 'autofocus'); ?>
-				autocomplete="on" autocapitalize="off" autocorrect="off" required tabindex="2">
+				autocomplete="on" autocapitalize="off" autocorrect="off" required>
 			<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
-			<input type="submit" id="submit" class="login primary icon-confirm" title="<?php p($l->t('Log in')); ?>" value="" disabled="disabled" tabindex="4" />
 		</p>
 
 		<?php if (!empty($_['invalidpassword']) && !empty($_['canResetPassword'])) { ?>
@@ -65,16 +64,22 @@ script('core', [
 				<?php p($l->t('Wrong password.')); ?>
 			</p>
 		<?php } ?>
-		<?php if ($_['rememberLoginAllowed'] === true) : ?>
-		<div class="remember-login-container">
-			<?php if ($_['rememberLoginState'] === 0) { ?>
-			<input type="checkbox" name="remember_login" value="1" id="remember_login" class="checkbox checkbox--white" tabindex="3">
-			<?php } else { ?>
-			<input type="checkbox" name="remember_login" value="1" id="remember_login" class="checkbox checkbox--white" checked="checked" tabindex="3">
-			<?php } ?>
-			<label for="remember_login"><?php p($l->t('Stay logged in')); ?></label>
+
+		<input type="submit" id="submit" class="login primary icon-confirm-white" title="" value="<?php p($l->t('Log in')); ?>" disabled="disabled" />
+
+		<div class="login-additional">
+			<?php if ($_['rememberLoginAllowed'] === true) : ?>
+			<div class="remember-login-container">
+				<?php if ($_['rememberLoginState'] === 0) { ?>
+				<input type="checkbox" name="remember_login" value="1" id="remember_login" class="checkbox checkbox--white">
+				<?php } else { ?>
+				<input type="checkbox" name="remember_login" value="1" id="remember_login" class="checkbox checkbox--white" checked="checked">
+				<?php } ?>
+				<label for="remember_login"><?php p($l->t('Stay logged in')); ?></label>
+			</div>
+			<?php endif; ?>
 		</div>
-		<?php endif; ?>
+
 		<input type="hidden" name="timezone-offset" id="timezone-offset"/>
 		<input type="hidden" name="timezone" id="timezone"/>
 		<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>">