From c0e3d9ff9019fc3af9791bd20e1430724b2a043a Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 8 Jul 2022 10:32:33 +0200 Subject: Rename not fount page to error page --- .../app/+error-page/error-page-routing.module.ts | 24 +++++++++ .../src/app/+error-page/error-page.component.html | 61 ++++++++++++++++++++++ .../src/app/+error-page/error-page.component.scss | 45 ++++++++++++++++ client/src/app/+error-page/error-page.component.ts | 46 ++++++++++++++++ client/src/app/+error-page/error-page.module.ts | 23 ++++++++ .../page-not-found-routing.module.ts | 24 --------- .../+page-not-found/page-not-found.component.html | 61 ---------------------- .../+page-not-found/page-not-found.component.scss | 57 -------------------- .../+page-not-found/page-not-found.component.ts | 46 ---------------- .../app/+page-not-found/page-not-found.module.ts | 23 -------- client/src/app/app-routing.module.ts | 2 +- client/src/app/core/routing/redirect.service.ts | 2 +- .../shared-main/auth/auth-interceptor.service.ts | 2 +- client/src/sass/class-helpers.scss | 8 +++ client/src/sass/include/_mixins.scss | 7 +++ 15 files changed, 217 insertions(+), 214 deletions(-) create mode 100644 client/src/app/+error-page/error-page-routing.module.ts create mode 100644 client/src/app/+error-page/error-page.component.html create mode 100644 client/src/app/+error-page/error-page.component.scss create mode 100644 client/src/app/+error-page/error-page.component.ts create mode 100644 client/src/app/+error-page/error-page.module.ts delete mode 100644 client/src/app/+page-not-found/page-not-found-routing.module.ts delete mode 100644 client/src/app/+page-not-found/page-not-found.component.html delete mode 100644 client/src/app/+page-not-found/page-not-found.component.scss delete mode 100644 client/src/app/+page-not-found/page-not-found.component.ts delete mode 100644 client/src/app/+page-not-found/page-not-found.module.ts diff --git a/client/src/app/+error-page/error-page-routing.module.ts b/client/src/app/+error-page/error-page-routing.module.ts new file mode 100644 index 000000000..a81f6c756 --- /dev/null +++ b/client/src/app/+error-page/error-page-routing.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core' +import { RouterModule, Routes } from '@angular/router' +import { ErrorPageComponent } from './error-page.component' +import { MenuGuards } from '@app/core' + +const errorPageRoutes: Routes = [ + { + path: '', + component: ErrorPageComponent, + canActivate: [ MenuGuards.close(true) ], + canDeactivate: [ MenuGuards.open(true) ], + data: { + meta: { + title: $localize`Not found` + } + } + } +] + +@NgModule({ + imports: [ RouterModule.forChild(errorPageRoutes) ], + exports: [ RouterModule ] +}) +export class ErrorPageRoutingModule {} diff --git a/client/src/app/+error-page/error-page.component.html b/client/src/app/+error-page/error-page.component.html new file mode 100644 index 000000000..070985d3c --- /dev/null +++ b/client/src/app/+error-page/error-page.component.html @@ -0,0 +1,61 @@ +
+
+ {{ status }}. + That's an error. + +
+ We couldn't find any video tied to the URL {{ pathname }} you were looking for. + We couldn't find any resource tied to the URL {{ pathname }} you were looking for. +
+ +
+ Possible reasons: + +
    +
  • You may have used an outdated or broken link
    • +
  • + The video may have been moved or deleted + The resource may have been moved or deleted +
    • +
  • You may have typed the address or URL incorrectly
    • +
