2
Download as
Browse Code »

Commit abcac913477e0cee5dd5ff09328a967a57a22abf

Authored by Michel Felipe
1 parent 8e4d0b18

Added environment fields and ngMessages form validation

Showing 6 changed files with 56 additions and 24 deletions   Show diff stats
src/app/account/register-component.html
  Diff comments   View file @abcac91
... ... @@ -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>&nbsp;{{ 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>&nbsp;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>
2
  • 0743c2eb05e68c92baa5f8c498995a20?s=40&d=identicon
    Link here  
    Daniela Feitosa @daniela

    As mensagens não estão aparecendo: Failed to load template: languages/messages.html (HTTP status: 404 Not Found )

    Choose File ...   File name...
    Cancel
  • Me
    Link here  
    Michel Felipe @mfdeveloper

    @daniela Aqui está aparecendo normalmente. Você fez pull do commit + recente? Veja se você possui o arquivo src/languages/messages.html

    Choose File ...   File name...
    Cancel
  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>
... ...
src/app/account/register.component.ts
  Diff comments   View file @abcac91
... ... @@ -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 }
... ...
src/app/layout/scss/_forms.scss
  Diff comments   View file @abcac91
... ... @@ -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;
... ...
src/languages/en.json
  Diff comments   View file @abcac91
... ... @@ -102,8 +102,7 @@
102 102 "account.register.welcomeMessageTitle": "Nice to have you there!",
103 103 "account.register.seeMoreMessage": "See more ",
104 104 "account.register.informationsMessage": "informations",
105   - "account.register.firstNameLabel": "First name",
106   - "account.register.lastNameLabel": "Last name",
  105 + "account.register.fullNameLabel": "Full name",
107 106 "account.register.usernameLabel": "Username",
108 107 "account.register.emailLabel": "Email",
109 108 "account.register.passwordLabel": "Password",
... ... @@ -114,5 +113,9 @@
114 113 "account.register.termsOfUseMessage": "terms of use",
115 114 "account.register.success.title": "Good job!",
116 115 "account.register.success.message": "Account created!",
117   - "account.register.passwordConfirmation.failed": "Wrong password confirmation"
  116 + "account.register.passwordConfirmation.failed": "Wrong password confirmation",
  117 + "messages.invalid.required": "This field is required",
  118 + "messages.invalid.maxlength": "This field is too long",
  119 + "messages.invalid.minlength": "This field is too short",
  120 + "messages.invalid.email": "This needs to be a valid email"
118 121 }
... ...
src/languages/messages.html 0 → 100644
  Diff comments   View file @abcac91
... ... @@ -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>
... ...
src/languages/pt.json
  Diff comments   View file @abcac91
... ... @@ -102,7 +102,7 @@
102 102 "account.register.welcomeMessageTitle": "Ótimo ter você aqui!",
103 103 "account.register.seeMoreMessage": "Saiba mais ",
104 104 "account.register.informationsMessage": "informações",
105   - "account.register.firstNameLabel": "Nome",
  105 + "account.register.fullNameLabel": "Nome completo",
106 106 "account.register.lastNameLabel": "Sobrenome",
107 107 "account.register.usernameLabel": "Nome de usuário",
108 108 "account.register.emailLabel": "Email",
... ... @@ -114,5 +114,9 @@
114 114 "account.register.haveAccountMessage": "Já possui uma conta?",
115 115 "account.register.success.title": "Bom trabalho!",
116 116 "account.register.success.message": "Conta criada com sucesso!",
117   - "account.register.passwordConfirmation.failed": "A confirmação de senha não corresponde à senha"
  117 + "account.register.passwordConfirmation.failed": "A confirmação de senha não corresponde à senha",
  118 + "messages.invalid.required": "Campo obrigatório",
  119 + "messages.invalid.maxlength": "O valor é muito longo",
  120 + "messages.invalid.minlength": "O valor é muito curto",
  121 + "messages.invalid.email": "Informe um email válido"
118 122 }
... ...