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

core/css/icons.css

@@ -149,6 +149,9 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
 .icon-confirm {
 	background-image: url('../img/actions/confirm.svg?v=1');
 }
+.icon-confirm-white {
+	background-image: url('../img/actions/confirm-white.svg?v=1');
+}
 
 .icon-delete,
 .icon-delete.no-permission:hover,

core/css/styles.css

@@ -286,28 +286,6 @@ 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;
@@ -616,8 +594,8 @@ label.infield {
 	width: 249px;
 }
 #body-login input.login {
-	width: auto;
-	float: right;
+	width: 269px;
+	background-position: right 12px center;
 }
 #body-login input[type="submit"] {
 	padding: 10px 20px; /* larger log in and installation buttons */
@@ -626,7 +604,7 @@ label.infield {
 	margin: 18px 5px 0 16px !important;
 }
 #body-login .remember-login-container {
-	margin-top: 10px;
+	margin: 10px 0;
 	text-align: center;
 }
 

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 fill="#fff" d="m1 11v-6h7v-4l7 7-7 7v-4z"/>
+</svg>

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

core/templates/login.php

@@ -53,7 +53,6 @@ script('core', [
 				<?php p($_['user_autofocus'] ? '' : 'autofocus'); ?>
 				autocomplete="on" autocapitalize="off" autocorrect="off" required tabindex="2">
 			<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'])) { ?>
@@ -75,6 +74,9 @@ script('core', [
 			<label for="remember_login"><?php p($l->t('Stay logged in')); ?></label>
 		</div>
 		<?php endif; ?>
+
+		<input type="submit" id="submit" class="login primary icon-confirm-white" title="" value="<?php p($l->t('Log in')); ?>" disabled="disabled" tabindex="4" />
+
 		<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']) ?>">