NIHVIVO-1492: Style external authentication in the VITRO core when active

webapp/web/css/login.css

@@ -42,6 +42,25 @@ p.request-account {
 }
 #login-form p.external-auth {
     margin-left: 36px;
+    margin-top: 1em;
+}
+.or-auth{
+    margin-left: 135px;
+    width: 30px;
+    height: 30px;
+    background: #fff 0 0 url(../images/login-or.png) no-repeat;
+    margin-bottom: 0;
+    padding-left: 8px;
+    padding-top: 5px;
+    color: #fff;
+    font-size: .8em;
+}
+h3.internal-auth{
+    margin-left: 38px;
+    color: #5F6464;
+    font-size: 1em;
+    margin-bottom: 0;
+    padding-bottom: 0;
 }
 #error-alert{
     color: #900;

webapp/web/js/login/loginUtils.js

@@ -9,10 +9,9 @@ $(document).ready(function(){
     $('.focus').focus();
     
     // fade out error alerts
-    //$('#error-alert').css('display', 'none');
-    //$('#error-alert).fadeIn(500);
+    $('section#error-alert').css('display', 'none').fadeIn(1500);
+    
+    // fade out fash-message when user log out
+    $('section#flash-message').css('display', 'none').fadeIn(1500);   
     
 });
-
-
-

webapp/web/templates/freemarker/widgets/widget-login.ftl

@@ -29,12 +29,22 @@
         </#if>
        
         <#if errorMessage??>
-            <div id="error-alert"><img src="${urls.images}/iconAlert.png" alert="Error alert icon"/>
+            <section id="error-alert" role="alert"><img src="${urls.images}/iconAlert.png" alert="Error alert icon" />
                 <p>${errorMessage}</p>
-            </div>
+            </section>
         </#if>
        
         <form  role="form" id="login-form" action="${formAction}" method="post" name="login-form" />
+            <#if externalAuthUrl??>
+                <p class="external-auth">
+                    <a class="blue button" href="${externalAuthUrl}">${externalAuthName}</a>
+                </p>
+                
+            </#if>
+            <p class="or-auth">or</p>
+            
+            <h3 class="internal-auth" >Login using a different account</h3>
+            
             <label for="email">Email</label>
             <input class="text-field" name="loginName" id="loginName" type="text" value="${loginName!}" required />
 
@@ -48,13 +58,6 @@
             <#-- mb863: forgot password and request an account won't be part of VIVO r1.2
             <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> -->                       
-                            
-            <#if externalAuthUrl??>
-                <p class="external-auth">
-                    <a class="green button" href="${externalAuthUrl}">${externalAuthName}</a>
-                </p>
-            </#if>
-
         </form>
 
     </section><!-- #log-in -->