From fa15ccb8faf86d999e3c9528d733068357d561d5 Mon Sep 17 00:00:00 2001
From: Dan Scott <dscott@laurentian.ca>
Date: Thu, 30 Aug 2012 11:55:10 -0400
Subject: [PATCH] Slightly saner login form markup

Try to provide accessibility via label attributes and move from a
table-within-a-table layout to a single table for the form.

Signed-off-by: Dan Scott <dscott@laurentian.ca>
Signed-off-by: Bill Erickson <berick@esilibrary.com>
---
 Open-ILS/src/templates/opac/parts/login/form.tt2 | 167 ++++++-----------------
 1 file changed, 43 insertions(+), 124 deletions(-)

diff --git a/Open-ILS/src/templates/opac/parts/login/form.tt2 b/Open-ILS/src/templates/opac/parts/login/form.tt2
index e4200bd875..1e23a98e40 100644
--- a/Open-ILS/src/templates/opac/parts/login/form.tt2
+++ b/Open-ILS/src/templates/opac/parts/login/form.tt2
@@ -1,57 +1,3 @@
-<!-- TODO: MOVE INTO SEPARATE FORGOT-PASSWORD PAGE 
-
-<div class="hide_me">
-	<div class='login_text color_1' style='padding: 4px; text-align: center;'>
-		<span>[% l("Login") %]</span>
-	</div>
-	<br/>
-</div>
-<table id='change_pw_table' class='data_grid hide_me' style='margin-left: 20px;' width='95%'>
-	<thead>
-        <tr><td colspan='2' align='center'><b>[% l("Password") %]</b></td></tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td colspan='2' style='padding:10px;'>
-                [% l("This appears to be the first time you have logged in.  You will need to change your password.") %]
-                [% l("The password must be at least 7 characters in length,
- contain at least one letter (a-z/A-Z),
- and contain at least one number.") %]
-            </td>
-        </tr>
-        <tr>
-            <td>[% l("Enter your current password") %]</td>
-            <td><input type='password' id='change_pw_current'/></td>
-        </tr>
-        <tr>
-            <td>[% l("Enter the new password") %]</td>
-            <td><input type='password' id='change_pw_1'/></td>
-        </tr>
-        <tr>
-            <td>[% l("Re-type the new password for verification") %]</td>
-            <td><input type='password' id='change_pw_2'/></td>
-        </tr>
-        <tr><td><br/></td><td/></tr>
-        <tr class='color_1'>
-            <td colspan='2' align='center'>
-                <span class='login_text' style='margin-right: 20px;'>
-                    <input type='submit' value='[% l("Update Password") %]'  id='change_pw_button'/>
-                </span>
-            </td>
-        </tr>
-    </tbody>
-</table>
-
-
-<span id='pw_no_match' class='hide_me'>[% l("Passwords do not match") %]</span>
-<span id='pw_update_successful' class='hide_me'>[% l("Password successfully updated") %]</span>
-<span id='pw_not_strong' class='hide_me'>
-    [% l("The password provided is not strong enough.") %]
-    [% l("The password must be at least 7 characters in length, contain at least one letter (a-z/A-Z), and contain at least one number.") %]
-</span>
-
- ^== TODO: MOVE INTO SEPARATE FORGOT-PASSWORD PAGE  -->
-
 [% IF ctx.login_failed_event %]
 <div id='login-failed-message'>
 [%
@@ -67,80 +13,53 @@
 </div>
 [% END %]
 
-<div>
-    <div style="height:20px;"></div>
+<div id='login-form-box' class='login_boxes left_brain' style='float:left'>
+    <h1>[% l('Log in to Your Account') %]</h1>
+    [% l('Please enter the following information:') %]
     <form method='POST'>
-        <table cellpadding="0" cellspacing="0" border="0">
+        <table>
             <tr>
-                <td valign="top" width="676" class="login_boxes left_brain">
-                    <table cellpadding="0" cellspacing="0" border="0"
-                        width="100%">
-                        <tr>
-	                        <td colspan="2" style="padding-bottom: 10px;">
-                                <h1>[% l('Log in to Your Account') %]</h1>
-                                [% l('Please enter the following information:') %]
-                                <br /><br />
-                            </td>
-                        </tr>
-                        <tr>
-                            <td width="42%" class="lbl1">
-                                [% l('Library Card Number or Username') %]
-                                <br />
-                                <span class="lbl2">
-                                    [% l('Please include leading zeros and no spaces.') %]
-                                    <br/>
-                                    [% l('Example: 0026626051') %]
-                                </span>
-                                <br /><br />
-                            </td>
-                            <td width="58%" valign="top">
-                                <div class="input_bg">
-                                    <input type="text" id="username_field" name="username" autofocus />
-                                </div>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td colspan="2">
-                                <div style="height:15px;"></div>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td valign="top" class="lbl1">
-                                [% l('PIN Number or Password') %]<br />
-                                [% INCLUDE "opac/parts/login/password_hint.tt2" %]
-                            </td>
-                            <td valign="top">
-                                <div class="input_bg">
-                                    <input name="password" type="password" />
-                                </div>
-                                <div style="padding-top:7px;">
-                                    [%
-                                        # If no redirect is offered or it's leading us back to the 
-                                        # login form, redirect the user to My Account
-                                        redirect = CGI.param('redirect_to') || ctx.referer;
-                                        IF !redirect OR redirect.match(ctx.path_info _ '$');
-                                            redirect = CGI.url('-full' => 1) _ '/opac/myopac/main';
-                                        END;
-                                        redirect = redirect  | replace('^http:', 'https:');
-                                    %]
-                                    <input type='hidden' name='redirect_to' value='[% redirect %]'/>
-                                    <input type="checkbox" name="persist" id="login_persist" /><label for="login_persist"> [% l('Stay logged in?') %]</label>
-                                </div>
-                                <div style="padding-top:14px;">
-                                    <input type="submit" value="[% l('Log in') %]" alt="[% l('Log in') %]" class="opac-button" />
-                                    [% IF reset_password %]
-                                    <a href='[% mkurl(ctx.opac_root _ '/password_reset', {}, 1) %]'>[% l('Forgot your password?') %]</a>
-                                    [% END %]
-                                </div>
-                            </td>
-                        </tr>
-                    </table>
-                    <br /><br />
+                <td style="width: 20em; vertical-align: top; padding-top: 1.5em;" class='lbl1'><label for='username_field'>[% l('Library Card Number or Username') %]</label>
+                    <div class="lbl2">[% l('Please include leading zeros and no spaces.') %]</div>
+		    <div class="lbl2">[% l('Example: 0026626051') %]</div>
+                </td>
+                <td style="vertical-align: top; padding-top: 1.5em;">
+                    <div class="input_bg">
+                        <input type="text" id="username_field" name="username" autofocus />
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td class="lbl1" style="width: 20em; vertical-align: top; padding-top: 1.5em">
+                    <label for="password_field">[% l('PIN Number or Password') %]</label>
+                    <div>[% INCLUDE "opac/parts/login/password_hint.tt2" %]</div>
+                </td>
+                <td  style="vertical-align: top; padding-top: 1.5em;">
+                    <div class="input_bg">
+                        <input id="password_field" name="password" type="password" />
+                    </div>
+                    <div>
+                        [%
+                            # If no redirect is offered or it's leading us back to the 
+                            # login form, redirect the user to My Account
+                            redirect = CGI.param('redirect_to') || ctx.referer;
+                            IF !redirect OR redirect.match(ctx.path_info _ '$');
+                                redirect = CGI.url('-full' => 1) _ '/opac/myopac/main';
+                            END;
+                            redirect = redirect  | replace('^http:', 'https:');
+                        %]
+                        <input type='hidden' name='redirect_to' value='[% redirect %]'/>
+                        <input type="checkbox" name="persist" id="login_persist" /><label for="login_persist"> [% l('Stay logged in?') %]</label>
+                    </div>
+                    <div style="padding-top: 1em; margin-right: 1em;">
+                        <input type="submit" value="[% l('Log in') %]" alt="[% l('Log in') %]" class="opac-button" />
+                        [% IF reset_password %]
+                        <a href='[% mkurl(ctx.opac_root _ '/password_reset', {}, 1) %]'>[% l('Forgot your password?') %]</a>
+                        [% END %]
+                    </div>
                 </td>
-	            <td><div style="width:10px;"></div></td>
-                [% INCLUDE "opac/parts/login/help.tt2" %]
             </tr>
         </table>
     </form>
-    <div class="clear-both"></div>
 </div>
+<div style='float:right; max-width: 200px; text-align: center; margin-right: 25%;'>[% INCLUDE "opac/parts/login/help.tt2" %]</div>
-- 
2.11.0