Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 92fbb74

Browse files
nlitwinnlitwin
committed
Merge pull request #18 from appirio-tech/reg-validation
Show red and green validations
2 parents 5131f3b + c44a03f commit 92fbb74

File tree

4 files changed

+84
-45
lines changed

4 files changed

+84
-45
lines changed

‎app/account/register/register.jade

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,40 @@
22
h1 Join Topcoder
33

44
form(name="registerForm", role="form", ng-submit="registerForm.$valid && vm.register()", novalidate)
5-
input(ng-model="vm.firstname", name="firstname", placeholder="First Name", type="text", required)
5+
.first-last-names
6+
input(ng-model="vm.firstname", maxlength="35", name="firstname", placeholder="First Name", type="text", required)
67

7-
input(ng-model="vm.lastname", name="lastname", placeholder="Last Name", type="text", required)
8+
input(ng-model="vm.lastname", maxlength="35", name="lastname", placeholder="Last Name", type="text", required)
89

9-
input(ng-model="vm.country", name="country", placeholder="Country", type="text", required)
10+
//- Show errors for first and last names once we know whether we can handle accents and other languages
11+
//- .form-errors
12+
//- p.login-error(ng-show="registerForm.firstname.$dirty && registerForm.firstname.$error.pattern") Names must not contain symbols or numbers.
1013
11-
input(ng-model="vm.age", ng-model-options="{ updateOn: 'default blur' }", name="age", placeholder="Age", type="number", ng-min="13", required)
14+
.country-age
15+
input(ng-model="vm.country", name="country", placeholder="Country", type="text", required)
1216

13-
p.login-error(ng-show="registerForm.age.$error.min") You must be at least X years old to join Topcoder.
17+
.validation-bar(ng-class="{ 'error-bar': registerForm.age.$error.min }")
18+
input(ng-model="vm.age", ng-model-options="{ updateOn: 'default blur' }", name="age", placeholder="Age", type="number", ng-min="18", required)
1419

15-
input(ng-model="vm.username", ng-model-options="{debounce: {'default': 500}}", ng-focus="vm.usernameTips = true", ng-blur="vm.usernameTips = false", name="username", placeholder="Username", type="text", username-is-free, required)
20+
.form-errors
21+
p.login-error(ng-show="registerForm.age.$error.min") You must be at least X years old to join Topcoder.
1622

