Added environment fields and ngMessages form validation

Michel Felipe · Michel Felipe · Daniela Feitosa
1 parent 8e4d0b18
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;
@@ -102,8 +102,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",
@@ -114,5 +113,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>
@@ -102,7 +102,7 @@
   "account.register.welcomeMessageTitle": "Ó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",
@@ -114,5 +114,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"
 }
	@@ -40,4 +40,8 @@ export class RegisterComponent {		@@ -40,4 +40,8 @@ export class RegisterComponent {
40	this.notificationService.error({ message: "account.register.passwordConfirmation.failed" });	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,6 +2,10 @@ label {
2	cursor: pointer;	2	cursor: pointer;
3	}	3	}
4		4
		5	+.has-error .help-block {
		6	+ font-weight: bold;
		7	+}
		8	+
5	.checkbox-nice {	9	.checkbox-nice {
6	position: relative;	10	position: relative;
7	padding-left: 15px;	11	padding-left: 15px;
@@ -0,0 +1,4 @@		@@ -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>