feat: Update sidebar navigation and add dashboard component

- Changed display name for the main dashboard in sidebar from 'Dashboards' to 'Hlavná stránka'. - Removed commented-out children routes for dashboards and frontend pages in sidebar. - Added new dashboard component and its routing. - Introduced logout functionality with a dedicated logout component. - Updated authentication routes to include logout path. - Modified callback component to navigate to the dashboard upon successful login. - Enhanced authentication service to handle user profile loading more effectively.
2025-10-29 19:59:35 +00:00
parent 74f15cabd9
commit d5619e42da
18 changed files with 865 additions and 807 deletions
--- a/Web/public/images/flag/icon-flag-sk.svg
+++ b/Web/public/images/flag/icon-flag-sk.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--twemoji" preserveAspectRatio="xMidYMid meet"><path fill="#EE2024" d="M36 27v-4H0v4a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4z"></path><path fill="#EEE" d="M36 23H0V9a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v14z"></path><path fill="#0A4EA2" d="M0 13h36v10H0z"></path><path fill="#FFF" d="M11.837 25.09c-1.129-.646-3.638-2.278-4.555-4.488c-.925-2.227-.719-5.423-.481-9.124l.06-.936h11.963l.061.936c.238 3.7.444 6.895-.481 9.123c-.918 2.211-3.426 3.844-4.556 4.489l-1.004.572l-1.007-.572z"></path><path fill="#EE2024" d="M17.886 11.542H7.798c-.238 3.707-.422 6.68.407 8.676c1.021 2.46 4.516 4.22 4.631 4.276v.006l.005-.003l.005.003v-.006c.115-.057 3.61-1.816 4.632-4.276c.83-1.996.647-4.97.408-8.676z"></path><path fill="#FFF" d="M15.865 16.109s-1.401.133-2.632.165a13.05 13.05 0 0 1 .003-1.286c.973.06 1.645.246 1.645.246c.247 0 .447-.2.447-.447v-.606c0-.247-.2-.447-.447-.447c0 0-.739.126-1.568.179c.071-.782.156-1.435.156-1.435c0-.247-.2-.447-.447-.447h-.605c-.247 0-.447.2-.447.447c0 0 .092.666.17 1.443a13.359 13.359 0 0 1-1.583-.187c-.247 0-.447.2-.447.447v.606c0 .247.2.447.447.447c0 0 .639-.206 1.67-.255c.014.23.024.453.024.646c0 .161-.006.388-.016.649c-1.242-.033-2.693-.164-2.693-.164c-.247 0-.447.2-.447.447v.606c0 .247.2.447.447.447c0 0 1.319-.108 2.635-.128c-.083 1.531-.207 3.322-.207 3.322c0 .247.2.447.447.447h.605c.247 0 .447-.2.447-.447c0 0-.111-1.773-.185-3.317c1.272.03 2.581.123 2.581.123c.247 0 .447-.2.447-.447v-.606c0-.247-.2-.448-.447-.448z"></path><path fill="#0A4EA2" d="M17.079 20.965c-.508-1.086-1.905-1.393-2.568-.066c-.438-1.594-1.681-1.594-1.681-1.594s-1.244 0-1.681 1.594c-.658-1.316-2.04-1.024-2.558.041c1.314 2.074 4.143 3.504 4.247 3.555v.005l.005-.003l.005.003v-.006c.103-.051 2.91-1.469 4.231-3.529z"></path></svg>
--- a/Web/src/app/app.route.guard.ts
+++ b/Web/src/app/app.route.guard.ts
@@ -1,9 +1,18 @@
-import { CanActivateFn } from '@angular/router';
+import { CanActivateFn, Router } from '@angular/router';
 import { inject } from '@angular/core';
-import { OAuthService } from 'angular-oauth2-oidc';
+import { AuthenticationService } from './services/authentication.service';


 export const authGuard: CanActivateFn = (route, state) => {
-    const authService = inject(OAuthService);
-    return authService.hasValidAccessToken(); // returns boolean, Promise, or Observable
+    const auth = inject(AuthenticationService);
+    const router = inject(Router);
+
+    if (auth.hasValidAccessToken())
+        if (auth.profile)
+            return true;
+        else
+            return auth.handleCallback();
+
+    // redirect to the login page (UrlTree) so navigation does not fail silently
+    return router.parseUrl('/authentication/login');
 };
