Skip to content

Commit

Permalink
argoproj#44 Redesign reset password page. Adjust buttons and cleanup.
Browse files Browse the repository at this point in the history
  • Loading branch information
wokeGit committed Aug 29, 2017
1 parent f6bc723 commit ec651f9
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 44 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@

<div class="setup__box">
<div class="setup__header">
<h1>{{ 'Password Reset Email Sent' | translate }}?</h1>
<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" routerLink="/login">
<a axButtonWave class="ax-button ax-button--base-o setup__btn" routerLink="/login">
{{ 'Sign In' | translate }}
</a>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ <h1>{{ 'Forgot Password' | translate }}?</h1>
<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>
<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" type="submit">
<button axButtonWave class="ax-button ax-button--base ax-button--full-width setup__btn" type="submit">
{{ 'Send email' | translate }}
</button>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@

<div class="setup__box">
<div class="setup__header">
<h1>{{ 'Password Reset Complete' | translate }}?</h1>
<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" routerLink="/login">
<a axButtonWave class="ax-button ax-button--base setup__btn" routerLink="/login">
{{ 'Sign In' | translate }}
</a>
</div>
Expand Down
61 changes: 33 additions & 28 deletions saas/axops/src/ui/src/app/views/reset-password/reset-password.html
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">
<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>
15 changes: 9 additions & 6 deletions saas/axops/src/ui/src/app/views/setup/setup.scss
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ $setup-box-content-shadow: 3px 3px 20px black;
background-color: white;
display: block;
border-radius: 8px;
padding: 40px 60px;
padding: 50px 60px;
border: 1px solid black;
box-shadow: $setup-box-content-shadow;

Expand All @@ -86,11 +86,7 @@ $setup-box-content-shadow: 3px 3px 20px black;
padding: 0 20px;
}

&--welcome {
width: 500px;
}

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

Expand Down Expand Up @@ -125,6 +121,7 @@ $setup-box-content-shadow: 3px 3px 20px black;

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

&:hover {
Expand All @@ -137,4 +134,10 @@ $setup-box-content-shadow: 3px 3px 20px black;
font-size: 20px;
}
}

&__btn {
padding: 10px 40px;
border-radius: 20px;
font-size: 14px;
}
}
8 changes: 4 additions & 4 deletions saas/axops/src/ui/src/app/views/setup/sign-up/sign-up.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
<div class="setup__header">
<div class="setup__logo"></div>
<div class="setup__welcome-text">
Welcome!
{{ 'Welcome!' | translate }}
</div>
</div>
<div class="setup__content setup__content--welcome">
<div class="setup__title">
Create Your Account Password
{{ 'Create Your Account Password' | translate }}
</div>

<form role="form" [formGroup]="signupForm">
Expand Down Expand Up @@ -48,7 +48,7 @@
</div>
<div class="ax-form-row">
<input id="repeat_password" type="password" class="ax-field" formControlName="repeat_password" autocomplete="off" ax-label-placeholder>
<label for="repeat_password" class="ax-label-placeholder">{{ 'Re-enter Password' | translate }}</label>
<label for="repeat_password" class="ax-label-placeholder">{{ 'Confirm Password' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['repeat_password'].valid && signupForm.controls['repeat_password'].touched">
Password is wrong<i class="fa fa-warning"></i>
</div>
Expand All @@ -57,7 +57,7 @@
</div>
</div>
<div class="ax-form-row">
<button axButtonWave class="ax-button ax-button--base ax-button--full-width" type="submit" (click)="createAccount(signupForm)" [disabled]="!signupForm.valid">
<button axButtonWave class="ax-button ax-button--base ax-button--full-width setup__btn" type="submit" (click)="createAccount(signupForm)" [disabled]="!signupForm.valid">
{{ 'Create' | translate }}
</button>
</div>
Expand Down

0 comments on commit ec651f9

Please sign in to comment.