From a3b8550e298eca69b2ad26ee556a10b4afbe6f55 Mon Sep 17 00:00:00 2001
From: mb863 <mb863@440791e1-c2bf-4c1e-ad7c-caf3f8b0ebe8>
Date: Fri, 19 Nov 2010 14:52:41 +0000
Subject: [PATCH] Fixed login widget for vivo-basic

---
 webapp/web/css/login.css                      | 256 +++++++++---------
 .../freemarker/widgets/widget-login.ftl       |  47 ++--
 2 files changed, 157 insertions(+), 146 deletions(-)

diff --git a/webapp/web/css/login.css b/webapp/web/css/login.css
index 41d673b39..981235ec3 100644
--- a/webapp/web/css/login.css
+++ b/webapp/web/css/login.css
@@ -1,151 +1,161 @@
 /* $This file is distributed under the terms of the license in /doc/license.txt$ */
 
 /* styles for log in */
-#formLogin {
-  width:600px;
-  padding:0px;
-  margin:0px;
-  text-align:left;
+
+#log-in-form label, 
+#log-in-form input.text,
+#log-in-form  #password,
+#log-in-form  #confirmPassword{
+    display:block;  
 }
-
-.noOuterBox {
-  width:340px;
-  padding:0px;
-  border: none;
-  margin:0px;
+#log-in-form label.label-remember-me{
+    display:block;
 }
-
-#formLogin h2 {
-  font-size:1.3em;
-  line-height:1em;
-  margin-top:0px;
-  margin-bottom:1em;
-  color:#111;
+#log-in-form p.submit {
+    float:left;
+    margin-bottom:0;
 }
-
-
-#formLogin h6 {
-  font-size:1.2em;
-  line-height:1em;
-  margin-top:0px;
-  margin-bottom:1em;
-  color:#111;
+#log-in-form input.checkbox-remember-me {
+    float:left;
+    height:14px;
+    padding:0;
+    margin-top:13px;
+    margin-left:20px;
 }
-
-#formLogin form {
-  margin: 0;
-  padding: 0;
+#log-in-form .label-remember-me {
+    display:block;
+    float:left;
+    width:100px;
+    margin:0;
+    padding:0;
+    margin-top:10px;
+    margin-right:25px;
+    padding-right:10px;
 }
-
-#formLogin label {
-  display:block;
-  margin-bottom:0.5em;
-  font-weight:bold;
+p.forgot-password {
+    clear:both;
+    margin-bottom:0;
 }
-
-#formLogin label span {
-  color:#900;
-}
-
-#formLogin input {
-  display:block;
-  margin-bottom:1.5em;
-  width: 200px;
-}
-
-#formLogin textarea {
-  width: 300px;
-  display:block;
-  margin-bottom:1.5em;
-}
-
-#formLogin .checkBox {
-  display:inline;
-  width:1em;
-  margin-bottom: 1em;
-}
-
-#formLogin p.small {
-  font-size: 0.8em;
-}
-
-#formLogin input.submit {
-  width: auto;
-  padding: 0 0.9em;
-  display:inline;
-}
-
-.requestAccount {
-  padding: 1em 0 0 2em;
-  margin-bottom:0;
-}
-
-.requestAccountNoOutterBox {
-  padding: 1em 0 0 0;
-  margin-bottom:0;
+p.request-account {
+    width:219px;
+    float:left;
 }
 
 #errorAlert {
-  color:#900;
-  padding:0px;
-  margin-bottom:5px;
-  height:30px;
+    color:#900;
+    padding:0px;
+    margin-bottom:5px;
+    height:30px;
 }
-
 #errorAlert img {
-  float:left;
-  margin:0;
-  padding:0;
-  vertical-align:middle;	
+    float:left;
+    margin:0;
+    padding:0;
+    vertical-align:middle;  	
 }
-
 #errorAlert p {
-  padding-left:35px;
-  font-size:0.9em;
-  line-height:30px;
+    padding-left:30px;
+    font-size:0.9em;
+    line-height:30px;
 }
-
-##confirmationAlert {
-  color:#169f43;
-  padding:0px;
-  margin-bottom:5px;
-  height:30px;
+#confirmationAlert {
+    color:#169f43;
+    padding:0px;
+    margin-bottom:5px;
+    height:30px;
 }
-
-##confirmationAlert img {
-  float:left;
-  margin:0;
-  padding:0;
-  vertical-align:middle;
+#confirmationAlert img {
+    float:left;
+    margin:0;
+    padding:0;
+    vertical-align:middle;
 }
-
 #confirmationAlert p {
-  padding-left:30px;
-  font-size:0.9em;
-  line-height:30px;
+    padding-left:30px;
+    font-size:0.9em;
+    line-height:30px;
 }
-
 .formFieldAlert {
-  border:2px solid #900;
+    border:2px solid #900;
 }
-
 .red {
-  color:#900;
+    color:#900;
 }
-
-#loginFormAndLinks {
-  display: none;
-}
-
 p.passwordNote {
-  margin:0;
-  padding:0;
-  margin-top:-8px;
-  font-size:0.8em;
-  color:#615e5e;
+    margin:0;
+    padding:0;
+    margin-top:-8px;
+    font-size:0.8em;
+    color:#615e5e;
+    padding-top:15px;
+}
+.or {
+    display:inline;
+    vertical-align:middle;
 }
 
