feat: custom msg upon 401 response

closes #4768

3 files changed, 20 insertions, 3 deletions

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
index 70ede26e8..c6ca8670e 100644
--- a/client/src/app/+page-not-found/page-not-found.component.html
+++ b/client/src/app/+page-not-found/page-not-found.component.html
@@ -1,5 +1,5 @@
 <div class="root">
-  <div *ngIf="status !== 403 && status !== 418" class="box">
+  <div *ngIf="status !== 401 && status !== 403 && status !== 418" class="box">
     <strong>{{ status }}.</strong>
     <span class="ms-1 muted" i18n>That's an error.</span>
 
@@ -22,6 +22,21 @@
     </div>
   </div>
 
+  <div *ngIf="status === 401" class="box">
+    <strong>{{ status }}.</strong>
+    <span class="ms-1 muted" i18n>You are not authorized here.</span>
+
+    <div class="text mt-4">
+      <ng-container *ngIf="type === 'video'" i18n>You might need to login to see the video.</ng-container>
+      <ng-container *ngIf="type !== 'video'" i18n>You might need to login to see the resource.</ng-container>
+    </div>
+
+    <a class="peertube-button-link orange-button mt-5" i18n routerLink="/login">
+      Login
+    </a>
+
+  </div>
+
   <div *ngIf="status === 403" class="box">
     <strong>{{ status }}.</strong>
     <span class="ms-1 muted" i18n>You are not authorized here.</span>
diff --git a/client/src/app/core/routing/redirect.service.ts b/client/src/app/core/routing/redirect.service.ts
index 2b8cbaa59..db4b35018 100644
--- a/client/src/app/core/routing/redirect.service.ts
+++ b/client/src/app/core/routing/redirect.service.ts
@@ -46,6 +46,8 @@ export class RedirectService {
     this.currentUrl = this.router.url
     router.events.subscribe(event => {
       if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
+        if (event.url === '/404') 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 51248c7b2..7daf31a98 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
@@ -61,8 +61,8 @@ export class AuthInterceptor implements HttpInterceptor {
     return req.clone({ headers: req.headers.set('Authorization', authHeaderValue) })
   }
 
-  private handleNotAuthenticated (err: HttpErrorResponse, path = '/login'): Observable<any> {
-    this.router.navigateByUrl(path)
+  private handleNotAuthenticated (err: HttpErrorResponse): Observable<any> {
+    this.router.navigate([ '/404' ], { state: { obj: err }, skipLocationChange: true })
     return of(err.message)
   }
 }