Skip to content
This repository has been archived by the owner on Jul 6, 2020. It is now read-only.

Fix #190: Replace template driven form in auth pages with app input component #307

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Fix #190: Replace template driven form in auth pages with app input component #307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fe00812
Change fw from light to regular
danielrs975 Mar 17, 2020
63de52a
Change the template driven form to use app-input component
danielrs975 Mar 17, 2020
b7d9387
Change the template driven form to use app-input component
danielrs975 Mar 17, 2020
5f31d37
Allow cross field validation in input component
danielrs975 Mar 18, 2020
ce42aa6
Make the validate the two passwords reusable
danielrs975 Mar 18, 2020
ce19b3a
Fix test including Input Component in declarations
danielrs975 Mar 18, 2020
d3beca0
Change the template driven form to use app-input
danielrs975 Mar 18, 2020
82bb0c4
Declare validateTwoPassword in signup component
danielrs975 Mar 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 33 additions & 54 deletions src/app/components/auth/login/login.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,42 @@
<div class="col s12 m6 offset-m3 left">
<ul class="left">
<li class="ev-horiz-list"><a [routerLink]="loginRoute" class="dark-link" routerLinkActive="active-auth"
(click)="authService.resetForm()">Log In</a></li>
(click)="authService.resetForm()">Log In</a></li>
<li class="ev-horiz-list"><a [routerLink]="signupRoute" class="light-link" routerLinkActive="active-auth"
(click)="authService.resetForm()">Sign Up</a></li>
(click)="authService.resetForm()">Sign Up</a></li>
</ul>
</div>
<div class="col s12 m6 offset-m3">
<div class="col s12 m6 offset-m3" (keyup.enter)="formValidate()">
<!-- login form -->
<form name="loginForm" #loginForm='ngForm' (ngSubmit)="userLogin(loginForm.valid)" id="log-in" novalidate>
<!-- username -->
<div class="input-field align-left">
<input type="text" id="name" class="dark-autofill" name="name" (focusin)="isnameFocused = true"
(focusout)="isnameFocused = authService.getUser['name'] !== ''" [(ngModel)]="authService.getUser['name']"
(change)="isnameFocused = authService.getUser['name'] !== ''"
#name="ngModel" minLength="3" required>
<span class="form-icon form-icon-dark"><i class="fa fa-user"></i></span>
<label for="name" [class.active]="isnameFocused">Username*</label>
<div class="wrn-msg text-highlight" *ngIf="name.invalid && (name.dirty || name.touched || loginForm.submitted)">
<p *ngIf="name.errors.minlength">Username is too short.</p>
<p *ngIf="name.errors.required">Username is required.</p>
</div>
<!-- username -->
<div class="input-field align-left">
<app-input [inputStyle]="'dark-autofill'" [label]="'name'" [type]="'text'" [placeholder]="'Username*'"
[isRequired]="true" [icon]="'fa fa-user'" #loginform>
</app-input>
</div>
<!-- password -->
<div class="input-field align-left">
<app-input [inputStyle]="'dark-autofill'" [label]="'password'" [type]="'password'"
[placeholder]="'Password (min 8 characters) *'" [isRequired]="true"
[icon]="authService.canShowPassword? 'fa fa-eye-slash pointer': 'fa fa-eye pointer'" #loginform>
</app-input>
</div>
<div class="row">
<br>
<div class="col s6 align-left rm-gut">
<button class="waves-effect waves-dark btn ev-btn-dark grad-btn grad-btn-dark w-300" type="submit"
(click)="formValidate()">Log In
</button>
</div>
<!-- password -->
<div class="input-field align-left">
<input type="{{authService.canShowPassword ? 'text' : 'password'}}" id="password"
(paste)="authService.getUser['password'] = ''" class="dark-autofill" name="password"
(focusin)="ispasswordFocused = true"
(focusout)="ispasswordFocused = authService.getUser['password'] !== ''"
(change)="ispasswordFocused = authService.getUser['password'] !== ''"
[(ngModel)]="authService.getUser['password']" #password='ngModel'
autocomplete="new-password" minlength="8" required>
<span class="form-icon form-icon-dark" (click)="authService.togglePasswordVisibility()">
<i *ngIf="!authService.canShowPassword" class="fa fa-eye pointer"></i>
<i *ngIf="authService.canShowPassword" class="fa fa-eye-slash pointer"></i>
</span>
<label for="password" [class.active]="ispasswordFocused">Password (min 8 characters) *</label>
<div class="wrn-msg text-highlight"
*ngIf="password.invalid && (password.dirty || password.touched || loginForm.submitted)">
<p *ngIf="password.errors.minlength">Password is less than 8 characters.</p>
<p *ngIf="password.errors.required">Password is required.</p>
</div>
<div class="col s6 align-right right rm-gut">
<a routerLink="/auth/reset-password" class="light-link fg-pass">Forgot Password or Username?</a>
</div>
<div class="row">
<br>
<div class="col s6 align-left rm-gut">
<button class="waves-effect waves-dark btn ev-btn-dark grad-btn grad-btn-dark w-300" type="submit">Log In
</button>
</div>
<div class="col s6 align-right right rm-gut">
<a routerLink="/auth/reset-password" class="light-link fg-pass">Forgot Password or Username?</a>
</div>
</div>
<div *ngIf="authService.isFormError" class="wrn-msg text-highlight align-left"> {{authService.FormError}}</div>
<div>
<p class="text-light-gray">
<span class="text-med-black">Start with a new account </span><a class="highlight-link"
[routerLink]="signupRoute"> Sign Up</a>
</p>
</div>
</form>
</div>
</div>
<div *ngIf="authService.isFormError" class="wrn-msg text-highlight align-left"> {{authService.FormError}}</div>
<div>
<p class="text-light-gray">
<span class="text-med-black">Start with a new account </span><a class="highlight-link" [routerLink]="signupRoute">
Sign Up</a>
</p>
</div>
</div>
62 changes: 34 additions & 28 deletions src/app/components/auth/login/login.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { ApiService } from '../../../services/api.service';
import { AuthService } from '../../../services/auth.service';
import { GlobalService } from '../../../services/global.service';
import { EndpointsService } from '../../../services/endpoints.service';
import { Router, ActivatedRoute} from '@angular/router';
import { Router, ActivatedRoute } from '@angular/router';