-.or {
-  display:inline;
-  vertical-align:middle;
-}
\ No newline at end of file
+/*
+#formLogin {
+    width:600px;
+    padding:0px;
+    margin:0px;
+    text-align:left;
+    border:1px solid red;
+}
+.noOuterBox {
+    width:340px;
+    padding:0px;
+    border: none;
+    margin:0px;
+}
+#formLogin h2 {
+    font-size:1.3em;
+    line-height:1em;
+    margin-top:0px;
+    margin-bottom:1em;
+    color:#111;
+}
+#formLogin h6 {
+    font-size:1.2em;
+    line-height:1em;
+    margin-top:0px;
+    margin-bottom:1em;
+    color:#111;
+}
+#formLogin form {
+    margin: 0;
+    padding: 0;
+}
+#formLogin label {
+    display:block;
+    margin-bottom:0.5em;
+    font-weight:bold;
+}
+#formLogin label span {
+    color:#900;
+}
+
+#formLogin input {
+    display:block;
+    margin-bottom:1.5em;
+    width: 200px;
+}
+#formLogin textarea {
+    width: 300px;
+    display:block;
+    margin-bottom:1.5em;
+}
+#formLogin .checkBox {
+    display:inline;
+    width:1em;
+    margin-bottom: 1em;
+}
+#formLogin p.small {
+    font-size: 0.8em;
+}
+#formLogin input.submit {
+    width: auto;
+    padding: 0 0.9em;
+    display:inline;
+}
+*/
\ No newline at end of file
diff --git a/webapp/web/templates/freemarker/widgets/widget-login.ftl b/webapp/web/templates/freemarker/widgets/widget-login.ftl
index 946690be0..423fbfc12 100644
--- a/webapp/web/templates/freemarker/widgets/widget-login.ftl
+++ b/webapp/web/templates/freemarker/widgets/widget-login.ftl
@@ -31,29 +31,27 @@
         </#if>
        
         <#if errorMessage??>
-            <section id="errorAlert"><img src="${urls.siteIcons}/iconAlert.png"  alert="Error alert icon"/>
+            <div id="errorAlert"><img src="${urls.siteIcons}/iconAlert.png"  alert="Error alert icon"/>
                 <p>${errorMessage}</p>
-            </section>
+            </div>
         </#if>
        
-        <section id="loginFormAndLinks">
-       
-            <form id="log-in-form" action="${formAction}" method="post" name="log-in-form" />
-                <label for="email">Email</label>
-                <input class="text-field" name="loginName" id="loginName" type="text" required />
-    
-                <label for="password">Password</label>
-                <input class="text-field" name="loginPassword" id="password" type="password" required />
-                
-                <p class="submit"><input name="loginForm" type="submit" class="green button" value="Log in"/></p>
-    
-                <input class="checkbox-remember-me" name="remember-me" type="checkbox" value="" />  
-                <label class="label-remember-me" for="remember-me">Remember me</label>
-            </form>
+        <form  role="form" id="log-in-form" action="${formAction}" method="post" name="log-in-form" />
+            <label for="email">Email</label>
+            <input class="text-field" name="loginName" id="loginName" type="text" required />
+
+            <label for="password">Password</label>
+            <input class="text-field" name="loginPassword" id="password" type="password" required />
+            
+            <p class="submit"><input name="loginForm" type="submit" class="green button" value="Log in"/></p>
+
+            <input class="checkbox-remember-me" name="remember-me" type="checkbox" value="" />  
+            <label class="label-remember-me" for="remember-me">Remember me</label>
+        </form>
+
+        <p class="forgot-password"><a href="#">Forgot your password?</a></p>
+        <p class="request-account"><a class="blue button" href="#">Request an account</a> </p>
 
-            <p class="forgot-password"><a href="#">Forgot your password?</a></p>
-            <p class="request-account"><a class="blue button" href="#">Request an account</a> </p>
-        </section>
     </section><!-- #log-in -->
 </#macro> 
 
@@ -62,18 +60,21 @@
         <h2>Log in</h2>
            
             <#if errorMessage??>
-                <div id="errorAlert"><img src="${urls.siteIcons}/iconAlert.png" width="24" height="24" alert="Error alert icon"/>
+                <div id="errorAlert" role="alert"><img src="${urls.siteIcons}/iconAlert.png" width="24" height="24" alert="Error alert icon"/>
                     <p>${errorMessage}</p>
                 </div>
             </#if>
            
-            <form id="log-in-form" action="${formAction}" method="post" name="log-in-form" />
+            <form role="form" id="log-in-form" action="${formAction}" method="post" name="log-in-form" required />
                 <label for="newPassword">New Password</label>
-                <input id="newPassword" class="focus" type="password" name="newPassword"  />
+                <input id="newPassword" class="focus" type="password" name="newPassword"  required />
+                
                 <p class="passwordNote">Minimum of 6 characters in length.</p>
+                
                 <label for="confirmPassword">Confirm Password</label>
                 <input id="confirmPassword" type="password" name="confirmPassword"  />
-                <input name="passwordChangeForm" type="submit" class="submit" value="Save Changes"/> <span class="or">or <a class="cancel" href="${cancelUrl}">Cancel</a></span>
+                
+                 <p class="submit"><input name="passwordChangeForm" type="submit" class="green button" value="Log in"/> <span class="or">or <a class="cancel" href="${cancelUrl}">Cancel</a></span></p>
             </form>
     </section>
 </#macro>