Commit abcac913477e0cee5dd5ff09328a967a57a22abf
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
... | ... | @@ -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> | |
2 |
|
|
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
... | ... | @@ -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
src/languages/en.json
... | ... | @@ -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 | } | ... | ... |
... | ... | @@ -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
... | ... | @@ -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 | } | ... | ... |