Added environment fields and ngMessages form validation

Michel Felipe
1 parent 74b67520
Showing 6 changed files with 56 additions and 24 deletions Show diff stats
src/app/account/register-component.html
src/app/account/register.component.ts
src/app/layout/scss/_forms.scss
src/languages/en.json
src/languages/messages.html
src/languages/pt.json
@@ -4,47 +4,60 @@
     <div class="environment-signup-intro" ng-bind-html="ctrl.environment.signup_intro"></div>
     <p>{{"account.register.seeMoreMessage" | translate}} <a href="#">{{"account.register.informationsMessage" | translate}} </a></p>
   </div>
-  <form>
+  <form name="signupForm">
     <div class="row">
-      <div class="col-md-6 register-field">
+      <div class="col-md-12 register-field">
         <div class="input-group">
           <span class="input-group-addon"><i class="fa fa-male"></i><i class="fa fa-female"></i></span>
-          <input type="text" class="form-control" id="name" placeholder="{{'account.register.firstNameLabel' | translate }}" ng-model="ctrl.account.name">
+          <input type="text" class="form-control" id="name" name="fullName" placeholder="{{'account.register.fullNameLabel' | translate }}" ng-model="ctrl.account.name">
         </div>
       </div>
  
-      <div class="col-md-6 register-field">
+      <div class="form-group col-md-12 register-field" ng-class="ctrl.isInvalid(signupForm.username)">
         <div class="input-group">
-          <span class="input-group-addon"><i class="fa fa-male"></i><i class="fa fa-female"></i></span>
-          <input type="text" class="form-control" id="lastName" placeholder="{{'account.register.lastNameLabel' | translate }}" ng-model="ctrl.account.lastName">
+          <span class="input-group-addon" style="font-weight: bold;"><i class="fa fa-globe"></i>&nbsp;{{ ctrl.environment.host }}</span>
+          <input type="text" id="username" name="username" class="form-control" placeholder="{{'account.register.usernameLabel' | translate }}" ng-model="ctrl.account.login" required>
         </div>
-      </div>
-
-      <div class="col-md-12 register-field">
-        <div class="input-group">
-          <span class="input-group-addon" style="font-weight: bold;"><i class="fa fa-globe"></i>&nbsp;http://ola.coop.br/</span>
-          <input type="text" class="form-control" id="login" placeholder="{{'account.register.usernameLabel' | translate }}" ng-model="ctrl.account.login">
+        <div class="help-block" ng-show="signupForm.username.$touched" ng-messages="signupForm.username.$error">
+          <ul class="list-unstyled">
+            <li ng-messages-include="languages/messages.html"></li>
+          </ul>
         </div>
       </div>
  
-      <div class="col-md-12 register-field">
+      <div class="form-group col-md-12 register-field" ng-class="ctrl.isInvalid(signupForm.email)">
         <div class="input-group">
           <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
-          <input type="text" class="form-control" id="email" placeholder="{{'account.register.emailLabel' | translate }}" ng-model="ctrl.account.email">
+          <input type="email" class="form-control" id="email" name="email" placeholder="{{'account.register.emailLabel' | translate }}" ng-model="ctrl.account.email" required>
+        </div>
+        <div class="help-block" ng-show="signupForm.email.$touched" ng-messages="signupForm.email.$error">
+          <ul class="list-unstyled">
+            <li ng-messages-include="languages/messages.html"></li>
+          </ul>
         </div>
       </div>
  
-      <div class="col-md-6 register-field">
+      <div class="form-group col-md-6 register-field" ng-class="ctrl.isInvalid(signupForm.password)">
         <div class="input-group">
           <span class="input-group-addon"><i class="fa fa-lock"></i></span>
-          <input type="password" class="form-control" id="password" placeholder="{{'account.register.passwordLabel' | translate }}" ng-model="ctrl.account.password">
+          <input type="password" class="form-control" id="password" name="password" placeholder="{{'account.register.passwordLabel' | translate }}" ng-model="ctrl.account.password" required>
+        </div>
+        <div class="help-block" ng-show="signupForm.password.$touched" ng-messages="signupForm.password.$error">
+          <ul class="list-unstyled">
+            <li ng-messages-include="languages/messages.html"></li>
+          </ul>
         </div>
       </div>
  
-      <div class="col-md-6 register-field">
+      <div class="form-group col-md-6 register-field" ng-class="ctrl.isInvalid(signupForm.passwordConfirm)">
         <div class="input-group">
           <span class="input-group-addon"><i class="fa fa-unlock-alt"></i></span>
