From 2a935f1b47ed27596ac4a6d8bf5fd911c766d453 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt
Date: Wed, 26 Aug 2015 19:00:42 +0200
Subject: [PATCH 1/4] move log in button into fields and use icon instead of
text
---
core/css/styles.css | 30 +++++++++++++++++++++++++-----
core/templates/login.php | 9 ++++++---
2 files changed, 31 insertions(+), 8 deletions(-)
diff --git a/core/css/styles.css b/core/css/styles.css
index cad407b52e..1f41af211c 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -456,11 +456,30 @@ input[type="submit"].enabled {
padding: 13px;
margin: -13px;
}
-/* quick fix for log in button not being aligned with input fields, should be properly fixed by input field width later */
+
+/* position log in button as confirm icon in right of password field */
#body-login #submit.login {
- margin-right: 7px;
+ position: absolute;
+ right: 0;
+ top: 49px;
+ 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"] {
+ padding-right: 40px;
+ box-sizing: border-box;
+ min-width: 269px;
+}
+
#body-login form {
+ position: relative;
width: 22em;
margin: 2em auto 2em;
padding: 0;
@@ -539,10 +558,8 @@ input[name='password-clone'] {
/* General new input field look */
#body-login input[type="text"],
#body-login input[type="password"],
-#body-login input[type="email"],
-#body-login input[type="submit"] {
+#body-login input[type="email"] {
border: none;
- border-radius: 5px;
}
/* Nicely grouping input field sets */
@@ -783,6 +800,9 @@ label.infield {
margin: 24px 5px 0 16px !important;
vertical-align: text-bottom;
}
+#body-login .remember-login-container {
+ text-align: center;
+}
/* Sticky footer */
#body-login .wrapper {
diff --git a/core/templates/login.php b/core/templates/login.php
index f942e02dc8..0cd76b2b37 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -56,19 +56,22 @@ script('core', [
+
+
t('Wrong password. Reset it?')); ?>
-
-
+
+
+
+
-
From cea3247d49e2aa0bdf49303a9bffadfb36c44898 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt
Date: Thu, 27 Aug 2015 21:02:00 +0200
Subject: [PATCH 2/4] show feedback spinner for log in process
---
core/js/login.js | 24 ++++++++++++++++++++++++
core/templates/login.php | 3 ++-
2 files changed, 26 insertions(+), 1 deletion(-)
create mode 100644 core/js/login.js
diff --git a/core/js/login.js b/core/js/login.js
new file mode 100644
index 0000000000..33ec868cb2
--- /dev/null
+++ b/core/js/login.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2015
+ * Vincent Petry
+ * Jan-Christoph Borchardt, http://jancborchardt.net
+ * This file is licensed under the Affero General Public License version 3 or later.
+ * See the COPYING-README file.
+ */
+
+/**
+ * @namespace
+ * @memberOf OC
+ */
+OC.Login = _.extend(OC.Login || {}, {
+ onLogin: function () {
+ $('#submit')
+ .removeClass('icon-confirm')
+ .addClass('icon-loading-small')
+ .css('opacity', '1');
+ return true;
+ }
+});
+$(document).ready(function() {
+ $('form[name=login]').submit(OC.Login.onLogin);
+});
diff --git a/core/templates/login.php b/core/templates/login.php
index 0cd76b2b37..50ca6febf0 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -3,7 +3,8 @@
vendor_script('jsTimezoneDetect/jstz');
script('core', [
'visitortimezone',
- 'lostpassword'
+ 'lostpassword',
+ 'login'
]);
?>
From e4d0a69126430210fc59f945e73973dd18b9237b Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt
Date: Thu, 27 Aug 2015 21:23:45 +0200
Subject: [PATCH 3/4] position and style remember button on log in page
---
core/css/styles.css | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/core/css/styles.css b/core/css/styles.css
index 1f41af211c..bf6ca51914 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -758,7 +758,7 @@ label.infield {
margin: 35px auto;
}
#body-login .warning {
- margin: 0 7px 5px;
+ margin: 0 7px 5px 4px;
}
#body-login .warning legend {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
@@ -797,8 +797,10 @@ label.infield {
padding: 10px 20px; /* larger log in and installation buttons */
}
#remember_login {
- margin: 24px 5px 0 16px !important;
+ margin: 18px 5px 0 16px !important;
vertical-align: text-bottom;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+ opacity: .7;
}
#body-login .remember-login-container {
text-align: center;
From 8fc7a3dc80edee0e4ac4347dfb019e783876c860 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt
Date: Thu, 27 Aug 2015 21:29:29 +0200
Subject: [PATCH 4/4] use simpler logo for log in page
---
core/css/header.css | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/core/css/header.css b/core/css/header.css
index 5630f96953..369750251c 100644
--- a/core/css/header.css
+++ b/core/css/header.css
@@ -70,8 +70,10 @@
}
#header .logo {
- background-image: url(../img/logo.svg);
+ background-image: url(../img/logo-icon.svg);
background-repeat: no-repeat;
+ background-size: 175px;
+ background-position: center 30px;
width: 252px;
height: 120px;
margin: 0 auto;