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

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

Author: jancborchardt

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,

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 */

core/img/actions/confirm-white.svg

@@ -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');
+			}
+		}
 	}
 });
 

core/img/actions/confirm.svg

@@ -43,17 +43,16 @@
 				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>
 
 		<p class="groupbottom<?php if (!empty($_['invalidpassword'])) { ?> shake<?php } ?>">
 			<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 @@
 				<?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']) ?>">