Login and register

Logout is broken with merge
This commit is contained in:
Walter Jay 2019-06-04 16:37:09 +09:00
parent 7e7bc572d8
commit 10e37d437d
3 changed files with 40 additions and 34 deletions

View File

@ -19,17 +19,16 @@
</mat-menu> </mat-menu>
<mat-menu #profileMenu="matMenu"> <mat-menu #profileMenu="matMenu">
<button mat-menu-item>Login</button> <a routerLink="/register"><button mat-menu-item>Login</button></a>
<button mat-menu-item>Create Account</button> <a routerLink="/register"><button mat-menu-item>Create Account</button></a>
<button mat-menu-item>Logout</button> <button mat-menu-item (click)="authService.logout()">Logout</button>
</mat-menu> </mat-menu>
<mat-sidenav-content> <mat-sidenav-content>
<header> <header>
<div fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between" fxShow <div fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between" fxShow id="header-container-desktop">
id="header-container-desktop">
<div class="title" fxFlex="200px"> <div class="title" fxFlex="200px">
<a routerLink="/">DiscoTrip</a> <a routerLink="/">DiscoTrip</a>
@ -66,11 +65,9 @@
</div> </div>
<div fxHide.gt-sm="true" fxLayout="row" fxLayoutAlign="space-between" fxShow <div fxHide.gt-sm="true" fxLayout="row" fxLayoutAlign="space-between" fxShow id="header-container-mobile">
id="header-container-mobile">
<button (click)="drawer.toggle()" mat-flat-button <button (click)="drawer.toggle()" mat-flat-button style="position: absolute;top: 0;left: 0;height: 60px;">
style="position: absolute;top: 0;left: 0;height: 60px;">
<mat-icon style="transform: scale(1.3)">menu</mat-icon> <mat-icon style="transform: scale(1.3)">menu</mat-icon>
</button> </button>
@ -90,4 +87,4 @@
</mat-sidenav-content> </mat-sidenav-content>
</mat-sidenav-container> </mat-sidenav-container>

View File

@ -25,11 +25,21 @@ export class AuthService {
}) })
} }
async login(email: string, password: string) { async register(email: string, password: string) {
try {
await this.afAuth.auth.createUserWithEmailAndPassword(email, password)
alert("Thank you: " + email + " for registering on DiscoTrip")
this.router.navigate(['/']);
} catch (e) {
alert("Error!" + e.message);
}
}
async login(email: string, password: string) {
try { try {
await this.afAuth.auth.signInWithEmailAndPassword(email, password) await this.afAuth.auth.signInWithEmailAndPassword(email, password)
this.router.navigate(['register/list']); alert("User: " + email + " is connected")
this.router.navigate(['/']);
} catch (e) { } catch (e) {
alert("Error!" + e.message); alert("Error!" + e.message);
} }
@ -38,7 +48,7 @@ export class AuthService {
async logout(){ async logout(){
await this.afAuth.auth.signOut(); await this.afAuth.auth.signOut();
localStorage.removeItem('user'); localStorage.removeItem('user');
this.router.navigate(['/register']); alert("Thank you for using DiscoTrip, see you soon")
} }
get isLoggedIn(): boolean { get isLoggedIn(): boolean {

View File

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