implement part 3

docker/startup.sh

@@ -1,8 +1,8 @@
 #!/bin/bash
 
-echo "> Configure cache"
-    mkdir -p /tmp/app/vendor
-    ln -s /tmp/app/vendor /web/backend/vendor
+#echo "> Configure cache"
+#    mkdir -p /tmp/app/vendor
+#    ln -s /tmp/app/vendor /web/backend/vendor
 
 echo "> Configure user"
     useradd developer
@@ -14,10 +14,10 @@ echo "> Configure logs"
     chown postgres:adm /var/log/postgresql -R
     chown root:postgres /var/log/postgresql
 
-echo "> Configure volumes"
-    [ -e /web/frontend/node_modules ] || ln -s /web/node /web/frontend/node_modules
-    [ -e /web/backend/var ] || ln -s /web/var /web/backend/var
-    [ -e /web/backend/vendor ] || ln -s /web/vendor /web/backend/vendor
+#echo "> Configure volumes"
+#    [ -e /web/frontend/node_modules ] || ln -s /web/node /web/frontend/node_modules
+#    [ -e /web/backend/var ] || ln -s /web/var /web/backend/var
+#    [ -e /web/backend/vendor ] || ln -s /web/vendor /web/backend/vendor
 
 echo "> Starting php8.0-fpm server"
     [ -e /etc/php/8.0/fpm/conf.d/20-xdebug.ini ] && rm /etc/php/8.0/fpm/conf.d/20-xdebug.ini || echo OK

src/frontend/src/app/app.component.html

@@ -1,4 +1,5 @@
-
+<app-loader *ngIf="!loaded"></app-loader>
+<ng-container *ngIf="loaded">
     <ng-template #toolbar>
         <mat-toolbar class="toolbar-background">
             <button mat-icon-button (click)="toggleSidebar()">
@@ -73,3 +74,4 @@
         <router-outlet></router-outlet>
         </div>
     </mat-drawer-container>
+</ng-container>

src/frontend/src/app/app.component.ts

@@ -63,12 +63,20 @@ export class AppComponent implements AfterContentInit {
     }
 
     configureUserEvents(): void {
+        this.authService.checkUser().then(user => {
+            this.setUser(user);
+            this.loaded = true;
+        }).catch(() => {
+            this.setUser(null);
+            this.loaded = true;
+        });
         this.setUser(this.authService.getUser());
-        this.authService.userChange.subscribe(user => this.setUser(user));
+        this.authService.userChange.subscribe(user => {
+            this.setUser(user);
+        });
     }
 
     setUser(user: UserModel): void {
-        console.log({user, cuser: this.user});
         if (!user && !this.user) {
             return;
         }

src/frontend/src/app/app.module.ts

@@ -13,11 +13,11 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { TokenInterceptor } from './modules/shared/interceptors/token/token.interceptor';
 import { AuthTokenService } from './modules/shared/services/auth/auth-token.service';
-import { AuthService } from './modules/auth/services/auth/auth.service';
 import { CommonModule } from '@angular/common';
 import { ErrorHandlerInterceptor } from './modules/shared/interceptors/error-handler/error-handler.interceptor';
 import { NotificationService } from './modules/shared/notification/notification.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { SharedModule } from './modules/shared/shared.module';
 
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     return new TranslateHttpLoader(http, '/assets/lang/', '.json');
@@ -33,6 +33,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
         AppRoutingModule,
         BrowserAnimationsModule,
         MaterialModule,
+        SharedModule,
         FormsModule,
         ReactiveFormsModule,
         HttpClientModule,
@@ -50,7 +51,6 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
         ThemeService,
         BrowserStorageService,
         AuthTokenService,
-        AuthService,
         NotificationService,
         MatSnackBar,
         { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },

src/frontend/src/app/modules/auth/auth.module.ts

@@ -33,8 +33,5 @@ import { HttpClient } from '@angular/common/http';
             }
         }),
     ],
-    providers: [
-        AuthService,
-    ],
 })
 export class AuthModule { }

src/frontend/src/app/modules/auth/services/auth/auth.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { EventEmitter, Injectable, ModuleWithProviders } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { LoginModel } from '../../models/login.model';
 import { RegisterModel } from '../../models/register.model';
@@ -8,19 +8,20 @@ import { UserModel } from '../../models/user.model';
 import { AuthTokenService } from '../../../shared/services/auth/auth-token.service';
 import { Router } from '@angular/router';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root',