-          <input type="password" class="form-control" id="passwordConfirmation" placeholder="{{'account.register.passwordConfirmationLabel' | translate}}" ng-model="ctrl.account.password_confirmation">
+          <input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm" placeholder="{{'account.register.passwordConfirmationLabel' | translate}}" ng-model="ctrl.account.password_confirmation" required>
+        </div>
+        <div class="help-block" ng-show="signupForm.passwordConfirm.$touched" ng-messages="signupForm.passwordConfirm.$error">
+          <ul class="list-unstyled">
+            <li ng-messages-include="languages/messages.html"></li>
+          </ul>
         </div>
       </div>
  
@@ -53,7 +66,7 @@
       </div>
  
       <div class="col-md-12">
-        <button type="submit" class="btn btn-default" ng-click="ctrl.signup()">{{"account.register.signupMessage" | translate}}</button>
+        <button type="submit" class="btn btn-default" ng-disabled="signupForm.$invalid" ng-click="ctrl.signup()">{{"account.register.signupMessage" | translate}}</button>
       </div>
  
     </div>
@@ -40,4 +40,8 @@ export class RegisterComponent {
             this.notificationService.error({ message: "account.register.passwordConfirmation.failed" });
         }
     }
+
+    isInvalid(field: Object): Object {
+        return { 'has-error': field['$touched'] && field['$invalid'] };
+    }
 }
@@ -2,6 +2,10 @@ label {
   cursor: pointer;
 }
  
+.has-error .help-block {
+  font-weight: bold;
+}
+
 .checkbox-nice {
 	position: relative;
 	padding-left: 15px;
@@ -105,8 +105,7 @@
   "account.register.welcomeMessageTitle": "Nice to have you there!",
   "account.register.seeMoreMessage": "See more ",
   "account.register.informationsMessage": "informations",
-  "account.register.firstNameLabel": "First name",
-  "account.register.lastNameLabel": "Last name",
+  "account.register.fullNameLabel": "Full name",
   "account.register.usernameLabel": "Username",
   "account.register.emailLabel": "Email",
   "account.register.passwordLabel": "Password",
@@ -117,5 +116,9 @@
   "account.register.termsOfUseMessage": "terms of use",
   "account.register.success.title": "Good job!",
   "account.register.success.message": "Account created!",
-  "account.register.passwordConfirmation.failed": "Wrong password confirmation"
+  "account.register.passwordConfirmation.failed": "Wrong password confirmation",
+  "messages.invalid.required": "This field is required",
+  "messages.invalid.maxlength": "This field is too long",
+  "messages.invalid.minlength": "This field is too short",
+  "messages.invalid.email": "This needs to be a valid email"
 }
@@ -0,0 +1,4 @@
+<li ng-message="required" translate="messages.invalid.required"></li>
+<li ng-message="minlength" translate="messages.invalid.minlength"></li>
+<li ng-message="maxlength" translate="messages.invalid.maxlength"></li>
+<li ng-message="email" translate="messages.invalid.email"></li>
@@ -105,7 +105,7 @@
   "account.register.welcomeMessage": "Ótimo ter você aqui!",
   "account.register.seeMoreMessage": "Saiba mais ",
   "account.register.informationsMessage": "informações",
-  "account.register.firstNameLabel": "Nome",
+  "account.register.fullNameLabel": "Nome completo",
   "account.register.lastNameLabel": "Sobrenome",
   "account.register.usernameLabel": "Nome de usuário",
   "account.register.emailLabel": "Email",
@@ -117,5 +117,9 @@
   "account.register.haveAccountMessage": "Já possui uma conta?",
   "account.register.success.title": "Bom trabalho!",
   "account.register.success.message": "Conta criada com sucesso!",
-  "account.register.passwordConfirmation.failed": "A confirmação de senha não corresponde à senha"
+  "account.register.passwordConfirmation.failed": "A confirmação de senha não corresponde à senha",
+  "messages.invalid.required": "Campo obrigatório",
+  "messages.invalid.maxlength": "O valor é muito longo",
+  "messages.invalid.minlength": "O valor é muito curto",
+  "messages.invalid.email": "Informe um email válido"
 }
...	...	@@ -4,47 +4,60 @@
4	4	<div class="environment-signup-intro" ng-bind-html="ctrl.environment.signup_intro"></div>
5	5	<p>{{"account.register.seeMoreMessage" \| translate}} <a href="#">{{"account.register.informationsMessage" \| translate}} </a></p>
6	6	</div>
7		- <form>
	7	+ <form name="signupForm">
