From 8dc1c19ab26743da362a5e702bd52b7c64b82ec6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Raumsch=C3=BCssel?=
<franz.raumschuessel@stud.th-deg.de>
Date: Tue, 24 Nov 2020 18:30:22 +0100
Subject: [PATCH] added components
---
src/app/admin/admin.component.css | 0
src/app/admin/admin.component.html | 11 ++++
src/app/admin/admin.component.spec.ts | 36 +++++++++++++
src/app/admin/admin.component.ts | 24 +++++++++
src/app/app.module.ts | 8 ++-
src/app/app.module.ts.bak | 76 +++++++++++++++++++++++++++
src/app/jwt.guard.spec.ts | 16 ++++++
src/app/jwt.guard.ts | 15 ++++++
src/app/jwt.service.spec.ts | 16 ++++++
src/app/jwt.service.ts | 24 +++++++++
src/app/user.ts | 4 ++
11 files changed, 228 insertions(+), 2 deletions(-)
create mode 100644 src/app/admin/admin.component.css
create mode 100644 src/app/admin/admin.component.html
create mode 100644 src/app/admin/admin.component.spec.ts
create mode 100644 src/app/admin/admin.component.ts
create mode 100644 src/app/app.module.ts.bak
create mode 100644 src/app/jwt.guard.spec.ts
create mode 100644 src/app/jwt.guard.ts
create mode 100644 src/app/jwt.service.spec.ts
create mode 100644 src/app/jwt.service.ts
create mode 100644 src/app/user.ts
diff --git a/src/app/admin/admin.component.css b/src/app/admin/admin.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/admin/admin.component.html b/src/app/admin/admin.component.html
new file mode 100644
index 0000000..011d1e4
--- /dev/null
+++ b/src/app/admin/admin.component.html
@@ -0,0 +1,11 @@
+<div style="text-align:center">
+ <h1>
+ Welcome User with E-Mail {{userName}}!
+ </h1>
+ <p>
+ <button mat-button color="warn" (click)="logout()">
+ Logout
+ </button>
+ </p>
+ </div>
+
\ No newline at end of file
diff --git a/src/app/admin/admin.component.spec.ts b/src/app/admin/admin.component.spec.ts
new file mode 100644
index 0000000..80618d3
--- /dev/null
+++ b/src/app/admin/admin.component.spec.ts
@@ -0,0 +1,36 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminComponent } from './admin.component';
+
+import { RouterTestingModule } from '@angular/router/testing';
+import { JwtService } from '../jwt.service';
+
+describe('AdminComponent', () => {
+ let component: AdminComponent;
+ let fixture: ComponentFixture<AdminComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [AdminComponent],
+ imports: [RouterTestingModule],
+ providers: [JwtService]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AdminComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should set an Item', () => {
+ localStorage.setItem('access_token', 'u;p'); // u;p
+
+ expect(localStorage.getItem('access_token')).toBeDefined(); // u;p .toBe('u;p')
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts
new file mode 100644
index 0000000..0cc8bd0
--- /dev/null
+++ b/src/app/admin/admin.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { JwtService } from '../jwt.service';
+
+@Component({
+ selector: 'app-admin',
+ templateUrl: './admin.component.html',
+ styleUrls: ['./admin.component.css']
+})
+export class AdminComponent implements OnInit {
+
+ constructor(private jwtService: JwtService, private router: Router) { }
+
+ ngOnInit(): void {
+ this.userName = localStorage.getItem('access_token').split(";")[0];
+ }
+
+ userName = "";
+
+ logout() {
+ this.jwtService.logout();
+ this.router.navigateByUrl('/login');
+ }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bd72473..bc1d047 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -32,6 +32,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatIconModule } from '@angular/material/icon';
+import { AdminComponent } from './admin/admin.component';
+import { JwtGuard } from './jwt.guard';
@NgModule({
declarations: [
@@ -43,7 +45,8 @@ import { MatIconModule } from '@angular/material/icon';
LoginComponent,
EventComponent,
ThabellaComponent,
- SelectLanguageComponent
+ SelectLanguageComponent,
+ AdminComponent
],
imports: [
BrowserModule,
@@ -54,7 +57,8 @@ import { MatIconModule } from '@angular/material/icon';
{ path: 'international', component: InternationalComponent },
{ path: 'login', component: LoginComponent },
{ path: 'events', component: EventComponent },
- { path: 'thabella', component: ThabellaComponent }
+ { path: 'thabella', component: ThabellaComponent },
+ { path: 'admin', component: AdminComponent, canActivate: [JwtGuard] }
]),
MatButtonModule,
MatToolbarModule,
diff --git a/src/app/app.module.ts.bak b/src/app/app.module.ts.bak
new file mode 100644
index 0000000..535ef6d
--- /dev/null
+++ b/src/app/app.module.ts.bak
@@ -0,0 +1,76 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+/**
+ * Project was created without Routing option
+ * so Routing will be setup here (otherwise in app-routing.module.ts)
+ * followed https://angular.io/start/start-routing
+ * used structure from mit-ws-20-21-requests.pdf
+ * so components needed are: Start, Navigation, Room Info, Int. Office, Login
+ * difference to structure image: gave navigation higher prio than room info
+ *
+*/
+
+import { AppComponent } from './app.component';
+import { RouterModule } from '@angular/router';
+import { StartComponent } from './start/start.component';
+import { NavigationComponent } from './navigation/navigation.component';
+import { RoomsComponent } from './rooms/rooms.component';
+import { InternationalComponent } from './international/international.component';
+import { LoginComponent } from './login/login.component';
+import { EventComponent } from './events/event.component';
+import { ThabellaComponent } from './thabella/thabella.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatExpansionModule } from '@angular/material/expansion';
+// Material Components
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTabsModule } from '@angular/material/tabs';
+import { I18nModule } from './i18n/i18n.module';
+import { SelectLanguageComponent } from './select-language/select-language.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatIconModule } from '@angular/material/icon';
+import { AdminComponent } from './admin/admin.component';
+
+@NgModule({
+ declarations: [
+ AppComponent,
+ StartComponent,
+ NavigationComponent,
+ RoomsComponent,
+ InternationalComponent,
+ LoginComponent,
+ EventComponent,
+ ThabellaComponent,
+ SelectLanguageComponent,
+ AdminComponent
+ ],
+ imports: [
+ BrowserModule,
+ RouterModule.forRoot([
+ { path: '', component: StartComponent },
+ { path: 'navigation', component: NavigationComponent },
+ { path: 'rooms', component: RoomsComponent },
+ { path: 'international', component: InternationalComponent },
+ { path: 'login', component: LoginComponent },
+ { path: 'events', component: EventComponent },
+ { path: 'thabella', component: ThabellaComponent }
+ ]),
+ MatButtonModule,
+ MatToolbarModule,
+ MatTabsModule,
+ BrowserAnimationsModule,
+ MatExpansionModule,
+ I18nModule,
+ MatFormFieldModule,
+ MatSelectModule,
+ FormsModule,
+ ReactiveFormsModule,
+ MatButtonToggleModule,
+ MatIconModule],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/src/app/jwt.guard.spec.ts b/src/app/jwt.guard.spec.ts
new file mode 100644
index 0000000..4395f2b
--- /dev/null
+++ b/src/app/jwt.guard.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { JwtGuard } from './jwt.guard';
+
+describe('JwtGuard', () => {
+ let guard: JwtGuard;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ guard = TestBed.inject(JwtGuard);
+ });
+
+ it('should be created', () => {
+ expect(guard).toBeTruthy();
+ });
+});
diff --git a/src/app/jwt.guard.ts b/src/app/jwt.guard.ts
new file mode 100644
index 0000000..1cc5683
--- /dev/null
+++ b/src/app/jwt.guard.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class JwtGuard implements CanActivate {
+ canActivate(
+ next: ActivatedRouteSnapshot,
+ state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+ return true;
+ }
+
+}
diff --git a/src/app/jwt.service.spec.ts b/src/app/jwt.service.spec.ts
new file mode 100644
index 0000000..a7314e3
--- /dev/null
+++ b/src/app/jwt.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { JwtService } from './jwt.service';
+
+describe('JwtService', () => {
+ let service: JwtService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(JwtService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/jwt.service.ts b/src/app/jwt.service.ts
new file mode 100644
index 0000000..7dd8c0b
--- /dev/null
+++ b/src/app/jwt.service.ts
@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { User } from './user';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class JwtService {
+
+ constructor() { }
+
+ login(userData: User) {
+ console.log(userData.email + ";" + userData.password);
+ localStorage.setItem('access_token', userData.email + ";" + userData.password); // simple
+ }
+
+ logout() {
+ localStorage.removeItem('access_token');
+ }
+
+ public get loggedIn(): boolean {
+ return localStorage.getItem('access_token') !== null;
+ }
+
+}
diff --git a/src/app/user.ts b/src/app/user.ts
new file mode 100644
index 0000000..f2e5452
--- /dev/null
+++ b/src/app/user.ts
@@ -0,0 +1,4 @@
+export interface User {
+ email: string;
+ password: string;
+}
--
GitLab