src/app/app.module.ts

@@ -9,17 +9,15 @@ 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: '', component: HomeComponent, canActivate: [AuthGuard], children: [
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
-    {path: 'settings', component: SettingsComponent}
-  ]},
 ];
 
 @NgModule({
-  declarations: [AppComponent, HomeComponent],
+  declarations: [AppComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,

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

@@ -19,20 +19,13 @@ 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, map } from 'rxjs';
+import { filter } 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 && state !== null)
+      filter(state => state !== undefined)
-    ).subscribe((state) =>
+    ).subscribe(state => {
-      this.router.navigateByUrl('/')
+      this.router.navigateByUrl('/home');
-    );
+    });
   }
 
   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)="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>
+    <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>
 </form>

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

@@ -20,18 +20,16 @@ export class RegistrationComponent {
     private router: Router
   ) {
     this.authService.currentState$.pipe(
-      filter(state=>state !== undefined && state !== null)
+      filter(state => state !== undefined)
-    ).subscribe((state) =>
+    ).subscribe(state => {
-      this.router.navigateByUrl('/')
+      this.router.navigateByUrl('/home');
-    );
+    });
   }
 
-  register(): void {
+  login(): 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,6 +21,4 @@
 
     <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-primary" 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-secondary" 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="/settings" class="block py-2 px-3 rounded text-skin-primary hover:bg-skin-accent">Einstellungen</a>
+          <a href="#" 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 =>{
+    ).subscribe( state =>
-        this.router.navigateByUrl('/auth/login');
+      this.router.navigateByUrl('/auth/login')
-    });
+    );
   }
 
   ngOnInit(): void {

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

@@ -1,33 +0,0 @@
-
-<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

@@ -1,10 +0,0 @@
-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,16 +1,18 @@
 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: [NavigationComponent, SettingsComponent],
+  declarations: [HomeComponent, NavigationComponent],
-  exports: [NavigationComponent, SettingsComponent],
+  exports: [HomeComponent, NavigationComponent],
   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 === null) {
+                if (!currentState) {
-                    this.router.navigateByUrl('/auth/login');
+                    this.router.navigateByUrl('/auth');
                     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 } from "rxjs";
+import { BehaviorSubject, Observable } from "rxjs";
-import { LoginRequest, LoginResponse } from "../models/login-request.model";
+import { LoginRequest, LoginResponse } from "../models/login-request.model copy";
 import { Router } from "@angular/router";
 import { RegisterUserRequest, RegisterUserResponse } from "../models/register-user-request.model";
 import { ConfirmRegistrationRequest, ConfirmRegistrationResponse } from "../models/confirm-registration-request.model";
@@ -23,11 +23,10 @@ export class AuthService {
             'user/state',
             {},
             (response: UserStateResponse) => {
-                console.log('set next state');
                 this.currentState$.next(response);
             },
             () => {
-                this.currentState$.next(null);
+                this.currentState$.next(undefined);
             }
         )
     }
@@ -82,7 +81,6 @@ export class AuthService {
             'auth/logout-user',
             {},
             (response: any) => {
-                this.currentState$.next(undefined);
                 this.readUserState();
             }
         );