diff --git a/src/app/app-material.module.ts b/src/app/app-material.module.ts index 0f4b0d7..a00949f 100644 --- a/src/app/app-material.module.ts +++ b/src/app/app-material.module.ts @@ -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 { diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 4ee4bc5..9389fc1 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -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 }, // { diff --git a/src/app/app.component.html b/src/app/app.component.html index 2d423dd..76afdc0 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -19,8 +19,12 @@ - - + + + + + + @@ -28,7 +32,8 @@
-
+
DiscoTrip @@ -65,9 +70,11 @@
-
+
- @@ -87,4 +94,4 @@ - \ No newline at end of file + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4359661..20bbe25 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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, diff --git a/src/app/core/services/auth/auth.service.ts b/src/app/core/services/auth/auth.service.ts index dd34be5..4f659ad 100644 --- a/src/app/core/services/auth/auth.service.ts +++ b/src/app/core/services/auth/auth.service.ts @@ -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( 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( 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' ); + } } diff --git a/src/app/register/register.component.html b/src/app/register/register.component.html index cb11137..5ba22b5 100644 --- a/src/app/register/register.component.html +++ b/src/app/register/register.component.html @@ -1,22 +1,98 @@ -
-
-
-
-
Login
-
-
-
- -
-
- - - - +
+ +
+ +
+ + + + + + + + Sign in + + Sign In on our DiscoTrip website + + + + + + Email + + + + + + + + Password + + + + + + + + + + + + + + Sign Up + + + You don't have an account yet ? Just sign up + + + + +
+ +
+ +
+ + + + Email + + + + + + + + Password + + + + + + + +
+
+
-
-
+ + + + +
+
-
\ No newline at end of file + +
diff --git a/src/app/register/register.component.ts b/src/app/register/register.component.ts index 4fec0f9..083686f 100644 --- a/src/app/register/register.component.ts +++ b/src/app/register/register.component.ts @@ -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; } } diff --git a/src/styles.css b/src/styles.css index 0585c52..94fd2ef 100644 --- a/src/styles.css +++ b/src/styles.css @@ -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; }