Replaced jQuery UI login dialog with home-grown login.

- New login hides the entire underlying page when open.
- Fits the current design.

www/css/ts-screen.css

@@ -33,31 +33,6 @@ input {
     height: 32px;
     width: 100%; }
 
-#user {
-  font-family: "Josefin Sans";
-  margin-top: -0.3em;
-  padding: 0 2em;
-  margin-top: -0.3rem;
-  padding: 0 2rem;
-  width: 100%; }
-  #user .fullname, #user .username {
-    display: inline-block;
-    font-size: larger; }
-  #user .fullname-input {
-    display: none; }
-  #user.edit-fullname .fullname-input {
-    display: inline-block; }
-  #user.edit-fullname .fullname {
-    display: none; }
-  #user .drop-menu {
-    display: inline-block; }
-  #user .drop-menu .drop-menu-items {
-    margin-top: -0.5em;
-    text-align: right;
-    right: 0;
-    list-style: none;
-    width: 10em; }
-
 #timeline {
   border-bottom: thin solid #eeeeee;
   font-family: Arvo;
@@ -92,6 +67,70 @@ input {
       #timeline .drop-menu .drop-menu-items .timeline-link {
         font-size: medium; }
 
+#login {
+  background: white;
+  color: #eeeeee;
+  opacity: 1;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100em;
+  z-index: 10; }
+  #login div.container {
+    background: #222222;
+    border-radius: 10px;
+    font-family: Cantarell;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 4em;
+    padding: 1em;
+    width: 20em; }
+    #login div.container h2 {
+      border-bottom: thin solid #eeeeee;
+      font-family: Arvo;
+      padding-bottom: 0.5em;
+      margin-bottom: 0.5em; }
+    #login div.container label {
+      display: inline-block;
+      width: 6em; }
+    #login div.container input {
+      color: #222222; }
+    #login div.container #login-button {
+      text-align: right;
+      margin-top: 0.5em;
+      font-family: Arvo;
+      font-size: 1.2em; }
+      #login div.container #login-button .validate-tips {
+        font-size: 1em; }
+      #login div.container #login-button a {
+        color: #eeeeee; }
+
+#user {
+  font-family: "Josefin Sans";
+  margin-top: -0.3em;
+  padding: 0 2em;
+  margin-top: -0.3rem;
+  padding: 0 2rem;
+  width: 100%; }
+  #user .fullname, #user .username {
+    display: inline-block;
+    font-size: larger; }
+  #user .fullname-input {
+    display: none; }
+  #user.edit-fullname .fullname-input {
+    display: inline-block; }
+  #user.edit-fullname .fullname {
+    display: none; }
+  #user .drop-menu {
+    display: inline-block; }
+  #user .drop-menu .drop-menu-items {
+    margin-top: -0.5em;
+    text-align: right;
+    right: 0;
+    list-style: none;
+    width: 10em; }
+
 #entry-list {
   margin-top: 6em;
   padding-bottom: 1em;
@@ -172,3 +211,6 @@ input {
   font-family: Bentham;
   text-decoration: overline underline;
   color: inherit; }
+
+.hidden {
+  display: none; }

www/css/ts-screen.scss

@@ -21,6 +21,7 @@ body {
     color: $darkTxt;
     width: 75%;
     margin: auto;
+
 }
 
 input {
@@ -47,40 +48,6 @@ input {
     }
 }
 
-#user {
-
-    font-family: "Josefin Sans";
-    margin-top: -0.3em; // IE fix
-    padding: 0 2em;
-    margin-top: -0.3rem;
-    padding: 0 2rem;
-    width: 100%;
-
-    .fullname, .username {
-        display: inline-block;
-        font-size: larger;
-    }
-
-    .fullname-input { display: none; }
-
-    &.edit-fullname{
-        .fullname-input { display: inline-block; }
-        .fullname { display: none; }
-    }
-
-    .drop-menu { display: inline-block; }
-
-    .drop-menu .drop-menu-items {
-        margin-top: -0.5em;
-        text-align: right;
-        right: 0;
-        list-style: none;
-        width: 10em;
-    }
-
-
-}
-
 #timeline {
 
     border-bottom: thin solid $lightBg;
@@ -127,6 +94,97 @@ input {
     }
 }
 
+#login {
+
+    background: white;
+    color: $lightTxt;
+    opacity: 1;
+
+    position: fixed;
+    top: 0px;
+    left: 0px;
+
+    width: 100%;
+    height: 100em;
+
+    z-index: 10;
+    
+    div.container {
+
+        background: $darkBg;
+        border-radius: 10px;
+        font-family: Cantarell;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 4em;
+        padding: 1em;
+        width: 20em;
+        
+        h2 {
+            border-bottom: thin solid $lightBg;
+            font-family: Arvo;
+            padding-bottom: 0.5em;
+            margin-bottom: 0.5em;
+        }
+
+        label {
+            display: inline-block;
+            width: 6em;
+        }
+
+        input {
+            color: $darkTxt;
+        }
+
+        #login-button {
+
+            text-align: right;
+            margin-top: 0.5em;
+
+            font-family: Arvo;
+            font-size: 1.2em;
+
+            .validate-tips { font-size: 1em; }
+
+            a { color: $lightBg; }
+        }
+    }
+}
+
+#user {
+
+    font-family: "Josefin Sans";
+    margin-top: -0.3em; // IE fix
+    padding: 0 2em;
+    margin-top: -0.3rem;
+    padding: 0 2rem;
+    width: 100%;
+
+    .fullname, .username {
+        display: inline-block;
+        font-size: larger;
+    }
+
+    .fullname-input { display: none; }
+
+    &.edit-fullname{
+        .fullname-input { display: inline-block; }
+        .fullname { display: none; }
+    }
+
+    .drop-menu { display: inline-block; }
+
+    .drop-menu .drop-menu-items {
+        margin-top: -0.5em;
+        text-align: right;
+        right: 0;
+        list-style: none;
+        width: 10em;
+    }
+
+
+}
+
 #entry-list {
     
     margin-top: 6em;