17-
p.login-error(ng-show="registerForm.username.$error.usernameIsFree") This username already exists.
23+
.validation-bar(ng-class="{ 'error-bar': (registerForm.username.$error.usernameIsFree || registerForm.username.$error.minlength || registerForm.username.$error.maxlength), 'success-bar': (registerForm.username.$valid && !registerForm.username.$error.usernameIsFree) }")
24+
input(ng-model="vm.username", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.usernameTips = true", ng-blur="vm.usernameTips = false", ng-minlength="2", ng-maxlength="15", name="username", placeholder="Username", type="text", username-is-free, required)
1825

19-
input(ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", required)
26+
.form-errors
27+
p.login-error(ng-show="registerForm.username.$error.usernameIsFree") This username already exists.
2028

21-
input(ng-model="vm.password", ng-focus="vm.passwordTips = true", ng-blur="vm.passwordTips = false", name="password", placeholder="Create Password", type="password", ng-minlength="7", ng-maxlength="30", has-letter, has-symbol, has-number, required)
29+
p.login-error(ng-show="registerForm.username.$error.minlength || registerForm.username.$error.maxlength") Username must be between 2 and 15 characters.
30+
31+
.validation-bar(ng-class="{ 'error-bar': (registerForm.email.$dirty && registerForm.email.$invalid), 'success-bar': (registerForm.email.$valid) }")
32+
input(ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", required)
33+
34+
.form-errors
35+
p.login-error(ng-show="registerForm.email.$dirty && registerForm.email.$invalid") Please enter a valid email address.
36+
37+
.validation-bar(ng-class="{ 'success-bar': (registerForm.password.$valid) }")
38+
input(ng-model="vm.password", ng-focus="vm.passwordTips = true", ng-blur="vm.passwordTips = false", name="password", placeholder="Create Password", type="password", ng-minlength="8", ng-maxlength="64", has-letter, has-symbol, has-number, required)
2239

2340
button(type="submit", ng-disabled="registerForm.$invalid", ng-class="{'enabled-button': registerForm.$valid}") Join Now
2441

@@ -27,7 +44,7 @@
2744

2845
p This will be public to other members
2946

30-
p Between X and Y characters
47+
p Between 2 and 15 characters
3148

3249
p Can contain numbers and letters
3350

@@ -43,13 +60,13 @@
4360
.tips.password-tips(ng-show="vm.passwordTips")
4461
h3 Password Tips:
4562

46-
p(ng-class="{'has-length-between-range': (registerForm.password.$dirty && !registerForm.password.$error.minlength && !registerForm.password.$error.maxlength && !registerForm.password.$error.required)}") Must be between 7 and 30 characters
63+
p(ng-class="{ 'has-length-between-range': (registerForm.password.$dirty && !registerForm.password.$error.minlength && !registerForm.password.$error.maxlength && !registerForm.password.$error.required) }") Must be between 8 and 64 characters
4764

48-
p(ng-class="{'has-letter': (registerForm.password.$dirty && !registerForm.password.$error.hasLetter)}") At least one letter
65+
p(ng-class="{ 'has-letter': (registerForm.password.$dirty && !registerForm.password.$error.hasLetter) }") At least one letter
4966

50-
p(ng-class="{'has-symbol': (registerForm.password.$dirty && !registerForm.password.$error.hasSymbol)}") At least one symbol
67+
p(ng-class="{ 'has-symbol': (registerForm.password.$dirty && !registerForm.password.$error.hasSymbol) }") At least one symbol
5168

52-
p(ng-class="{'has-number': (registerForm.password.$dirty && !registerForm.password.$error.hasNumber)}") At least one number
69+
p(ng-class="{ 'has-number': (registerForm.password.$dirty && !registerForm.password.$error.hasNumber) }") At least one number
5370

5471
section.terms
5572
p By clicking "JOIN NOW" I agree to Topcoder's

‎assets/css/account/account.scss

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ body, .view-container {
1212
display: flex;
1313
flex-direction: column;
1414
text-align: center;
15+
justify-content: center;
1516
@include source-sans;
1617

1718
// Basic element stylings
@@ -33,7 +34,8 @@ body, .view-container {
3334

3435
input {
3536
height: 40px;
36-
width: 290px;
37+
width: 285px;
38+
padding: 0;
3739
padding-left: 15px;
3840
border: 0;
3941
@include source-sans;
@@ -51,6 +53,9 @@ body, .view-container {
5153
border: 0;
5254
border-radius: 8px;
5355
font-size: 21px;
56+
57+
// Remove box-sizing when bootstrap is gone
58+
box-sizing: border-box;
5459
}
5560

5661
.enabled-button {
@@ -59,7 +64,31 @@ body, .view-container {
5964

6065
// Form stylings
6166
.form-errors {
62-
padding-bottom: 10px;
67+
width: 300px;
68+
}
69+
70+
.validation-bar {
71+
position: relative;
72+
73+
&:before {
74+
content: '';
75+
display: none;
76+
position: absolute;
77+
top: 0;
78+
left: 0;
79+
height: 42px;
80+
width: 5px;
81+
}
82+
83+
&.error-bar:before {
84+
display: block;
85+
background-color: red;
86+
}
87+
88+
&.success-bar:before {
89+
display: block;
90+
background-color: green;
91+
}
6392
}
6493

6594
.login-notice {

‎assets/css/account/login.scss

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
.login-container {
44

5+
// Remove box-sizing when bootstrap is gone
56
* {
67
box-sizing: content-box;
78
}
@@ -14,29 +15,8 @@
1415
}
1516

1617
.form-errors {
17-
width: 300px;
18-
1918
p {
20-
margin-bottom: 10px;
21-
}
22-
}
23-
24-
.validation-bar {
25-
position: relative;
26-
27-
&:before {
28-
content: '';
29-
display: none;
30-
position: absolute;
31-
top: 0;
32-
left: 0;
33-
height: 42px;
34-
width: 5px;
35-
background-color: red;
36-
}
37-
38-
&.error-bar:before {
39-
display: block;
19+
margin-bottom: 20px;
4020
}
4121
}
4222

‎assets/css/account/register.scss

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,43 @@
33
.register-container {
44
position: relative;
55

6+
// Remove box-sizing when bootstrap is gone
67
* {
78
box-sizing: content-box;
89
}
910

10-
.login-error {
11-
margin: 2px 0 12px 5px;
12-
}
1311
form {
1412
display: flex;
15-
flex-flow: row wrap;
13+
flex-direction: column;
14+
justify-content: center;
1615
width: 300px;
16+
}
17+
18+
.form-errors {
19+
text-align: left;
20+
21+
p {
22+
margin: 2px 0 12px 5px;
23+
}
24+
}
25+
26+
.first-last-names, .country-age {
27+
display: flex;
28+
flex-direction: row;
1729
justify-content: space-between;
30+
width: 300px;
1831
}
1932

2033
input[name="firstname"], input[name="lastname"] {
21-
width: 136px;
34+
width: 131px;
2235
}
2336

2437
input[name="country"] {
25-
width: 220px;
38+
width: 215px;
2639
}
2740

2841
input[name="age"] {
29-
width: 50px;
42+
width: 45px;
3043
}
3144

3245
.tips {

0 commit comments

Comments
 (0)