Skip to content

Commit

Permalink
fix(validation): fix validation on auth forms
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashefor
ashefor committed Jan 14, 2020
1 parent 7d2ea27 commit a5f18e4
Show file tree
Hide file tree
Showing 6 changed files with 190 additions and 98 deletions.
56 changes: 31 additions & 25 deletions src/app/components/user/login/login.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,31 +16,37 @@ <h1 class="h3 mb-3 font-weight-normal" style="text-align: center"> Continue with
</div>
</div>
<p class="text-center mt-3"> OR </p>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" formControlName="username">
<div class="password-area">
<input type="password" id="inputPassword" class="form-control" placeholder="Password"
formControlName="password" [type]="hide? 'password': 'text'">
<a role="button" (click)="togglePwd()">
<i class="{{hide ? 'fa fa-eye-slash' : 'fa fa-eye'}}"></i>
</a>
</div>
<button class="btn btn-success btn-block" type="submit"><i class="fa fa-sign-in"></i> Sign in <span
*ngIf="loading"><i class="fa fa-spin fa-spinner"></i></span> </button>
<div class="d-flex mt-2">
<div class="form-check mr-auto">
<input type="checkbox" (change)="keepLoggedIn($event)" formControlName="checked"
class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember me</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please input your username!">
<nz-input-group nzPrefixIcon="user" nzSize="large">
<input type="text" nz-input formControlName="username" placeholder="Username" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzErrorTip="Please input your Password!" class="password-area">
<nz-input-group nzPrefixIcon="lock" nzSize="large">
<input [type]="hide ? 'password' : 'text'" nz-input formControlName="password" placeholder="Password" required />
<a role="button" (click)="togglePwd()" class="togglepwdbtn">
<i nz-icon nzType="{{hide ? 'eye-invisible' : 'eye'}}" nzTheme="outline"></i>
</a>
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control>
<label nz-checkbox formControlName="remember" (click)="keepLoggedIn()">
<span>Remember me</span>
</label>
<a class="login-form-forgot" class="login-form-forgot">Forgot password</a>
<button nz-button class="login-form-button" nzType="primary" nzSize="large" [nzLoading]="loading">{{loading ? 'Logging In' : 'Log in'}}</button>
<div class="text-center">
<span>
Don't have an account? <a [routerLink]="['/auth/register']">Create one now</a>
</span>
</div>
<a [routerLink]="['/auth/reset-password']" id="forgot_pswd">Forgot password?</a>
</div>
<hr>
<!-- Don't have an account! -->
<div class="text-center">
<span>
Don't have an account? <a [routerLink]="['/auth/register']">Create one now</a>
</span>
</div>
</form>
</nz-form-control>
</nz-form-item>
</form>

</div>
16 changes: 15 additions & 1 deletion src/app/components/user/login/login.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,26 @@
a{
position: absolute;
right: 15px;
top: 10px;
top: 4px;
font-size: 18px;
z-index: 99;
color: black !important;
}
}

form{
.btn-login{
background-color: green;
color: white;
}
.login-form-forgot {
float: right;
}

.login-form-button {
width: 100%;
}
}

/* Mobile */

Expand Down
53 changes: 27 additions & 26 deletions src/app/components/user/login/login.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,52 +16,53 @@ export class LoginComponent implements OnInit {
loginForm: FormGroup;
hide = true;
loading;
checked: boolean = false;
constructor(private authservice: AuthService, private formbuilder: FormBuilder, private router: Router, private toastr: ToastrNotificationService) { }
checked = false;
constructor(private authservice: AuthService,
private formbuilder: FormBuilder, private router: Router, private toastr: ToastrNotificationService) { }

ngOnInit() {
this.initialiseForm()
this.initialiseForm();
}
initialiseForm() {
this.loginForm = this.formbuilder.group({
username: ['', Validators.compose([Validators.required, Validators.minLength(1)])],
username: ['', Validators.required],
password: ['', Validators.required],
checked: [this.checked]
})
remember: [this.checked]
});
}