8	8	<div class="row">
9		- <div class="col-md-6 register-field">
	9	+ <div class="col-md-12 register-field">
10	10	<div class="input-group">
11	11	<span class="input-group-addon"><i class="fa fa-male"></i><i class="fa fa-female"></i></span>
12		- <input type="text" class="form-control" id="name" placeholder="{{'account.register.firstNameLabel' \| translate }}" ng-model="ctrl.account.name">
	12	+ <input type="text" class="form-control" id="name" name="fullName" placeholder="{{'account.register.fullNameLabel' \| translate }}" ng-model="ctrl.account.name">
13	13	</div>
14	14	</div>
15	15
16		- <div class="col-md-6 register-field">
	16	+ <div class="form-group col-md-12 register-field" ng-class="ctrl.isInvalid(signupForm.username)">
17	17	<div class="input-group">
18		- <span class="input-group-addon"><i class="fa fa-male"></i><i class="fa fa-female"></i></span>
19		- <input type="text" class="form-control" id="lastName" placeholder="{{'account.register.lastNameLabel' \| translate }}" ng-model="ctrl.account.lastName">
	18	+ <span class="input-group-addon" style="font-weight: bold;"><i class="fa fa-globe"></i> {{ ctrl.environment.host }}</span>
	19	+ <input type="text" id="username" name="username" class="form-control" placeholder="{{'account.register.usernameLabel' \| translate }}" ng-model="ctrl.account.login" required>
20	20	</div>
21		- </div>
22		-
23		- <div class="col-md-12 register-field">
24		- <div class="input-group">
25		- <span class="input-group-addon" style="font-weight: bold;"><i class="fa fa-globe"></i> http://ola.coop.br/</span>
26		- <input type="text" class="form-control" id="login" placeholder="{{'account.register.usernameLabel' \| translate }}" ng-model="ctrl.account.login">
	21	+ <div class="help-block" ng-show="signupForm.username.$touched" ng-messages="signupForm.username.$error">
	22	+ <ul class="list-unstyled">
	23	+ <li ng-messages-include="languages/messages.html"></li>
	24	+ </ul>
27	25	</div>
28	26	</div>
29	27
30		- <div class="col-md-12 register-field">
	28	+ <div class="form-group col-md-12 register-field" ng-class="ctrl.isInvalid(signupForm.email)">
31	29	<div class="input-group">
32	30	<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
33		- <input type="text" class="form-control" id="email" placeholder="{{'account.register.emailLabel' \| translate }}" ng-model="ctrl.account.email">
	31	+ <input type="email" class="form-control" id="email" name="email" placeholder="{{'account.register.emailLabel' \| translate }}" ng-model="ctrl.account.email" required>
	32	+ </div>
	33	+ <div class="help-block" ng-show="signupForm.email.$touched" ng-messages="signupForm.email.$error">
	34	+ <ul class="list-unstyled">
	35	+ <li ng-messages-include="languages/messages.html"></li>
	36	+ </ul>
34	37	</div>
35	38	</div>
36	39
37		- <div class="col-md-6 register-field">
	40	+ <div class="form-group col-md-6 register-field" ng-class="ctrl.isInvalid(signupForm.password)">
38	41	<div class="input-group">
39	42	<span class="input-group-addon"><i class="fa fa-lock"></i></span>
40		- <input type="password" class="form-control" id="password" placeholder="{{'account.register.passwordLabel' \| translate }}" ng-model="ctrl.account.password">
	43	+ <input type="password" class="form-control" id="password" name="password" placeholder="{{'account.register.passwordLabel' \| translate }}" ng-model="ctrl.account.password" required>
	44	+ </div>
	45	+ <div class="help-block" ng-show="signupForm.password.$touched" ng-messages="signupForm.password.$error">
	46	+ <ul class="list-unstyled">
	47	+ <li ng-messages-include="languages/messages.html"></li>
	48	+ </ul>
41	49	</div>
42	50	</div>
43	51
44		- <div class="col-md-6 register-field">
	52	+ <div class="form-group col-md-6 register-field" ng-class="ctrl.isInvalid(signupForm.passwordConfirm)">
45	53	<div class="input-group">
46	54	<span class="input-group-addon"><i class="fa fa-unlock-alt"></i></span>
47		- <input type="password" class="form-control" id="passwordConfirmation" placeholder="{{'account.register.passwordConfirmationLabel' \| translate}}" ng-model="ctrl.account.password_confirmation">
	55	+ <input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm" placeholder="{{'account.register.passwordConfirmationLabel' \| translate}}" ng-model="ctrl.account.password_confirmation" required>
	56	+ </div>
	57	+ <div class="help-block" ng-show="signupForm.passwordConfirm.$touched" ng-messages="signupForm.passwordConfirm.$error">
	58	+ <ul class="list-unstyled">
	59	+ <li ng-messages-include="languages/messages.html"></li>
	60	+ </ul>
