Skip to content

Commit

Permalink
Issue #44: Redesign forgot/reset/confirm pages (#83)
Browse files Browse the repository at this point in the history 
* #44 Redesign sign-up page

* #44 Redesign forgot password page

* #44 Redesign confirm forgot password page

* #44 Redesign confirm reset password page

* #44 Redesign reset password page. Adjust buttons and cleanup.

* #44 Redesign confirm setup page

* #44 Adjust boxes to small screens

* #44 Update custom regexp validator to allow only texts with uppercase AND lowercase letters.
  • Loading branch information
@wokeGit @alexmt
wokeGit authored and alexmt committed Aug 30, 2017
1 parent e545ad2 commit 5c90b02
Show file tree
Hide file tree
Showing 11 changed files with 421 additions and 109 deletions.
2 changes: 1 addition & 1 deletion saas/axops/src/ui/src/app/common/customValidators/CustomRegex.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export class CustomRegex {

// Password will match only: 8+ letters, at least 1 lower case letter,
// at least 1 upper case letter, and at least 1 special character
public static password = /^(?=.*?[A-Za-z])(?=.*?[0-9])(?=.*?[#?!@()_+=;:"\'<>,./~{\[\\}|\]$%^&*-]).{8,}$/;
public static password = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@()_+=;:"\'<>,./~{\[\\}|\]$%^&*-]).{8,}$/;
// Minimum 8 characters at least 1 Alphabet, 1 Number and 1 Special Character:
// public static password: string = '^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$';

Expand Down
27 changes: 20 additions & 7 deletions saas/axops/src/ui/src/app/views/forgot-password/forgot-confirmation/forgot-confirmation.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,23 @@
<div class="login">
<div class="login__box">
<div class="login__logo login__logo--neg"></div>
<h4>Reset password link is sent</h4>
<div>Check your email and click the link to reset your password</div>
<div class="login__more-row">
<a routerLink="/login">{{ 'Go to Login' | translate }}</a>
<div class="setup">
<div class="setup__shortcut">
<div class="argo"></div>
<div class="logo"></div>
</div>

<div class="setup__box setup__box--forgot-password-confirm">
<div class="setup__header">
<h1>{{ 'Password Reset Email Sent' | translate }}</h1>
</div>
<div class="setup__content setup__content--forgot-password-confirm">
<p>
{{ 'Please check your inbox. We just emailed you a link to reset your password. If you don\'t receive anything, first check your spam folder and then try again.' | translate }}.
</p>

<div class="setup__btn-center setup__btn-center--additional-top-margin">
<a axButtonWave class="ax-button ax-button--base-o setup__btn" routerLink="/login">
{{ 'Sign In' | translate }}
</a>
</div>
</div>
</div>
</div>
51 changes: 33 additions & 18 deletions saas/axops/src/ui/src/app/views/forgot-password/forgot-password.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,38 @@
<div class="login">
<div class="login__box">
<div class="login__logo login__logo--neg">
<div class="setup">
<div class="setup__shortcut">
<div class="argo"></div>
<div class="logo"></div>
</div>

<div class="setup__box setup__box--forgot-password">
<div class="setup__header">
<h1>{{ 'Forgot Password' | translate }}?</h1>
</div>
<form role="form" [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword(resetPasswordForm)">
<div class="ax-form-row">
<input class="ax-field" id="email" type="text" formControlName="email" ax-label-placeholder
autocomplete="off">
<label for="email" class="ax-label-placeholder">{{ 'Email address' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['email'].valid && (resetPasswordForm.controls['email'].touched || submitted)">{{ 'Email is incorrect' | translate }}</div>
</div>
<div class="login__form-row">
<button axButtonWave class="ax-button ax-button--base ax-button--full-width ax-button--xlg" type="submit">
{{ 'Reset passowrd' | translate }}
</button>
<div class="setup__content setup__content--forgot-password">
<div class="setup__back-btn">
<a [routerLink]="['/login']">
<i class="ax-icon-back"></i>{{ 'Back' | translate | uppercase }}
</a>
</div>
<div class="login__more-row">
<a [routerLink]="['/login']">{{ 'Back to login' | translate }}</a>
</div>
</form>

<form role="form" [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword(resetPasswordForm)">
<p>
{{ 'Enter the email address you used to create your Argo Account and we\'ll send you an email with a link to reset your password' | translate }}.
</p>
<div class="ax-form-row">
<input class="ax-field" id="email" type="text" formControlName="email" ax-label-placeholder
autocomplete="off">
<label for="email" class="ax-label-placeholder">{{ 'Email' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['email'].valid && (resetPasswordForm.controls['email'].touched || submitted)">{{ 'Email is incorrect' | translate }}</div>
</div>
<div class="login__form-row">
<button axButtonWave class="ax-button ax-button--base ax-button--full-width setup__btn" type="submit">
{{ 'Send email' | translate }}
</button>
</div>
</form>
</div>
</div>
</div>

<ax-notifications></ax-notifications>
29 changes: 21 additions & 8 deletions saas/axops/src/ui/src/app/views/reset-password/reset-confirmation/reset-confirmation.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,23 @@
<div class="login">
<div class="login__box">
<div class="login__logo login__logo--neg"></div>
<h4>Your password was changed</h4>
<div>Check your email and click the link to confirm change.</div>
<div class="login__more-row">
<a routerLink="/login">{{ 'Go to Login' | translate }}</a>
<div class="setup">
<div class="setup__shortcut">
<div class="argo"></div>
<div class="logo"></div>
</div>

<div class="setup__box setup__box--reset-password-confirm">
<div class="setup__header">
<h1>{{ 'Password Reset Complete' | translate }}</h1>
</div>
<div class="setup__content setup__content--reset-password-confirm">
<p>
{{ 'Your password has been updated. Now you continue to Sign In to Argo.' | translate }}
</p>

<div class="setup__btn-center setup__btn-center--additional-top-margin">
<a axButtonWave class="ax-button ax-button--base setup__btn" routerLink="/login">
{{ 'Sign In' | translate }}
</a>
</div>
</div>
</div>
</div>
</div>
61 changes: 33 additions & 28 deletions saas/axops/src/ui/src/app/views/reset-password/reset-password.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,35 @@
<div class="login">
<div class="login__box">
<div class="login__logo login__logo--neg">
<div class="setup">
<div class="setup__shortcut">
<div class="argo"></div>
<div class="logo"></div>
</div>

<div class="setup__box setup__box--reset-password">
<div class="setup__header">
<h1>{{ 'Reset Your Password' | translate }}</h1>
</div>
<div class="setup__content setup__content--reset-password">
<form role="form" [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword(resetPasswordForm)">
<div class="ax-form-row">
<input id="new_password" type="password" class="ax-field" formControlName="new_password"
autocomplete="off" ax-label-placeholder>
<label for="new_password" class="ax-label-placeholder">{{ 'New Password' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['new_password'].valid && (resetPasswordForm.controls['new_password'].touched || submitted)">
Password should contain at least 8 characters including one uppercase, one lowercase, one number and one special character.<i class="fa fa-warning"></i></div>
</div>
<div class="ax-form-row">
<input id="confirm_password" type="password" class="ax-field" formControlName="confirm_password"
autocomplete="off" ax-label-placeholder>
<label for="confirm_password" class="ax-label-placeholder">{{ 'Confirm Password' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['confirm_password'].valid && (resetPasswordForm.controls['confirm_password'].touched || submitted)">
Your password and confirmation password do not match.<i class="fa fa-warning"></i></div>
</div>
<div class="login__form-row">
<button axButtonWave class="ax-button ax-button--base ax-button--full-width setup__btn" type="submit">
{{ 'Submit' | translate }}
</button>
</div>
</form>
</div>
<form role="form" [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword(resetPasswordForm)">
<div class="ax-form-row">
<input id="new_password" type="password" class="ax-field" formControlName="new_password"
autocomplete="off" ax-label-placeholder>
<label for="new_password" class="ax-label-placeholder">{{ 'New Password' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['new_password'].valid && (resetPasswordForm.controls['new_password'].touched || submitted)">
Password should contain at least 8 characters including one uppercase, one lowercase, one number and one special character.<i class="fa fa-warning"></i></div>
</div>
<div class="ax-form-row">
<input id="confirm_password" type="password" class="ax-field" formControlName="confirm_password"
autocomplete="off" ax-label-placeholder>
<label for="confirm_password" class="ax-label-placeholder">{{ 'Confirm Password' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['confirm_password'].valid && (resetPasswordForm.controls['confirm_password'].touched || submitted)">
Your password and confirmation password do not match.<i class="fa fa-warning"></i></div>
</div>
<div class="login__form-row">
<button axButtonWave class="ax-button ax-button--base ax-button--full-width ax-button--xlg" type="submit">
{{ 'Reset password' | translate }}
</button>
</div>
<div class="login__more-row">
<a [routerLink]="['/login']">{{ 'Back to login' | translate }}</a>
</div>
</form>
</div>
</div>
</div>
29 changes: 21 additions & 8 deletions saas/axops/src/ui/src/app/views/setup/email-confirmation/email-confirmation.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,23 @@
<div class="login">
<div class="login__box">
<div class="login__logo login__logo--neg"></div>
<h4>Thanks for joining Argo!</h4>
<h6>Check your email and click the link to set up your new account.</h6>
<div class="login__more-row">
<a routerLink="/login">{{ 'Go to Login' | translate }}</a>
<div class="setup">
<div class="setup__shortcut">
<div class="argo"></div>
<div class="logo"></div>
</div>

<div class="setup__box setup__box--setup-confirm">
<div class="setup__header">
<h1>{{ 'Thanks for joining Argo!' | translate }}</h1>
</div>
<div class="setup__content setup__content--setup-confirm">
<p>
{{ 'Check your email and click the link to set up your new account.' | translate }}
</p>

<div class="setup__btn-center setup__btn-center--additional-top-margin">
<a axButtonWave class="ax-button ax-button--base setup__btn" routerLink="/login">
{{ 'Go to Login' | translate }}
</a>
</div>
</div>
</div>
</div>
</div>
1 change: 1 addition & 0 deletions saas/axops/src/ui/src/app/views/setup/setup.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'ax-setup',
templateUrl: './setup.html',
styles: [ require('./setup.scss') ],
})
export class SetupComponent {
}
156 changes: 156 additions & 0 deletions saas/axops/src/ui/src/app/views/setup/setup.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
@import '../../../assets/styles/config';

$logoWhitePath: 'assets/styles/icons/argologo-white.svg';
$logoProPath: 'assets/styles/icons/ArgoPro.svg';
$logoNegativePath: 'assets/styles/icons/argo.png';

$setup-box-content-shadow: 3px 3px 20px black;

.setup {
min-height:100vh;
background-position: 15rem;
background-size: cover;
background: linear-gradient(to top left,
rgba(122, 139, 207, 0.8) 0%,
rgba(46, 50, 90, 0.8) 100%),
url("assets/styles/icons/stars.gif");
display: flex;

&__logo {
background-image: url($logoNegativePath);
background-repeat: no-repeat;
background-size: contain;
margin: auto;
height: 260px;
width: 150px;
position: absolute;
left: 47px;
}

&__shortcut {
.logo {
position: absolute;
top: 27px;
left: 76px;
height: 22px;
width: 63px;
background-size: contain;
background-image: url($logoWhitePath);
background-repeat: no-repeat;
}

.argo {
position: absolute;
top: 20px;
left: 40px;
height: 30px;
width: 30px;
background-size: contain;
background-image: url($logoProPath);
background-repeat: no-repeat;
}
}

&__box {
margin: auto auto 50px auto;

&--welcome {
margin-top: 50px;
}

&--forgot-password, &--reset-password, &--setup-confirm, &--forgot-password-confirm, &--reset-password-confirm {
margin-top: 130px;
}
}

&__header {
position: relative;

h1 {
line-height: 80px;
font-size: 35px;
font-weight: 300;
color: white;
text-align: center;
margin-bottom: 0;
}
}

&__content {
background-color: white;
display: block;
border-radius: 8px;
padding: 50px 60px;
border: 1px solid black;
box-shadow: $setup-box-content-shadow;
z-index: 1;
position: relative;

p {
font-size: 15px;
color: $ax-color-gray-6;
}

form {
padding: 0 20px;
}

&--forgot-password, &--reset-password, &--welcome {
width: 500px;
}

&--setup-confirm {
width: 540px;
}

&--forgot-password-confirm, &--reset-password-confirm {
width: 635px;
}
}

&__title {
color: #f27f53;
font-size: 26px;
}

&__btn-center {
text-align: center;

&--additional-top-margin {
margin-top: 40px;
}
}

&__welcome-text {
color: white;
font-size: 47px;
font-weight: 300;
line-height: 142px;
padding-left: 220px;
}

&__back-btn {
margin-bottom: 30px;

a {
font-size: 14px;
font-weight: 500;
color: $ax-color-gray-6;

&:hover {
color: $ax-color-gray-5;
}
}

i {
padding-right: 2px;
font-size: 20px;
}
}

&__btn {
padding: 10px 40px;
border-radius: 20px;
font-size: 14px;
}
}
Loading

0 comments on commit 5c90b02

Please sign in to comment.