added components

src/app/admin/admin.component.html

+<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

src/app/admin/admin.component.spec.ts

+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();
+  });
+});

src/app/admin/admin.component.ts

+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');
+  }
+}

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,

src/app/app.module.ts.bak

+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 { }

src/app/jwt.guard.spec.ts

+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();
+  });
+});

src/app/jwt.guard.ts

+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;
+  }
+  
+}

src/app/jwt.service.spec.ts

+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();
+  });
+});

src/app/jwt.service.ts

+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;
+  }
+
+}

src/app/user.ts

+export interface User {
+    email: string;
+    password: string;
+}