From f9fb93a57c24ce9022cdefc5c1577840167dc5fd Mon Sep 17 00:00:00 2001 From: Jim Martens Date: Sat, 18 Sep 2021 20:16:45 +0200 Subject: [PATCH] Added authentication with Firebase --- .../administration.component.html | 20 ++++++++ .../administration.component.scss | 0 .../administration.component.spec.ts | 25 ++++++++++ .../administration.component.ts | 15 ++++++ .../auth/administration/factions/faction.ts | 4 ++ .../factions/factions.component.html | 16 +++++++ .../factions/factions.component.scss | 0 .../factions/factions.component.spec.ts | 25 ++++++++++ .../factions/factions.component.ts | 30 ++++++++++++ .../src/app/auth/auth.guard.spec.ts | 16 +++++++ .../src/app/auth/auth.guard.ts | 19 ++++++++ .../src/app/auth/auth.service.spec.ts | 16 +++++++ .../src/app/auth/auth.service.ts | 43 ++++++++++++++++++ .../src/app/firebase/firebase.service.spec.ts | 16 +++++++ .../src/app/firebase/firebase.service.ts | Bin 0 -> 1926 bytes .../src/app/login/login.component.html | 24 ++++++++++ .../src/app/login/login.component.scss | 0 .../src/app/login/login.component.spec.ts | 25 ++++++++++ .../src/app/login/login.component.ts | 20 ++++++++ .../src/app/logout/logout.component.html | 1 + .../src/app/logout/logout.component.scss | 0 .../src/app/logout/logout.component.spec.ts | 25 ++++++++++ .../src/app/logout/logout.component.ts | 17 +++++++ .../src/app/navbar/navbar.component.html | 22 ++++++--- .../src/app/navbar/navbar.component.ts | 3 +- 25 files changed, 375 insertions(+), 7 deletions(-) create mode 100644 projects/speech-statistics/src/app/auth/administration/administration.component.html create mode 100644 projects/speech-statistics/src/app/auth/administration/administration.component.scss create mode 100644 projects/speech-statistics/src/app/auth/administration/administration.component.spec.ts create mode 100644 projects/speech-statistics/src/app/auth/administration/administration.component.ts create mode 100644 projects/speech-statistics/src/app/auth/administration/factions/faction.ts create mode 100644 projects/speech-statistics/src/app/auth/administration/factions/factions.component.html create mode 100644 projects/speech-statistics/src/app/auth/administration/factions/factions.component.scss create mode 100644 projects/speech-statistics/src/app/auth/administration/factions/factions.component.spec.ts create mode 100644 projects/speech-statistics/src/app/auth/administration/factions/factions.component.ts create mode 100644 projects/speech-statistics/src/app/auth/auth.guard.spec.ts create mode 100644 projects/speech-statistics/src/app/auth/auth.guard.ts create mode 100644 projects/speech-statistics/src/app/auth/auth.service.spec.ts create mode 100644 projects/speech-statistics/src/app/auth/auth.service.ts create mode 100644 projects/speech-statistics/src/app/firebase/firebase.service.spec.ts create mode 100644 projects/speech-statistics/src/app/firebase/firebase.service.ts create mode 100644 projects/speech-statistics/src/app/login/login.component.html create mode 100644 projects/speech-statistics/src/app/login/login.component.scss create mode 100644 projects/speech-statistics/src/app/login/login.component.spec.ts create mode 100644 projects/speech-statistics/src/app/login/login.component.ts create mode 100644 projects/speech-statistics/src/app/logout/logout.component.html create mode 100644 projects/speech-statistics/src/app/logout/logout.component.scss create mode 100644 projects/speech-statistics/src/app/logout/logout.component.spec.ts create mode 100644 projects/speech-statistics/src/app/logout/logout.component.ts diff --git a/projects/speech-statistics/src/app/auth/administration/administration.component.html b/projects/speech-statistics/src/app/auth/administration/administration.component.html new file mode 100644 index 0000000..877e13d --- /dev/null +++ b/projects/speech-statistics/src/app/auth/administration/administration.component.html @@ -0,0 +1,20 @@ +
+ +
+ +
+
+
+