+
+
+ +
+ {{ status }}. + You are not authorized here. + +
+ You might need to login to see the video. + You might need to login to see the resource. +
+ + + Login + + +
+ +
+ {{ status }}. + You are not authorized here. + +
+ You might need to check your account is allowed by the video or instance owner. + You might need to check your account is allowed by the resource or instance owner. +
+
+ +
+ {{ status }}. + I'm a teapot. + +
+ The requested entity body blends sweet bits with a mellow earthiness. +
+
Sepia seems to like it.
+
+ + {{ status }} mascot +
diff --git a/client/src/app/+error-page/error-page.component.scss b/client/src/app/+error-page/error-page.component.scss new file mode 100644 index 000000000..4e12e8c78 --- /dev/null +++ b/client/src/app/+error-page/error-page.component.scss @@ -0,0 +1,45 @@ +@use '_variables' as *; +@use '_mixins' as *; + +.root { + @include margin-left(auto); + @include margin-right(auto); + + height: 100%; + text-align: center; + padding-top: 150px; + display: flex; + justify-content: center; + flex-direction: column-reverse; + + .box { + text-align: start; + font-size: 120%; + padding: 0 15px; + } + + img { + @include margin-left(auto); + + width: 220px; + height: auto; + } + + @media screen and (max-width: $mobile-view) { + img { + @include margin-right(auto); + } + } + + @media screen and (min-width: $mobile-view) { + width: 400px; + } + + @media screen and (max-height: 600px) { + padding-top: 50px; + + img { + width: 160px; + } + } +} diff --git a/client/src/app/+error-page/error-page.component.ts b/client/src/app/+error-page/error-page.component.ts new file mode 100644 index 000000000..4fee01350 --- /dev/null +++ b/client/src/app/+error-page/error-page.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit } from '@angular/core' +import { Title } from '@angular/platform-browser' +import { Router } from '@angular/router' +import { HttpStatusCode } from '@shared/models' + +@Component({ + selector: 'my-error-page', + templateUrl: './error-page.component.html', + styleUrls: [ './error-page.component.scss' ] +}) +export class ErrorPageComponent implements OnInit { + status = HttpStatusCode.NOT_FOUND_404 + type: 'video' | 'other' = 'other' + + public constructor ( + private titleService: Title, + private router: Router + ) { + const state = this.router.getCurrentNavigation()?.extras.state + this.type = state?.type || this.type + this.status = state?.obj.status || this.status + } + + ngOnInit () { + if (this.pathname.includes('teapot')) { + this.status = HttpStatusCode.I_AM_A_TEAPOT_418 + this.titleService.setTitle($localize`I'm a teapot` + ' - PeerTube') + } + } + + get pathname () { + return window.location.pathname + } + + getMascotName () { + switch (this.status) { + case HttpStatusCode.I_AM_A_TEAPOT_418: + return 'happy' + case HttpStatusCode.FORBIDDEN_403: + return 'arguing' + case HttpStatusCode.NOT_FOUND_404: + default: + return 'defeated' + } + } +} diff --git a/client/src/app/+error-page/error-page.module.ts b/client/src/app/+error-page/error-page.module.ts new file mode 100644 index 000000000..807c6f5a9 --- /dev/null +++ b/client/src/app/+error-page/error-page.module.ts @@ -0,0 +1,23 @@ +import { CommonModule } from '@angular/common' +import { NgModule } from '@angular/core' +import { ErrorPageRoutingModule } from './error-page-routing.module' +import { ErrorPageComponent } from './error-page.component' + +@NgModule({ + imports: [ + CommonModule, + + ErrorPageRoutingModule + ], + + declarations: [ + ErrorPageComponent + ], + + exports: [ + ErrorPageComponent + ], + + providers: [] +}) +export class ErrorPageModule { } diff --git a/client/src/app/+page-not-found/page-not-found-routing.module.ts b/client/src/app/+page-not-found/page-not-found-routing.module.ts deleted file mode 100644 index 84f400bb6..000000000 --- a/client/src/app/+page-not-found/page-not-found-routing.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { NgModule } from '@angular/core' -import { RouterModule, Routes } from '@angular/router' -import { PageNotFoundComponent } from './page-not-found.component' -import { MenuGuards } from '@app/core' - -const pageNotFoundRoutes: Routes = [ - { - path: '', - component: PageNotFoundComponent, - canActivate: [ MenuGuards.close(true) ], - canDeactivate: [ MenuGuards.open(true) ], - data: { - meta: { - title: $localize`Not found` - } - } - } -] - -@NgModule({ - imports: [ RouterModule.forChild(pageNotFoundRoutes) ], - exports: [ RouterModule ] -}) -export class PageNotFoundRoutingModule {} diff --git a/client/src/app/+page-not-found/page-not-found.component.html b/client/src/app/+page-not-found/page-not-found.component.html deleted file mode 100644 index b950b8640..000000000 --- a/client/src/app/+page-not-found/page-not-found.component.html +++ /dev/null @@ -1,61 +0,0 @@ -
-
- {{ status }}. - That's an error. - -
- We couldn't find any video tied to the URL {{ pathname }} you were looking for. - We couldn't find any resource tied to the URL {{ pathname }} you were looking for. -
- -
- Possible reasons: - -
    -
  • You may have used an outdated or broken link
    • -
  • - The video may have been moved or deleted - The resource may have been moved or deleted -
    • -
  • You may have typed the address or URL incorrectly
    • -
