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;