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>
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index 0957609..73c25c1 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -21,13 +21,13 @@
border-radius: 0px;
border: 1px solid $input-border;
height: 3.1em;
- margin: 0 0 1em 0;
+ margin: 0;
background: $white;
box-shadow: 0 0 0;
transition: none !important;
&:focus {
border-color: $medgrey;
- box-shadow: 0 -5px $field__focus inset;
+ box-shadow: 0 -3px $field__focus inset;
}
&:disabled,
.disabled {
@@ -43,6 +43,33 @@
}
}
+//input validation
+.ng-invalid.ng-touched {
+ box-shadow: 0 -3px $error-color inset;
+ &:focus {
+ border-color: $medgrey;
+ box-shadow: 0 -3px $error-color inset;
+ }
+}
+.submitted .ng-invalid {
+ box-shadow: 0 -3px $error-color inset;
+ &:focus {
+ border-color: $medgrey;
+ box-shadow: 0 -3px $error-color inset;
+ }
+}
+
+.form-error {
+ margin-bottom: .7em;
+ font-size: 0.8rem;
+ color: #c60f13;
+ height:1rem;
+ display: block;
+ visibility: hidden;
+ .visible {
+ visibility: visible;
+ }
+}
//Foundation overwrite
[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea {
border-color: $input-border;