From c0ddbe8551918b71c0f8d530bc14837d771efb86 Mon Sep 17 00:00:00 2001
From: Roberto Fontanarosa <robertofontanarosa@gmail.com>
Date: Fri, 12 Jul 2024 14:57:15 +0200
Subject: [PATCH] Added error page

---
 web/src/app/pages/error/error.component.html | 20 +++++++---
 web/src/app/pages/error/error.component.scss | 39 +++++++-------------
 web/src/app/pages/error/error.component.ts   | 15 ++++++--
 web/src/app/pages/error/error.module.ts      |  4 +-
 4 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/web/src/app/pages/error/error.component.html b/web/src/app/pages/error/error.component.html
index e1b92b2f6..583453f97 100644
--- a/web/src/app/pages/error/error.component.html
+++ b/web/src/app/pages/error/error.component.html
@@ -14,16 +14,24 @@
   limitations under the License.
 -->
 
-<div class="page">
+<div class="page error-page">
   <ground-header></ground-header>
 
-  <div class="container">
-    <div class="card">
-      <div class="content">
+  <div class="page-content">
+      <img src="/assets/img/access-denied.svg">
+
+      <ng-container *ngIf="errorType == ErrorType.GENERIC">
         <h1>Oops, something went wrong</h1>
 
         <h2>{{error}}</h2>
-      </div>
+      </ng-container>
+
+      <ng-container *ngIf="errorType == ErrorType.ACCESS_DENIED">
+        <h1>Access denied</h1>
+
+        <a mat-flat-button color="primary" href="https://forms.gle/RgnFcCz9ma1gLr6v7" target="_blank">
+          Click here for registration
+        </a>
+      </ng-container>
     </div>
-  </div>
 </div>
diff --git a/web/src/app/pages/error/error.component.scss b/web/src/app/pages/error/error.component.scss
index 0f9975c6b..4728da86c 100644
--- a/web/src/app/pages/error/error.component.scss
+++ b/web/src/app/pages/error/error.component.scss
@@ -14,38 +14,25 @@
  * limitations under the License.
  */
 
-.page {
+.error-page {
   min-height: 100%;
+  font-family: 'Manrope';
 
-  .container {
-    align-items: center;
+  .page-content {
     display: flex;
     flex-direction: column;
+    align-items: center;
 
-    .card {
-      border-radius: 18px;
-      display: flex;
-      margin-top: 24px;
-      width: 880px;
-
-      .content {
-        padding: 16px;
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-
-        h1 {
-          font-size: 28px;
-          font-weight: 400;
-          line-height: 36px;
-        }
+    h1 {
+      font-size: 22px;
+      font-weight: 500;
+      line-height: 28px;
+    }
 
-        h2 {
-          font-size: 16px;
-          font-weight: 400;
-          line-height: 24px;
-        }
-      }
+    h2 {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
     }
   }
 }
diff --git a/web/src/app/pages/error/error.component.ts b/web/src/app/pages/error/error.component.ts
index bcc336093..804fd47dc 100644
--- a/web/src/app/pages/error/error.component.ts
+++ b/web/src/app/pages/error/error.component.ts
@@ -17,7 +17,10 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 
-import {NavigationService} from 'app/services/navigation/navigation.service';
+enum ErrorType {
+  GENERIC,
+  ACCESS_DENIED,
+}
 
 @Component({
   selector: 'error',
@@ -25,11 +28,17 @@ import {NavigationService} from 'app/services/navigation/navigation.service';
   styleUrls: ['./error.component.scss'],
 })
 export class ErrorComponent implements OnInit {
-  constructor(private route: ActivatedRoute) {}
-
   error = '';
+  errorType: ErrorType = ErrorType.GENERIC;
+
+  ErrorType = ErrorType;
+
+  constructor(private route: ActivatedRoute) {}
 
   ngOnInit(): void {
     this.error = this.route.snapshot.paramMap.get('error') ?? '';
+    if (this.error.startsWith('FirebaseError: [code=permission-denied]')) {
+      this.errorType = ErrorType.ACCESS_DENIED;
+    }
   }
 }
diff --git a/web/src/app/pages/error/error.module.ts b/web/src/app/pages/error/error.module.ts
index f69be4f0a..4994dc77a 100644
--- a/web/src/app/pages/error/error.module.ts
+++ b/web/src/app/pages/error/error.module.ts
@@ -16,14 +16,14 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {RouterModule} from '@angular/router';
-
 import {HeaderModule} from 'app/components/header/header.module';
 import {ErrorComponent} from 'app/pages/error/error.component';
 
 @NgModule({
   declarations: [ErrorComponent],
-  imports: [CommonModule, HeaderModule, RouterModule],
+  imports: [CommonModule, HeaderModule, RouterModule, MatButtonModule],
   exports: [ErrorComponent],
 })
 export class ErrorModule {}