From d5619e42da5297e6329b12e980b9c2f02d967759 Mon Sep 17 00:00:00 2001 From: Marek Lesko Date: Wed, 29 Oct 2025 19:59:35 +0000 Subject: [PATCH] feat: Update sidebar navigation and add dashboard component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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. --- Web/public/images/flag/icon-flag-sk.svg | 2 + Web/src/app/app.route.guard.ts | 17 +- Web/src/app/app.routes.ts | 16 +- Web/src/app/config.ts | 6 +- Web/src/app/layouts/full/full.component.html | 4 +- Web/src/app/layouts/full/full.component.ts | 2 +- .../horizontal/header/header.component.html | 185 +-- .../horizontal/header/header.component.ts | 47 +- .../full/horizontal/sidebar/sidebar-data.ts | 1246 ++++++++--------- .../authentication/authentication.routes.ts | 5 + .../callback/callback.component.ts | 5 +- .../side-logout/side-logout.component.html | 38 + .../side-logout/side-logout.component.ts | 36 + .../pages/dashboard/dashboard.component.html | 0 .../pages/dashboard/dashboard.component.ts | 14 + .../app/pages/dashboard/dashboard.module.ts | 14 + .../app/pages/dashboard/dashboard.routes.ts | 25 + .../app/services/authentication.service.ts | 10 +- 18 files changed, 865 insertions(+), 807 deletions(-) create mode 100644 Web/public/images/flag/icon-flag-sk.svg create mode 100644 Web/src/app/pages/authentication/side-logout/side-logout.component.html create mode 100644 Web/src/app/pages/authentication/side-logout/side-logout.component.ts create mode 100755 Web/src/app/pages/dashboard/dashboard.component.html create mode 100755 Web/src/app/pages/dashboard/dashboard.component.ts create mode 100755 Web/src/app/pages/dashboard/dashboard.module.ts create mode 100755 Web/src/app/pages/dashboard/dashboard.routes.ts diff --git a/Web/public/images/flag/icon-flag-sk.svg b/Web/public/images/flag/icon-flag-sk.svg new file mode 100644 index 0000000..a04176d --- /dev/null +++ b/Web/public/images/flag/icon-flag-sk.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/Web/src/app/app.route.guard.ts b/Web/src/app/app.route.guard.ts index b97d3ca..41e594b 100755 --- 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'); }; diff --git a/Web/src/app/app.routes.ts b/Web/src/app/app.routes.ts index e1b00b9..ed22f99 100755 --- 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: () => diff --git a/Web/src/app/config.ts b/Web/src/app/config.ts index 5b6b252..aaf603a 100755 --- 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', }; diff --git a/Web/src/app/layouts/full/full.component.html b/Web/src/app/layouts/full/full.component.html index dbdf6cf..7b10d45 100755 --- a/Web/src/app/layouts/full/full.component.html +++ b/Web/src/app/layouts/full/full.component.html @@ -101,11 +101,11 @@ -
+ - @@ -17,19 +13,15 @@ - @@ -119,19 +88,13 @@ @for(lang of languages; track lang.icon) { @@ -139,39 +102,28 @@ @if(options.theme=='light'){ - - }@else{ - + + }@else{ + } - - +
-
User Profile
+
Váš profil
- +
-
Mathew Anderson
- Designer +
{{ auth.profile?.name }}
+ {{ auth.profile?.role }} - info@modernize.com + {{auth.profile?.email }}
-
+ -
+
@@ -272,25 +197,15 @@
- upgrade-bg + upgrade-bg
-
+
-->
- + \ No newline at end of file diff --git a/Web/src/app/layouts/full/horizontal/header/header.component.ts b/Web/src/app/layouts/full/horizontal/header/header.component.ts index 3617d93..c98b1ea 100755 --- 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; @@ -40,9 +41,9 @@ interface quicklinks { } @Component({ - selector: 'app-horizontal-header', - imports: [RouterModule, TablerIconsModule, MaterialModule, BrandingComponent], - templateUrl: './header.component.html' + selector: 'app-horizontal-header', + imports: [RouterModule, TablerIconsModule, MaterialModule, BrandingComponent], + templateUrl: './header.component.html' }) export class AppHorizontalHeaderComponent { @Input() showToggle = true; @@ -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(); @@ -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; @@ -280,9 +271,9 @@ export class AppHorizontalHeaderComponent { } @Component({ - selector: 'app-search-dialog', - imports: [RouterModule, MaterialModule, TablerIconsModule, FormsModule], - templateUrl: 'search-dialog.component.html' + selector: 'app-search-dialog', + imports: [RouterModule, MaterialModule, TablerIconsModule, FormsModule], + templateUrl: 'search-dialog.component.html' }) export class AppHorizontalSearchDialogComponent { searchText: string = ''; diff --git a/Web/src/app/layouts/full/horizontal/sidebar/sidebar-data.ts b/Web/src/app/layouts/full/horizontal/sidebar/sidebar-data.ts index df78905..94b6343 100755 --- a/Web/src/app/layouts/full/horizontal/sidebar/sidebar-data.ts +++ b/Web/src/app/layouts/full/horizontal/sidebar/sidebar-data.ts @@ -5,629 +5,629 @@ export const navItems: NavItem[] = [ navCap: 'Home', }, { - displayName: 'Dashboards', + displayName: 'Hlavná stránka', iconName: 'home', - route: 'dashboards', - children: [ - { - displayName: 'Analytical', - iconName: 'point', - route: 'dashboards/dashboard1', - }, - { - displayName: 'eCommerce', - iconName: 'point', - route: 'dashboards/dashboard2', - }, - ], - }, - { - displayName: 'Frontend pages', - iconName: 'app-window', - route: 'front-pages', - children: [ - { - displayName: 'Home Page', - iconName: 'point', - route: 'front-pages/homepage', - } , - { - displayName: 'About Us', - iconName: 'point', - route: 'front-pages/about', - } , - { - displayName: 'Blog', - iconName: 'point', - route: 'front-pages/blog', - } , - { - displayName: 'Blog Details', - iconName: 'point', - route: 'front-pages/blog-details', - } , - { - displayName: 'Portfolio', - iconName: 'point', - route: 'front-pages/portfolio', - }, - { - displayName: 'Pricing', - iconName: 'point', - route: 'front-pages/pricing', - }, - { - displayName: 'Contact', - iconName: 'point', - route: 'front-pages/contact', - } - ] - }, - { - displayName: 'Apps', - iconName: 'apps', - route: 'apps', - ddType: '', - children: [ - { - displayName: 'Chat', - iconName: 'point', - route: 'apps/chat', - }, - { - displayName: 'Calendar', - iconName: 'point', - route: 'apps/calendar', - }, - { - displayName: 'Email', - iconName: 'point', - route: 'apps/email/inbox', - }, - { - displayName: 'Contacts', - iconName: 'point', - route: 'apps/contacts', - }, - { - displayName: 'Contact List', - iconName: 'point', - route: 'apps/contact-list', - }, - { - displayName: 'Courses', - iconName: 'point', - route: 'apps/courses', - }, - { - displayName: 'Employee', - iconName: 'point', - route: 'apps/employee', - }, - { - displayName: 'Notes', - iconName: 'point', - route: 'apps/notes', - }, - { - displayName: 'Tickets', - iconName: 'point', - route: 'apps/tickets', - }, - { - displayName: 'Invoice', - iconName: 'point', - route: 'apps/invoice', - }, - { - displayName: 'ToDo', - iconName: 'point', - route: 'apps/todo', - }, - { - displayName: 'Kanban', - iconName: 'point', - route: 'apps/kanban', - }, - { - displayName: 'Blog', - iconName: 'point', - route: 'apps/blog', - children: [ - { - displayName: 'Post', - iconName: 'point', - route: 'apps/blog/post', - }, - { - displayName: 'Detail', - iconName: 'point', - route: 'apps/blog/detail/Early Black Friday Amazon deals: cheap TVs, headphones, laptops', - }, - ], - }, - { - displayName: 'User Profile', - iconName: 'point', - route: 'apps/profile-details', - children: [ - { - displayName: 'Profile', - iconName: 'point', - route: 'apps/profile-details/profile', - }, - { - displayName: 'Followers', - iconName: 'point', - route: 'apps/profile-details/followers', - }, - { - displayName: 'Friends', - iconName: 'point', - route: 'apps/profile-details/friends', - }, - { - displayName: 'Gellary', - iconName: 'point', - route: 'apps/profile-details/gallery', - }, - ], - }, - { - displayName: 'Ecommerce', - iconName: 'point', - route: 'apps/product', - children: [ - { - displayName: 'Product List', - iconName: 'point', - route: 'apps/product/product-list', - }, - { - displayName: 'Add Product', - iconName: 'point', - route: 'apps/product/add-product', - }, - { - displayName: 'Edit Product', - iconName: 'point', - route: 'apps/product/edit-product', - }, - { - displayName: 'Shop', - iconName: 'point', - route: 'apps/product/shop', - }, - ], - }, - ], - }, - { - displayName: 'Ui', - iconName: 'components', - route: 'ui-components', - ddType: '', - children: [ - { - displayName: 'Badge', - iconName: 'point', - route: 'ui-components/badge', - }, - { - displayName: 'Expansion Panel', - iconName: 'point', - route: 'ui-components/expansion', - }, - { - displayName: 'Chips', - iconName: 'point', - route: 'ui-components/chips', - }, - { - displayName: 'Dialog', - iconName: 'point', - route: 'ui-components/dialog', - }, - { - displayName: 'Lists', - iconName: 'point', - route: 'ui-components/lists', - }, - { - displayName: 'Divider', - iconName: 'point', - route: 'ui-components/divider', - }, - { - displayName: 'Menu', - iconName: 'point', - route: 'ui-components/menu', - }, - { - displayName: 'Paginator', - iconName: 'point', - route: 'ui-components/paginator', - }, - { - displayName: 'Progress Bar', - iconName: 'point', - route: 'ui-components/progress', - }, - { - displayName: 'Progress Spinner', - iconName: 'point', - route: 'ui-components/progress-spinner', - }, - { - displayName: 'Ripples', - iconName: 'point', - route: 'ui-components/ripples', - }, - { - displayName: 'Slide Toggle', - iconName: 'point', - route: 'ui-components/slide-toggle', - }, - { - displayName: 'Slider', - iconName: 'point', - route: 'ui-components/slider', - }, - { - displayName: 'Snackbar', - iconName: 'point', - route: 'ui-components/snackbar', - }, - { - displayName: 'Tabs', - iconName: 'point', - route: 'ui-components/tabs', - }, - { - displayName: 'Toolbar', - iconName: 'point', - route: 'ui-components/toolbar', - }, - { - displayName: 'Tooltips', - iconName: 'point', - route: 'ui-components/tooltips', - }, - ], - }, - { - displayName: 'Pages', - iconName: 'clipboard', - route: 'theme-pages', - ddType: '', - children: [ - { - displayName: 'Treeview', - iconName: 'point', - route: 'theme-pages/treeview', - }, - { - displayName: 'Pricing', - iconName: 'point', - route: 'theme-pages/pricing', - }, - { - displayName: 'Account Setting', - iconName: 'point', - route: 'theme-pages/account-setting', - }, - { - displayName: 'FAQ', - iconName: 'point', - route: 'theme-pages/faq', - }, - { - displayName: 'Landingpage', - iconName: 'point', - route: 'landingpage', - }, - { - displayName: 'Widgets', - iconName: 'point', - route: 'widgets', - children: [ - { - displayName: 'Cards', - iconName: 'point', - route: 'widgets/cards', - }, - { - displayName: 'Banners', - iconName: 'point', - route: 'widgets/banners', - }, - { - displayName: 'Charts', - iconName: 'point', - route: 'widgets/charts', - }, - ], - }, - { - displayName: 'Charts', - iconName: 'point', - route: 'charts', - children: [ - { - displayName: 'Line', - iconName: 'point', - route: '/charts/line', - }, - { - displayName: 'Gredient', - iconName: 'point', - route: '/charts/gredient', - }, - { - displayName: 'Area', - iconName: 'point', - route: '/charts/area', - }, - { - displayName: 'Candlestick', - iconName: 'point', - route: '/charts/candlestick', - }, - { - displayName: 'Column', - iconName: 'point', - route: '/charts/column', - }, - { - displayName: 'Doughnut & Pie', - iconName: 'point', - route: '/charts/doughnut-pie', - }, - { - displayName: 'Radialbar & Radar', - iconName: 'point', - route: '/charts/radial-radar', - }, - ], - }, - { - displayName: 'Auth', - iconName: 'point', - route: '/', - children: [ - { - displayName: 'Login', - iconName: 'point', - route: '/authentication', - children: [ - { - displayName: 'Login 1', - iconName: 'point', - route: '/authentication/login', - }, - { - displayName: 'Boxed Login', - iconName: 'point', - route: '/authentication/boxed-login', - }, - ], - }, - { - displayName: 'Register', - iconName: 'point', - route: '/authentication', - children: [ - { - displayName: 'Login 1', - iconName: 'point', - route: '/authentication/side-register', - }, - { - displayName: 'Boxed Login', - iconName: 'point', - route: '/authentication/boxed-register', - }, - ], - }, - { - displayName: 'Forgot Password', - iconName: 'point', - route: '/authentication', - children: [ - { - displayName: 'Side Forgot Password', - iconName: 'point', - route: '/authentication/side-forgot-pwd', - }, - { - displayName: 'Boxed Forgot Password', - iconName: 'point', - route: '/authentication/boxed-forgot-pwd', - }, - ], - }, - { - displayName: 'Two Steps', - iconName: 'point', - route: '/authentication', - children: [ - { - displayName: 'Side Two Steps', - iconName: 'point', - route: '/authentication/side-two-steps', - }, - { - displayName: 'Boxed Two Steps', - iconName: 'point', - route: '/authentication/boxed-two-steps', - }, - ], - }, - { - displayName: 'Error', - iconName: 'point', - route: '/authentication/error', - }, - { - displayName: 'Maintenance', - iconName: 'point', - route: '/authentication/maintenance', - }, - ], - }, - ], - }, - { - displayName: 'Forms', - iconName: 'file-description', - route: 'forms', - ddType: '', - children: [ - { - displayName: 'Form elements', - iconName: 'point', - route: 'forms/forms-elements', - children: [ - { - displayName: 'Autocomplete', - iconName: 'point', - route: 'forms/forms-elements/autocomplete', - }, - { - displayName: 'Button', - iconName: 'point', - route: 'forms/forms-elements/button', - }, - { - displayName: 'Checkbox', - iconName: 'point', - route: 'forms/forms-elements/checkbox', - }, - { - displayName: 'Radio', - iconName: 'point', - route: 'forms/forms-elements/radio', - }, - { - displayName: 'Datepicker', - iconName: 'point', - route: 'forms/forms-elements/datepicker', - }, - ], - }, - { - displayName: 'Form Layouts', - iconName: 'point', - route: '/forms/form-layouts', - }, - { - displayName: 'Form Horizontal', - iconName: 'point', - route: '/forms/form-horizontal', - }, - { - displayName: 'Form Vertical', - iconName: 'point', - route: '/forms/form-vertical', - }, - { - displayName: 'Form Wizard', - iconName: 'point', - route: '/forms/form-wizard', - }, - { - displayName: 'Toastr', - iconName: 'point', - route: '/forms/form-toastr', - }, - { - displayName: 'Editor', - iconName: 'point', - route: '/forms/form-editor', - }, - ], - }, - { - displayName: 'Tables', - iconName: 'layout', - route: 'tables', - ddType: '', - children: [ - { - displayName: 'Basic Table', - iconName: 'point', - route: 'tables/basic-table', - }, - { - displayName: 'Dynamic Table', - iconName: 'point', - route: 'tables/dynamic-table', - }, - { - displayName: 'Expand Table', - iconName: 'point', - route: 'tables/expand-table', - }, - { - displayName: 'Filterable Table', - iconName: 'point', - route: 'tables/filterable-table', - }, - { - displayName: 'Footer Row Table', - iconName: 'point', - route: 'tables/footer-row-table', - }, - { - displayName: 'HTTP Table', - iconName: 'point', - route: 'tables/http-table', - }, - { - displayName: 'Mix Table', - iconName: 'point', - route: 'tables/mix-table', - }, - { - displayName: 'Multi Header Footer', - iconName: 'point', - route: 'tables/multi-header-footer-table', - }, - { - displayName: 'Pagination Table', - iconName: 'point', - route: 'tables/pagination-table', - }, - { - displayName: 'Row Context Table', - iconName: 'point', - route: 'tables/row-context-table', - }, - { - displayName: 'Selection Table', - iconName: 'point', - route: 'tables/selection-table', - }, - { - displayName: 'Sortable Table', - iconName: 'point', - route: 'tables/sortable-table', - }, - { - displayName: 'Sticky Column', - iconName: 'point', - route: 'tables/sticky-column-table', - }, - { - displayName: 'Sticky Header Footer', - iconName: 'point', - route: 'tables/sticky-header-footer-table', - }, - { - displayName: 'Data table', - iconName: 'point', - route: '/datatable/kichen-sink', - }, - ], + route: 'dashboard', + // children: [ + // { + // displayName: 'Analytical', + // iconName: 'point', + // route: 'dashboards/dashboard1', + // }, + // { + // displayName: 'eCommerce', + // iconName: 'point', + // route: 'dashboards/dashboard2', + // }, + // ], }, + // { + // displayName: 'Frontend pages', + // iconName: 'app-window', + // route: 'front-pages', + // children: [ + // { + // displayName: 'Home Page', + // iconName: 'point', + // route: 'front-pages/homepage', + // } , + // { + // displayName: 'About Us', + // iconName: 'point', + // route: 'front-pages/about', + // } , + // { + // displayName: 'Blog', + // iconName: 'point', + // route: 'front-pages/blog', + // } , + // { + // displayName: 'Blog Details', + // iconName: 'point', + // route: 'front-pages/blog-details', + // } , + // { + // displayName: 'Portfolio', + // iconName: 'point', + // route: 'front-pages/portfolio', + // }, + // { + // displayName: 'Pricing', + // iconName: 'point', + // route: 'front-pages/pricing', + // }, + // { + // displayName: 'Contact', + // iconName: 'point', + // route: 'front-pages/contact', + // } + // ] + // }, + // { + // displayName: 'Apps', + // iconName: 'apps', + // route: 'apps', + // ddType: '', + // children: [ + // { + // displayName: 'Chat', + // iconName: 'point', + // route: 'apps/chat', + // }, + // { + // displayName: 'Calendar', + // iconName: 'point', + // route: 'apps/calendar', + // }, + // { + // displayName: 'Email', + // iconName: 'point', + // route: 'apps/email/inbox', + // }, + // { + // displayName: 'Contacts', + // iconName: 'point', + // route: 'apps/contacts', + // }, + // { + // displayName: 'Contact List', + // iconName: 'point', + // route: 'apps/contact-list', + // }, + // { + // displayName: 'Courses', + // iconName: 'point', + // route: 'apps/courses', + // }, + // { + // displayName: 'Employee', + // iconName: 'point', + // route: 'apps/employee', + // }, + // { + // displayName: 'Notes', + // iconName: 'point', + // route: 'apps/notes', + // }, + // { + // displayName: 'Tickets', + // iconName: 'point', + // route: 'apps/tickets', + // }, + // { + // displayName: 'Invoice', + // iconName: 'point', + // route: 'apps/invoice', + // }, + // { + // displayName: 'ToDo', + // iconName: 'point', + // route: 'apps/todo', + // }, + // { + // displayName: 'Kanban', + // iconName: 'point', + // route: 'apps/kanban', + // }, + // { + // displayName: 'Blog', + // iconName: 'point', + // route: 'apps/blog', + // children: [ + // { + // displayName: 'Post', + // iconName: 'point', + // route: 'apps/blog/post', + // }, + // { + // displayName: 'Detail', + // iconName: 'point', + // route: 'apps/blog/detail/Early Black Friday Amazon deals: cheap TVs, headphones, laptops', + // }, + // ], + // }, + // { + // displayName: 'User Profile', + // iconName: 'point', + // route: 'apps/profile-details', + // children: [ + // { + // displayName: 'Profile', + // iconName: 'point', + // route: 'apps/profile-details/profile', + // }, + // { + // displayName: 'Followers', + // iconName: 'point', + // route: 'apps/profile-details/followers', + // }, + // { + // displayName: 'Friends', + // iconName: 'point', + // route: 'apps/profile-details/friends', + // }, + // { + // displayName: 'Gellary', + // iconName: 'point', + // route: 'apps/profile-details/gallery', + // }, + // ], + // }, + // { + // displayName: 'Ecommerce', + // iconName: 'point', + // route: 'apps/product', + // children: [ + // { + // displayName: 'Product List', + // iconName: 'point', + // route: 'apps/product/product-list', + // }, + // { + // displayName: 'Add Product', + // iconName: 'point', + // route: 'apps/product/add-product', + // }, + // { + // displayName: 'Edit Product', + // iconName: 'point', + // route: 'apps/product/edit-product', + // }, + // { + // displayName: 'Shop', + // iconName: 'point', + // route: 'apps/product/shop', + // }, + // ], + // }, + // ], + // }, + // { + // displayName: 'Ui', + // iconName: 'components', + // route: 'ui-components', + // ddType: '', + // children: [ + // { + // displayName: 'Badge', + // iconName: 'point', + // route: 'ui-components/badge', + // }, + // { + // displayName: 'Expansion Panel', + // iconName: 'point', + // route: 'ui-components/expansion', + // }, + // { + // displayName: 'Chips', + // iconName: 'point', + // route: 'ui-components/chips', + // }, + // { + // displayName: 'Dialog', + // iconName: 'point', + // route: 'ui-components/dialog', + // }, + // { + // displayName: 'Lists', + // iconName: 'point', + // route: 'ui-components/lists', + // }, + // { + // displayName: 'Divider', + // iconName: 'point', + // route: 'ui-components/divider', + // }, + // { + // displayName: 'Menu', + // iconName: 'point', + // route: 'ui-components/menu', + // }, + // { + // displayName: 'Paginator', + // iconName: 'point', + // route: 'ui-components/paginator', + // }, + // { + // displayName: 'Progress Bar', + // iconName: 'point', + // route: 'ui-components/progress', + // }, + // { + // displayName: 'Progress Spinner', + // iconName: 'point', + // route: 'ui-components/progress-spinner', + // }, + // { + // displayName: 'Ripples', + // iconName: 'point', + // route: 'ui-components/ripples', + // }, + // { + // displayName: 'Slide Toggle', + // iconName: 'point', + // route: 'ui-components/slide-toggle', + // }, + // { + // displayName: 'Slider', + // iconName: 'point', + // route: 'ui-components/slider', + // }, + // { + // displayName: 'Snackbar', + // iconName: 'point', + // route: 'ui-components/snackbar', + // }, + // { + // displayName: 'Tabs', + // iconName: 'point', + // route: 'ui-components/tabs', + // }, + // { + // displayName: 'Toolbar', + // iconName: 'point', + // route: 'ui-components/toolbar', + // }, + // { + // displayName: 'Tooltips', + // iconName: 'point', + // route: 'ui-components/tooltips', + // }, + // ], + // }, + // { + // displayName: 'Pages', + // iconName: 'clipboard', + // route: 'theme-pages', + // ddType: '', + // children: [ + // { + // displayName: 'Treeview', + // iconName: 'point', + // route: 'theme-pages/treeview', + // }, + // { + // displayName: 'Pricing', + // iconName: 'point', + // route: 'theme-pages/pricing', + // }, + // { + // displayName: 'Account Setting', + // iconName: 'point', + // route: 'theme-pages/account-setting', + // }, + // { + // displayName: 'FAQ', + // iconName: 'point', + // route: 'theme-pages/faq', + // }, + // { + // displayName: 'Landingpage', + // iconName: 'point', + // route: 'landingpage', + // }, + // { + // displayName: 'Widgets', + // iconName: 'point', + // route: 'widgets', + // children: [ + // { + // displayName: 'Cards', + // iconName: 'point', + // route: 'widgets/cards', + // }, + // { + // displayName: 'Banners', + // iconName: 'point', + // route: 'widgets/banners', + // }, + // { + // displayName: 'Charts', + // iconName: 'point', + // route: 'widgets/charts', + // }, + // ], + // }, + // { + // displayName: 'Charts', + // iconName: 'point', + // route: 'charts', + // children: [ + // { + // displayName: 'Line', + // iconName: 'point', + // route: '/charts/line', + // }, + // { + // displayName: 'Gredient', + // iconName: 'point', + // route: '/charts/gredient', + // }, + // { + // displayName: 'Area', + // iconName: 'point', + // route: '/charts/area', + // }, + // { + // displayName: 'Candlestick', + // iconName: 'point', + // route: '/charts/candlestick', + // }, + // { + // displayName: 'Column', + // iconName: 'point', + // route: '/charts/column', + // }, + // { + // displayName: 'Doughnut & Pie', + // iconName: 'point', + // route: '/charts/doughnut-pie', + // }, + // { + // displayName: 'Radialbar & Radar', + // iconName: 'point', + // route: '/charts/radial-radar', + // }, + // ], + // }, + // { + // displayName: 'Auth', + // iconName: 'point', + // route: '/', + // children: [ + // { + // displayName: 'Login', + // iconName: 'point', + // route: '/authentication', + // children: [ + // { + // displayName: 'Login 1', + // iconName: 'point', + // route: '/authentication/login', + // }, + // { + // displayName: 'Boxed Login', + // iconName: 'point', + // route: '/authentication/boxed-login', + // }, + // ], + // }, + // { + // displayName: 'Register', + // iconName: 'point', + // route: '/authentication', + // children: [ + // { + // displayName: 'Login 1', + // iconName: 'point', + // route: '/authentication/side-register', + // }, + // { + // displayName: 'Boxed Login', + // iconName: 'point', + // route: '/authentication/boxed-register', + // }, + // ], + // }, + // { + // displayName: 'Forgot Password', + // iconName: 'point', + // route: '/authentication', + // children: [ + // { + // displayName: 'Side Forgot Password', + // iconName: 'point', + // route: '/authentication/side-forgot-pwd', + // }, + // { + // displayName: 'Boxed Forgot Password', + // iconName: 'point', + // route: '/authentication/boxed-forgot-pwd', + // }, + // ], + // }, + // { + // displayName: 'Two Steps', + // iconName: 'point', + // route: '/authentication', + // children: [ + // { + // displayName: 'Side Two Steps', + // iconName: 'point', + // route: '/authentication/side-two-steps', + // }, + // { + // displayName: 'Boxed Two Steps', + // iconName: 'point', + // route: '/authentication/boxed-two-steps', + // }, + // ], + // }, + // { + // displayName: 'Error', + // iconName: 'point', + // route: '/authentication/error', + // }, + // { + // displayName: 'Maintenance', + // iconName: 'point', + // route: '/authentication/maintenance', + // }, + // ], + // }, + // ], + // }, + // { + // displayName: 'Forms', + // iconName: 'file-description', + // route: 'forms', + // ddType: '', + // children: [ + // { + // displayName: 'Form elements', + // iconName: 'point', + // route: 'forms/forms-elements', + // children: [ + // { + // displayName: 'Autocomplete', + // iconName: 'point', + // route: 'forms/forms-elements/autocomplete', + // }, + // { + // displayName: 'Button', + // iconName: 'point', + // route: 'forms/forms-elements/button', + // }, + // { + // displayName: 'Checkbox', + // iconName: 'point', + // route: 'forms/forms-elements/checkbox', + // }, + // { + // displayName: 'Radio', + // iconName: 'point', + // route: 'forms/forms-elements/radio', + // }, + // { + // displayName: 'Datepicker', + // iconName: 'point', + // route: 'forms/forms-elements/datepicker', + // }, + // ], + // }, + // { + // displayName: 'Form Layouts', + // iconName: 'point', + // route: '/forms/form-layouts', + // }, + // { + // displayName: 'Form Horizontal', + // iconName: 'point', + // route: '/forms/form-horizontal', + // }, + // { + // displayName: 'Form Vertical', + // iconName: 'point', + // route: '/forms/form-vertical', + // }, + // { + // displayName: 'Form Wizard', + // iconName: 'point', + // route: '/forms/form-wizard', + // }, + // { + // displayName: 'Toastr', + // iconName: 'point', + // route: '/forms/form-toastr', + // }, + // { + // displayName: 'Editor', + // iconName: 'point', + // route: '/forms/form-editor', + // }, + // ], + // }, + // { + // displayName: 'Tables', + // iconName: 'layout', + // route: 'tables', + // ddType: '', + // children: [ + // { + // displayName: 'Basic Table', + // iconName: 'point', + // route: 'tables/basic-table', + // }, + // { + // displayName: 'Dynamic Table', + // iconName: 'point', + // route: 'tables/dynamic-table', + // }, + // { + // displayName: 'Expand Table', + // iconName: 'point', + // route: 'tables/expand-table', + // }, + // { + // displayName: 'Filterable Table', + // iconName: 'point', + // route: 'tables/filterable-table', + // }, + // { + // displayName: 'Footer Row Table', + // iconName: 'point', + // route: 'tables/footer-row-table', + // }, + // { + // displayName: 'HTTP Table', + // iconName: 'point', + // route: 'tables/http-table', + // }, + // { + // displayName: 'Mix Table', + // iconName: 'point', + // route: 'tables/mix-table', + // }, + // { + // displayName: 'Multi Header Footer', + // iconName: 'point', + // route: 'tables/multi-header-footer-table', + // }, + // { + // displayName: 'Pagination Table', + // iconName: 'point', + // route: 'tables/pagination-table', + // }, + // { + // displayName: 'Row Context Table', + // iconName: 'point', + // route: 'tables/row-context-table', + // }, + // { + // displayName: 'Selection Table', + // iconName: 'point', + // route: 'tables/selection-table', + // }, + // { + // displayName: 'Sortable Table', + // iconName: 'point', + // route: 'tables/sortable-table', + // }, + // { + // displayName: 'Sticky Column', + // iconName: 'point', + // route: 'tables/sticky-column-table', + // }, + // { + // displayName: 'Sticky Header Footer', + // iconName: 'point', + // route: 'tables/sticky-header-footer-table', + // }, + // { + // displayName: 'Data table', + // iconName: 'point', + // route: '/datatable/kichen-sink', + // }, + // ], + // }, ]; diff --git a/Web/src/app/pages/authentication/authentication.routes.ts b/Web/src/app/pages/authentication/authentication.routes.ts index 24cb9e6..1f9fd93 100755 --- 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, + }, ], }, ]; diff --git a/Web/src/app/pages/authentication/callback/callback.component.ts b/Web/src/app/pages/authentication/callback/callback.component.ts index 3fe52e7..b3624bb 100755 --- 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); }); diff --git a/Web/src/app/pages/authentication/side-logout/side-logout.component.html b/Web/src/app/pages/authentication/side-logout/side-logout.component.html new file mode 100644 index 0000000..7ccd6d4 --- /dev/null +++ b/Web/src/app/pages/authentication/side-logout/side-logout.component.html @@ -0,0 +1,38 @@ +
+
+
+
+ + +
+ login +
+
+
+
+
+
+
+

Signed out

+ You have beens successfully logged out. + + +
+
+
+
+
+
\ No newline at end of file diff --git a/Web/src/app/pages/authentication/side-logout/side-logout.component.ts b/Web/src/app/pages/authentication/side-logout/side-logout.component.ts new file mode 100644 index 0000000..a05ef48 --- /dev/null +++ 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(['/']); + } +} \ No newline at end of file diff --git a/Web/src/app/pages/dashboard/dashboard.component.html b/Web/src/app/pages/dashboard/dashboard.component.html new file mode 100755 index 0000000..e69de29 diff --git a/Web/src/app/pages/dashboard/dashboard.component.ts b/Web/src/app/pages/dashboard/dashboard.component.ts new file mode 100755 index 0000000..d06b2d8 --- /dev/null +++ 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() { } +} diff --git a/Web/src/app/pages/dashboard/dashboard.module.ts b/Web/src/app/pages/dashboard/dashboard.module.ts new file mode 100755 index 0000000..9760105 --- /dev/null +++ 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 {} diff --git a/Web/src/app/pages/dashboard/dashboard.routes.ts b/Web/src/app/pages/dashboard/dashboard.routes.ts new file mode 100755 index 0000000..e8f6ae8 --- /dev/null +++ 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' }, + ] + } + } + ] + } +]; diff --git a/Web/src/app/services/authentication.service.ts b/Web/src/app/services/authentication.service.ts index 5fc5b28..a9be0c6 100644 --- 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 { + return this.oauthService.loadUserProfile() + .then(profile => { this.profile = profile["info"]; + return new Promise((resolve) => resolve(profile["info"])); }); }