-
-
- -
- {{ status }}. - You are not authorized here. - -
- You might need to login to see the video. - You might need to login to see the resource. -
- - - Login - - -
- -
- {{ status }}. - You are not authorized here. - -
- You might need to check your account is allowed by the video or instance owner. - You might need to check your account is allowed by the resource or instance owner. -
-
- -
- {{ status }}. - I'm a teapot. - -
- The requested entity body blends sweet bits with a mellow earthiness. -
-
Sepia seems to like it.
-
- - {{ status }} mascot -
diff --git a/client/src/app/+page-not-found/page-not-found.component.scss b/client/src/app/+page-not-found/page-not-found.component.scss deleted file mode 100644 index efb81ff00..000000000 --- a/client/src/app/+page-not-found/page-not-found.component.scss +++ /dev/null @@ -1,57 +0,0 @@ -@use '_variables' as *; -@use '_mixins' as *; - -.root { - @include margin-left(auto); - @include margin-right(auto); - - height: 100%; - text-align: center; - padding-top: 150px; - display: flex; - justify-content: center; - flex-direction: column-reverse; - - .box { - text-align: start; - font-size: 120%; - padding: 0 15px; - } - - img { - @include margin-left(auto); - - width: 220px; - height: auto; - } - - @media screen and (max-width: $mobile-view) { - img { - @include margin-right(auto); - } - } - - @media screen and (min-width: $mobile-view) { - width: 400px; - } - - @media screen and (min-width: #{breakpoint(lg)}) { - width: 600px; - } - - @media screen and (min-width: #{breakpoint(xl)}) { - width: 700px; - } - - @media screen and (min-width: #{breakpoint(xxl)}) { - width: 800px; - } - - @media screen and (max-height: 600px) { - padding-top: 50px; - - img { - width: 160px; - } - } -} diff --git a/client/src/app/+page-not-found/page-not-found.component.ts b/client/src/app/+page-not-found/page-not-found.component.ts deleted file mode 100644 index 10645a634..000000000 --- a/client/src/app/+page-not-found/page-not-found.component.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { Component, OnInit } from '@angular/core' -import { Title } from '@angular/platform-browser' -import { Router } from '@angular/router' -import { HttpStatusCode } from '@shared/models' - -@Component({ - selector: 'my-page-not-found', - templateUrl: './page-not-found.component.html', - styleUrls: [ './page-not-found.component.scss' ] -}) -export class PageNotFoundComponent implements OnInit { - status = HttpStatusCode.NOT_FOUND_404 - type: 'video' | 'other' = 'other' - - public constructor ( - private titleService: Title, - private router: Router - ) { - const state = this.router.getCurrentNavigation()?.extras.state - this.type = state?.type || this.type - this.status = state?.obj.status || this.status - } - - ngOnInit () { - if (this.pathname.includes('teapot')) { - this.status = HttpStatusCode.I_AM_A_TEAPOT_418 - this.titleService.setTitle($localize`I'm a teapot` + ' - PeerTube') - } - } - - get pathname () { - return window.location.pathname - } - - getMascotName () { - switch (this.status) { - case HttpStatusCode.I_AM_A_TEAPOT_418: - return 'happy' - case HttpStatusCode.FORBIDDEN_403: - return 'arguing' - case HttpStatusCode.NOT_FOUND_404: - default: - return 'defeated' - } - } -} diff --git a/client/src/app/+page-not-found/page-not-found.module.ts b/client/src/app/+page-not-found/page-not-found.module.ts deleted file mode 100644 index 2e09ab299..000000000 --- a/client/src/app/+page-not-found/page-not-found.module.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { CommonModule } from '@angular/common' -import { NgModule } from '@angular/core' -import { PageNotFoundRoutingModule } from './page-not-found-routing.module' -import { PageNotFoundComponent } from './page-not-found.component' - -@NgModule({ - imports: [ - CommonModule, - - PageNotFoundRoutingModule - ], - - declarations: [ - PageNotFoundComponent - ], - - exports: [ - PageNotFoundComponent - ], - - providers: [] -}) -export class PageNotFoundModule { } diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts index a9d9c723a..40e4ec35d 100644 --- a/client/src/app/app-routing.module.ts +++ b/client/src/app/app-routing.module.ts @@ -194,7 +194,7 @@ for (const locale of POSSIBLE_LOCALES) { routes.push({ path: '**', - loadChildren: () => import('./+page-not-found/page-not-found.module').then(m => m.PageNotFoundModule) + loadChildren: () => import('./+error-page/error-page.module').then(m => m.ErrorPageModule) }) @NgModule({ diff --git a/client/src/app/core/routing/redirect.service.ts b/client/src/app/core/routing/redirect.service.ts index db4b35018..567fd432b 100644 --- a/client/src/app/core/routing/redirect.service.ts +++ b/client/src/app/core/routing/redirect.service.ts @@ -46,7 +46,7 @@ export class RedirectService { this.currentUrl = this.router.url router.events.subscribe(event => { if (event instanceof NavigationEnd || event instanceof NavigationCancel) { - if (event.url === '/404') return + if ([ '/401', '/404' ].includes(event.url)) return this.previousUrl = this.currentUrl this.currentUrl = event.url diff --git a/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts index 7daf31a98..e4b74f3ad 100644 --- a/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts +++ b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts @@ -62,7 +62,7 @@ export class AuthInterceptor implements HttpInterceptor { } private handleNotAuthenticated (err: HttpErrorResponse): Observable { - this.router.navigate([ '/404' ], { state: { obj: err }, skipLocationChange: true }) + this.router.navigate([ '/401' ], { state: { obj: err }, skipLocationChange: true }) return of(err.message) } } diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss index c67179ccb..72381d1a8 100644 --- a/client/src/sass/class-helpers.scss +++ b/client/src/sass/class-helpers.scss @@ -27,10 +27,18 @@ @include peertube-button; } +.peertube-button-big { + @include peertube-button-big; +} + .peertube-button-link { @include peertube-button-link; } +.peertube-button-big-link { + @include peertube-button-big-link; +} + .orange-button { @include orange-button; } diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 6b93a5728..9d3700e15 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -284,6 +284,13 @@ display: inline-block; } +@mixin peertube-button-big-link { + @include disable-default-a-behaviour; + @include peertube-button-big; + + display: inline-block; +} + @mixin peertube-button-outline { @include disable-default-a-behaviour; @include peertube-button; -- cgit v1.2.3