diff --git a/app/account/register/register.jade b/app/account/register/register.jade index 1a3b26ca8..5477b2cd1 100644 --- a/app/account/register/register.jade +++ b/app/account/register/register.jade @@ -2,23 +2,40 @@ h1 Join Topcoder form(name="registerForm", role="form", ng-submit="registerForm.$valid && vm.register()", novalidate) - input(ng-model="vm.firstname", name="firstname", placeholder="First Name", type="text", required) + .first-last-names + input(ng-model="vm.firstname", maxlength="35", name="firstname", placeholder="First Name", type="text", required) - input(ng-model="vm.lastname", name="lastname", placeholder="Last Name", type="text", required) + input(ng-model="vm.lastname", maxlength="35", name="lastname", placeholder="Last Name", type="text", required) - input(ng-model="vm.country", name="country", placeholder="Country", type="text", required) + //- Show errors for first and last names once we know whether we can handle accents and other languages + //- .form-errors + //- p.login-error(ng-show="registerForm.firstname.$dirty && registerForm.firstname.$error.pattern") Names must not contain symbols or numbers. - input(ng-model="vm.age", ng-model-options="{ updateOn: 'default blur' }", name="age", placeholder="Age", type="number", ng-min="13", required) + .country-age + input(ng-model="vm.country", name="country", placeholder="Country", type="text", required) - p.login-error(ng-show="registerForm.age.$error.min") You must be at least X years old to join Topcoder. + .validation-bar(ng-class="{ 'error-bar': registerForm.age.$error.min }") + input(ng-model="vm.age", ng-model-options="{ updateOn: 'default blur' }", name="age", placeholder="Age", type="number", ng-min="18", required) - 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) + .form-errors + p.login-error(ng-show="registerForm.age.$error.min") You must be at least X years old to join Topcoder. - p.login-error(ng-show="registerForm.username.$error.usernameIsFree") This username already exists. + .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) }") + 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) - input(ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", required) + .form-errors + p.login-error(ng-show="registerForm.username.$error.usernameIsFree") This username already exists. - 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) + p.login-error(ng-show="registerForm.username.$error.minlength || registerForm.username.$error.maxlength") Username must be between 2 and 15 characters. + + .validation-bar(ng-class="{ 'error-bar': (registerForm.email.$dirty && registerForm.email.$invalid), 'success-bar': (registerForm.email.$valid) }") + input(ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", required) + + .form-errors + p.login-error(ng-show="registerForm.email.$dirty && registerForm.email.$invalid") Please enter a valid email address. + + .validation-bar(ng-class="{ 'success-bar': (registerForm.password.$valid) }") + 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) button(type="submit", ng-disabled="registerForm.$invalid", ng-class="{'enabled-button': registerForm.$valid}") Join Now @@ -27,7 +44,7 @@ p This will be public to other members - p Between X and Y characters + p Between 2 and 15 characters p Can contain numbers and letters @@ -43,13 +60,13 @@ .tips.password-tips(ng-show="vm.passwordTips") h3 Password Tips: - 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 + 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 - p(ng-class="{'has-letter': (registerForm.password.$dirty && !registerForm.password.$error.hasLetter)}") At least one letter + p(ng-class="{ 'has-letter': (registerForm.password.$dirty && !registerForm.password.$error.hasLetter) }") At least one letter - p(ng-class="{'has-symbol': (registerForm.password.$dirty && !registerForm.password.$error.hasSymbol)}") At least one symbol + p(ng-class="{ 'has-symbol': (registerForm.password.$dirty && !registerForm.password.$error.hasSymbol) }") At least one symbol - p(ng-class="{'has-number': (registerForm.password.$dirty && !registerForm.password.$error.hasNumber)}") At least one number + p(ng-class="{ 'has-number': (registerForm.password.$dirty && !registerForm.password.$error.hasNumber) }") At least one number section.terms p By clicking "JOIN NOW" I agree to Topcoder's diff --git a/assets/css/account/account.scss b/assets/css/account/account.scss index 11d1f04a0..c8d7daddb 100644 --- a/assets/css/account/account.scss +++ b/assets/css/account/account.scss @@ -12,6 +12,7 @@ body, .view-container { display: flex; flex-direction: column; text-align: center; + justify-content: center; @include source-sans; // Basic element stylings @@ -33,7 +34,8 @@ body, .view-container { input { height: 40px; - width: 290px; + width: 285px; + padding: 0; padding-left: 15px; border: 0; @include source-sans; @@ -51,6 +53,9 @@ body, .view-container { border: 0; border-radius: 8px; font-size: 21px; + + // Remove box-sizing when bootstrap is gone + box-sizing: border-box; } .enabled-button { @@ -59,7 +64,31 @@ body, .view-container { // Form stylings .form-errors { - padding-bottom: 10px; + width: 300px; + } + + .validation-bar { + position: relative; + + &:before { + content: ''; + display: none; + position: absolute; + top: 0; + left: 0; + height: 42px; + width: 5px; + } + + &.error-bar:before { + display: block; + background-color: red; + } + + &.success-bar:before { + display: block; + background-color: green; + } } .login-notice { diff --git a/assets/css/account/login.scss b/assets/css/account/login.scss index 9b71da004..7df35035a 100644 --- a/assets/css/account/login.scss +++ b/assets/css/account/login.scss @@ -2,6 +2,7 @@ .login-container { + // Remove box-sizing when bootstrap is gone * { box-sizing: content-box; } @@ -14,29 +15,8 @@ } .form-errors { - width: 300px; - p { - margin-bottom: 10px; - } - } - - .validation-bar { - position: relative; - - &:before { - content: ''; - display: none; - position: absolute; - top: 0; - left: 0; - height: 42px; - width: 5px; - background-color: red; - } - - &.error-bar:before { - display: block; + margin-bottom: 20px; } } diff --git a/assets/css/account/register.scss b/assets/css/account/register.scss index 4708375b6..fea6deead 100644 --- a/assets/css/account/register.scss +++ b/assets/css/account/register.scss @@ -3,30 +3,43 @@ .register-container { position: relative; + // Remove box-sizing when bootstrap is gone * { box-sizing: content-box; } - .login-error { - margin: 2px 0 12px 5px; - } form { display: flex; - flex-flow: row wrap; + flex-direction: column; + justify-content: center; width: 300px; + } + + .form-errors { + text-align: left; + + p { + margin: 2px 0 12px 5px; + } + } + + .first-last-names, .country-age { + display: flex; + flex-direction: row; justify-content: space-between; + width: 300px; } input[name="firstname"], input[name="lastname"] { - width: 136px; + width: 131px; } input[name="country"] { - width: 220px; + width: 215px; } input[name="age"] { - width: 50px; + width: 45px; } .tips {