Implementation of login page design

share/jupyter/hub/static/less/login.less

@@ -1,17 +1,13 @@
 #login-main {
     form {
         margin: 8px auto;
-        width: 400px;
-        padding: 50px;
-        border: 1px solid #ccc;
+        margin-top: 20%;
+        width: 350px;
         font-size: large;
     }
     
-    * {
-        border-radius: 0px;
-    }
 
-    .input-group, input, button {
+    .input-group, input[type=text], button {
         width: 100%;
     }
 
@@ -27,7 +23,49 @@
         margin-top: -1px;
     }
     
-    button[type=submit] {
+    input[type=submit] {
         margin-top: 16px;
     }
 }
+
+
+.message {
+    color:orangered;
+    font-weight:bold;
+    margin:0 1em 1em 1em;
+    text-align: center;
+}
+
+.auth-form-header {
+    position: relative;
+    padding: 10px 20px;
+    margin: 0;
+    color: #fff;
+
+    background: @brand-primary; /* Old browsers */
+    background: linear-gradient(to bottom,  @brand-primary 0%, #F60 100%); /* W3C */
+
+
+    border-radius: 4px 4px 0 0;
+}
+
+form {
+    border-radius: 4px;
+    border: none;
+}
+
+.auth-form-header h1 {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: 16px;
+    border:none;
+}
+
+
+.auth-form-body {
+    padding: 20px;
+    font-size: 14px;
+    border: thin silver solid;
+    border-top:none;
+    border-radius: 0 0 4px 4px;
+}

share/jupyter/hub/static/less/logout.less

@@ -1,5 +1,5 @@
 div.logout-main {
-  margin: 2em;
+  margin: auto;
   text-align: center;
 }
 

share/jupyter/hub/static/less/variables.less

@@ -0,0 +1,6 @@
+@brand-primary:   #ff9000;
+@input-border-focus: @brand-primary;
+
+
+
+

share/jupyter/hub/templates/login.html

@@ -10,23 +10,46 @@
 {{custom_html}}
 {% else %}
   <form action="{{login_url}}?next={{next}}" method="post" role="form">
-        <div class="input-group">
-          <span class="input-group-addon">Username:</span>
-          <input type="username" class="form-control" name="username" id="username_input" val="{{username}}">
+        <div class="auth-form-header">
+            <h1>Sign in</h1>
         </div>
-        <div class="input-group pwd-group">
-          <span class="input-group-addon">Password:</span>
-          <input type="password" class="form-control" name="password" id="password_input">
-        </div>
-        <button type="submit" id="login_submit" class="btn btn-default">Log in</button>
-  </form>
-  {% if message %}
-  <div class="row">
-    <div class="message">
-      {{message}}
+        <div class='auth-form-body'>
+          {% if message %}
+            <div class="message">
+              {{message.error}}
+            </div>
+          {% endif %}
+          <label           for="username_input">Username:</label>
+          <input          
+                            id="username_input"
+                          type="username" 
+                autocapitalize="off" 
+                   autocorrect="off" 
+                         class="form-control"
+                          name="username"
+                           val="{{username}}"
+                      tabindex="1"
+                      autofocus="autofocus"
+                      />
+            <label 
+                            for='password_input'    >Password:
+                            <!--<a href="/password_reset">(forgot password)</a>-->
+            </label>
+            <input 
+                           type="password" 
+                          class="form-control"
+                           name="password"
+                            id="password_input"
+                      tabindex="2"/>
+
+             <input       type="submit"
+                           id="login_submit"
+                        class='btn btn-default btn-primary'
+                        value='Sign In'
+                      tabindex="3"
+                         />
     </div>
-  </div>
-  {% endif %}
+  </form>
 {% endif %}
 </div>