getErrorMessage() {
return this.loginForm.get('username').hasError('required') ? 'You must enter a value' :
this.loginForm.get('username').hasError('minlength') ? 'Not a valid email' :
'';
// tslint:disable-next-line
for (const i in this.loginForm.controls) {
this.loginForm.controls[i].markAsDirty();
this.loginForm.controls[i].updateValueAndValidity();
}
}
login(formvalue) {
this.getErrorMessage();
if (this.loginForm && this.loginForm.valid) {
this.loading = true;
this.authservice.loginUser(formvalue.username, formvalue.password).subscribe(data=>{
if(data){
this.loading = false
this.toastr.successToaster("successful login")
if(this.authservice.redirectUrl){
this.router.navigateByUrl(this.authservice.redirectUrl)
}else{
this.router.navigate(['/posts'])
this.authservice.loginUser(formvalue.username, formvalue.password).subscribe(data => {
if (data) {
this.loading = false;
if (this.authservice.redirectUrl) {
this.router.navigateByUrl(this.authservice.redirectUrl);
} else {
this.router.navigate(['/posts']);
}
}
},(error: any)=>{
this.loading = false
})
}, (error: any) => {
this.loading = false;
});
} else {
this.loading = false;
this.toastr.errorToaster('please enter a username and/or password')
}
}

keepLoggedIn(e) {
this.checked = e.target.checked
keepLoggedIn() {
this.checked = ! this.checked;
}

togglePwd(){
this.hide = !this.hide
togglePwd() {
this.hide = !this.hide;
}
}
108 changes: 80 additions & 28 deletions src/app/components/user/register/register.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div id="logreg-forms">
<form action="/signup/" class="form-signup" [formGroup]="registerForm" (ngSubmit)="register(registerForm.value)">
<form nzForm class="form-signup" [formGroup]="registerForm" (ngSubmit)="register(registerForm.value)">
<h1 class="h3 mb-3 font-weight-normal" style="text-align: center"> Continue with</h1>
<div class="container">
<div class="row social-login">
Expand All @@ -17,33 +17,85 @@ <h1 class="h3 mb-3 font-weight-normal" style="text-align: center"> Continue with
</div>

<p style="text-align:center">OR</p>
<input type="text" id="user-fullname" class="form-control mb-2" placeholder="Full name" formControlName="name"
required>
<input type="email" id="user-email" class="form-control mb-2" placeholder="Email address"
formControlName="email" required>
<input type="text" id="user-name" class="form-control mb-2" placeholder="choose a username"
formControlName="username" required>
<input type="password" id="user-pass" class="form-control mb-2" placeholder="Password"
formControlName="password" required>
<input type="password" id="user-repeatpass" class="form-control" placeholder="Repeat Password"
formControlName="confirmPassword" required>

<div class="form-check mt-2">
<input type="checkbox" formControlName="checked" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">I agree to the <a href="#">Terms and
Conditions</a></label>
</div>
<button class="btn btn-primary btn-block" type="submit"><i class="fa fa-user-plus"></i> Sign Up <span
*ngIf="loading"><i class="fa fa-spin fa-spinner"></i></span> </button>

<hr>
<!-- Don't have an account! -->
<div class="text-center">
<span>
Already have an account? <a [routerLink]="['/auth/login']">Login here</a>
</span>
</div>
<nz-form-item>
<nz-form-control nzErrorTip="Please input your Full Name!">
<input nz-input nzSize="large" id="name" formControlName="name" placeholder="Full Name" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzErrorTip]="emailErr">
<input nz-input nzSize="large" formControlName="email" id="email" placeholder="Email Address" />
<ng-template #emailErr let-emailErr>
<ng-container *ngIf="emailErr.hasError('required')">
Please input your Email!
</ng-container>
<ng-container *ngIf="emailErr.hasError('email')">
Please choose a valid Email!
</ng-container>
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzErrorTip="Please input your username">
<input nz-input nzSize="large" id="username" formControlName="username" placeholder="Username" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzErrorTip]="inputErr">
<input
nz-input
nzSize="large"
type="password"
id="password"
formControlName="password"
(ngModelChange)="updateConfirmValidator()"
placeholder="Password"
/>
<ng-template #inputErr let-inputErr>
<ng-container *ngIf="inputErr.hasError('required')">
Please input your password!
</ng-container>
<ng-container *ngIf="inputErr.hasError('minlength')">
Please enter at least 6 characters!
</ng-container>
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzErrorTip]="errorTpl">
<input nz-input nzSize="large"
type="password"
formControlName="checkPassword"
id="checkPassword"
placeholder="Repeat Password"/>
<ng-template #errorTpl let-control>
<ng-container *ngIf="control.hasError('required')">
Please confirm your password!
</ng-container>
<ng-container *ngIf="control.hasError('confirm')">
Two passwords that you enter is inconsistent!
</ng-container>
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item nz-row class="register-area">
<nz-form-control [nzSpan]="14" [nzOffset]="6">
<label nz-checkbox formControlName="agree">
<span>I have read the <a>agreement</a></span>
</label>
</nz-form-control>
</nz-form-item>
<nz-form-item nz-row class="register-area">
<nz-form-control>
<button nz-button nzBlock nzType="primary">Register</button>
</nz-form-control>
</nz-form-item>
<hr>
<div class="text-center">
<span>
Already have an account? <a [routerLink]="['/auth/login']">Login here</a>
</span>
</div>
</form>


