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

Style register/login page

Browse Source
This commit is contained in:
Mathieu Sanchez 2019-06-08 09:56:19 +09:00
parent 39f1bcfd33
commit a598ab9dbf
8 changed files with 210 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/app-material.module.ts
View File

@ -4,7 +4,14 @@ import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatTableModule } from '@angular/material/table';
import { MatInputModule, MatListModule, MatNativeDateModule, MatSnackBarModule, MatTooltipModule } from '@angular/material';
import {
MatDialogModule,
MatInputModule,
MatListModule,
MatNativeDateModule,
MatSnackBarModule,
MatTooltipModule
} from '@angular/material';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatDatepickerModule } from '@angular/material/datepicker';
@ -12,6 +19,7 @@ import { MatSelectModule } from '@angular/material/select';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { FormsModule } from '@angular/forms';
@NgModule( {
exports: [
@ -31,6 +39,9 @@ import { MatSidenavModule } from '@angular/material/sidenav';
MatMenuModule,
MatSidenavModule,
MatListModule,
MatFormFieldModule,
MatDialogModule,
FormsModule,
]
} )
export class AppMaterialModule {

8
src/app/app-routing.module.ts
View File

@ -8,7 +8,13 @@ import { MyScheduleComponent } from '@app/my-schedule/my-schedule.component';
const routes: Routes = [
// No logged pages
{ path: '', component: HomeComponent, },
{ path: 'register', component: RegisterComponent },
{
path: 'login',
component: RegisterComponent,
data: {
title: 'Sign In or Sing Up in your account',
},
},
{ path: 'activities', component: ActivitiesComponent },
{ path: 'my-schedule', component: MyScheduleComponent },
// {

17
src/app/app.component.html
View File

@ -19,8 +19,12 @@
</mat-menu>
<mat-menu #profileMenu="matMenu">
<a routerLink="/register"><button mat-menu-item>Login</button></a>
<a routerLink="/register"><button mat-menu-item>Create Account</button></a>
<a [routerLink]="[ 'login' ]">
<button mat-menu-item>Login</button>
</a>
<a [queryParams]="{ 'new-account': 'true' }" [routerLink]="[ 'login' ]">
<button mat-menu-item>Create Account</button>
</a>
<button mat-menu-item (click)="authService.logout()">Logout</button>
</mat-menu>
@ -28,7 +32,8 @@
<header>
<div fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between" fxShow id="header-container-desktop">
<div fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between" fxShow
id="header-container-desktop">
<div class="title" fxFlex="200px">
<a routerLink="/">DiscoTrip</a>
@ -65,9 +70,11 @@
</div>
<div fxHide.gt-sm="true" fxLayout="row" fxLayoutAlign="space-between" fxShow id="header-container-mobile">
<div fxHide.gt-sm="true" fxLayout="row" fxLayoutAlign="space-between" fxShow
id="header-container-mobile">
<button (click)="drawer.toggle()" mat-flat-button style="position: absolute;top: 0;left: 0;height: 60px;">
<button (click)="drawer.toggle()" mat-flat-button
style="position: absolute;top: 0;left: 0;height: 60px;">
<mat-icon style="transform: scale(1.3)">menu</mat-icon>
</button>

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

@ -34,7 +34,7 @@ import { SearchCardComponent } from './search-card/search-card.component';
import { MyScheduleComponent } from './my-schedule/my-schedule.component';
import { ActivitiesComponent } from './activities/activities.component';
import { AngularFirestore } from '@angular/fire/firestore';
import { MatDialogModule } from '@angular/material';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule( {
declarations: [
@ -54,8 +54,8 @@ import { MatDialogModule } from '@angular/material';
AngularFireAuthModule,
AngularFireDatabaseModule,
AppMaterialModule,
MatDialogModule,
ScheduleModule,
ReactiveFormsModule,
],
providers: [
AngularFirestore,

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

@ -1,75 +1,70 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { Router } from '@angular/router';
import { auth } from 'firebase/app';
import { AngularFireAuth } from "@angular/fire/auth";
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 {
user: User;
export class AuthService {
user: User;
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);
}
})
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 );
}
} );
}
async register(email: string, password: string) {
get isLoggedIn(): boolean {
const user = JSON.parse( localStorage.getItem( 'user' ) );
return user !== 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;
}
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);
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 {
await this.afAuth.auth.signInWithEmailAndPassword( email, password );
alert( 'User: ' + email + ' is connected' );
this.router.navigate( [ '/' ] );
} catch ( e ) {
alert( 'Error!' + e.message );
}
}
async login(email: string, password: string) {
try {
await this.afAuth.auth.signInWithEmailAndPassword(email, password)
alert("User: " + email + " is connected")
this.router.navigate(['/']);
} catch (e) {
alert("Error!" + e.message);
}
}
async logout(){
await this.afAuth.auth.signOut();
localStorage.removeItem('user');
alert("Thank you for using DiscoTrip, see you soon")
}
get isLoggedIn(): boolean {
const user = JSON.parse(localStorage.getItem('user'));
return user !== 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;
}
async logout() {
await this.afAuth.auth.signOut();
localStorage.removeItem( 'user' );
alert( 'Thank you for using DiscoTrip, see you soon' );
}
}

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

