From 0dce5fa1080dde4dcc92fff7241615522267836d Mon Sep 17 00:00:00 2001 From: rubikscraft Date: Mon, 14 Mar 2022 22:38:04 +0100 Subject: [PATCH] switch to new routing method should help with future implementations --- frontend/src/app/app.component.ts | 34 ++++++++++++- frontend/src/app/app.module.ts | 12 +++-- frontend/src/app/app.routing.module.ts | 14 ++++++ frontend/src/app/router/router.module.ts | 48 ------------------- frontend/src/app/router/routes.ts | 43 ----------------- frontend/src/app/routes/admin/admin.module.ts | 11 +++++ .../app/routes/admin/admin.routing.module.ts | 16 +++++++ .../pagenotfound/pagenotfound.component.html | 0 .../pagenotfound/pagenotfound.component.scss | 0 .../pagenotfound/pagenotfound.component.ts | 0 .../pagenotfound/pagenotfound.module.ts | 5 +- .../pagenotfound/processing.routing.module.ts | 16 +++++++ .../routes/processing/processing.module.ts | 15 ++++++ .../processing/processing.routing.module.ts | 16 +++++++ frontend/src/app/routes/routes.ts | 15 ++++++ .../src/app/routes/upload/upload.module.ts | 11 +++++ .../routes/upload/upload.routing.module.ts | 16 +++++++ .../{ => user}/login/login.component.html | 0 .../{ => user}/login/login.component.ts | 4 +- .../register/register.component.html | 0 .../{ => user}/register/register.component.ts | 2 +- frontend/src/app/routes/user/user.module.ts | 23 +++++++++ .../app/routes/user/user.routing.module.ts | 27 +++++++++++ frontend/src/app/routes/view/view.module.ts | 12 +++++ .../app/routes/view/view.routing.module.ts | 20 ++++++++ frontend/tsconfig.json | 4 +- 26 files changed, 261 insertions(+), 103 deletions(-) create mode 100644 frontend/src/app/app.routing.module.ts delete mode 100644 frontend/src/app/router/router.module.ts delete mode 100644 frontend/src/app/router/routes.ts create mode 100644 frontend/src/app/routes/admin/admin.module.ts create mode 100644 frontend/src/app/routes/admin/admin.routing.module.ts rename frontend/src/app/{components => routes}/pagenotfound/pagenotfound.component.html (100%) rename frontend/src/app/{components => routes}/pagenotfound/pagenotfound.component.scss (100%) rename frontend/src/app/{components => routes}/pagenotfound/pagenotfound.component.ts (100%) rename frontend/src/app/{components => routes}/pagenotfound/pagenotfound.module.ts (56%) create mode 100644 frontend/src/app/routes/pagenotfound/processing.routing.module.ts create mode 100644 frontend/src/app/routes/processing/processing.module.ts create mode 100644 frontend/src/app/routes/processing/processing.routing.module.ts create mode 100644 frontend/src/app/routes/routes.ts create mode 100644 frontend/src/app/routes/upload/upload.module.ts create mode 100644 frontend/src/app/routes/upload/upload.routing.module.ts rename frontend/src/app/routes/{ => user}/login/login.component.html (100%) rename frontend/src/app/routes/{ => user}/login/login.component.ts (93%) rename frontend/src/app/routes/{ => user}/register/register.component.html (100%) rename frontend/src/app/routes/{ => user}/register/register.component.ts (96%) create mode 100644 frontend/src/app/routes/user/user.module.ts create mode 100644 frontend/src/app/routes/user/user.routing.module.ts create mode 100644 frontend/src/app/routes/view/view.module.ts create mode 100644 frontend/src/app/routes/view/view.routing.module.ts diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index ba8e2e0..07f7a72 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,8 +1,38 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { + ActivatedRoute, + NavigationEnd, + NavigationError, + Router +} from '@angular/router'; +import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) -export class AppComponent {} +export class AppComponent implements OnInit { + private readonly logger = console; + + constructor(private router: Router, private activatedRoute: ActivatedRoute) {} + + @AutoUnsubscribe() + ngOnInit() { + return this.router.events.subscribe((event) => { + if (event instanceof NavigationEnd) this.onNavigationEnd(event); + if (event instanceof NavigationError) this.onNavigationError(event); + }); + } + + onNavigationEnd(event: NavigationEnd) { + const data = this.activatedRoute.snapshot.data; + console.log('New:', data); + } + + onNavigationError(event: NavigationError) { + const error: Error = event.error; + if (error.message.startsWith('Cannot match any routes')) + this.router.navigate(['/pagenotfound']); + } +} diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index a6bd167..33a6005 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -2,19 +2,25 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; +import { AppRoutingModule } from './app.routing.module'; import { FooterModule } from './components/footer/footer.module'; import { HeaderModule } from './components/header/header.module'; -import { AppRouterModule } from './router/router.module'; - +import { GuardsModule } from './guards/guards.module'; +import { routes } from './routes/routes'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, - AppRouterModule, BrowserAnimationsModule, + + GuardsModule, + AppRoutingModule, + HeaderModule, FooterModule, + + ...routes, ], providers: [], bootstrap: [AppComponent], diff --git a/frontend/src/app/app.routing.module.ts b/frontend/src/app/app.routing.module.ts new file mode 100644 index 0000000..0c2b22a --- /dev/null +++ b/frontend/src/app/app.routing.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +const routes: Routes = []; + +@NgModule({ + imports: [ + RouterModule.forRoot(routes, { + errorHandler: (error) => console.warn(error.message), + }), + ], + exports: [RouterModule], +}) +export class AppRoutingModule {} diff --git a/frontend/src/app/router/router.module.ts b/frontend/src/app/router/router.module.ts deleted file mode 100644 index ced3f36..0000000 --- a/frontend/src/app/router/router.module.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatButtonModule } from '@angular/material/button'; -import { MatInputModule } from '@angular/material/input'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; -import { RouterModule } from '@angular/router'; -import { NgxDropzoneModule } from 'ngx-dropzone'; -import { ApiModule } from '../api/api.module'; -import { CopyFieldModule } from '../components/copyfield/copyfield.module'; -import { PageNotFoundModule } from '../components/pagenotfound/pagenotfound.module'; -import { GuardsModule } from '../guards/guards.module'; -import { AdminComponent } from '../routes/admin/admin/admin.component'; -import { LoginComponent } from '../routes/login/login.component'; -import { ProcessingComponent } from '../routes/processing/processing.component'; -import { RegisterComponent } from '../routes/register/register.component'; -import { UploadComponent } from '../routes/upload/upload.component'; -import { ViewComponent } from '../routes/view/view.component'; -import { UtilModule } from '../util/util.module'; -import { angularRoutes } from './routes'; -@NgModule({ - imports: [ - CommonModule, - GuardsModule, - NgxDropzoneModule, - UtilModule, - MatProgressSpinnerModule, - MatButtonModule, - MatInputModule, - FormsModule, - ReactiveFormsModule, - PageNotFoundModule, - CopyFieldModule, - ApiModule, - FormsModule, - RouterModule.forRoot(angularRoutes), - ], - declarations: [ - UploadComponent, - ProcessingComponent, - ViewComponent, - LoginComponent, - RegisterComponent, - AdminComponent, - ], - exports: [RouterModule], -}) -export class AppRouterModule {} diff --git a/frontend/src/app/router/routes.ts b/frontend/src/app/router/routes.ts deleted file mode 100644 index 9961d5c..0000000 --- a/frontend/src/app/router/routes.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Routes } from '@angular/router'; -import { Permission } from 'picsur-shared/dist/dto/permissions'; -import { PageNotFoundComponent } from '../components/pagenotfound/pagenotfound.component'; -import { PermissionGuard } from '../guards/permission.guard'; -import { AdminComponent } from '../routes/admin/admin/admin.component'; -import { LoginComponent } from '../routes/login/login.component'; -import { ProcessingComponent } from '../routes/processing/processing.component'; -import { RegisterComponent } from '../routes/register/register.component'; -import { UploadComponent } from '../routes/upload/upload.component'; -import { ViewComponent } from '../routes/view/view.component'; - - -// TODO: split up router -export const angularRoutes: Routes = [ - { path: '', component: UploadComponent }, - { - path: 'processing', - component: ProcessingComponent, - }, - { - path: 'view/:hash', - component: ViewComponent, - canActivate: [PermissionGuard], - data: { permissions: [Permission.ImageView] }, - }, - { - path: 'login', - component: LoginComponent, - canActivate: [PermissionGuard], - data: { permissions: [Permission.UserLogin] }, - }, - { - path: 'register', - component: RegisterComponent, - canActivate: [PermissionGuard], - data: { permissions: [Permission.UserRegister] }, - }, - { - path: 'admin', - component: AdminComponent, - }, - { path: '**', component: PageNotFoundComponent }, -]; diff --git a/frontend/src/app/routes/admin/admin.module.ts b/frontend/src/app/routes/admin/admin.module.ts new file mode 100644 index 0000000..2644649 --- /dev/null +++ b/frontend/src/app/routes/admin/admin.module.ts @@ -0,0 +1,11 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { AdminRoutingModule } from './admin.routing.module'; +import { AdminComponent } from './admin/admin.component'; + +@NgModule({ + declarations: [AdminComponent], + imports: [CommonModule, AdminRoutingModule, MatProgressSpinnerModule], +}) +export class AdminRouteModule {} diff --git a/frontend/src/app/routes/admin/admin.routing.module.ts b/frontend/src/app/routes/admin/admin.routing.module.ts new file mode 100644 index 0000000..859de1f --- /dev/null +++ b/frontend/src/app/routes/admin/admin.routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { AdminComponent } from './admin/admin.component'; + +const routes: Routes = [ + { + path: 'admin', + component: AdminComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class AdminRoutingModule {} diff --git a/frontend/src/app/components/pagenotfound/pagenotfound.component.html b/frontend/src/app/routes/pagenotfound/pagenotfound.component.html similarity index 100% rename from frontend/src/app/components/pagenotfound/pagenotfound.component.html rename to frontend/src/app/routes/pagenotfound/pagenotfound.component.html diff --git a/frontend/src/app/components/pagenotfound/pagenotfound.component.scss b/frontend/src/app/routes/pagenotfound/pagenotfound.component.scss similarity index 100% rename from frontend/src/app/components/pagenotfound/pagenotfound.component.scss rename to frontend/src/app/routes/pagenotfound/pagenotfound.component.scss diff --git a/frontend/src/app/components/pagenotfound/pagenotfound.component.ts b/frontend/src/app/routes/pagenotfound/pagenotfound.component.ts similarity index 100% rename from frontend/src/app/components/pagenotfound/pagenotfound.component.ts rename to frontend/src/app/routes/pagenotfound/pagenotfound.component.ts diff --git a/frontend/src/app/components/pagenotfound/pagenotfound.module.ts b/frontend/src/app/routes/pagenotfound/pagenotfound.module.ts similarity index 56% rename from frontend/src/app/components/pagenotfound/pagenotfound.module.ts rename to frontend/src/app/routes/pagenotfound/pagenotfound.module.ts index 43ed1f1..3cb1f80 100644 --- a/frontend/src/app/components/pagenotfound/pagenotfound.module.ts +++ b/frontend/src/app/routes/pagenotfound/pagenotfound.module.ts @@ -1,9 +1,10 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { PageNotFoundComponent } from './pagenotfound.component'; +import { PageNotFoundRoutingModule } from './processing.routing.module'; @NgModule({ declarations: [PageNotFoundComponent], - imports: [CommonModule], + imports: [CommonModule, PageNotFoundRoutingModule], }) -export class PageNotFoundModule {} +export class PageNotFoundRouteModule {} diff --git a/frontend/src/app/routes/pagenotfound/processing.routing.module.ts b/frontend/src/app/routes/pagenotfound/processing.routing.module.ts new file mode 100644 index 0000000..e58d4e3 --- /dev/null +++ b/frontend/src/app/routes/pagenotfound/processing.routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { PageNotFoundComponent } from './pagenotfound.component'; + +const routes: Routes = [ + { + path: 'pagenotfound', + component: PageNotFoundComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class PageNotFoundRoutingModule {} diff --git a/frontend/src/app/routes/processing/processing.module.ts b/frontend/src/app/routes/processing/processing.module.ts new file mode 100644 index 0000000..bbfc2d6 --- /dev/null +++ b/frontend/src/app/routes/processing/processing.module.ts @@ -0,0 +1,15 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { ProcessingComponent } from './processing.component'; +import { ProcessingRoutingModule } from './processing.routing.module'; + +@NgModule({ + declarations: [ProcessingComponent], + imports: [ + CommonModule, + ProcessingRoutingModule, + MatProgressSpinnerModule, + ], +}) +export class ProcessingRouteModule {} diff --git a/frontend/src/app/routes/processing/processing.routing.module.ts b/frontend/src/app/routes/processing/processing.routing.module.ts new file mode 100644 index 0000000..cc8acd4 --- /dev/null +++ b/frontend/src/app/routes/processing/processing.routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { ProcessingComponent } from './processing.component'; + +const routes: Routes = [ + { + path: 'processing', + component: ProcessingComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class ProcessingRoutingModule {} diff --git a/frontend/src/app/routes/routes.ts b/frontend/src/app/routes/routes.ts new file mode 100644 index 0000000..740ba9e --- /dev/null +++ b/frontend/src/app/routes/routes.ts @@ -0,0 +1,15 @@ +import { AdminRouteModule } from './admin/admin.module'; +import { PageNotFoundRouteModule } from './pagenotfound/pagenotfound.module'; +import { ProcessingRouteModule } from './processing/processing.module'; +import { UploadRouteModule } from './upload/upload.module'; +import { UserRouteModule } from './user/user.module'; +import { ViewRouteModule } from './view/view.module'; + +export const routes = [ + PageNotFoundRouteModule, + UploadRouteModule, + ProcessingRouteModule, + ViewRouteModule, + UserRouteModule, + AdminRouteModule, +]; diff --git a/frontend/src/app/routes/upload/upload.module.ts b/frontend/src/app/routes/upload/upload.module.ts new file mode 100644 index 0000000..ecb25f4 --- /dev/null +++ b/frontend/src/app/routes/upload/upload.module.ts @@ -0,0 +1,11 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { NgxDropzoneModule } from 'ngx-dropzone'; +import { UploadComponent } from './upload.component'; +import { UploadRoutingModule } from './upload.routing.module'; + +@NgModule({ + declarations: [UploadComponent], + imports: [CommonModule, UploadRoutingModule, NgxDropzoneModule], +}) +export class UploadRouteModule {} diff --git a/frontend/src/app/routes/upload/upload.routing.module.ts b/frontend/src/app/routes/upload/upload.routing.module.ts new file mode 100644 index 0000000..def6cda --- /dev/null +++ b/frontend/src/app/routes/upload/upload.routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { UploadComponent } from './upload.component'; + +const routes: Routes = [ + { + path: '', + component: UploadComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class UploadRoutingModule {} diff --git a/frontend/src/app/routes/login/login.component.html b/frontend/src/app/routes/user/login/login.component.html similarity index 100% rename from frontend/src/app/routes/login/login.component.html rename to frontend/src/app/routes/user/login/login.component.html diff --git a/frontend/src/app/routes/login/login.component.ts b/frontend/src/app/routes/user/login/login.component.ts similarity index 93% rename from frontend/src/app/routes/login/login.component.ts rename to frontend/src/app/routes/user/login/login.component.ts index 033ef36..993e407 100644 --- a/frontend/src/app/routes/login/login.component.ts +++ b/frontend/src/app/routes/user/login/login.component.ts @@ -7,8 +7,8 @@ import { PermissionService } from 'src/app/api/permission.service'; import { UserService } from 'src/app/api/user.service'; import { SnackBarType } from 'src/app/models/snack-bar-type'; import { UtilService } from 'src/app/util/util.service'; -import { LoginControl } from '../../models/forms/login.model'; -import { UserPassModel } from '../../models/forms/userpass'; +import { LoginControl } from '../../../models/forms/login.model'; +import { UserPassModel } from '../../../models/forms/userpass'; @Component({ templateUrl: './login.component.html', diff --git a/frontend/src/app/routes/register/register.component.html b/frontend/src/app/routes/user/register/register.component.html similarity index 100% rename from frontend/src/app/routes/register/register.component.html rename to frontend/src/app/routes/user/register/register.component.html diff --git a/frontend/src/app/routes/register/register.component.ts b/frontend/src/app/routes/user/register/register.component.ts similarity index 96% rename from frontend/src/app/routes/register/register.component.ts rename to frontend/src/app/routes/user/register/register.component.ts index 584b760..9ed555d 100644 --- a/frontend/src/app/routes/register/register.component.ts +++ b/frontend/src/app/routes/user/register/register.component.ts @@ -8,7 +8,7 @@ import { UserService } from 'src/app/api/user.service'; import { UserPassModel } from 'src/app/models/forms/userpass'; import { SnackBarType } from 'src/app/models/snack-bar-type'; import { UtilService } from 'src/app/util/util.service'; -import { RegisterControl } from '../../models/forms/register.model'; +import { RegisterControl } from '../../../models/forms/register.model'; @Component({ templateUrl: './register.component.html', diff --git a/frontend/src/app/routes/user/user.module.ts b/frontend/src/app/routes/user/user.module.ts new file mode 100644 index 0000000..45211a1 --- /dev/null +++ b/frontend/src/app/routes/user/user.module.ts @@ -0,0 +1,23 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { LoginComponent } from './login/login.component'; +import { RegisterComponent } from './register/register.component'; +import { UserRoutingModule } from './user.routing.module'; + +@NgModule({ + declarations: [LoginComponent, RegisterComponent], + imports: [ + CommonModule, + UserRoutingModule, + FormsModule, + MatInputModule, + MatFormFieldModule, + MatButtonModule, + ReactiveFormsModule, + ], +}) +export class UserRouteModule {} diff --git a/frontend/src/app/routes/user/user.routing.module.ts b/frontend/src/app/routes/user/user.routing.module.ts new file mode 100644 index 0000000..c341806 --- /dev/null +++ b/frontend/src/app/routes/user/user.routing.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { Permission } from 'picsur-shared/dist/dto/permissions'; +import { PermissionGuard } from 'src/app/guards/permission.guard'; +import { LoginComponent } from './login/login.component'; +import { RegisterComponent } from './register/register.component'; + +const routes: Routes = [ + { + path: 'login', + component: LoginComponent, + canActivate: [PermissionGuard], + data: { permissions: [Permission.UserLogin] }, + }, + { + path: 'register', + component: RegisterComponent, + canActivate: [PermissionGuard], + data: { permissions: [Permission.UserRegister] }, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class UserRoutingModule {} diff --git a/frontend/src/app/routes/view/view.module.ts b/frontend/src/app/routes/view/view.module.ts new file mode 100644 index 0000000..6e95bfd --- /dev/null +++ b/frontend/src/app/routes/view/view.module.ts @@ -0,0 +1,12 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { CopyFieldModule } from 'src/app/components/copyfield/copyfield.module'; +import { ViewComponent } from './view.component'; +import { ViewRoutingModule } from './view.routing.module'; + +@NgModule({ + declarations: [ViewComponent], + imports: [CommonModule, CopyFieldModule, ViewRoutingModule, MatButtonModule], +}) +export class ViewRouteModule {} diff --git a/frontend/src/app/routes/view/view.routing.module.ts b/frontend/src/app/routes/view/view.routing.module.ts new file mode 100644 index 0000000..ad1e3eb --- /dev/null +++ b/frontend/src/app/routes/view/view.routing.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { Permission } from 'picsur-shared/dist/dto/permissions'; +import { PermissionGuard } from 'src/app/guards/permission.guard'; +import { ViewComponent } from './view.component'; + +const routes: Routes = [ + { + path: 'view/:hash', + component: ViewComponent, + canActivate: [PermissionGuard], + data: { permissions: [Permission.ImageView] }, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class ViewRoutingModule {} diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 07b6ff2..cb228c3 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -16,10 +16,10 @@ "sourceMap": true, "declaration": false, "downlevelIteration": true, - "importHelpers": true, + "importHelpers": true }, "files": ["src/main.ts", "src/polyfills.ts"], - "include": ["src/**/*.d.ts"], + "include": ["src/**/*.d.ts", "src/**/*.ts"], "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true,