Commit a3274084 authored by Dhiraj Shrivastava's avatar Dhiraj Shrivastava
Browse files

UI Changes with Country Code

parent 7be78927
......@@ -46,7 +46,7 @@ export class AuthenticationService {
return this.http.post<any>(this.retrieve_passenger,body)
.pipe(map(user => {
console.log("User data after login-",user)
if (user ) {
if (user && user.Name) {
localStorage.setItem('currentUser', JSON.stringify(user));
localStorage.setItem('CurrentPassword',password);
localStorage.setItem('CurrentFqtv',username);
......
<ng-container *ngIf="currentUser && currentUser.Fqtv === 'admin'">
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top custom-nav"
style=""
*ngIf="currentUser || returnUrl">
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top custom-nav" style=""
*ngIf="currentUser || returnUrl">
<a class="navbar-brand" href="#"><img src="../assets/images/bestAirline.jpg" alt="logo" width="140px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
......@@ -14,24 +12,26 @@
class="sr-only">(current)</span></a>
</li>
<!-- <li class="nav-item" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:true}">
<a class="nav-link" routerLink="/change-flight" routerLinkActive="active-link">Change Flight Status</a>
</li> -->
<a class="nav-link" routerLink="/change-flight" routerLinkActive="active-link">Change Flight Status</a>
</li> -->
<li class="nav-item">
<a class="nav-link" [routerLink]="['/notified-passengers']" routerLinkActive="is-active">
Passenger Notification Logs</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item" >
<li class="nav-item">
<a class="nav-link" (click)="logout()" style=" display: flex;
align-items: center;"><mat-icon>logout</mat-icon>Logout</a>
align-items: center;">
<mat-icon>logout</mat-icon>Logout
</a>
</li>
</ul>
</div>
</nav>
</ng-container>
<ng-container *ngIf="currentUser && currentUser.Fqtv !== 'admin'">
<nav class="navbar navbar-expand-md navbar-light bg-dark sticky-top custom-nav" style="" >
<ng-container *ngIf="currentUser && currentUser.Fqtv !== '' && currentUser.Fqtv !== 'admin'">
<nav class="navbar navbar-expand-md navbar-light bg-dark sticky-top custom-nav" style="">
<a class="navbar-brand" href="#"><img src="../assets/images/bestAirline.jpg" alt="logo" width="150px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
......@@ -48,9 +48,11 @@
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item" >
<a class="nav-link" (click)="logout()" style=" display: flex;
align-items: center;"><mat-icon>logout</mat-icon>Logout</a>
<li class="nav-item">
<a class="nav-link" (click)="logout()" style=" display: flex;
align-items: center;">
<mat-icon>logout</mat-icon>Logout
</a>
</li>
</ul>
</div>
......@@ -58,8 +60,6 @@
</ng-container>
<!-- main app container -->
<div class="container" style="margin-bottom: 5%;">
<alert></alert>
......
<!-- <div class="login_body"> -->
<div class="row flex-column-reverse flex-sm-row flex-md-row">
<!-- <div class="col-sm-6 offset-sm-3"> -->
......@@ -6,7 +7,9 @@
<!-- <h3 class="tag-line">BEST Airlines</h3>
<h5 class="sub-tag-line" >Get the best, most economical and updated afresh listings here !</h5>
<hr> -->
<h2 class="login_title">Log in to continue</h2>
<img src="../assets/images/bestAirline.jpg" alt="logo" width="140px">
<hr>
<h2 class="login_title">Login to continue</h2>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label class="username" for="username">Username</label>
......@@ -42,11 +45,12 @@
<div class="col-lg-2"></div>
<div class="col-lg-10" style="margin-top: 20%;">
<!-- <h3 class="tag-line">BEST AIRLINES</h3> -->
<img src="../assets/images/bestAirlineLanding.jpg" alt="logo" width="490px" height="114px">
<!-- <img src="../assets/images/bestAirlineLanding.jpg" alt="logo" width="490px" height="114px"> -->
<!-- <h5 class="sub-tag-line" >Get the best, most economical and updated afresh listings here !</h5>
<hr> -->
<!-- <img src="/assets/images/ibm_logo1.jpg" style="align-items: center;" height="100px" width="140px"> -->
</div>
</div>
</div>
</div>
\ No newline at end of file
</div>
<!-- </div> -->
\ No newline at end of file
......@@ -6,7 +6,7 @@ import { User } from '../_models';
import { AlertService, AuthenticationService } from '../_services';
import { Subscription } from 'rxjs';
@Component({templateUrl: 'login.component.html'})
@Component({ templateUrl: 'login.component.html' })
export class LoginComponent implements OnInit {
loginForm: FormGroup;
loading = false;
......@@ -26,17 +26,19 @@ export class LoginComponent implements OnInit {
) {
//to set current user as admin
this.currentUserSubscription = this.authenticationService.currentUser.subscribe(user => {
this.currentUser = user;
this.currentUser = user;
});
// redirect to home if already logged in
if (this.authenticationService.currentUserValue) {
if (this.authenticationService.currentUserValue) {
this.router.navigate(['/']);
}
document.body.style.backgroundImage= "url('../../assets/images/airoplane5.png')";
document.body.style.backgroundOrigin= "content-box";
document.body.style.backgroundSize= "cover";
}
ngOnInit() {
......@@ -62,28 +64,30 @@ export class LoginComponent implements OnInit {
}
this.loading = true;
if(this.f.username.value ==='admin' && this.f.password.value === 'admin123'){
this.authenticationService.adminLogin(this.f.username.value , this.f.password.value);
this.router.navigate(['/admin']);
}else{
this.authenticationService.login(this.f.username.value, this.f.password.value)
.subscribe(
data => {
// console.log("data-",data.name);
if(data.name === 'Error'){
this.alertService.error('Login Failed. Please try again!', true);
if (this.f.username.value === 'admin' && this.f.password.value === 'admin123') {
this.authenticationService.adminLogin(this.f.username.value, this.f.password.value);
this.loading = false;
this.router.navigate(['/admin']);
} else {
this.authenticationService.login(this.f.username.value, this.f.password.value)
.subscribe(
data => {
// console.log("data-",data.name);
this.loading = false;
if (data && data.Name) {
// localStorage.setItem("CurrentFQTV",this.f.username.value);
this.router.navigate(['/home']);
} else {
this.alertService.error('Login Failed. Please try again!');
this.router.navigate(['/login']);
}
},
error => {
this.alertService.error('Error while login, please contact system administrator.');
this.loading = false;
this.router.navigate(['/login']);
}else{
// localStorage.setItem("CurrentFQTV",this.f.username.value);
this.router.navigate(['/home']);
}
},
error => {
this.alertService.error('Error while login, please contact system administrator.', true);
this.loading = false;
this.router.navigate(['/login']);
});
});
}
}
}
......@@ -37,7 +37,7 @@
</form> -->
<!-- <div class="login_body"> -->
<div class="row flex-column-reverse flex-md-row">
<!-- <div class="col-sm-6 offset-sm-3"> -->
......@@ -46,46 +46,70 @@
<!-- <h3 class="tag-line">BEST Airlines</h3>
<h5 class="sub-tag-line" >Get the best, most economical and updated afresh listings here !</h5>
<hr> -->
<img src="../assets/images/bestAirline.jpg" alt="logo" width="140px">
<hr>
<h2 class="register_title">Register Here</h2>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<!-- <label class="username" for="firstName">Name</label> -->
<input type="text" formControlName="firstName" placeholder="Name" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
<input type="text" formControlName="firstName" placeholder="Name" class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
<div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
<div *ngIf="f.firstName.errors.required">First Name is required</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-lg-4 col-xl-4">
<div class="form-group">
<select class="custom-select" (change)="changeCountry_from($event)" formControlName="country">
<option value="">Country</option>
<option value="+61">Australia</option>
<option value="+91">India</option>
<option value="+81">Japan</option>
<option value="+44">UK</option>
<option value="+1">USA</option>
</select>
</div>
</div>
<div class="col-md-8 col-lg-8 col-xl-8">
<div class="form-group">
<!-- <label class="username" for="phone">Phone</label> -->
<input type="number" formControlName="phone" placeholder="Phone" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.phone.errors }" />
<input type="number" formControlName="phone" placeholder="Phone" class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.phone.errors }" />
<div *ngIf="submitted && f.phone.errors" class="invalid-feedback">
<div *ngIf="f.phone.errors.required">Phone number is required</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<!-- <label class="username" for="phone">Email</label> -->
<input type="email" formControlName="email" placeholder="Email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
<input type="email" formControlName="email" placeholder="Email" class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.phone.errors.required">Email is required</div>
</div>
</div>
<div class="form-group">
<!-- <label class="username" for="phone">Date of Birth</label> -->
<input type="text" formControlName="dob" placeholder="Date of Birth (DDMMMYY)" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.dob.errors }" />
<input type="text" formControlName="dob" placeholder="Date of Birth (DDMMMYY)" class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.dob.errors }" />
<div *ngIf="submitted && f.dob.errors" class="invalid-feedback">
<div *ngIf="f.phone.errors.required">Date of Birth is required</div>
</div>
</div>
<div class="form-group">
<!-- <label class="username" for="phone">DOA</label> -->
<input type="text" formControlName="doa" placeholder=" Anniversary Date (DDMMM)" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.doa.errors }" />
<input type="text" formControlName="doa" placeholder=" Anniversary Date (DDMMM)"
class="form-control" [ngClass]="{ 'is-invalid': submitted && f.doa.errors }" />
<div *ngIf="submitted && f.doa.errors" class="invalid-feedback">
<div *ngIf="f.phone.errors.required">Anniversary Date is required</div>
<div *ngIf="f.phone.errors.required">Anniversary Date is required</div>
</div>
</div>
<div class="form-group">
<!-- <label class="password" for="password">Password</label> -->
<input type="password" formControlName="password" placeholder="Password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<input type="password" formControlName="password" placeholder="Password" class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
<div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
......@@ -95,10 +119,12 @@
<button [disabled]="loading" class="btn btn-login">Register</button>
<img *ngIf="loading"
src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
<img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
<a [routerLink]="['/login']" class="btn btn-link">Cancel</a>
<img *ngIf="loading"
src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
<a [routerLink]="['/login']" class="btn btn-link">Cancel</a>
</div>
</form>
</div>
</div>
</div>
\ No newline at end of file
</div>
</div>
<!-- </div> -->
\ No newline at end of file
......@@ -11,6 +11,7 @@ export class RegisterComponent implements OnInit {
registerForm: FormGroup;
loading = false;
submitted = false;
country_value:any;
constructor(
private formBuilder: FormBuilder,
......@@ -28,6 +29,7 @@ export class RegisterComponent implements OnInit {
ngOnInit() {
this.registerForm = this.formBuilder.group({
firstName: ['', Validators.required],
country: ['', Validators.required],
phone: ['', Validators.required],
email: ['', Validators.required],
dob: ['', Validators.required],
......@@ -39,6 +41,10 @@ export class RegisterComponent implements OnInit {
// convenience getter for easy access to form fields
get f() { return this.registerForm.controls; }
changeCountry_from(e) {
this.country_value = e.target.value;
}
onSubmit() {
this.submitted = true;
......@@ -48,6 +54,7 @@ export class RegisterComponent implements OnInit {
}
this.loading = true;
this.registerForm.value.phone = this.country_value + this.registerForm.value.phone;
console.log("user details for reg-",this.registerForm.value)
this.userService.register(this.registerForm.value)
.pipe(first())
......
......@@ -9,13 +9,21 @@ body{
padding: 0;
background-image: url('./assets/images/airoplane5.png') ;
// background-repeat: no-repeat;
background-origin: content-box;
background-size: cover;
background-origin: content-box;
background-size: cover;
}
.nav-link:hover{
color: #84b7ee !important;
}
.login_body{
margin: 0;
padding: 0;
background-image: url('./assets/images/airoplane5.png') ;
// background-repeat: no-repeat;
background-origin: content-box;
background-size: cover;
}
/* You can add global styles to this file, and also import other style files */
.jumbotron{
background: rgba(0, 0, 0, 0.35);
......@@ -25,13 +33,13 @@ body{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.login_title{
margin-bottom: 20%;
margin-bottom: 10%;
height: 10%;
font-weight: 200;
font-size: 1.5rem;
}
.register_title{
margin-bottom: 20%;
margin-bottom: 5%;
height: 10%;
font-weight: 200;
font-size: 1.5rem;
......@@ -61,7 +69,7 @@ hr{
margin-bottom: 1rem;
border: 0;
border-top: 1px solid #dae0e5ad !important;
margin-bottom: 20%;
margin-bottom: 5%;
}
.jumbotron h2{
color: white;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment