From: Dylan William Hardison Date: Thu, 8 Oct 2015 12:28:46 +0000 (-0400) Subject: Bug 1200765 - Make login UX mobile friendly to assist mobile authentication workflow X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d6f47aa5f07a11a8771ce95f156b5394e67285a8;p=thirdparty%2Fbugzilla.git Bug 1200765 - Make login UX mobile friendly to assist mobile authentication workflow --- diff --git a/.htaccess b/.htaccess index ab9b053da..b5ec2536f 100644 --- a/.htaccess +++ b/.htaccess @@ -91,3 +91,4 @@ RewriteRule ^rest/(.*)$ rest.cgi/$1 [NE] RewriteRule ^(?:latest|1\.2|1\.3)/(.*)$ extensions/BzAPI/bin/rest.cgi/$1 [NE] RewriteRule ^bzapi/(.*)$ extensions/BzAPI/bin/rest.cgi/$1 [NE] RewriteRule ^data/assets/ZeroClipboard.swf(.*)$ extensions/BugModal/web/ZeroClipboard/ZeroClipboard.swf$1 [NE] +RewriteRule ^login$ index.cgi?GoAheadAndLogIn=1 [NE] diff --git a/Bugzilla/Template.pm b/Bugzilla/Template.pm index bc0d77084..b03698477 100644 --- a/Bugzilla/Template.pm +++ b/Bugzilla/Template.pm @@ -1117,6 +1117,11 @@ sub create { return \@optional; }, 'default_authorizer' => sub { return Bugzilla::Auth->new() }, + + # It is almost always better to do mobile feature detection, client side in js. + # However, we need to set the meta[name=viewport] server-side or the behavior is + # not as predictable. It is possible other parts of the frontend may use this feature too. + 'is_mobile_browser' => sub { return Bugzilla->cgi->user_agent =~ /Mobi/ }, }, }; # Use a per-process provider to cache compiled templates in memory across diff --git a/skins/standard/global.css b/skins/standard/global.css index 81736f052..3790539e6 100644 --- a/skins/standard/global.css +++ b/skins/standard/global.css @@ -724,3 +724,21 @@ input.required, select.required, span.required_explanation { background-repeat: no-repeat !important; background-position: right 8px center !important; } + +#login .field-login, #login .field-password { + line-height: 32px; + display: block; + padding-top: 2px; + padding-bottom: 2px; +} + +#login .field-login label, #login .field-password label { + clear: left; + width: 7em; + display: inline-block; + font-weight: bold; +} + +#login .field-restrict, #login .field-remember { + margin-left: 7em; +} diff --git a/skins/standard/mobile.css b/skins/standard/mobile.css new file mode 100644 index 000000000..61179e93d --- /dev/null +++ b/skins/standard/mobile.css @@ -0,0 +1,66 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * This Source Code Form is "Incompatible With Secondary Licenses", as + * defined by the Mozilla Public License, v. 2.0. + */ + +@media +only screen and (max-device-width : 720px) { + #header, #footer { + display: none; + } + .cookie-notify { + display: none; + } + + #login .field-login label, #login .field-password label { + display: block; + } + + #login .field-login, #login .field-password { + line-height: auto; + padding-top: 0px; + padding-bottom: 0px; + } + + #login .field-restrict, #login .field-remember { + margin-left: 0px; + } + #login .field-submit { + padding-top: 4px; + } + + h1 { + font-size: 1.5em; + } + + .verify-totp input[type="text"] { + font-size: 28px; + } + + .verify-totp input[type="submit"] { + font-size: 1em; + } +} + +@media +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and (min--moz-device-pixel-ratio: 2), +only screen and (-o-min-device-pixel-ratio: 2/1), +only screen and (min-device-pixel-ratio: 2), +only screen and (min-resolution: 192dpi), +only screen and (min-resolution: 2dppx) { + #privacy_policy { + font-size: small; + } + + body { + font-size: medium; + } + + label.checkbox-note { + font-size: small; + } +} diff --git a/template/en/default/account/auth/login.html.tmpl b/template/en/default/account/auth/login.html.tmpl index 922a55bd4..33aeaeaea 100644 --- a/template/en/default/account/auth/login.html.tmpl +++ b/template/en/default/account/auth/login.html.tmpl @@ -30,8 +30,9 @@ [% PROCESS global/variables.none.tmpl %] [% PROCESS global/header.html.tmpl - title = "Log in to $terms.Bugzilla", - onload = "document.forms['login'].Bugzilla_login.focus()" + title = "Log in to $terms.Bugzilla", + onload = "document.forms['login'].Bugzilla_login.focus()" + allow_mobile = 1 %] [% USE Bugzilla %] @@ -40,59 +41,55 @@ I need an email address and password to continue.

-
- - - - - - - - - + - - - + Param('rememberlogin') == 'defaultoff' %] +
+ + +
[% END %] - - - - -
- - [% Param('emailsuffix') FILTER html %] -
- -
  - - -
  - - -
+ [% PROCESS "global/hidden-fields.html.tmpl" + exclude="^Bugzilla_(login|password|restrictlogin)$" %] - [% PROCESS "global/hidden-fields.html.tmpl" - exclude="^Bugzilla_(login|password|restrictlogin)$" %] +
+ + +
- - +
+ + +
-

- (Note: you should make sure cookies are enabled for this site. - Otherwise, you will be required to log in frequently.) -

-
+

+ (Note: you should make sure cookies are enabled for this site. + Otherwise, you will be required to log in frequently.) +

+ + [% Hook.process('additional_methods') %] @@ -117,7 +114,7 @@ If you have an account, but have forgotten your password, enter your email address below and submit a request to change your password.
- + diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl index 3f70b9453..23634ed43 100644 --- a/template/en/default/global/header.html.tmpl +++ b/template/en/default/global/header.html.tmpl @@ -37,6 +37,7 @@ # atomlink: Atom link URL, May contain HTML # generate_api_token: generate a token which can be used to make authenticated webservice calls # no_body: if true the body element will not be generated + # allow_mobile: allow special CSS and viewport for detected mobile useragents #%] [% IF message %] @@ -103,6 +104,10 @@ [%# Add our required jQuery plugins %] [% jquery.push("cookie", "devbridgeAutocomplete") %] +[% IF allow_mobile && is_mobile_browser %] + [% style_urls.push("skins/standard/mobile.css") %] +[% END %] + [%# We should be able to set the default value of the header variable # to the value of the title variable using the DEFAULT directive, # but that doesn't work if a caller sets header to the empty string @@ -260,6 +265,9 @@ [%# Required for the 'Autodiscovery' feature in Firefox 2 and IE 7. %] + [% IF allow_mobile && is_mobile_browser %] + + [% END %] [% Hook.process("additional_header") %] diff --git a/template/en/default/mfa/totp/verify.html.tmpl b/template/en/default/mfa/totp/verify.html.tmpl index ad75dc6bc..7314d909a 100644 --- a/template/en/default/mfa/totp/verify.html.tmpl +++ b/template/en/default/mfa/totp/verify.html.tmpl @@ -8,6 +8,7 @@ [% INCLUDE global/header.html.tmpl title = "Account Verification" + allow_mobile = 1 %]

Account Verification

@@ -16,16 +17,17 @@ [% reason FILTER html %] requires verification.
Please enter your verification code from your TOTP application:

- -
- [% FOREACH field IN postback.fields.keys %] - - [% END %] -
-
- -
+
+
+ [% FOREACH field IN postback.fields.keys %] + + [% END %] +
+
+ +
+
[% INCLUDE global/footer.html.tmpl %]