Improve login page

media/css/seahub.css

@@ -165,16 +165,28 @@ ol { padding-left:2em; }
 dl { margin:1.5em 0; }
 dt { color:#666; margin:24px 0 2px; }
 dd { margin-bottom:.8em; color:#222; }
-a { color:#eb8205; text-decoration:none; font-weight:bold; outline:none; }
+a {
+    color:#eb8205;
+    text-decoration:none;
+    font-weight:bold;
+}
 a.normal {font-weight: normal;}
-a:hover { color: #ff9933; text-decoration: underline; }
+a:focus, a:hover {
+    color: #ff9933;
+    text-decoration: underline;
+}
+a:focus {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
 img { border:none; }
 textarea {
     overflow: auto; /* rm default vertical scrollbar in ie */
     resize: vertical; /* for drag */
     outline:0;
 }
-textarea, input { border: 1px solid #ddd; }
+textarea, input { border: 1px solid #ccc; }
 input { height:22px; margin:3px 0; outline:0; }
 input, button { display:inline-block;/*for ie*/ }
 input[type=submit],
@@ -220,6 +232,10 @@ input[type=radio] {
     height:auto;
     border:0;/*for ie*/
 }
+input:focus {
+  border-color: #66afe9;
+  outline: none;
+}
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {/*for input type="number" in chrome: to hide up/download arrow*/
     -webkit-appearance: none;
@@ -230,6 +246,25 @@ button::-moz-focus-inner {/*Remove button padding in FF*/
     border: 0;
     padding: 0;
 }
+input[type=submit],
+input.submit,
+button.submit {
+    margin-top:8px;
+}
+input[type=submit]:hover,
+input[type=reset]:hover,
+input[type=button]:hover,
+button:hover,
+.btn-link:hover,
+.fileinput-button:hover {
+    cursor:pointer;
+    background:#fff;
+}
+input[type="file"] {
+    border:none;
+    height:24px;
+    line-height:24px;
+}
 ::-webkit-scrollbar {
     height: 9px;
     width: 9px;
@@ -259,25 +294,6 @@ button::-moz-focus-inner {/*Remove button padding in FF*/
     border-radius: 5px;
     display: block;
 }
-input[type=submit],
-input.submit,
-button.submit {
-    margin-top:8px;
-}
-input[type=submit]:hover,
-input[type=reset]:hover,
-input[type=button]:hover,
-button:hover,
-.btn-link:hover,
-.fileinput-button:hover {
-    cursor:pointer;
-    background:#fff;
-}
-input[type="file"] {
-    border:none;
-    height:24px;
-    line-height:24px;
-}
 label {
     display: inline-block;
     margin:4px 0px;
@@ -303,9 +319,6 @@ td, th { padding:5px 3px; word-wrap:break-word; border-bottom:1px solid #eee; }
 td { color: #333; font-size:14px; }
 table img { vertical-align:middle; }
 p { margin:0.5em 0; }
-:focus {/* to overwrite user agent stylesheet */
-    outline:none;
-}
 
 /********** common class ***********/
 .hl { background-color: #f8f8f8; }/*highlight*/
@@ -869,8 +882,6 @@ textarea:-moz-placeholder {/* for FF */
 }
 .new-narrow-panel .input {
     font-size:14px;
-    border-color:#c7c7c7;
-    box-shadow:inset 0 1px 1px #f1f1f1;
     margin:5px 0 20px;
 }
 /**** wide panel ****/ /* e.g. repo decrypt page */

seahub/templates/base.html

@@ -100,7 +100,7 @@
                 </div>
                 {% else %} {# for non-logged-in user #}
                 <div class="fright" id="lang">
-                    <a href="#" id="lang-context" data-lang="{{ LANGUAGE_CODE }}">{{ LANGUAGE_CODE|language_name_local }} <span class="icon-caret-down"></span></a>
+                    <a href="#" id="lang-context" title="language selector" data-lang="{{ LANGUAGE_CODE }}">{{ LANGUAGE_CODE|language_name_local }} <span class="icon-caret-down"></span></a>
                     <ul id="lang-context-selector" class="hide">
                         {% for LANG in LANGUAGES %}
                         <li><a href="{% url 'i18n' %}?lang={{ LANG.0 }}">{{ LANG.1 }}</a></li>
@@ -161,7 +161,7 @@ function ajaxErrorHandler(xhr, textStatus, errorThrown) {
         feedback($.parseJSON(xhr.responseText).error||$.parseJSON(xhr.responseText).error_msg, 'error');
     } else {
         feedback("{% trans "Failed. Please check the network." %}", 'error');
-    }    
+    }
 }
 {% if request.user.is_authenticated %}
 {% if request.cur_note %}
@@ -206,7 +206,7 @@ $('#info-bar .close').click(function() {
     lang_context.click(function() {
         lang_selector.toggleClass('hide');
         return false;
-    }).focus(function() { $(this).blur(); });
+    });
 
     $(document).click(function(e) {
         var element = e.target || e.srcElement;

seahub/templates/registration/login.html

@@ -8,10 +8,10 @@
 <h2 class="hd">{% trans "Log In" %}</h2>
 <form action="" method="post" class="con">{% csrf_token %}
     <label for="login">{% trans "Email or Username" %}</label>
-        <input type="text" name="login" value="" class="input" />
+        <input type="text" name="login" id="login" value="" class="input" />
 	<label for="password">{% trans "Password" %}</label>
 	<a href="{{ SITE_ROOT }}accounts/password/reset/">{% trans "(forgot password)" %}</a>
-	<input type="password" name="password" value="" class="input" autocomplete="off" />
+	<input type="password" name="password" id="password" value="" class="input" autocomplete="off" />
     {% if form.captcha %}
     <label>{% trans "CAPTCHA" %}</label><br />
     {{ form.captcha }}
@@ -66,7 +66,7 @@ $('#refresh-captcha').click(function() {
         dataType:'json',
         cache:false,
         success: function(data) {
-            $('.captcha').attr('src', data['image_url']); 
+            $('.captcha').attr('src', data['image_url']);
             $('#id_captcha_0').val(data['key']);
         },
         error: function() {