From c7707fc94a8ca0631cd47baa2d13ce252e504f93 Mon Sep 17 00:00:00 2001 From: Sieciech Date: Tue, 31 Aug 2021 17:16:16 +0200 Subject: [PATCH] implement part 3 --- docker/startup.sh | 14 +- src/frontend/src/app/app.component.html | 136 +++++++++--------- src/frontend/src/app/app.component.ts | 12 +- src/frontend/src/app/app.module.ts | 4 +- .../src/app/modules/auth/auth.module.ts | 3 - .../auth/services/auth/auth.service.ts | 23 +-- .../profile-edit/profile-edit.component.html | 2 +- .../profile-edit/profile-edit.component.ts | 11 +- .../src/app/modules/profile/profile.module.ts | 2 - .../components/loader/loader.component.html | 5 + .../components/loader/loader.component.scss | 22 +++ .../components/loader/loader.component.ts | 15 ++ .../error-handler.interceptor.ts | 1 - .../browser-storage.service.ts | 2 +- .../src/app/modules/shared/shared.module.ts | 13 +- 15 files changed, 161 insertions(+), 104 deletions(-) create mode 100644 src/frontend/src/app/modules/shared/components/loader/loader.component.html create mode 100644 src/frontend/src/app/modules/shared/components/loader/loader.component.scss create mode 100644 src/frontend/src/app/modules/shared/components/loader/loader.component.ts diff --git a/docker/startup.sh b/docker/startup.sh index 1deb391..a89402c 100644 --- a/docker/startup.sh +++ b/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 diff --git a/src/frontend/src/app/app.component.html b/src/frontend/src/app/app.component.html index 2bb3836..c702d4b 100644 --- a/src/frontend/src/app/app.component.html +++ b/src/frontend/src/app/app.component.html @@ -1,75 +1,77 @@ - - - - - {{ 'APP.NAME' | translate }} - -
-
- -
-
- - - - - - - -
+ + + + + + {{ 'APP.NAME' | translate }} +
- - - -
- - {{ menu.label | translate }} -
+
+ +
+
+ + + + + + + +
+
+ + + +
+ + {{ menu.label | translate }} +
+ - -
-
-
-
-
{{ user.name }} {{ user.surname }}
-
-
- +
+
+
+
+
{{ user.name }} {{ user.surname }}
+
+
+ +
+ + + + +
- - - - -
+ + + + + + +
+
- - - - - - -
- -
- \ No newline at end of file + + \ No newline at end of file diff --git a/src/frontend/src/app/app.component.ts b/src/frontend/src/app/app.component.ts index 05945dd..c484ee2 100644 --- a/src/frontend/src/app/app.component.ts +++ b/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; } diff --git a/src/frontend/src/app/app.module.ts b/src/frontend/src/app/app.module.ts index c04250b..465b43a 100644 --- a/src/frontend/src/app/app.module.ts +++ b/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 }, diff --git a/src/frontend/src/app/modules/auth/auth.module.ts b/src/frontend/src/app/modules/auth/auth.module.ts index b924ca8..fbcfb40 100644 --- a/src/frontend/src/app/modules/auth/auth.module.ts +++ b/src/frontend/src/app/modules/auth/auth.module.ts @@ -33,8 +33,5 @@ import { HttpClient } from '@angular/common/http'; } }), ], - providers: [ - AuthService, - ], }) export class AuthModule { } diff --git a/src/frontend/src/app/modules/auth/services/auth/auth.service.ts b/src/frontend/src/app/modules/auth/services/auth/auth.service.ts index a1432bc..a7e4371 100644 --- a/src/frontend/src/app/modules/auth/services/auth/auth.service.ts +++ b/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(); + public userChange = new EventEmitter(); 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 { - return new Promise((resolve) => { + return new Promise((resolve, reject) => { this.http.post('/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); - }, () => { - this.logout(); + }, 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']); } } diff --git a/src/frontend/src/app/modules/profile/components/profile-edit/profile-edit.component.html b/src/frontend/src/app/modules/profile/components/profile-edit/profile-edit.component.html index e4388cb..d6c6548 100644 --- a/src/frontend/src/app/modules/profile/components/profile-edit/profile-edit.component.html +++ b/src/frontend/src/app/modules/profile/components/profile-edit/profile-edit.component.html @@ -39,7 +39,7 @@
-
+
diff --git a/src/frontend/src/app/modules/profile/components/profile-edit/profile-edit.component.ts b/src/frontend/src/app/modules/profile/components/profile-edit/profile-edit.component.ts index ee4b709..05c7ce7 100644 --- a/src/frontend/src/app/modules/profile/components/profile-edit/profile-edit.component.ts +++ b/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]; diff --git a/src/frontend/src/app/modules/profile/profile.module.ts b/src/frontend/src/app/modules/profile/profile.module.ts index 9de0f7d..1209cd4 100644 --- a/src/frontend/src/app/modules/profile/profile.module.ts +++ b/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, ], }) diff --git a/src/frontend/src/app/modules/shared/components/loader/loader.component.html b/src/frontend/src/app/modules/shared/components/loader/loader.component.html new file mode 100644 index 0000000..f282d3b --- /dev/null +++ b/src/frontend/src/app/modules/shared/components/loader/loader.component.html @@ -0,0 +1,5 @@ +
+
+ +
+
\ No newline at end of file diff --git a/src/frontend/src/app/modules/shared/components/loader/loader.component.scss b/src/frontend/src/app/modules/shared/components/loader/loader.component.scss new file mode 100644 index 0000000..c4b879b --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/frontend/src/app/modules/shared/components/loader/loader.component.ts b/src/frontend/src/app/modules/shared/components/loader/loader.component.ts new file mode 100644 index 0000000..aeec760 --- /dev/null +++ b/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 { + } + +} diff --git a/src/frontend/src/app/modules/shared/interceptors/error-handler/error-handler.interceptor.ts b/src/frontend/src/app/modules/shared/interceptors/error-handler/error-handler.interceptor.ts index dd81c50..692bfaa 100644 --- a/src/frontend/src/app/modules/shared/interceptors/error-handler/error-handler.interceptor.ts +++ b/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); } diff --git a/src/frontend/src/app/modules/shared/services/browser-storage/browser-storage.service.ts b/src/frontend/src/app/modules/shared/services/browser-storage/browser-storage.service.ts index fad291e..ff57624 100644 --- a/src/frontend/src/app/modules/shared/services/browser-storage/browser-storage.service.ts +++ b/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 { diff --git a/src/frontend/src/app/modules/shared/shared.module.ts b/src/frontend/src/app/modules/shared/shared.module.ts index 97bf26b..15c2ac0 100644 --- a/src/frontend/src/app/modules/shared/shared.module.ts +++ b/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)[] = [ + LoaderComponent, +]; @NgModule({ declarations: [ - NotFoundComponent + NotFoundComponent, + ...componentList, + ], + exports: [ + ...componentList, ], imports: [ CommonModule,