+})
 export class AuthService {
 
     private static updateAgent: any;
     private user: UserModel | null = null;
-    public userChange = new Subject<UserModel | null>();
+    public userChange = new EventEmitter<UserModel | null>();
 
     constructor(
         private http: HttpClient,
         private authTokenService: AuthTokenService,
         private router: Router,
     ) {
-        this.checkUser();
         this.userChange.subscribe(user => {
             this.user = user;
         });
@@ -31,10 +32,9 @@ export class AuthService {
     }
 
     checkUser(): Promise<UserModel> {
-        return new Promise<UserModel>((resolve) => {
+        return new Promise<UserModel>((resolve, reject) => {
             this.http.post<UserModel>('/api/user-check', {}).subscribe(user => {
-                console.log({user});
-                this.userChange.next(user);
+                this.userChange.emit(user);
                 if (AuthService.updateAgent) {
                     clearTimeout(AuthService.updateAgent);
                 }
@@ -42,8 +42,11 @@ export class AuthService {
                     this.checkUser();
                 }, 2000) as any;
                 resolve(user);
-            }, () => {
+            }, err => {
+                if (err.status === 401) {
                     this.logout();
+                }
+                reject(err);
             });
         });
     }
@@ -75,7 +78,7 @@ export class AuthService {
             clearTimeout(AuthService.updateAgent);
         }
         this.authTokenService.removeToken();
-        this.userChange.next(null);
+        this.userChange.emit(null);
         this.router.navigate(['/auth']);
     }
 }

src/frontend/src/app/modules/profile/components/profile-edit/profile-edit.component.html

@@ -39,7 +39,7 @@
         </div>
     </div>
 </div>
-<div class="flex-grow-1 main-background" *ngIf="user !== null">
+<div class="flex-grow-1 main-background" *ngIf="user !== null && loaded === true">
     <div class="h-100">
         <router-outlet (activate)="activated($event)" (deactivate)="deactivated($event)"></router-outlet>
     </div>

src/frontend/src/app/modules/profile/components/profile-edit/profile-edit.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { ActivatedRoute, ActivatedRouteSnapshot, ActivationStart, Data, Router, RoutesRecognized } from '@angular/router';
 import { Subscription } from 'rxjs';
@@ -19,7 +19,7 @@ interface ProfileTab {
     templateUrl: './profile-edit.component.html',
     styleUrls: ['./profile-edit.component.scss']
 })
-export class ProfileEditComponent implements OnInit {
+export class ProfileEditComponent implements AfterViewInit {
 
     scrollSubscriptions: Subscription[] = [];
     scrolled = 0;
@@ -29,7 +29,7 @@ export class ProfileEditComponent implements OnInit {
     selectedIndex = 0;
     defaultProfileTab = ProfileTabEnum.Basics;
     loaded = false;
-    @ViewChild('headerContent') headerContent: ElementRef;
+    @ViewChild('headerContent', {static: false}) headerContent: ElementRef;
     tabs: ProfileTab[] = [
         {
             tab: ProfileTabEnum.Basics,
@@ -76,7 +76,8 @@ export class ProfileEditComponent implements OnInit {
         });
     }
 
-    ngOnInit(): void {
+    ngAfterViewInit(): void {
+        this.loaded = true;
     }
 
     activated(component): void {
@@ -104,7 +105,6 @@ export class ProfileEditComponent implements OnInit {
         if (data?.tab) {
             const tab = data.tab as ProfileTabEnum;
             const tabIndex = this.tabs.findIndex(i => i.tab === tab);
-            console.log({tab, tabIndex});
             if (tabIndex !== -1) {
                 this.selectedIndex = tabIndex;
                 this.currentTabName = this.tabs[tabIndex].label;
@@ -118,7 +118,6 @@ export class ProfileEditComponent implements OnInit {
     }
 
     selectedIndexChange(index: number): void {
-        console.log({index});
         this.selectedIndex = index;
         this.currentTabName = undefined;
         const tab = this.tabs[index];

src/frontend/src/app/modules/profile/profile.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { ProfileRoutingModule } from './profile-routing.module';
 import { ProfileEditComponent } from './components/profile-edit/profile-edit.component';
 import { MaterialModule } from '../material/material.module';
-import { AuthService } from '../auth/services/auth/auth.service';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { HttpLoaderFactory } from 'src/app/app.module';
 import { HttpClient } from '@angular/common/http';
@@ -42,7 +41,6 @@ import { CountryService } from '../shared/services/country/country.service';
         }),
     ],
     providers: [
-        AuthService,
         CountryService,
     ],
 })

src/frontend/src/app/modules/shared/components/loader/loader.component.html

@@ -0,0 +1,5 @@
+<div class="loader-container">
+    <div class="loader-box">
+        <i class="fa fa-2x fa-spin fa-spinner"></i>
+    </div>
+</div>

src/frontend/src/app/modules/shared/components/loader/loader.component.scss

@@ -0,0 +1,22 @@
+.loader-container{
+    position: absolute;
+    z-index: 100;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--main-background);
+    .loader-box{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 3px;
+        width: 100px;
+        height: 60px;
+        background: var(--toolbar-background);
+        color: var(--toolbar-color);
+    }
+}

src/frontend/src/app/modules/shared/components/loader/loader.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './loader.component.html',
+  styleUrls: ['./loader.component.scss']
+})
+export class LoaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/frontend/src/app/modules/shared/interceptors/error-handler/error-handler.interceptor.ts

@@ -45,7 +45,6 @@ export class ErrorHandlerInterceptor implements HttpInterceptor {
     }
 
     displayNotificationIfValidationError(response): void {
-        console.log({response});
         if (response?.error?.data) {
             this.notificationService.error(response.error.data);
         }

src/frontend/src/app/modules/shared/services/browser-storage/browser-storage.service.ts

@@ -8,7 +8,7 @@ export class BrowserStorageService {
 
   constructor() {
     this.storage = localStorage;
-    this.namespace = 'default';
+    this.namespace = 'app';
   }
 
   setNamespace(namespace: string): void {

src/frontend/src/app/modules/shared/shared.module.ts

@@ -1,14 +1,23 @@
-import { NgModule } from '@angular/core';
+import { NgModule, Type } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { HttpLoaderFactory } from 'src/app/app.module';
 import { HttpClient } from '@angular/common/http';
 import { MaterialModule } from '../material/material.module';
+import { LoaderComponent } from './components/loader/loader.component';
+
+const componentList: (any[] | Type<any>)[] = [
+    LoaderComponent,
+];
 
 @NgModule({
   declarations: [
-    NotFoundComponent
+    NotFoundComponent,
+    ...componentList,
+  ],
+  exports: [
+      ...componentList,
   ],
   imports: [
     CommonModule,