--- a/Web/src/app/app.routes.ts
+++ b/Web/src/app/app.routes.ts
@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
 import { BlankComponent } from './layouts/blank/blank.component';
 import { FullComponent } from './layouts/full/full.component';
+import { authGuard } from './app.route.guard';

 export const routes: Routes = [
  {
@@ -17,13 +18,14 @@ export const routes: Routes = [
      //   loadChildren: () =>
      //     import('./pages/pages.routes').then((m) => m.PagesRoutes),
      // },
-      // {
-      //   path: 'dashboards',
-      //   loadChildren: () =>
-      //     import('../../../theme/packages/main/src/app/pages/dashboards/dashboards.routes').then(
-      //       (m) => m.DashboardsRoutes
-      //     ),
-      // },
+      {
+        path: 'dashboard',
+        canActivate: [authGuard],
+        loadChildren: () =>
+          import('./pages/dashboard/dashboard.routes').then(
+            (m) => m.DashboardsRoutes
+          ),
+      },
      // {
      //   path: 'forms',
      //   loadChildren: () =>
--- a/Web/src/app/config.ts
+++ b/Web/src/app/config.ts
@@ -17,9 +17,9 @@ export const defaults: AppSettings = {
  sidenavOpened: false,
  sidenavCollapsed: false,
  boxed: true,
-  horizontal: false,
-  cardBorder: true,
+  horizontal: true,
+  cardBorder: false,
  activeTheme: 'blue_theme',
-  language: 'en-us',
+  language: 'sk-sk',
  navPos: 'side',
 };
--- a/Web/src/app/layouts/full/full.component.html
+++ b/Web/src/app/layouts/full/full.component.html
@@ -101,11 +101,11 @@
        <!-- Outlet -->
        <!-- ============================================================== -->
        <router-outlet></router-outlet>
-        <div class="customizerBtn">
+        <!-- <div class="customizerBtn">
          <button mat-fab class="bg-primary text-white" (click)="customizerRight.toggle()">
            <mat-icon>settings</mat-icon>
          </button>
-        </div>
+        </div> -->
      </main>

      <!-- ------------------------------------------------------------------
--- a/Web/src/app/layouts/full/full.component.ts
+++ b/Web/src/app/layouts/full/full.component.ts
@@ -6,7 +6,7 @@ import { CoreService } from '../../services/core.service';
 import { AppSettings } from '../../config';
 import { filter } from 'rxjs/operators';
 import { NavigationEnd, Router } from '@angular/router';
-import { navItems } from './vertical/sidebar/sidebar-data';
+import { navItems } from './horizontal/sidebar/sidebar-data';
 import { NavService } from '../../services/nav.service';
 import { AppNavItemComponent } from './vertical/sidebar/nav-item/nav-item.component';
 import { RouterModule } from '@angular/router';
--- a/Web/src/app/layouts/full/horizontal/header/header.component.html
+++ b/Web/src/app/layouts/full/horizontal/header/header.component.html
@@ -5,11 +5,7 @@
    </div>

    <!-- Mobile Menu -->
-    <button
-      mat-icon-button
-      (click)="toggleMobileNav.emit()"
-      class="d-block d-lg-none"
-    >
+    <button mat-icon-button (click)="toggleMobileNav.emit()" class="d-block d-lg-none">
      <i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
    </button>
    <!-- --------------------------------------------------------------- -->
@@ -17,19 +13,15 @@
    <!-- --------------------------------------------------------------- -->
    <!--  Search -->
    <!-- --------------------------------------------------------------- -->
-    <button mat-icon-button (click)="openDialog()" class="d-flex">
+    <!-- <button mat-icon-button (click)="openDialog()" class="d-flex">
      <i-tabler name="search" class="icon-20 d-flex"></i-tabler>
-    </button>
+    </button> -->

-    <div class="d-none d-lg-flex">
+    <!-- <div class="d-none d-lg-flex"> -->
      <!-- --------------------------------------------------------------- -->
      <!--  Links -->
      <!-- --------------------------------------------------------------- -->
-      <button
-        mat-button
-        [matMenuTriggerFor]="appsmenu"
-        aria-label="Notifications"
-      >
+      <!-- <button mat-button [matMenuTriggerFor]="appsmenu" aria-label="Notifications">
        <div class="d-flex align-items-center">
          Apps <i-tabler name="chevron-down" class="icon-16 m-l-4"></i-tabler>
        </div>
@@ -41,20 +33,14 @@
              <div class="row">
                @for(appdd of apps; track appdd.title) {
                <div class="col-sm-6 text-hover-primary">
-                  <a
-                    [routerLink]="[appdd.link]"
-                    class="d-flex align-items-center text-decoration-none m-b-24"
-                  >
+                  <a [routerLink]="[appdd.link]" class="d-flex align-items-center text-decoration-none m-b-24">
                    <span
-                      class="text-primary bg-light rounded icon-40 d-flex align-items-center justify-content-center"
-                    >
+                      class="text-primary bg-light rounded icon-40 d-flex align-items-center justify-content-center">
                      <img [src]="appdd.img" width="20" />
                    </span>

                    <div class="m-l-16">
-                      <h5
-                        class="f-s-14 f-w-600 m-0 textprimary  hover-text"
-                      >
+                      <h5 class="f-s-14 f-w-600 m-0 textprimary  hover-text">
                        {{ appdd.title }}
                      </h5>
                      <span class="text-body f-s-12">{{
@@ -66,21 +52,11 @@
                }
              </div>
            </div>
-            <div
-              class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between"
-            >
-              <span
-                class="d-flex align-items-center  f-s-16 f-w-500"
-              >
-                <i-tabler name="help" class="icon-20 m-r-8"></i-tabler
-                >Frequently Asked Questions
+            <div class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between">
+              <span class="d-flex align-items-center  f-s-16 f-w-500">
+                <i-tabler name="help" class="icon-20 m-r-8"></i-tabler>Frequently Asked Questions
              </span>
-              <a
-                [routerLink]="['/theme-pages/faq']"
-                mat-flat-button
-                color="primary"
-                >Check</a
-              >
+              <a [routerLink]="['/theme-pages/faq']" mat-flat-button color="primary">Check</a>
            </div>
          </div>
          <div class="col-sm-4">
@@ -88,11 +64,8 @@
              <h4 class="f-s-18 f-w-600  m-b-16">Quick Links</h4>
              @for(quicklink of quicklinks; track quicklink.title) {
              <div class="text-hover-primary">
-                <a
-                  [routerLink]="[quicklink.link]"
-                  class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8"
-                  >{{ quicklink.title }}</a
-                >
+                <a [routerLink]="[quicklink.link]"
+                  class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8">{{ quicklink.title }}</a>
              </div>
              }
            </div>
@@ -102,16 +75,12 @@
      <a mat-button [routerLink]="['/apps/chat']">Chat</a>
      <a mat-button [routerLink]="['/apps/calendar']">Calendar</a>
      <a mat-button [routerLink]="['/apps/email/inbox']">Email</a>
-    </div>
+    </div> -->

    <span class="flex-1-auto"></span>

    <!-- Mobile Menu -->
-    <button
-      mat-icon-button
-      (click)="toggleMobileFilterNav.emit()"
-      class="d-flex d-lg-none justify-content-center"
-    >
+    <button mat-icon-button (click)="toggleMobileFilterNav.emit()" class="d-flex d-lg-none justify-content-center">
      <i-tabler name="grid-dots" class="icon-20 d-flex"></i-tabler>
    </button>

@@ -119,19 +88,13 @@
    <!-- langugage Dropdown -->
    <!-- --------------------------------------------------------------- -->
    <button [matMenuTriggerFor]="flags" mat-icon-button class="m-r-5">
-      <img
-        [src]="selectedLanguage.icon"
-        class="rounded-circle object-cover icon-20"
-      />
+      <img [src]="selectedLanguage.icon" class="rounded-circle object-cover icon-20" />
    </button>
    <mat-menu #flags="matMenu" class="cardWithShadow">
      @for(lang of languages; track lang.icon) {
      <button mat-menu-item (click)="changeLanguage(lang)">
        <div class="d-flex align-items-center">
-          <img
-            [src]="lang.icon"
-            class="rounded-circle object-cover m-r-8 icon-20"
-          />
+          <img [src]="lang.icon" class="rounded-circle object-cover m-r-8 icon-20" />
          <span class=" f-s-14">{{ lang.language }}</span>
        </div>
      </button>
@@ -143,7 +106,8 @@
      <i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
    </button>
    }@else{
-      <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('light')">
+    <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center"
+      (click)="setlightDark('light')">
      <i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
    </button>
    }
@@ -151,27 +115,15 @@
    <!-- --------------------------------------------------------------- -->
    <!-- Notification Dropdown -->
    <!-- --------------------------------------------------------------- -->
-    <button
-      mat-icon-button matBadge="5"
-      [matMenuTriggerFor]="notificationmenu"
-      aria-label="Notifications" class="m-x-5 notification-badge"
-    >
-      <i-tabler
-        class="d-flex"
-        name="bell"
-      ></i-tabler>
+    <!-- <button mat-icon-button matBadge="5" [matMenuTriggerFor]="notificationmenu" aria-label="Notifications"
+      class="m-x-5 notification-badge">
+      <i-tabler class="d-flex" name="bell"></i-tabler>
    </button>
-    <mat-menu
-      #notificationmenu="matMenu"
-      xPosition="before"
-      class="topbar-dd cardWithShadow"
-    >
+    <mat-menu #notificationmenu="matMenu" xPosition="before" class="topbar-dd cardWithShadow">
      <div class="d-flex align-items-center p-x-32 p-y-16">
        <h6 class="f-s-16 f-w-600 m-0 ">Notifications</h6>
        <span class="m-l-auto">
-          <span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12"
-            >5 new</span
-          >
+          <span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12">5 new</span>
        </span>
      </div>
      @for(notification of notifications; track notification.title) {
@@ -193,64 +145,40 @@
          See all notifications
        </button>
      </div>
-    </mat-menu>
+    </mat-menu> -->

    <!-- --------------------------------------------------------------- -->
    <!-- profile Dropdown -->
    <!-- --------------------------------------------------------------- -->
-    <button
-      mat-icon-button
-      [matMenuTriggerFor]="profilemenu"
-      aria-label="Notifications"
-    >
-      <img
-        src="/assets/images/profile/user-1.jpg"
-        class="rounded-circle object-cover icon-35 profile-dd"
-        width="35"
-      />
+    <button mat-icon-button [matMenuTriggerFor]="profilemenu" aria-label="Notifications">
+      <img [src]="auth.profile?.picture" class="rounded-circle object-cover icon-35 profile-dd" width="35" />
    </button>
-    <mat-menu
-      #profilemenu="matMenu"
-      xPosition="before"
-      class="topbar-dd cardWithShadow"
-    >
+    <mat-menu #profilemenu="matMenu" xPosition="before" class="topbar-dd cardWithShadow">
      <div class="p-x-32 p-y-16">
-        <h6 class="f-s-16 f-w-600 m-0 ">User Profile</h6>
+        <h6 class="f-s-16 f-w-600 m-0 ">Váš profil</h6>

        <div class="d-flex align-items-center p-b-24 b-b-1 m-t-16">
-          <img
-            src="/assets/images/profile/user-1.jpg"
-            class="rounded-circle"
-            width="95"
-          />
+          <img [src]="auth.profile?.picture" class="rounded-circle" width="95" />
          <div class="m-l-16">
-            <h6 class="f-s-14 f-w-600 m-0 ">Mathew Anderson</h6>
-            <span class="f-s-14 d-block m-b-4">Designer</span>
+            <h6 class="f-s-14 f-w-600 m-0 ">{{ auth.profile?.name }}</h6>
+            <span class="f-s-14 d-block m-b-4">{{ auth.profile?.role }}</span>
            <span class="d-flex align-items-center">
              <i-tabler name="mail" class="icon-15 m-r-4"></i-tabler>
-              info&#64;modernize.com
+              {{auth.profile?.email }}
            </span>
          </div>
        </div>
      </div>
-      <div class="p-x-32">
+      <!-- <div class="p-x-32">
        @for(profile of profiledd; track profile.title) {
-        <a
-          class="p-y-16 text-decoration-none d-block text-hover-primary"
-          [routerLink]="[profile.link]"
-        >
+        <a class="p-y-16 text-decoration-none d-block text-hover-primary" [routerLink]="[profile.link]">
          <div class="d-flex align-items-center">
-            <button
-              mat-mini-fab
-              class="text-primary bg-light-primary shadow-none rounded"
-            >
+            <button mat-mini-fab class="text-primary bg-light-primary shadow-none rounded">
              <img [src]="profile.img" width="20" />
            </button>

            <div class="m-l-16">
-              <h5
-                class="f-s-14 f-w-600 m-0 textprimary  hover-text"
-              >
+              <h5 class="f-s-14 f-w-600 m-0 textprimary  hover-text">
                {{ profile.title }}
              </h5>
              <span class="f-s-14 text-body">{{ profile.subtitle }}</span>
@@ -259,10 +187,7 @@
        </a>
        }

-        <!-- upgrade -->
-        <div
-          class="p-24 overflow-hidden bg-light-primary rounded position-relative m-y-16"
-        >
+        <div class="p-24 overflow-hidden bg-light-primary rounded position-relative m-y-16">
          <div class="d-flex align-items-center">
            <div>
              <h5 class="f-s-18 m-0 f-w-600 m-b-12 ">
@@ -272,24 +197,14 @@
              <button mat-flat-button color="primary">Upgrade</button>
            </div>
            <div class="m-l-auto">
-              <img
-                src="/assets/images/backgrounds/unlimited-bg.png"
-                alt="upgrade-bg"
-                class="upgrade-bg"
-              />
-            </div>
+              <img src="/assets/images/backgrounds/unlimited-bg.png" alt="upgrade-bg" class="upgrade-bg" />
            </div>
          </div>
        </div>
+      </div> -->

      <div class="p-y-12 p-x-32">
-        <a
-          [routerLink]="['/authentication/login']"
-          mat-stroked-button
-          color="primary"
-          class="w-100"
-          >Logout</a
-        >
+        <a [routerLink]="['/authentication/logout']" mat-stroked-button color="primary" class="w-100">Odhlásiť</a>
      </div>
    </mat-menu>
  </div>
--- a/Web/src/app/layouts/full/horizontal/header/header.component.ts
+++ b/Web/src/app/layouts/full/horizontal/header/header.component.ts
@@ -1,7 +1,7 @@
 import { Component, Output, EventEmitter, Input } from '@angular/core';
 import { CoreService } from '../../../../services/core.service';
 import { MatDialog } from '@angular/material/dialog';
-import { navItems } from '../../vertical/sidebar/sidebar-data';
+import { navItems } from '../../horizontal/sidebar/sidebar-data';
 import { TranslateService } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
 import { TablerIconsModule } from 'angular-tabler-icons';
@@ -9,6 +9,7 @@ import { MaterialModule } from '../../../../material.module';
 import { BrandingComponent } from '../../vertical/sidebar/branding.component';
 import { FormsModule } from '@angular/forms';
 import { AppSettings } from '../../../../config';
+import { AuthenticationService } from '../../../../services/authentication.service';

 interface notifications {
  id: number;
@@ -54,34 +55,23 @@ export class AppHorizontalHeaderComponent {
  showFiller = false;

  public selectedLanguage: any = {
-    language: 'English',
-    code: 'en',
-    type: 'US',
-    icon: '/assets/images/flag/icon-flag-en.svg',
+    language: 'Slovenský',
+    code: 'sk',
+    icon: '/assets/images/flag/icon-flag-sk.svg',
  };

  public languages: any[] = [
+    {
+      language: 'Slovenský',
+      code: 'sk',
+      icon: '/assets/images/flag/icon-flag-sk.svg',
+    },
    {
      language: 'English',
      code: 'en',
      type: 'US',
      icon: '/assets/images/flag/icon-flag-en.svg',
    },
-    {
-      language: 'Español',
-      code: 'es',
-      icon: '/assets/images/flag/icon-flag-es.svg',
-    },
-    {
-      language: 'Français',
-      code: 'fr',
-      icon: '/assets/images/flag/icon-flag-fr.svg',
-    },
-    {
-      language: 'German',
-      code: 'de',
-      icon: '/assets/images/flag/icon-flag-de.svg',
-    },
  ];

  @Output() optionsChange = new EventEmitter<AppSettings>();
@@ -90,9 +80,10 @@ export class AppHorizontalHeaderComponent {
    private settings: CoreService,
    private vsidenav: CoreService,
    public dialog: MatDialog,
-    private translate: TranslateService
+    private translate: TranslateService,
+    public auth: AuthenticationService
  ) {
-    translate.setDefaultLang('en');
+    // translate.setDefaultLang('en');
    this.options = this.settings.getOptions();
  }
  options: AppSettings;
--- a/Web/src/app/layouts/full/horizontal/sidebar/sidebar-data.ts
+++ b/Web/src/app/layouts/full/horizontal/sidebar/sidebar-data.ts
--- a/Web/src/app/pages/authentication/authentication.routes.ts
+++ b/Web/src/app/pages/authentication/authentication.routes.ts
@@ -10,6 +10,7 @@ import { AppSideForgotPasswordComponent } from './side-forgot-password/side-forg
 import { AppSideLoginComponent } from './side-login/side-login.component';
 import { AppSideRegisterComponent } from './side-register/side-register.component';
 import { CallbackComponent } from './callback/callback.component';
+import { AppSideLogoutComponent } from './side-logout/side-logout.component';

 export const AuthenticationRoutes: Routes = [
  {
@@ -55,6 +56,10 @@ export const AuthenticationRoutes: Routes = [
        path: 'callback',
        component: CallbackComponent,
      },
+       {
+        path: 'logout',
+        component: AppSideLogoutComponent,
+      },
    ],
  },
 ];
--- a/Web/src/app/pages/authentication/callback/callback.component.ts
+++ b/Web/src/app/pages/authentication/callback/callback.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 import { CoreService } from '../../../services/core.service';
 import { MaterialModule } from '../../../material.module';
 import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
@@ -15,7 +15,7 @@ export class CallbackComponent {
  options: any;
  profile: any;

-  constructor(private settings: CoreService, private as: AuthenticationService) {
+  constructor(private settings: CoreService, private as: AuthenticationService, private router: Router) {
    this.options = this.settings.getOptions();

    // Handle the OAuth2 callback and load user profile
@@ -24,6 +24,7 @@ export class CallbackComponent {
      .then(_ => {
        console.log('Login successful');
        this.profile = this.as.profile;
+        this.router.navigate(['/dashboard']);
      }).catch(err => {
        console.error('Error handling callback', err);
      });
--- a/Web/src/app/pages/authentication/side-logout/side-logout.component.html
+++ b/Web/src/app/pages/authentication/side-logout/side-logout.component.html
@@ -0,0 +1,38 @@
+<div class="blank-layout-container justify-content-center">
+    <div class="position-relative row w-100 h-100">
+        <div class="col-lg-7 col-xl-8 bg-gredient p-0">
+            <div class="p-24 h-100">
+                <app-branding></app-branding>
+
+                <div class="align-items-center justify-content-center img-height d-none d-lg-flex">
+                    <img src="/assets/images/backgrounds/login-bg.svg" alt="login" style="max-width: 500px" />
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-5 col-xl-4 p-0">
+            <div class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100">
+                <div class="row justify-content-center w-100">
+                    <div class="col-lg-9 max-width-form">
+                        <h4 class="f-w-700 f-s-24 m-0">Signed out</h4>
+                        <span class="f-s-14 d-block f-s-14 m-t-8">You have beens successfully logged out.</span>
+
+                        <div class="row m-t-24 align-items-center">
+                            <a [routerLink]="['/authentication/login']" mat-flat-button color="primary"
+                                class="w-100">
+                                <div class="d-flex align-items-center">
+                                    Prihlásenie
+                                </div>
+                            </a>
+
+                            <a [routerLink]="['/']" mat-stroked-button class="w-100" style="margin-top:12px">
+                                <div class="d-flex align-items-center">
+                                    Návrat na domovskú stránku
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
--- a/Web/src/app/pages/authentication/side-logout/side-logout.component.ts
+++ b/Web/src/app/pages/authentication/side-logout/side-logout.component.ts
@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { CoreService } from '../../../services/core.service';
+import { MaterialModule } from '../../../material.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+import { AuthenticationService } from '../../../services/authentication.service';
+
+@Component({
+  selector: 'app-side-logout',
+  imports: [RouterModule, MaterialModule, BrandingComponent],
+  templateUrl: './side-logout.component.html'
+})
+export class AppSideLogoutComponent {
+  options: any;
+
+  constructor(private settings: CoreService, private router: Router, private readonly as: AuthenticationService) {
+    this.options = this.settings.getOptions();
+
+    // Perform logout when this component is instantiated
+    // destroyLocalSession = true will remove persisted oauth config as well
+    try {
+      this.as.logout(true);
+    } catch (e) {
+      console.error('Error during logout', e);
+    }
+  }
+
+  goToLogin() {
+    // navigate to login page (adjust route if your app uses a different login path)
+    this.router.navigate(['/authentication/signin']);
+  }
+
+  goHome() {
+    this.router.navigate(['/']);
+  }
+}
--- a/Web/src/app/pages/dashboard/dashboard.component.html
+++ b/Web/src/app/pages/dashboard/dashboard.component.html
--- a/Web/src/app/pages/dashboard/dashboard.component.ts
+++ b/Web/src/app/pages/dashboard/dashboard.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+// components
+
+@Component({
+  selector: 'app-dashboard1',
+  imports: [
+
+  ],
+  templateUrl: './dashboard.component.html'
+})
+export class AppDashboardComponent {
+  constructor() { }
+}
--- a/Web/src/app/pages/dashboard/dashboard.module.ts
+++ b/Web/src/app/pages/dashboard/dashboard.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { DashboardsRoutes } from './dashboard.routes';
+
+import { AppDashboardComponent } from './dashboard.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(DashboardsRoutes),
+    AppDashboardComponent,
+  ],
+})
+export class DashboardsModule {}
--- a/Web/src/app/pages/dashboard/dashboard.routes.ts
+++ b/Web/src/app/pages/dashboard/dashboard.routes.ts
@@ -0,0 +1,25 @@
+import { Routes } from '@angular/router';
+
+// dashboards
+import { AppDashboardComponent } from './dashboard.component';
+import { authGuard } from '../../app.route.guard';
+
+export const DashboardsRoutes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'dashboard',
+        component: AppDashboardComponent,
+        canActivate: [authGuard],
+        data: {
+          title: 'Analytical',
+          urls: [
+            { title: 'Dashboard', url: '/dashboard/main' },
+            { title: 'Analytical' },
+          ]
+        }
+      }
+    ]
+  }
+];
--- a/Web/src/app/services/authentication.service.ts
+++ b/Web/src/app/services/authentication.service.ts
@@ -78,9 +78,15 @@ export class AuthenticationService {
                if (!isLoggedIn && !this.oauthService.hasValidAccessToken()) {
                    return Promise.reject('No valid token after callback');
                }
-                return this.oauthService.loadUserProfile();
-            }).then(profile => {
+                return this.loadUserProfile();
+            });
+    }
+
+    loadUserProfile(): Promise<any> {
+        return this.oauthService.loadUserProfile()
+            .then(profile => {
                this.profile = profile["info"];
+                return new Promise((resolve) => resolve(profile["info"]));
            });
    }