Skip to content

Commit

Permalink
argoproj#44 Redesign sign-up page
Browse files Browse the repository at this point in the history
  • Loading branch information
@wokeGit
wokeGit committed Aug 29, 2017
1 parent 7e1f0d9 commit 0336a62
Show file tree
Hide file tree
Showing 5 changed files with 227 additions and 39 deletions.
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 {
}
91 changes: 91 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,91 @@
@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;
z-index: -1;
}

&__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 {
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}

&__header {

}

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

&--welcome {
width: 500px;
}
}

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

&__welcome-text {
color: white;
font-size: 47px;
font-weight: 300;
line-height: 142px;
padding-left: 220px;
}
}
102 changes: 63 additions & 39 deletions saas/axops/src/ui/src/app/views/setup/sign-up/sign-up.html
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,67 @@
<div class="login">
<div class="login__box">
<div class="login__logo login__logo--neg"></div>
<div>
<h4> Welcome to Argo </h4>
<div>Create your Argo account</div>
</div>
<form role="form" [formGroup]="signupForm">
<div class="ax-form-row" *ngIf="!isSingleUser">
<input id="username" type="email" class="ax-field" formControlName="username" autocomplete="off" ax-label-placeholder>
<label for="username" class="ax-label-placeholder">{{ 'Email' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['username'].valid && signupForm.controls['username'].touched">Email is wrong<i class="fa fa-warning"></i></div>
</div>
<div class="ax-form-row" *ngIf="!isSingleUser">
<input id="first_name" type="text" class="ax-field" formControlName="first_name" autocomplete="off" ax-label-placeholder>
<label for="first_name" class="ax-label-placeholder">{{ 'First Name' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['first_name'].valid && signupForm.controls['first_name'].touched">First name is wrong<i class="fa fa-warning"></i></div>
</div>
<div class="ax-form-row" *ngIf="!isSingleUser">
<input id="last_name" type="text" class="ax-field" formControlName="last_name" autocomplete="off" ax-label-placeholder>
<label for="last_name" class="ax-label-placeholder">{{ 'Last Name' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['last_name'].valid && signupForm.controls['last_name'].touched">Last name is wrong<i class="fa fa-warning"></i></div>
</div>
<div class="ax-form-row">
<input id="password" type="password" class="ax-field" formControlName="password" autocomplete="off" ax-label-placeholder>
<label for="password" class="ax-label-placeholder">{{ 'Password' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['password'].valid && signupForm.controls['password'].touched">
{{ 'Password should contain at least 8 characters including one uppercase, one lowercase, one number and one special character' | translate }}.<i class="fa fa-warning"></i></div>
</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>
<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>
<div class="ax-form-row__error-msg" *ngIf="signupForm.errors && signupForm.errors.mismatchedPasswords && signupForm.controls['repeat_password'].touched">Your password and confirmation password do not match.<i class="fa fa-warning"></i></div>
<div class="setup">
<div class="setup__shortcut">
<div class="argo"></div>
<div class="logo"></div>
</div>

<div class="setup__box">
<div class="setup__header">
<div class="setup__logo"></div>
<div class="setup__welcome-text">
Welcome!
</div>
<div class="ax-form-row">
<button axButtonWave class="ax-button ax-button--base" type="submit" (click)="createAccount(signupForm)" [disabled]="!signupForm.valid">
{{ 'Create' | translate }}
</button>
</div>
<div class="setup__content setup__content--welcome">
<div class="setup__title">
Create Your Account Password
</div>
</form>

<form role="form" [formGroup]="signupForm">
<div class="ax-form-row" *ngIf="!isSingleUser">
<input id="username" type="email" class="ax-field" formControlName="username" autocomplete="off" ax-label-placeholder>
<label for="username" class="ax-label-placeholder">{{ 'Email' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['username'].valid && signupForm.controls['username'].touched">
Emailis wrong<i class="fa fa-warning"></i>
</div>
</div>
<div class="ax-form-row" *ngIf="!isSingleUser">
<input id="first_name" type="text" class="ax-field" formControlName="first_name" autocomplete="off" ax-label-placeholder>
<label for="first_name" class="ax-label-placeholder">{{ 'First Name' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['first_name'].valid && signupForm.controls['first_name'].touched">
First name is wrong<i class="fa fa-warning"></i>
</div>
</div>
<div class="ax-form-row" *ngIf="!isSingleUser">
<input id="last_name" type="text" class="ax-field" formControlName="last_name" autocomplete="off" ax-label-placeholder>
<label for="last_name" class="ax-label-placeholder">{{ 'Last Name' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['last_name'].valid && signupForm.controls['last_name'].touched">
Last name is wrong<i class="fa fa-warning"></i>
</div>
</div>
<div class="ax-form-row">
<input id="password" type="password" class="ax-field" formControlName="password" autocomplete="off" ax-label-placeholder>
<label for="password" class="ax-label-placeholder">{{ 'Password' | translate }}</label>
<div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['password'].valid && signupForm.controls['password'].touched">
{{ 'Password should contain at least 8 characters including one uppercase, one lowercase, one
number and one special character' | translate }}.<i class="fa fa-warning"></i>
</div>
</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>
<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>
<div class="ax-form-row__error-msg" *ngIf="signupForm.errors && signupForm.errors.mismatchedPasswords && signupForm.controls['repeat_password'].touched">
Your password and confirmation password do not match.<i class="fa fa-warning"></i>
</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">
{{ 'Create' | translate }}
</button>
</div>
</form>
</div>
</div>
</div>
71 changes: 71 additions & 0 deletions saas/axops/src/ui/src/assets/styles/icons/ArgoPro.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 0336a62

Please sign in to comment.