48	61	</div>
49	62	</div>
50	63
...	...	@@ -53,7 +66,7 @@
53	66	</div>
54	67
55	68	<div class="col-md-12">
56		- <button type="submit" class="btn btn-default" ng-click="ctrl.signup()">{{"account.register.signupMessage" \| translate}}</button>
	69	+ <button type="submit" class="btn btn-default" ng-disabled="signupForm.$invalid" ng-click="ctrl.signup()">{{"account.register.signupMessage" \| translate}}</button>
57	70	</div>
58	71
59	72	</div>
...	...
...	...	@@ -40,4 +40,8 @@ export class RegisterComponent {
40	40	this.notificationService.error({ message: "account.register.passwordConfirmation.failed" });
41	41	}
42	42	}
	43	+
	44	+ isInvalid(field: Object): Object {
	45	+ return { 'has-error': field['$touched'] && field['$invalid'] };
	46	+ }
43	47	}
...	...
...	...	@@ -2,6 +2,10 @@ label {
2	2	cursor: pointer;
3	3	}
4	4
	5	+.has-error .help-block {
	6	+ font-weight: bold;
	7	+}
	8	+
5	9	.checkbox-nice {
6	10	position: relative;
7	11	padding-left: 15px;
...	...
...	...	@@ -105,8 +105,7 @@
105	105	"account.register.welcomeMessageTitle": "Nice to have you there!",
106	106	"account.register.seeMoreMessage": "See more ",
107	107	"account.register.informationsMessage": "informations",
108		- "account.register.firstNameLabel": "First name",
109		- "account.register.lastNameLabel": "Last name",
	108	+ "account.register.fullNameLabel": "Full name",
110	109	"account.register.usernameLabel": "Username",
111	110	"account.register.emailLabel": "Email",
112	111	"account.register.passwordLabel": "Password",
...	...	@@ -117,5 +116,9 @@
117	116	"account.register.termsOfUseMessage": "terms of use",
118	117	"account.register.success.title": "Good job!",
119	118	"account.register.success.message": "Account created!",
120		- "account.register.passwordConfirmation.failed": "Wrong password confirmation"
	119	+ "account.register.passwordConfirmation.failed": "Wrong password confirmation",
	120	+ "messages.invalid.required": "This field is required",
	121	+ "messages.invalid.maxlength": "This field is too long",
	122	+ "messages.invalid.minlength": "This field is too short",
	123	+ "messages.invalid.email": "This needs to be a valid email"
121	124	}
...	...
...	...	@@ -0,0 +1,4 @@
	1	+<li ng-message="required" translate="messages.invalid.required"></li>
	2	+<li ng-message="minlength" translate="messages.invalid.minlength"></li>
	3	+<li ng-message="maxlength" translate="messages.invalid.maxlength"></li>
	4	+<li ng-message="email" translate="messages.invalid.email"></li>
...	...
...	...	@@ -105,7 +105,7 @@
105	105	"account.register.welcomeMessage": "Ótimo ter você aqui!",
106	106	"account.register.seeMoreMessage": "Saiba mais ",
107	107	"account.register.informationsMessage": "informações",
108		- "account.register.firstNameLabel": "Nome",
	108	+ "account.register.fullNameLabel": "Nome completo",
109	109	"account.register.lastNameLabel": "Sobrenome",
110	110	"account.register.usernameLabel": "Nome de usuário",
111	111	"account.register.emailLabel": "Email",
...	...	@@ -117,5 +117,9 @@
117	117	"account.register.haveAccountMessage": "Já possui uma conta?",
118	118	"account.register.success.title": "Bom trabalho!",
119	119	"account.register.success.message": "Conta criada com sucesso!",
120		- "account.register.passwordConfirmation.failed": "A confirmação de senha não corresponde à senha"
	120	+ "account.register.passwordConfirmation.failed": "A confirmação de senha não corresponde à senha",
	121	+ "messages.invalid.required": "Campo obrigatório",
	122	+ "messages.invalid.maxlength": "O valor é muito longo",
	123	+ "messages.invalid.minlength": "O valor é muito curto",
	124	+ "messages.invalid.email": "Informe um email válido"
121	125	}
...	...