Merge pull request #43 from Carreau/better-login

improve login page styling

jupyterhub/handlers/pages.py

@@ -30,6 +30,7 @@ class RootHandler(BaseHandler):
 
 class HomeHandler(BaseHandler):
     """Render the user's home page."""
+
     @web.authenticated
     def get(self):
         html = self.render_template('home.html',
@@ -40,6 +41,7 @@ class HomeHandler(BaseHandler):
 
 class AdminHandler(BaseHandler):
     """Render the admin page."""
+
     @admin_only
     def get(self):
         html = self.render_template('admin.html',
@@ -48,8 +50,9 @@ class AdminHandler(BaseHandler):
         )
         self.finish(html)
 
+
 default_handlers = [
     (r'/', RootHandler),
     (r'/home', HomeHandler),
     (r'/admin', AdminHandler),
-]
+]

share/jupyter/static/less/login.less

@@ -0,0 +1,49 @@
+#login-main {
+     & >  form {
+        margin: 80px auto;
+        width: 400px;
+        padding: 50px;
+        margin-top: 8px;
+        border: 1px solid black;
+    }
+
+
+    & .input-group{
+        width:100%;
+    }
+
+    & .input-group-addon {
+        width:100px;
+        border-radius:0;
+    }
+
+    & .form-control{
+        font-size:large;
+    }
+
+    & input[type=username]
+    {
+        width:100%;
+        border-radius:0;
+    }
+
+    & input[type=password]{
+        width:100%;
+        margin-top:-1px;
+        border-radius:0;
+    }
+
+    & button[type=submit]{
+        margin-top:10px;
+        width:100%;
+    }
+
+    & input[type=password]:focus,input[type=username]:focus{
+        z-index: 5;
+    }
+
+    & #pwd-addon{
+        border-top:none;
+    }
+
+}

share/jupyter/static/less/style.less

@@ -24,3 +24,4 @@
 @import "./page.less";
 @import "./error.less";
 @import "./logout.less";
+@import "./login.less";

share/jupyter/templates/login.html

@@ -7,25 +7,19 @@
 
 <div id="login-main" class="container">
   <form action="{{login_url}}?next={{next}}" method="post" role="form">
-    <div class="row">
-      <div class="col-sm-6 col-sm-offset-3">
         <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>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-sm-6 col-sm-offset-3">
         <div class="input-group">
-          <span class="input-group-addon">Password:</span>
+          <span id='pwd-addon' class="input-group-addon">Password:</span>
           <input type="password" class="form-control" name="password" id="password_input">
+        </div>
+        <div class="input-group">
           <span class="input-group-btn">
             <button type="submit" id="login_submit" class="btn btn-default">Log in</button>
           </span>
         </div>
-      </div>
-    </div>
   </form>
   {% if message %}
   <div class="row">