CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refractor: login module (#283)

Browse Source 
* Refractor components.
* Shift language and footer component to shared module.
* Replace mat-icons by font-awesome icons.
* Add comments.

Fixes #284
This commit is contained in:
Abhay Chawla
2018-08-09 22:28:17 +05:30
committed by GitHub
parent 9eead37c8c
commit 2330f70f2c
33 changed files with 629 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/login/login-form/login-form.component.html
+26 -12
View File
@@ -1,27 +1,41 @@
<form fxLayout="column" [formGroup]="loginForm" (ngSubmit)="login()">
<mat-form-field fxFlexAlign="center" class="textfield">
<span matPrefix><mat-icon>account_circle</mat-icon>&nbsp;&nbsp;</span>
<input matInput placeholder="Username" autocomplete="off" formControlName="username">
<form fxLayout="column" [formGroup]="loginForm" (ngSubmit)="login()" id="login-form">
<mat-form-field fxFlexAlign="center" class="login-input">
<span matPrefix>
<fa-icon icon="user-circle" size="lg"></fa-icon>&nbsp;&nbsp;
</span>
<mat-label>Username</mat-label>
<input matInput type="text" autocomplete="off" formControlName="username">
<mat-error *ngIf="loginForm.controls.username.hasError('required')">
Username is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlexAlign="center" class="textfield">
<span matPrefix><mat-icon>lock</mat-icon>&nbsp;&nbsp;</span>
<input matInput type="{{ passwordInputType }}" placeholder="Password" formControlName="password">
<mat-form-field fxFlexAlign="center" class="login-input">
<span matPrefix>
<fa-icon icon="lock" size="lg"></fa-icon>&nbsp;&nbsp;
</span>
<mat-label>Password</mat-label>
<input matInput type="{{ passwordInputType }}" formControlName="password">
<button mat-button *ngIf="loginForm.controls.password.value && !loading" matSuffix mat-icon-button
aria-label="Clear" (mousedown)="passwordInputType = 'text'" (mouseup)="passwordInputType = 'password'">
<mat-icon *ngIf="passwordInputType === 'password'">visibility</mat-icon>
<mat-icon *ngIf="passwordInputType === 'text'">visibility_off</mat-icon>
(mousedown)="passwordInputType = 'text'" (mouseup)="passwordInputType = 'password'">
<fa-icon *ngIf="passwordInputType === 'password'" icon="eye"></fa-icon>
<fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
</button>
<mat-error *ngIf="loginForm.controls.password.hasError('required')">
Password is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-checkbox fxFlexAlign="center" formControlName="remember" class="m-t-10">Remember me</mat-checkbox>
<button mat-raised-button color="primary" fxFlexAlign="center" class="btn" [disabled]="!loginForm.valid">
<button mat-raised-button color="primary" fxFlexAlign="center" class="login-button" [disabled]="!loginForm.valid">
Login
<mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
</button>
<button type="button" mat-button fxFlexAlign="center" class="btn" (click)="forgotPassword()" [disabled]="loading">Forgot Password?</button>
<button type="button" mat-button fxFlexAlign="center" class="login-button" (click)="forgotPassword()" [disabled]="loading">
Forgot Password?
</button>
</form>