mathieu/CAU-ICT-Spring-2019-Project-1
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Login if user exist

Browse Source
This commit is contained in:
Walter Jay
2019-06-04 11:07:28 +09:00
parent 38afecced9
commit 3592ba57bc
10 changed files with 184 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.module.ts
View File

@ -10,6 +10,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from '@app/app-routing.module';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireAuthModule } from "@angular/fire/auth";
import { AppMaterialModule } from '@app/app-material.module';
import { LogService, SEOService } from '@app/core/services';
@ -31,6 +32,7 @@ import { CardDashboardComponent } from './card-dashboard/card-dashboard.componen
BrowserAnimationsModule,
AppRoutingModule,
AngularFireModule.initializeApp( environment.firebaseConfig ),
AngularFireAuthModule,
AngularFireDatabaseModule,
AppMaterialModule,
],

4
src/app/core/guard/auth.guard.ts
View File

@ -18,9 +18,9 @@ export class AuthGuard implements CanActivate {
}
// not logged in so redirect to login page with the return url
this.router.navigate( [ '/login' ], { queryParams: { returnUrl: state.url } } );
this.router.navigate( [ '/register' ], { queryParams: { returnUrl: state.url } } );
return false;
}
}
}

115
src/app/core/services/auth/auth.service.ts
View File

