Form validation on login page

Using ngMessages, adds form validation to login page. Also creates a
directive, hasError, to be used to validate form field by passing
in a boolean. This is a proposed pattern to be used moving forward,
as form validation is added to additional pages.

Validation error messages are shown on $touched and on submit.
Unreachable Server and Invalid username and password error messages
remain until input is no longer $pristine after form submission.

In addition, this removes unneeded and unused css styling

Resolves openbmc/phosphor-webui#47

Change-Id: I7a067af67ac74d4cf2977d10f66445720ecae9eb
Signed-off-by: beccabroek <beccabroek@gmail.com>

3 files changed, 6 insertions, 74 deletions

diff --git a/app/common/styles/elements/alerts.scss b/app/common/styles/elements/alerts.scss
index 96f0a4c..6242257 100644
--- a/app/common/styles/elements/alerts.scss
+++ b/app/common/styles/elements/alerts.scss
@@ -1,67 +1,11 @@
 //Fixed alerts
 
-.alert__error,
-.alert__warning,
-.alert__message {
-  color: $darkbg__primary;
-  padding: 1em;
-  margin: .5em 0;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  .close {
-    color: $lightbg__primary;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 1.5em;
-    padding: 1em;
-    box-sizing: border-box;
-    line-height: 0;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    background: transparent;
-    border: 0;
-    margin: 0;
-    &:hover {
-      color: $lightbg__accent;
-    }
-  }
-}
-
-.alert__error {
-  background: $alert__error;
-
-}
-
-.alert__warning {
-  background: $alert__warning;
-
-}
-.alert__message {
-  background: $alert__message;
-}
-
-// Power confirmation buttons
-.power__confirm-buttons {
-  .btn-primary {
-    background: transparent;
-    border: 2px solid $white;
-    padding: 1em 2.2em;
-    margin: 0 10px;
-    border-radius: 4px;
-    &:focus,
-    &:hover {
-      background: $primebtn__bg;
-      border: 2px solid $primebtn__bg;
-    }
-  }
-  @include mediaQuery(large) {
-    float: right;
-  }
+.alert-danger{
+  background-color: $alert__danger;
+  border-color: $critical-lightbg;
+  border-radius: 0;
+  color: #333;
+  text-align: left;
 }
 
 
diff --git a/app/common/styles/elements/errors.scss b/app/common/styles/elements/errors.scss
deleted file mode 100644
index 3076a3d..0000000
--- a/app/common/styles/elements/errors.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.error-msg  {
-  background: lighten($error-color, 20%);
-  padding: 1em;
-  text-align: center;
-  font-size: 1em;
-  border: 1px solid $error-color;
-  color: $black;
-  font-family: "Courier New", Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  max-width: 325px;
-}
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 3c5754e..25162bb 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -11,5 +11,4 @@
 @import "export";
 @import "modals";
 @import "quicklinks";
-@import "errors";
 @import "toast";