@ -1,22 +1,98 @@
<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>
<button class="btn btn-lg btn-primary btn-block mb-1" (click)="authService.register(userEmail.value, userPassword.value)">Register</button>
<div class="main-container">
<div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign="space-between">
<div fxFlex style="margin-top: 150px">
<mat-accordion>
<mat-expansion-panel [expanded]="this.openState.login">
<mat-expansion-panel-header (click)="loginClick()">
<mat-panel-title>Sign in</mat-panel-title>
<mat-panel-description>Sign In on our DiscoTrip website</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Email</mat-label>
<input #userEmail1 matInput placeholder="Email" required type="email">
</mat-form-field>
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Password</mat-label>
<input #userPassword1 matInput placeholder="Password" required type="password">
</mat-form-field>
<button (click)="authService.login( userEmail1.value, userPassword1.value )"
mat-flat-button>
Sign In
</button>
</mat-expansion-panel>
<mat-expansion-panel [expanded]="this.openState.newAccount">
<mat-expansion-panel-header (click)="newAccountClick()">
<mat-panel-title>Sign Up</mat-panel-title>
<mat-panel-description>
You don't have an account yet ? Just sign up
</mat-panel-description>
</mat-expansion-panel-header>
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Email</mat-label>
<input #userEmail2 matInput placeholder="Adresse Email" required type="email">
</mat-form-field>
<mat-form-field appearance="outline"
style="width: 100%">
<mat-label>Password</mat-label>
<input #userPassword2 matInput placeholder="Password" required
type="password">
</mat-form-field>
<button (click)="authService.register( userEmail2.value, userPassword2.value )"
mat-flat-button type="submit">
Sign Up
</button>
</div>
</div>
</div>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</div>

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

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { AuthService } from '@app/core/services/auth/auth.service';
import { ActivatedRoute } from '@angular/router';
@Component( {
selector: 'app-register',
@ -8,10 +9,31 @@ import { AuthService } from '@app/core/services/auth/auth.service';
} )
export class RegisterComponent implements OnInit {
constructor( public authService: AuthService ) {
public openState = {
login: true,
newAccount: false,
};
constructor( public authService: AuthService, private route: ActivatedRoute ) {
}
ngOnInit() {
this.route.queryParams.forEach( ( val ) => {
if ( val.hasOwnProperty( 'new-account' ) ) {
this.newAccountClick();
}
} );
}
// Clicks
public loginClick(): void {
this.openState.newAccount = false;
this.openState.login = !this.openState.login;
}
public newAccountClick(): void {
this.openState.login = false;
this.openState.newAccount = !this.openState.newAccount;
}
}

4
src/styles.css
View File

@ -26,6 +26,10 @@ app-root .mat-fab .mat-button-wrapper {
min-height: 80%;
}
a {
text-decoration: none;
}
.mat-form-field.mat-focused .mat-form-field-ripple {
background-color: #078171;
}