Administration

+ + Fraktionen +
+
+
+
+ +
+
+
+ + diff --git a/projects/speech-statistics/src/app/auth/administration/administration.component.scss b/projects/speech-statistics/src/app/auth/administration/administration.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/speech-statistics/src/app/auth/administration/administration.component.spec.ts b/projects/speech-statistics/src/app/auth/administration/administration.component.spec.ts new file mode 100644 index 0000000..059b016 --- /dev/null +++ b/projects/speech-statistics/src/app/auth/administration/administration.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AdministrationComponent } from './administration.component'; + +describe('AdministrationComponent', () => { + let component: AdministrationComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AdministrationComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AdministrationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/speech-statistics/src/app/auth/administration/administration.component.ts b/projects/speech-statistics/src/app/auth/administration/administration.component.ts new file mode 100644 index 0000000..0708256 --- /dev/null +++ b/projects/speech-statistics/src/app/auth/administration/administration.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-administration', + templateUrl: './administration.component.html', + styleUrls: ['./administration.component.scss'] +}) +export class AdministrationComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/projects/speech-statistics/src/app/auth/administration/factions/faction.ts b/projects/speech-statistics/src/app/auth/administration/factions/faction.ts new file mode 100644 index 0000000..2f80f8b --- /dev/null +++ b/projects/speech-statistics/src/app/auth/administration/factions/faction.ts @@ -0,0 +1,4 @@ +export interface Faction { + name: string; + size: number; +} diff --git a/projects/speech-statistics/src/app/auth/administration/factions/factions.component.html b/projects/speech-statistics/src/app/auth/administration/factions/factions.component.html new file mode 100644 index 0000000..e4da4c6 --- /dev/null +++ b/projects/speech-statistics/src/app/auth/administration/factions/factions.component.html @@ -0,0 +1,16 @@ + + + + + + + + + + + + + +
Fraktion# Mitglieder
{{faction.name}}{{faction.size}}
+ + diff --git a/projects/speech-statistics/src/app/auth/administration/factions/factions.component.scss b/projects/speech-statistics/src/app/auth/administration/factions/factions.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/speech-statistics/src/app/auth/administration/factions/factions.component.spec.ts b/projects/speech-statistics/src/app/auth/administration/factions/factions.component.spec.ts new file mode 100644 index 0000000..5e5bb9f --- /dev/null +++ b/projects/speech-statistics/src/app/auth/administration/factions/factions.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FactionsComponent } from './factions.component'; + +describe('FactionsComponent', () => { + let component: FactionsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ FactionsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(FactionsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/speech-statistics/src/app/auth/administration/factions/factions.component.ts b/projects/speech-statistics/src/app/auth/administration/factions/factions.component.ts new file mode 100644 index 0000000..e5d4a83 --- /dev/null +++ b/projects/speech-statistics/src/app/auth/administration/factions/factions.component.ts @@ -0,0 +1,30 @@ +import { Component, OnInit } from '@angular/core'; +import {Faction} from './faction'; +import {FirebaseService} from '../../../firebase/firebase.service'; + +@Component({ + selector: 'app-factions', + templateUrl: './factions.component.html', + styleUrls: ['./factions.component.scss'] +}) +export class FactionsComponent implements OnInit { + public factions: Faction[] = []; + + constructor(private firebase: FirebaseService) { } + + ngOnInit(): void { + const factionRef = this.firebase.getReference('factions') + this.firebase.registerListener(factionRef, (factionData: Faction[]) => { + this.factions = factionData; + this.factions.sort((factionA, factionB) => { + if (factionA.size < factionB.size) { + return 1; + } + if (factionA.size > factionB.size) { + return -1; + } + return 0; + }) + }); + } +} diff --git a/projects/speech-statistics/src/app/auth/auth.guard.spec.ts b/projects/speech-statistics/src/app/auth/auth.guard.spec.ts new file mode 100644 index 0000000..68889d2 --- /dev/null +++ b/projects/speech-statistics/src/app/auth/auth.guard.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { AuthGuard } from './auth.guard'; + +describe('AuthGuard', () => { + let guard: AuthGuard; + + beforeEach(() => { + TestBed.configureTestingModule({}); + guard = TestBed.inject(AuthGuard); + }); + + it('should be created', () => { + expect(guard).toBeTruthy(); + }); +}); diff --git a/projects/speech-statistics/src/app/auth/auth.guard.ts b/projects/speech-statistics/src/app/auth/auth.guard.ts new file mode 100644 index 0000000..f6b427d --- /dev/null +++ b/projects/speech-statistics/src/app/auth/auth.guard.ts @@ -0,0 +1,19 @@ +import {Injectable} from '@angular/core'; +import {ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree} from '@angular/router'; +import {Observable} from 'rxjs'; +import {AuthService} from './auth.service'; + +@Injectable({ + providedIn: 'root' +}) +export class AuthGuard implements CanActivate { + constructor(private auth: AuthService) { + } + + canActivate( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree { + return this.auth.isLoggedIn(); + } + +} diff --git a/projects/speech-statistics/src/app/auth/auth.service.spec.ts b/projects/speech-statistics/src/app/auth/auth.service.spec.ts new file mode 100644 index 0000000..f1251ca --- /dev/null +++ b/projects/speech-statistics/src/app/auth/auth.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { AuthService } from './auth.service'; + +describe('AuthService', () => { + let service: AuthService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(AuthService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/projects/speech-statistics/src/app/auth/auth.service.ts b/projects/speech-statistics/src/app/auth/auth.service.ts new file mode 100644 index 0000000..519be69 --- /dev/null +++ b/projects/speech-statistics/src/app/auth/auth.service.ts @@ -0,0 +1,43 @@ +import {Injectable} from '@angular/core'; +import {FirebaseService} from '../firebase/firebase.service'; +import {User, UserCredential} from 'firebase/auth'; +import {Router} from '@angular/router'; + +@Injectable({ + providedIn: 'root' +}) +export class AuthService { + + private currentUser: User | null = null; + + constructor(private firebase: FirebaseService, + private router: Router) { + } + + public getUser(): User|null { + return this.currentUser; + } + + public isLoggedIn(): boolean { + return this.currentUser != null; + } + + public login(email: string, password: string, redirectUrl: string) { + this.firebase.signIn(email, password) + .then((userCredential: UserCredential) => { + this.currentUser = userCredential.user; + this.router.navigateByUrl(redirectUrl); + }) + .catch((error) => { + console.error(error.message()); + }); + } + + public logout(redirectUrl: string) { + this.firebase.signOutCurrentUser() + .then(() => { + this.currentUser = null; + this.router.navigateByUrl(redirectUrl); + }); + } +} diff --git a/projects/speech-statistics/src/app/firebase/firebase.service.spec.ts b/projects/speech-statistics/src/app/firebase/firebase.service.spec.ts new file mode 100644 index 0000000..8887a59 --- /dev/null +++ b/projects/speech-statistics/src/app/firebase/firebase.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { FirebaseService } from './firebase.service'; + +describe('FirebaseService', () => { + let service: FirebaseService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(FirebaseService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/projects/speech-statistics/src/app/firebase/firebase.service.ts b/projects/speech-statistics/src/app/firebase/firebase.service.ts new file mode 100644 index 0000000000000000000000000000000000000000..93d6892fb579300b7aba06997d8838579bd14249 GIT binary patch literal 1926 zcmV;12YL7aM@dveQdv+`0F8(Aibv=q=1%&{giD?sKY#s z_K<>!j%+#%;(sr&In9&k1~B9C{w6{MZ>%@;kO4U>5^9;cVE-1tz1;v`6O|4tmdou> zLA@DU)ME~?y+fA!JfaSm?s=vYp=quI7SAq!)MT!xkI`D~VHr!$mw}}hpCq{Z*9m^2{Cv!^z5VrFRBK&S z!D-UPOFNpm;;pNgxI71S&IgO}RyU(<$nKylyeJT2Gz5kHYzCD;wn~lZ5BS8k_$6+< z!(!hz5A=Bt<04z%j;b)k!$hyS*d3OyVfozKz*zWpqYDUuZWK=EU~zm|ZBX`3!zT4Q zTpOlU<^ob$!ghlVTSZ-o!`|`6RT|3R7%YX8-60*O(`S)JP!koP%-CU7dO#%RE}%}} z$K76cQP1y5wQZ~8=in?M7iu3ryo*1D1?Z^|$4`FPtcx~Z9rTS*LoHL>pm^^~`!}X> z*^fWVhbq>Q`Cdc*Jzq?G^`!aIypgPX=ywRdPUV=e8K%SG$ zw3&Zzv2q4d!hYNXPd1b5lN1s3d%_P0IPT#I7sbiIOexTV+JZ4ikUE?FnLG|YNGd2< zZ<<#>e}>Bm*ULBu3HDgQNiBC<@nOM`+ugxVErx2fCQNMM#pbkB;uDPy~z6Y$Twsq4YLq+_iy)-HaPvoN?qc#!?vE@+w8Tti7XHCpV3h^$4f{c{M zy=E$ZmEALlO{e=v8(BM%#2+KM{mTFf+O2`yLMBp9V zG#i6}SlHgzv{-k~THkj)?MPxfJZ>a(UaqJ;w>%~^s^NTO%-=pdCHW%WwC=ud{PbN* zDU1&_s!$7Iu{5sM<*vOr1oXcxYna}GxxOZ=IfwyWSO;?z?UnG7>LCkmjwSa%5xM_0 zl-L%HXYl3Yerc=(z)QmixG{71N}yUYBDnIHv3$8l?fau%dBdmRWkL!Xa&DnZE zT=i^iMN*$-)zjNyI?PR{8k>?x(*11xo2fOCt?zB-odhqFgb` zr|n=O{dV@yTQ0Ty)3bkR>+%2jQo8_8bg;HF)SzCirIAW;pu|`ALY;^clrALUUkxFA zTKd_}knG`YD5yIE$?sjFdXNiv-G8yX&O>Z3W9mHaFR;w(^Gv+dY{g6}6b^-C#3pme;QKw2^ER;y^Yqsayl52^oSgOllqj7JGBD6X9| zOm}P&Rr79^slf+$mq(P$TIhAna8M#$xq6>A!dmODm!~bUMX+JG_kn4o^Jtp8mbaub zmNriiSD{HnPt(dcIfnt;p+r-s4sD{OgK&s+;>=NDE{T{evd38Sa^OTuvI#gHYB3ZG zPmO?+nT$Bn}56t2-yb;!OwnaqX|^Z%*8>~TPzvQ*hv&4xqOBH&T# zlriLok^KDJYHM|tSe4)vjnw=0r_h`O@^lAJ^9RlO=8WvyMsNDzL4{wWj54C~Og&w! zGdx5WSC!p&?yIzO=A_AWjG1OUj`=cgIg9G7zIq_y@U*gk5rr+UC^nOO=eWh2 + + + +
+ +

Login

+
+
+
+
+ + +
E-Mail wird nicht weitergegeben
+
+
+ + +
+ +
+
+
+
diff --git a/projects/speech-statistics/src/app/login/login.component.scss b/projects/speech-statistics/src/app/login/login.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/speech-statistics/src/app/login/login.component.spec.ts b/projects/speech-statistics/src/app/login/login.component.spec.ts new file mode 100644 index 0000000..d2c0e6c --- /dev/null +++ b/projects/speech-statistics/src/app/login/login.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoginComponent } from './login.component'; + +describe('LoginComponent', () => { + let component: LoginComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LoginComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LoginComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/speech-statistics/src/app/login/login.component.ts b/projects/speech-statistics/src/app/login/login.component.ts new file mode 100644 index 0000000..bf75737 --- /dev/null +++ b/projects/speech-statistics/src/app/login/login.component.ts @@ -0,0 +1,20 @@ +import {Component, OnInit} from '@angular/core'; +import {AuthService} from '../auth/auth.service'; + +@Component({ + selector: 'app-login', + templateUrl: './login.component.html', + styleUrls: ['./login.component.scss'] +}) +export class LoginComponent implements OnInit { + + constructor(private auth: AuthService) { + } + + ngOnInit(): void { + } + + public login(email: string, password: string) { + this.auth.login(email, password, '/administration'); + } +} diff --git a/projects/speech-statistics/src/app/logout/logout.component.html b/projects/speech-statistics/src/app/logout/logout.component.html new file mode 100644 index 0000000..c6ae40e --- /dev/null +++ b/projects/speech-statistics/src/app/logout/logout.component.html @@ -0,0 +1 @@ +

logout works!

diff --git a/projects/speech-statistics/src/app/logout/logout.component.scss b/projects/speech-statistics/src/app/logout/logout.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/speech-statistics/src/app/logout/logout.component.spec.ts b/projects/speech-statistics/src/app/logout/logout.component.spec.ts new file mode 100644 index 0000000..2f92d47 --- /dev/null +++ b/projects/speech-statistics/src/app/logout/logout.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LogoutComponent } from './logout.component'; + +describe('LogoutComponent', () => { + let component: LogoutComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LogoutComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LogoutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/speech-statistics/src/app/logout/logout.component.ts b/projects/speech-statistics/src/app/logout/logout.component.ts new file mode 100644 index 0000000..c180d5a --- /dev/null +++ b/projects/speech-statistics/src/app/logout/logout.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +import {AuthService} from '../auth/auth.service'; + +@Component({ + selector: 'app-logout', + templateUrl: './logout.component.html', + styleUrls: ['./logout.component.scss'] +}) +export class LogoutComponent implements OnInit { + + constructor(private auth: AuthService) { } + + ngOnInit(): void { + this.auth.logout('/'); + } + +} diff --git a/projects/speech-statistics/src/app/navbar/navbar.component.html b/projects/speech-statistics/src/app/navbar/navbar.component.html index f498629..b6790fd 100644 --- a/projects/speech-statistics/src/app/navbar/navbar.component.html +++ b/projects/speech-statistics/src/app/navbar/navbar.component.html @@ -2,10 +2,20 @@
  • Statistics
    • -
  • - Edit -
    • -
  • - Administration -
    • + +
  • + Edit +
    • +
  • + Administration +
    • +
  • + Logout +
    • +     + +
  • + Login +
    • +     diff --git a/projects/speech-statistics/src/app/navbar/navbar.component.ts b/projects/speech-statistics/src/app/navbar/navbar.component.ts index 71c1f84..8e8a0b5 100644 --- a/projects/speech-statistics/src/app/navbar/navbar.component.ts +++ b/projects/speech-statistics/src/app/navbar/navbar.component.ts @@ -1,4 +1,5 @@ import {Component, Input, OnInit} from '@angular/core'; +import {AuthService} from '../auth/auth.service'; @Component({ selector: 'app-navbar', @@ -9,7 +10,7 @@ export class NavbarComponent implements OnInit { @Input() currentPage: string = ''; - constructor() { } + constructor(public auth: AuthService) { } ngOnInit(): void { }