corrections

src/app/app.module.ts

@@ -9,15 +9,17 @@ import { SharedModule } from './shared/shared.module';
 import { HomeComponent } from './core/components/home/home.component';
 import { CoreModule } from './core/core.module';
 import { AuthGuard } from './core/guards/auth.guard';
+import { SettingsComponent } from './core/components/settings/settings.component';
 
 const routes: Routes = [
-  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
   { path: 'auth', loadChildren: () => import('./core/auth/auth.module').then(m => m.AuthModule) },
-  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  { path: '', component: HomeComponent, canActivate: [AuthGuard], children: [
+    {path: 'settings', component: SettingsComponent}
+  ]},
 ];
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, HomeComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,

src/app/core/auth/components/confirm-registration/confirm-registration.component.ts

@@ -19,13 +19,20 @@ export class ConfirmRegistrationComponent {
 
   constructor(
     private authService: AuthService,
-    private activatedRoute: ActivatedRoute
+    private activatedRoute: ActivatedRoute,
+    private router: Router
   ) {
     this.activatedRoute.params.subscribe(
       (params) => {
         this.registrationId = params['registrationId'];
       }
-    )
+    );
+    
+    this.authService.currentState$.pipe(
+      filter(state=>state !== undefined && state !== null)
+    ).subscribe((state) =>
+      this.router.navigateByUrl('/')
+    );
   }
 
   confirm(): void {

src/app/core/auth/components/login/login.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
-import { filter } from 'rxjs';
+import { filter, map } from 'rxjs';
 import { AuthService } from 'src/app/core/services/auth.service';
 
 @Component({
@@ -20,10 +20,10 @@ export class LoginComponent {
     private router: Router
   ) {
     this.authService.currentState$.pipe(
-      filter(state => state !== undefined)
-    ).subscribe(state => {
-      this.router.navigateByUrl('/home');
-    });
+      filter(state=>state !== undefined && state !== null)
+    ).subscribe((state) =>
+      this.router.navigateByUrl('/')
+    );
   }
 
   login(): void {

src/app/core/auth/components/registration/registration.component.html

@@ -20,5 +20,5 @@
         <input formControlName="username" type="string" id="username" class="bg-skin-primary border border-gray-300 text-skin-primary text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
         <p id="helper-text-explanation" class="mt-2 text-sm text-skin-primary-muted">Bereits registiert? <a routerLink="/auth/login" class="font-medium text-skin-accent hover:underline hover:font-bold">Jetzt anmelden!</a></p>
     </div>
-    <button (click)="login()" [disabled]="!registrationForm.valid" type="submit" class="w-full 9xl:w-auto font-bold text-skin-secondary bg-skin-accent hover:text-skin-primary rounded-lg text-sm px-5 py-2.5 text-center">Registrieren</button>
+    <button (click)="register()" [disabled]="!registrationForm.valid" type="submit" class="w-full 9xl:w-auto font-bold text-skin-secondary bg-skin-accent hover:text-skin-primary rounded-lg text-sm px-5 py-2.5 text-center">Registrieren</button>
 </form>

src/app/core/auth/components/registration/registration.component.ts

@@ -20,16 +20,18 @@ export class RegistrationComponent {
     private router: Router
   ) {
     this.authService.currentState$.pipe(
-      filter(state => state !== undefined)
-    ).subscribe(state => {
-      this.router.navigateByUrl('/home');
-    });
+      filter(state=>state !== undefined && state !== null)
+    ).subscribe((state) =>
+      this.router.navigateByUrl('/')
+    );
   }
 
-  login(): void {
+  register(): void {
     this.authService.register({
       mail: this.registrationForm.value.mail!,
       username: this.registrationForm.value.username!
     });
+
+    this.router.navigateByUrl('/auth/login');
   }
 }

src/app/core/components/home/home.component.html

@@ -21,4 +21,6 @@
 
     <shared-paginator total="20" perPage="5" />
 
+    <router-outlet></router-outlet>
+
 </div>

src/app/core/components/navigation/navigation.component.html

@@ -26,14 +26,14 @@
     </div>
 
     <!-- User dropdown -->
-    <div class="z-50 hidden my-4 text-base list-none divide-y divide-skin-primary rounded-lg shadow-sm shadow-skin-primary bg-skin-secondary" id="user-dropdown">
+    <div class="z-50 hidden my-4 text-base list-none divide-y divide-skin-primary rounded-lg shadow-sm shadow-skin-primary bg-skin-primary" id="user-dropdown">
       <div class="px-4 py-3">
         <span class="block text-sm text-skin-accent font-bold">{{state?.username}}</span>
         <span class="block text-sm text-skin-primary-muted truncate">{{state?.roleIdentifier}}</span>
       </div>
       <ul class="p-4" aria-labelledby="user-menu-button">
         <li>
-          <a href="#" class="block py-2 px-3 rounded text-skin-primary hover:bg-skin-accent">Einstellungen</a>
+          <a href="/settings" class="block py-2 px-3 rounded text-skin-primary hover:bg-skin-accent">Einstellungen</a>
         </li>
         <li>
           <button class="w-full block py-2 px-3 rounded text-skin-primary hover:bg-skin-accent" (click)="toggleDarkmode()">{{ darkMode ? 'Hell' : 'Dunkel' }}</button>

src/app/core/components/navigation/navigation.component.ts

@@ -25,9 +25,9 @@ export class NavigationComponent implements OnInit {
     this.state = this.authService.currentState$.value;
     this.authService.currentState$.pipe(
       filter(state => state === undefined)
-    ).subscribe( state =>
-      this.router.navigateByUrl('/auth/login')
-    );
+    ).subscribe( state =>{
+        this.router.navigateByUrl('/auth/login');
+    });
   }
 
   ngOnInit(): void {

src/app/core/components/settings/settings.component.html

@@ -0,0 +1,33 @@
+
+<div>
+    <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
+        <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple-600 hover:text-purple-600 dark:text-purple-500 dark:hover:text-purple-500 border-purple-600 dark:border-purple-500" data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300" role="tablist">
+            <li class="me-2" role="presentation">
+                <button class="inline-block p-4 border-b-2 rounded-t-lg" id="profile-styled-tab" data-tabs-target="#styled-profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
+            </li>
+            <li class="me-2" role="presentation">
+                <button class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="dashboard-styled-tab" data-tabs-target="#styled-dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="false">Dashboard</button>
+            </li>
+            <li class="me-2" role="presentation">
+                <button class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="settings-styled-tab" data-tabs-target="#styled-settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
+            </li>
+            <li role="presentation">
+                <button class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="contacts-styled-tab" data-tabs-target="#styled-contacts" type="button" role="tab" aria-controls="contacts" aria-selected="false">Contacts</button>
+            </li>
+        </ul>
+    </div>
+    <div id="default-styled-tab-content">
+        <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="styled-profile" role="tabpanel" aria-labelledby="profile-tab">
+            <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Profile tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+        <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="styled-dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
+            <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+        <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="styled-settings" role="tabpanel" aria-labelledby="settings-tab">
+            <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Settings tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+        <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="styled-contacts" role="tabpanel" aria-labelledby="contacts-tab">
+            <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
+        </div>
+    </div>
+</div>

src/app/core/components/settings/settings.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent {
+
+}

src/app/core/core.module.ts

@@ -1,18 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HomeComponent } from './components/home/home.component';
 import { NavigationComponent } from './components/navigation/navigation.component';
 import { AuthGuard } from './guards/auth.guard';
 import { AuthService } from './services/auth.service';
 import { RequestService } from './services/request.service';
 import { AppService } from './services/app.service';
 import { SharedModule } from '../shared/shared.module';
-
-
+import { SettingsComponent } from './components/settings/settings.component';
 
 @NgModule({
-  declarations: [HomeComponent, NavigationComponent],
-  exports: [HomeComponent, NavigationComponent],
+  declarations: [NavigationComponent, SettingsComponent],
+  exports: [NavigationComponent, SettingsComponent],
   imports: [
     CommonModule,
     SharedModule

src/app/core/guards/auth.guard.ts

@@ -14,13 +14,13 @@ export class AuthGuard implements CanActivate {
 
     canActivate(): Observable<boolean> | boolean {
         return this.authService.currentState$.pipe(
+            filter(currentState=>currentState!==undefined),
             map((currentState) => {
-                if (!currentState) {
-                    this.router.navigateByUrl('/auth');
+                if (currentState === null) {
+                    this.router.navigateByUrl('/auth/login');
                     return false;
                 }
                 return true;
-            })
-        );
+            }));
     }
 }

src/app/core/services/auth.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from "@angular/core";
 import { RequestService } from "./request.service";
 import { UserStateResponse } from "../models/user-state-request.model";
-import { BehaviorSubject, Observable } from "rxjs";
-import { LoginRequest, LoginResponse } from "../models/login-request.model copy";
+import { BehaviorSubject } from "rxjs";
+import { LoginRequest, LoginResponse } from "../models/login-request.model";
 import { Router } from "@angular/router";
 import { RegisterUserRequest, RegisterUserResponse } from "../models/register-user-request.model";
 import { ConfirmRegistrationRequest, ConfirmRegistrationResponse } from "../models/confirm-registration-request.model";
@@ -23,10 +23,11 @@ export class AuthService {
             'user/state',
             {},
             (response: UserStateResponse) => {
+                console.log('set next state');
                 this.currentState$.next(response);
             },
             () => {
-                this.currentState$.next(undefined);
+                this.currentState$.next(null);
             }
         )
     }
@@ -81,6 +82,7 @@ export class AuthService {
             'auth/logout-user',
             {},
             (response: any) => {
+                this.currentState$.next(undefined);
                 this.readUserState();
             }
         );