@@ -239,3 +297,5 @@ input {
     text-decoration: overline underline;
     color: inherit;
 }
+
+.hidden { display: none; }

www/index.yaws

@@ -3,7 +3,6 @@
     <head>
         <title>TimeStamper - Simple Time Tracking</title>
         <link href='http://fonts.googleapis.com/css?family=Arvo|Bentham|Cuprum|Cantarell|Geo|Josefin+Sans' rel='stylesheet' type='text/css'>
-        <link rel="stylesheet" media="screen" href="/css/dot-luv/jquery-ui-1.8.10.custom.css" type="text/css"/>
         <link rel="stylesheet" media="screen" href="/css/ts-screen.css" type="text/css"/>
         <!-- Needed for IE, but I'm not sure if I'm going to support IE with this tool. -->
         <!--<script type="text/javascript" src="/js/json2.js"></script>-->
@@ -14,7 +13,6 @@
         -->
         <!-- DEV  -->
         <script type="text/javascript" src="/js/jquery-1.5.js"></script>
-        <script type="text/javascript" src="/js/jquery-ui-1.8.10.custom.min.js"></script>
 
         <script type="text/javascript" src="/js/underscore.js"></script>
         <script type="text/javascript" src="/js/ICanHaz.js"></script>
@@ -96,13 +94,29 @@ out(YArg) ->
 
     <body>
 
+        <!-- == LOGIN FORM == -->
+        <div id="login" class="hidden">
+            <div class="container">
+                <h2>Login</h2>
+                <div><label>Username: </label><input type="text" id="username-input"></input></div>
+                <div><label>Password: </label><input type="password" id="password-input"></input></div>
+                <div id="login-button">
+                    <span class='validate-tips'></span>
+                    <a href="#">login</a>
+                </div>
+            </div>
+        </div>
+
         <div id="top">
 
             <!-- == TIMELINE == -->
-            <div id="timeline"><!-- rendered by app --></div>
+            <div id="timeline"><!-- replaced on login by app -->
+                <div class="timeline-desc">Login</div>
+            </div>
 
             <!-- == USER == -->
-            <div id="user"><!-- rendered by app --></div>
+            <div id="user"><!-- replaced on login by app -->
+            </div>
 
         </div>
 
@@ -120,20 +134,6 @@ out(YArg) ->
             Copyright 2011 <a href="http://www.jdb-labs.com"><span class="logo">JDB Labs</span> LLC.</a>
         </div>
 
-        <div id="login-dialog" title="Login">
-            <form>
-                <fieldset>
-                    <label for="login-name">Username:</label>
-                    <input type="text" name="login-name" id="login-name"
-                        class="text ui-widget-content ui-corner-all"></input>
-                    <label for="login-password">Password:</label>
-                    <input type="password" name="login-password" id="login-password"
-                        class="text ui-widget-content ui-corner-all"></input>
-                </fieldset>
-            </form>
-            <p class="validate-tips"></p>
-        </div>
-
     </body>
 
 </html>

www/js/ts.js

@@ -348,7 +348,7 @@ $(document).ready(function(){
         loadInitialData: function() {
             // assume we are authenticated
 
-            var username = $("#login-name").val(); // hackish
+            var username = $("#username-input").val(); // hackish
             var data = jQuery.parseJSON($.ajax({
                 url: '/ts_api/app/user_summary/' + username,
                 async: false}).responseText);
@@ -365,32 +365,30 @@ $(document).ready(function(){
     });
 
     TS.LoginView = Backbone.View.extend({
-        el: $("#login-dialog"),
+        el: $("#login"),
+
+        events: {
+            "keypress #password-input"  : "loginOnEnter",
+            "click #login-button a"     : "doLogin"
+        },
 
         initialize: function() {
-            _.bindAll(this, 'doLogin', 'authenticate');
+            _.bindAll(this, 'authenticate', 'doLogin', 'hide', 'loginOnEnter',
+                            'show');
 
-            var viewThis = this;
-            $(this.el).dialog({
-                autoOpen: false,
-                height: 400,
-                width: 400,
-                modal: true,
-                buttons: { Login: viewThis.doLogin}
-            });
         },
 
         action: function() {},
 
         authenticate: function(nextAction) {
             this.action = nextAction;
-            $(this.el).dialog("open");
+            this.show();
         },
 
         doLogin: function(){
             var viewThis = this;
-            var name = $("#login-name");
+            var name = this.$("#username-input");
-            var pwd = $("#login-password");
+            var pwd = $("#password-input");
 
             // call the API via AJAX
             $.ajax({
@@ -405,15 +403,25 @@ $(document).ready(function(){
                     // we should check that, FIXME
                     var tips = $(".validate-tips");
                     tips.text("Incorrect username/password combination.");
-                    tips.addClass("ui-state-error");
                     tips.slideDown();
                 },
 
                 success: function(data, textStatus, jqXHR) {
-                    $(viewThis.el).dialog("close");
+                    viewThis.hide();
-                    viewThis.action()
+                    viewThis.action();
                 }
             });
+        },
+
+        hide: function() { $(this.el).addClass('hidden'); },
+
+        show: function() {
+            $(this.el).removeClass('hidden');
+            this.$("#username-input").focus();
+        },
+
+        loginOnEnter: function(e) {
+            if (e.keyCode == 13) { this.doLogin(); }
         }
     });