/**
* Component Class
Expand All @@ -19,6 +19,13 @@ import { Router, ActivatedRoute} from '@angular/router';
})
export class LoginComponent implements OnInit, AfterViewInit {

/**
* Contains the fields for the login
*/
loginForm = 'loginform';
@ViewChildren('loginform')
components: QueryList<InputComponent>;

isnameFocused = false;
ispasswordFocused = false;

Expand Down Expand Up @@ -49,13 +56,13 @@ export class LoginComponent implements OnInit, AfterViewInit {
* @param endpointsService
*/
constructor(@Inject(DOCUMENT) private document: Document,
private windowService: WindowService,
private globalService: GlobalService,
private apiService: ApiService,
public authService: AuthService,
private route: ActivatedRoute,
private router: Router,
private endpointsService: EndpointsService) {
private windowService: WindowService,
private globalService: GlobalService,
private apiService: ApiService,
public authService: AuthService,
private route: ActivatedRoute,
private router: Router,
private endpointsService: EndpointsService) {
}

/**
Expand Down Expand Up @@ -85,49 +92,48 @@ export class LoginComponent implements OnInit, AfterViewInit {
self.router.navigate([redirectTo]);
}

// Validate Login Form
formValidate() {
this.globalService.formValidate(this.components, this.userLogin, this);
}

// Function to login
userLogin(loginFormValid) {
if (!loginFormValid) {
this.globalService.stopLoader();
return;
}

this.globalService.startLoader('Taking you to EvalAI!');
userLogin(self) {

self.globalService.startLoader('Taking you to EvalAI!');
const LOGIN_BODY = {
'username': this.authService.getUser['name'],
'password': this.authService.getUser['password'],
username: self.globalService.formValueForLabel(self.components, 'name'),
password: self.globalService.formValueForLabel(self.components, 'password')
};

this.apiService.postUrl(this.endpointsService.loginURL(), LOGIN_BODY).subscribe(
self.apiService.postUrl(self.endpointsService.loginURL(), LOGIN_BODY).subscribe(
data => {
this.globalService.storeData(this.globalService.authStorageKey, data['token']);
this.authService.loggedIn(true);
this.globalService.stopLoader();
this.redirectCheck(this);
self.globalService.storeData(self.globalService.authStorageKey, data['token']);
self.authService.loggedIn(true);
self.globalService.stopLoader();
self.redirectCheck(self);
},

err => {
this.globalService.stopLoader();
self.globalService.stopLoader();

if (err.status === 400) {
this.authService.isFormError = true;
self.authService.isFormError = true;
try {
const non_field_errors = typeof (err.error.non_field_errors) !== 'undefined';
if (non_field_errors) {
this.authService.FormError = err.error.non_field_errors[0];
self.authService.FormError = err.error.non_field_errors[0];
}
} catch (error) {
setTimeout(() => {
this.globalService.showToast('Error', 'Unable to Login.Please Try Again!', 5);
self.globalService.showToast('Error', 'Unable to Login.Please Try Again!', 5);
}, 1000);
}
} else {
this.globalService.handleApiError(err);
self.globalService.handleApiError(err);
}
},
() => {}
() => { }
);
}

Expand Down
69 changes: 27 additions & 42 deletions src/app/components/auth/reset-password/reset-password.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
<ul class="align-left">
<li>
<br>
<span class="text-highlight">Password reset link has been sent to your registered email address. Please check your email inbox.</span>
<span class="text-highlight">Password reset link has been sent to your registered email address. Please check
your email inbox.</span>
</li>
<li>
<br>
<a [routerLink]="loginRoute" class="waves-effect waves-dark btn ev-btn-dark w-300" type="submit" value="Submit"
(click)="authService.resetForm()">Back to Log In</a>
(click)="authService.resetForm()">Back to Log In</a>
</li>
</ul>
</div>
Expand All @@ -17,48 +18,32 @@
<div class="col s12 m6 offset-m3 left">
<ul class="left">
<li class="ev-horiz-list"><a [routerLink]="resetPasswordRoute" class="light-link" routerLinkActive="active-auth"
(click)="authService.resetForm()">Enter email to reset password</a></li>
(click)="authService.resetForm()">Enter email to reset password</a></li>
</ul>
</div>
<div class="col s12 m6 offset-m3">
<form name="resetpassForm" #resetpassForm="ngForm" appValidateEmail (ngSubmit)="resetPassword(resetpassForm.valid)"
class="reset-password" novalidate>
<!-- email -->
<div class="input-field align-left">
<input type="email" id="email" class="dark-autofill" name="email" #email="ngModel"
(focusin)="isemailFocused = true" (focusout)="isemailFocused = authService.getUser['email'] !== ''"
(change)="isemailFocused = authService.getUser['email'] !== ''"
[(ngModel)]="authService.getUser['email']" required>
<span class="form-icon form-icon-dark"><i class="fa fa-envelope"></i></span>
<label for="email" [class.active]="isemailFocused">Email*</label>
<div class="wrn-msg text-highlight"
*ngIf="email.invalid && (email.dirty || email.touched || resetpassForm.submitted)">
<p *ngIf="email.errors.required">Email address is required.</p>
</div>
<div class="wrn-msg text-highlight"
*ngIf="resetpassForm.errors != null && email.valid && (email.dirty || email.touched || resetpassForm.submitted)">
<p *ngIf="resetpassForm.errors['InvalidEmail']">Please enter valid email address.</p>
</div>
<div class="col s12 m6 offset-m3" (keyup.enter)="formValidate()">
<!-- email -->
<div class="input-field align-left">
<app-input [inputStyle]="'dark-autofill'" [type]="'email'" [label]="'email'" [placeholder]="'Email'"
[isRequired]="true" [icon]="'fa fa-envelope'" #resetForm></app-input>
</div>
<div class="row">
<br>
<div class="col s6 align-left rm-gut">
<button class="waves-effect waves-dark btn ev-btn-dark w-300 grad-btn grad-btn-dark" type="submit"
value="Submit" (click)="formValidate()">Submit
</button>
</div>
<div class="row">
<br>
<div class="col s6 align-left rm-gut">
<button class="waves-effect waves-dark btn ev-btn-dark w-300 grad-btn grad-btn-dark" type="submit"
value="Submit">Submit
</button>
</div>
<div class="col s6 align-right right rm-gut">
<a [routerLink]="loginRoute" class="light-link fg-pass">Back to Log In</a>
</div>
</div>
<div *ngIf="authService.isFormError" class="wrn-msg text-highlight align-left"> {{authService.FormError}}</div>
<div>
<p class="text-light-gray">
<span class="text-med-black">Start with a new account </span><a class="highlight-link"
[routerLink]="signupRoute"
(click)="authService.resetForm()"> Sign Up</a>
</p>
<div class="col s6 align-right right rm-gut">
<a [routerLink]="loginRoute" class="light-link fg-pass">Back to Log In</a>
</div>
</form>
</div>
<div *ngIf="authService.isFormError" class="wrn-msg text-highlight align-left"> {{authService.FormError}}</div>
<div>
<p class="text-light-gray">
<span class="text-med-black">Start with a new account </span><a class="highlight-link"
[routerLink]="signupRoute" (click)="authService.resetForm()"> Sign Up</a>
</p>
</div>
</div>
</div>
</div>
24 changes: 13 additions & 11 deletions src/app/components/auth/reset-password/reset-password.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import {ResetPasswordComponent} from './reset-password.component';
import {FormsModule} from '@angular/forms';
import {AuthService} from '../../../services/auth.service';
import {GlobalService} from '../../../services/global.service';
import {EndpointsService} from '../../../services/endpoints.service';
import {ApiService} from '../../../services/api.service';
import {HttpClientModule} from '@angular/common/http';
import {RouterTestingModule} from '@angular/router/testing';
import { ResetPasswordComponent } from './reset-password.component';
import { FormsModule } from '@angular/forms';
import { AuthService } from '../../../services/auth.service';
import { GlobalService } from '../../../services/global.service';
import { EndpointsService } from '../../../services/endpoints.service';
import { ApiService } from '../../../services/api.service';
import { HttpClientModule } from '@angular/common/http';
import { RouterTestingModule } from '@angular/router/testing';
import { InputComponent } from '../../utility/input/input.component';
import { OwlDateTimeComponent, OwlDateTimeModule } from 'ng-pick-datetime';

describe('ResetPasswordComponent', () => {
let component: ResetPasswordComponent;
let fixture: ComponentFixture<ResetPasswordComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ResetPasswordComponent],
declarations: [ResetPasswordComponent, InputComponent],
providers: [AuthService, GlobalService, EndpointsService, ApiService],
imports: [HttpClientModule, RouterTestingModule, FormsModule]
imports: [HttpClientModule, RouterTestingModule, FormsModule, OwlDateTimeModule]
})
.compileComponents();
}));
Expand Down
Loading