@ -2,87 +2,64 @@ import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { Router } from '@angular/router';
import { User } from '@app/core/model';
import { auth } from 'firebase/app';
import { AngularFireAuth } from "@angular/fire/auth";
import { User } from 'firebase';
import { StorageService } from '@app/core/services/storage/storage.service';
import { LogService } from '@app/core/services/log/log.service';
// import * as config from '@assets/config.json';
@Injectable( { providedIn: 'root' } )
export class AuthService {
export class AuthService {
user: User;
public currentUser: Observable<User>;
// public emailRegex = new RegExp( );
private currentUserSubject: BehaviorSubject<User>;
constructor( private http: HttpClient, private router: Router, private stor: StorageService, private looger: LogService ) {
this.currentUserSubject = new BehaviorSubject<User>( stor.getLocal( 'user' ) as User );
this.currentUser = this.currentUserSubject.asObservable();
constructor(public afAuth: AngularFireAuth, public router: Router) {
this.afAuth.authState.subscribe(user => {
if (user) {
this.user = user;
localStorage.setItem('user', JSON.stringify(this.user));
} else {
localStorage.setItem('user', null);
}
})
}
public get currentUserValue(): User {
// if ( this.currentUserSubject.value && this.currentUserSubject.value.timeGetToken + 60 * 60 * 1000 < new Date().getTime() ) {
// const data = new FormData();
async login(email: string, password: string) {
// data.append( 'auth_token', this.currentUserSubject.value.token );
// this.http.post<any>( environment.baseUrl + config.url.upauth, data ).subscribe( ( res ) => {
// if ( res.statusCode !== 200 ) {
// this.logout();
// } else {
// this.currentUserSubject.value.timeGetToken = new Date().getTime();
// this.stor.setLocal( 'user', this.currentUserSubject.value );
// }
// } );
// }
return this.currentUserSubject.value;
}
try {
await this.afAuth.auth.signInWithEmailAndPassword(email, password)
this.router.navigate(['register/list']);
} catch (e) {
alert("Error!" + e.message);
}
}
public login( username: string, password: string ): any {
// const data: FormData = new FormData();
async logout(){
await this.afAuth.auth.signOut();
localStorage.removeItem('user');
this.router.navigate(['/register']);
}
// data.append( 'email', username );
// data.append( 'password', sha512.sha512( password ) );
get isLoggedIn(): boolean {
const user = JSON.parse(localStorage.getItem('user'));
return user !== null;
}
// return this.http.post<any>( environment.baseUrl + config.url.auth, data )
// .pipe( map( result => {
// let user = new User();
//
// this.looger.logInfo( result );
// // login successful if there's a jwt token in the response
// if ( result && result.body && result.statusCode === 200 ) {
//
// user.token = result.body;
// user.timeGetToken = new Date().getTime();
//
// // store user details and jwt token in local storage to keep user logged in between page refreshes
// this.stor.setLocal( 'user', user );
// this.currentUserSubject.next( user );
// } else {
// user = result.statusCode;
// }
//
// return user;
// } ) );
}
public logout(): void {
// remove user from local storage to log user out
// this.stor.setLocal( 'user' );
// this.currentUserSubject.next( null );
// this.router.navigate( [ '/login' ] );
}
public createAccount( email: string, password: string, repeat: string ): any {
// const data: FormData = new FormData();
// if ( password === repeat && this.emailRegex.test( email ) ) {
// data.append( 'email', email );
// data.append( 'password', sha512.sha512( password ) );
// return this.http.post( environment.baseUrl + config.url.register, data );
// }
return null;
}
public get currentUserValue(): User {
// if ( this.currentUserSubject.value && this.currentUserSubject.value.timeGetToken + 60 * 60 * 1000 < new Date().getTime() ) {
// const data = new FormData();
// data.append( 'auth_token', this.currentUserSubject.value.token );
// this.http.post<any>( environment.baseUrl + config.url.upauth, data ).subscribe( ( res ) => {
// if ( res.statusCode !== 200 ) {
// this.logout();
// } else {
// this.currentUserSubject.value.timeGetToken = new Date().getTime();
// this.stor.setLocal( 'user', this.currentUserSubject.value );
// }
// } );
// }
return //this.currentUserSubject.value;
}
}

68
src/app/header/header.component.html
View File

@ -1,47 +1,49 @@
<header>
<div id="header-container-desktop" fxLayout="row" fxLayoutAlign="space-between" fxShow
fxHide.lt-md="true">
<div id="header-container-desktop" fxLayout="row" fxLayoutAlign="space-between" fxShow fxHide.lt-md="true">
<div fxFlex="200px" class="title">
<a [routerLink]="">DiscoTrip</a>
</div>
<div fxFlex="calc(100% - 200px)" fxLayout="row" fxLayoutAlign="end">
<div fxFlex="200px" class="title">
<a [routerLink]="">DiscoTrip</a>
</div>
<div fxFlex="calc(100% - 200px)" fxLayout="row" fxLayoutAlign="end">
<div fxFlex="60px">
<button mat-fab class="account-button">
<mat-icon>local_airport</mat-icon>
</button>
</div>
<div fxFlex="60px">
<button mat-fab class="account-button">
<mat-icon>local_airport</mat-icon>
</button>
</div>
<div fxFlex="60px">
<button mat-fab class="account-button">
<mat-icon>person</mat-icon>
</button>
</div>
<div fxFlex="50px">
<!-- Search input -->
</div>
<div fxFlex="60px">
<button mat-fab class="account-button">
<mat-icon>person</mat-icon>
</button>
<li *ngIf="authService.isLoggedIn" class="nav-item">
<a class="nav-link" (click)="authService.logout()">Logout</a>
</li>
</div>
<div fxFlex="50px">
<!-- Search input -->
</div>
</div>
</div>
</div>
</div>
<div fxHide fxLayout="row" fxLayoutAlign="space-between" fxShow.lt-md="true"
id="header-container-mobile">
<div id="header-container-mobile" fxLayout="row" fxLayoutAlign="space-between" fxShow
fxHide.gt-sm="true">
<button mat-flat-button style="position: absolute;top: 0;left: 0;height: 60px;">
<mat-icon style="transform: scale(1.3)">menu</mat-icon>
</button>
<button mat-flat-button style="position: absolute;top: 0;left: 0;height: 60px;">
<mat-icon style="transform: scale(1.3)">menu</mat-icon>
</button>
<div fxFlex="100%">
<div fxFlex="100%">
<div class="title" style="width: 200px;margin: 5px auto;">
<a [routerLink]="">DiscoTrip</a>
</div>
<div class="title" style="width: 200px;margin: 5px auto;">
<a [routerLink]="">DiscoTrip</a>
</div>
</div>
</div>
</div>
</div>
</header>
</header>

3
src/app/header/header.component.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { AuthService } from '@app/core/services/auth/auth.service';
@Component( {
selector: 'app-header',
@ -7,7 +8,7 @@ import { Component, OnInit } from '@angular/core';
} )
export class HeaderComponent implements OnInit {
constructor() {
constructor(private authService: AuthService) {
}
ngOnInit() {

3
src/app/register/register.component.css
View File

@ -0,0 +1,3 @@
.card {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

26
src/app/register/register.component.html
View File

@ -1,3 +1,23 @@
<p>
register works!
</p>
<div class="container pt-3">
<div class="row justify-content-sm-center">
<div class="col-sm-10 col-md-6">
<div class="card border-info">
<div class="card-header">Login</div>
<div class="card-body">
<div class="row">
<div class="col-md-4 text-center">
<img src="https://placeimg.com/128/128/nature">
</div>
<div class="col-md-8">
<input type="text" class="form-control mb-2" placeholder="Email" #userEmail required autofocus>
<input type="password" class="form-control mb-2" placeholder="Password" #userPassword required>
<button class="btn btn-lg btn-primary btn-block mb-1" (click)="authService.login(userEmail.value, userPassword.value)">Login</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

3
src/app/register/register.component.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { AuthService } from '@app/core/services/auth/auth.service';
@Component( {
selector: 'app-register',
@ -7,7 +8,7 @@ import { Component, OnInit } from '@angular/core';
} )
export class RegisterComponent implements OnInit {
constructor() {
constructor(private authService: AuthService) {
}
ngOnInit() {