From 5aa80d79c1b10386a8a6f073ae74cce8f7b44d45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Mon, 23 Jun 2014 15:29:50 +0200
Subject: [PATCH] Login error message

---
 app/partials/login.jade            |  7 +++++-
 app/styles/components/buttons.scss |  8 +++++++
 app/styles/layout/login.scss       | 35 ++++++++++++++++++++++++++++--
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/app/partials/login.jade b/app/partials/login.jade
index 6fa732c9..a1f1d0f3 100644
--- a/app/partials/login.jade
+++ b/app/partials/login.jade
@@ -1,3 +1,4 @@
+//-extends layout
 extends login-layout
 
 block head
@@ -10,9 +11,13 @@ block content
                 h1.logo
                     img(src="/images/logo.png", alt="TAIGA")
                 p.tagline Project management web application with scrum in the mind!
+                p.login-error
+                    span.title Ooops! Something went wrong!
+                    span.text According to our Oompa Loompas, your username or password are incorrect.
+                    a.icon.icon-delete(href="", title="Close message")
                 form(ng-submit="ctrl.submit()")
                     input(type="text", name="username", ng-model="form.username", placeholder="User name")
                     input(type="password", name="password", ng-model="form.password")
                     a.button.button-login.button-gray(href="", title="Log in") Log in
-                    a.button.button-signup(href="", title="Log in") Sign up
+                    a.button.button-signup.button-orange(href="", title="Log in") Sign up
                     input(type="submit", value="I am an horrible button to be deleted. Click me to login for the moment")
diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss
index acc18fa6..55f29807 100755
--- a/app/styles/components/buttons.scss
+++ b/app/styles/components/buttons.scss
@@ -54,6 +54,14 @@
     }
 }
 
+.button-orange {
+    background: $orange;
+    &:hover {
+        background: lighten($orange, 10%);
+        color: $white;
+    }
+}
+
 a.button-block {
     background: $white;
     color: $red;
diff --git a/app/styles/layout/login.scss b/app/styles/layout/login.scss
index 5f57cdf3..3de9d204 100644
--- a/app/styles/layout/login.scss
+++ b/app/styles/layout/login.scss
@@ -23,6 +23,7 @@
         line-height: 2rem;
     }
     input {
+        background: $white;
         margin-bottom: 1rem;
     }
     .button-login,
@@ -32,7 +33,37 @@
         margin-bottom: .5rem;
         text-align: center;
     }
-    .button-signup {
-        background: $orange;
+    .button-login {
+        &:hover {
+            background: $green-taiga;
+        }
+    }
+}
+
+.login-error {
+    background: $red;
+    border-radius: 4px;
+    color: $white;
+    padding: 1rem;
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    width: 20%;
+    span {
+        display: block;
+    }
+    .title {
+        @extend %large;
+        font-family: 'DroidSans-bold';
+    }
+    .icon-delete {
+        color: $red-light;
+        position: absolute;
+        right: .5rem;
+        top: .5rem;
+        &:hover {
+            @include transition(color .3s linear);
+            color: $white;
+        }
     }
 }