From fbb07525186853dc564c2d2f9c5d46445e0b4bff Mon Sep 17 00:00:00 2001
From: Thibault Cohen <titilambert@gmail.com>
Date: Tue, 30 Jun 2015 10:10:47 -0400
Subject: [PATCH] Rework Login page

Change-Id: If4f8625d491f0b65aaeb004b034041dc793dbb94
---
 app/assets/sass/temporary.scss                | 83 ++++++++++++++++++-
 .../authentication/authentication.html        | 25 ++++--
 2 files changed, 99 insertions(+), 9 deletions(-)

diff --git a/app/assets/sass/temporary.scss b/app/assets/sass/temporary.scss
index a3247f9..6491be9 100644
--- a/app/assets/sass/temporary.scss
+++ b/app/assets/sass/temporary.scss
@@ -208,5 +208,86 @@ div.ui-pnotify {
     .color-scheme--light & {
         background-color:$_color_light_alpha;
     }
-
+}
+
+// Login
+
+.login_page {
+    text-align: center;
+    position: fixed;
+    height: 100%;
+
+    .color-scheme--dark & {
+        background-color:$_color_dark_alpha;
+    }
+
+    .color-scheme--light & {
+        background-color:$_color_light_alpha;
+    }
+}
+
+.login_page .sidebar__applogo {
+    width: 70%;
+    margin-bottom: 28px;
+}
+
+.login_page form#loginForm {
+    padding: 20px 25px 5px 25px;
+    margin: 25px;
+    text-align: left;
+    .color-scheme--dark & {
+        background-color:$_color_dark_gamma;
+    }
+
+    .color-scheme--light & {
+        background-color:$_color_light_gamma;
+    }
+}
+
+
+.login_page form#loginForm  label {
+    .color-scheme--dark & {
+        color:$_color_omega;
+    }
+    .color-scheme--light & {
+        color:$_color_dark_alpha;
+    }
+}
+
+.login_page form#loginForm input {
+    float: inherit;
+    width: 500px;
+    border: none;
+    padding: 0.8em;
+    margin: 10px 0px 0px 0px;
+    outline: 0;
+    .color-scheme--dark & {
+        background-color:$_color_dark_beta;
+        color:$_color_omega;
+    }
+    .color-scheme--light & {
+        background-color:$_color_light_beta;
+        color:$_color_dark_alpha;
+    }
+}
+
+
+.login_page form#loginForm .md-raised {
+    .color-scheme--dark & {
+        background-color:$_color_dark_alpha;
+        color:$_color_omega;
+    }
+    .color-scheme--light & {
+        background-color:$_color_light_alpha;
+        color:$_color_dark_alpha;
+    }
+}
+.login_page form#loginForm .md-button {
+    margin-right: 0px;
+}
+
+
+.login_page form#loginForm #submitButton {
+    padding-top: 10px;
+    text-align: right;
 }
diff --git a/app/components/authentication/authentication.html b/app/components/authentication/authentication.html
index 52dd954..c5641d8 100644
--- a/app/components/authentication/authentication.html
+++ b/app/components/authentication/authentication.html
@@ -1,31 +1,40 @@
-<div class="centered">
+<div class="login_page layout__main">
+  <div class="centered panes__pane">
     <br>
     <br>
     <img class="sidebar__applogo" ng-src="assets/images/surveil-{{themeColor}}-horizontal.svg">
 
     <br>
-    <form name="loginForm"
-       ng-controller="LoginController"
-    ng-submit="login(credentials)" novalidate>
+    <form name="loginForm" id="loginForm"
+        ng-controller="LoginController"
+        ng-submit="login(credentials)" novalidate>
 
         <div class="form-group">
             <label for="username" class="label">Username:</label>
-            <input type="text" id="username" class="form-control field"
-                      ng-model="credentials.auth.passwordCredentials.username">
+            <input type="text" id="username"  class="form-control field"
+                    placeholder="Enter your username..."
+                    ng-model="credentials.auth.passwordCredentials.username">
         </div>
 
+
         <div class="form-group">
             <label for="password" class="label">Password:</label>
             <input type="password" class="form-control field" id="password"
-                          ng-model="credentials.auth.passwordCredentials.password">
+                    placeholder="Enter your password..."
+                    ng-model="credentials.auth.passwordCredentials.password">
         </div>
 
         <div class="form-group">
             <label for="tenantName" class="label">Tenant Name:</label>
             <input type="text" id="tenant-name"class="form-control field"
+                    placeholder="Enter your tenant name..."
                       ng-model="credentials.auth.tenantName">
         </div>
 
-        <button type="submit">Login</button>
+        <div class="form-group" id="submitButton" >
+            <md-button type="submit" class="md-raised">Log in</md-button>
+        </div>
+
     </form>
+  </div>
 </div>