</div>
3 changes: 2 additions & 1 deletion src/app/components/user/register/register.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,8 @@

@media screen and (max-width:500px){
#logreg-forms{
width:300px;
// width:300px;
width: 100%;
}

// #logreg-forms .social-login{
Expand Down
52 changes: 35 additions & 17 deletions src/app/components/user/register/register.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { AuthService } from 'src/app/services/auth.service';
import { ToastrNotificationService } from 'src/app/services/toastr-notification.service';
import { Router } from '@angular/router';
Expand All @@ -19,27 +19,45 @@ export class RegisterComponent implements OnInit {

initialiseForm() {
this.registerForm = this.formbuilder.group({
name: ['', Validators.required],
username: ['', Validators.required],
email: ['', Validators.required],
password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
confirmPassword: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
checked: ['', Validators.required]
name: [null, Validators.required],
username: [null, Validators.required],
email: [null, [Validators.required, Validators.email]],
password: [null, Validators.compose([Validators.required, Validators.minLength(6)])],
checkPassword: [null, Validators.compose([Validators.required, Validators.minLength(6), this.confirmationValidator])],
agree: [false, Validators.required]
}, {
updateOn: 'blur'
})
}

getErrorMessage() {
// tslint:disable-next-line
for (const i in this.registerForm.controls) {
this.registerForm.controls[i].markAsDirty();
this.registerForm.controls[i].updateValueAndValidity();
}
}
updateConfirmValidator(): void {
Promise.resolve().then(() => this.registerForm.controls.checkPassword.updateValueAndValidity());
}
confirmationValidator = (control: FormControl): { [s: string]: boolean } => {
if (!control.value) {
return { required: true };
} else if (control.value !== this.registerForm.controls.password.value) {
return { confirm: true, error: true };
}
return {};
};
register() {
this.getErrorMessage()
console.log(this.registerForm.value);
if (this.registerForm && this.registerForm.valid) {
const pwd1 = this.registerForm.get('password').value
const pwd2 = this.registerForm.get('confirmPassword').value
if (pwd1 === pwd2) {
this.authservice.registerUser(this.registerForm.value).subscribe(data => {
if (data) {
this.toastr.successToaster('Sign up successful')
this.router.navigate(['/posts'])
}
})
}
this.authservice.registerUser(this.registerForm.value).subscribe(data => {
if (data) {
this.toastr.successToaster('Sign up successful')
this.router.navigate(['/posts'])
}
})
}
}
}

0 comments on commit a5f18e4

Please sign in to comment.