Bug 1200765 - Make login UX mobile friendly to assist mobile authentication workflow

1 files changed, 46 insertions, 49 deletions

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.
 </p>
 
-<form name="login" action="[% target FILTER html %]" method="POST"
-[%- IF Bugzilla.cgi.param("data") %] enctype="multipart/form-data"[% END %]>
-  <table>
-    <tr>
-      <th align="right"><label for="Bugzilla_login">Email Address:</label></th>
-      <td>
-        <input size="35" id="Bugzilla_login" name="Bugzilla_login"
-               [%- ' type="email"' UNLESS Param('emailsuffix') %]>
-        [% Param('emailsuffix') FILTER html %]
-      </td>
-    </tr>
-    <tr>
-      <th align="right"><label for="Bugzilla_password">Password:</label></th>
-      <td>
-        <input type="password" size="35" id="Bugzilla_password" name="Bugzilla_password">
-      </td>
-    </tr>
+<div id="login" class="login-form">
+  <form name="login" action="[% target FILTER html %]" method="POST"
+        [%- IF Bugzilla.cgi.param("data") %] enctype="multipart/form-data"[% END %]>
+    <div class="field-login">
+      <label for="Bugzilla_login">Email Address:</label>
+      <input id="Bugzilla_login" name="Bugzilla_login"
+             [%- ' type="email"' UNLESS Param('emailsuffix') %]>
+      [% Param('emailsuffix') FILTER html %]
+    </div>
+
+    <div class="field-password">
+      <label for="Bugzilla_password">Password:</label>
+      <input type="password" id="Bugzilla_password" name="Bugzilla_password">
+    </div>
 
     [% IF Param('rememberlogin') == 'defaulton' || 
-          Param('rememberlogin') == 'defaultoff' %]
-      <tr>
-        <th>&nbsp;</th>
-        <td>
-          <input type="checkbox" id="Bugzilla_remember" name="Bugzilla_remember" value="on"
-                 [%+ "checked" IF Param('rememberlogin') == "defaulton" %]>
-          <label for="Bugzilla_remember">Remember my email address</label>
-        </td>
-      </tr>
+       Param('rememberlogin') == 'defaultoff' %]
+      <div class="field-remember">
+        <input type="checkbox" id="Bugzilla_remember" name="Bugzilla_remember" value="on"
+               [%+ "checked" IF Param('rememberlogin') == "defaulton" %]>
+        <label for="Bugzilla_remember" class="checkbox-note">
+          Remember my email address
+        </label>
+      </div>
     [% END %]
 
-    <tr>
-      <th>&nbsp;</th>
-      <td>
-        <input type="checkbox" id="Bugzilla_restrictlogin" name="Bugzilla_restrictlogin"
-               checked="checked">
-        <label for="Bugzilla_restrictlogin">Restrict this session to this IP address
-        (using this option improves security)</label>
-      </td>
-    </tr>
-  </table>
+    [% PROCESS "global/hidden-fields.html.tmpl"
+       exclude="^Bugzilla_(login|password|restrictlogin)$" %]
 
-  [% PROCESS "global/hidden-fields.html.tmpl"
-     exclude="^Bugzilla_(login|password|restrictlogin)$" %]
+    <div class="field-restrict">
+      <input type="checkbox" id="Bugzilla_restrictlogin" name="Bugzilla_restrictlogin"
+             checked="checked">
+      <label for="Bugzilla_restrictlogin" class="checkbox-note">
+        Restrict this session to this IP address
+        (using this option improves security)</label>
+    </div>
 
-  <input type="hidden" name="Bugzilla_login_token"
-         value="[% get_login_request_token() FILTER html %]">
-  <input type="submit" name="GoAheadAndLogIn" value="Log in" id="log_in">
+    <div class="field-submit">
+      <input type="hidden" name="Bugzilla_login_token"
+             value="[% get_login_request_token() FILTER html %]">
+      <input type="submit" name="GoAheadAndLogIn" value="Log in" id="log_in">
+    </div>
 
-  <p>
-    (Note: you should make sure cookies are enabled for this site. 
-    Otherwise, you will be required to log in frequently.)
-  </p>
-</form>
+    <p class="cookie-notify">
+      (Note: you should make sure cookies are enabled for this site.
+      Otherwise, you will be required to log in frequently.)
+    </p>
+  </form>
+</div>
 
 [% 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.<br>
-      <input size="35" name="loginname">
+      <input name="loginname">
       <input type="hidden" id="token" name="token" value="[% issue_hash_token(['reqpw']) FILTER html %]">
       <input type="submit" id="request" value="Reset Password">
     </form>