From 05f8f0d9e19b354e19edf39a6778c9f3165adecd Mon Sep 17 00:00:00 2001
From: "Umang G. Patel" <23169768+robonetphy@users.noreply.github.com>
Date: Fri, 2 Sep 2022 00:24:33 +0530
Subject: [PATCH] 404 Page not found added (#225)

* replace repose of aliases with error page

* error twig modified with proper messages

* add the error pcss

* the lint removed

* centered the error message

* center style added independent of screen

* the top position changed

* aliases not found added

* aliases throw removed

* Update src/backend/controllers/pages.ts

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
---
 src/backend/controllers/aliases.ts        |  4 ---
 src/backend/models/pagesFlatArray.ts      |  2 +-
 src/backend/routes/aliases.ts             | 31 +++++++++++++++--------
 src/backend/views/error.twig              |  9 ++++---
 src/frontend/styles/components/error.pcss | 29 +++++++++++++++++++++
 src/frontend/styles/main.pcss             |  1 +
 6 files changed, 57 insertions(+), 19 deletions(-)
 create mode 100644 src/frontend/styles/components/error.pcss

diff --git a/src/backend/controllers/aliases.ts b/src/backend/controllers/aliases.ts
index 4416fce..2ee8e7e 100644
--- a/src/backend/controllers/aliases.ts
+++ b/src/backend/controllers/aliases.ts
@@ -14,10 +14,6 @@ class Aliases {
   public static async get(aliasName: string): Promise<Alias> {
     const alias = await Alias.get(aliasName);
 
-    if (!alias.id) {
-      throw new Error('Entity with given alias does not exist');
-    }
-
     return alias;
   }
 }
diff --git a/src/backend/models/pagesFlatArray.ts b/src/backend/models/pagesFlatArray.ts
index c0b5366..e82d4c3 100644
--- a/src/backend/models/pagesFlatArray.ts
+++ b/src/backend/models/pagesFlatArray.ts
@@ -43,7 +43,7 @@ export interface PagesFlatArrayData {
 }
 
 /**
-   * @class PagesFlatArray model - flat array of pages, which are ordered like in sidebar
+ * @class PagesFlatArray model - flat array of pages, which are ordered like in sidebar
  */
 class PagesFlatArray {
   /**
diff --git a/src/backend/routes/aliases.ts b/src/backend/routes/aliases.ts
index df467e8..71e58a4 100644
--- a/src/backend/routes/aliases.ts
+++ b/src/backend/routes/aliases.ts
@@ -1,9 +1,11 @@
 import express, { Request, Response } from 'express';
-import Aliases from '../controllers/aliases.js';
-import Pages from '../controllers/pages.js';
-import Alias from '../models/alias.js';
-import verifyToken from './middlewares/token.js';
-import PagesFlatArray from '../models/pagesFlatArray.js';
+import Aliases from '../controllers/aliases';
+import Pages from '../controllers/pages';
+import Alias from '../models/alias';
+import verifyToken from './middlewares/token';
+import PagesFlatArray from '../models/pagesFlatArray';
+import HttpException from '../exceptions/httpException';
+
 
 const router = express.Router();
 
@@ -24,7 +26,7 @@ router.get('*', verifyToken, async (req: Request, res: Response) => {
     const alias = await Aliases.get(url);
 
     if (alias.id === undefined) {
-      throw new Error('Alias not found');
+      throw new HttpException(404, 'Alias not found');
     }
 
     switch (alias.type) {
@@ -46,11 +48,18 @@ router.get('*', verifyToken, async (req: Request, res: Response) => {
       }
     }
   } catch (err) {
-    res.status(400).json({
-      success: false,
-      error: err,
-    });
+    if (err instanceof HttpException && err.status === 404) {
+      res.status(404).render('error', {
+        message: 'Page not found',
+        status: 404,
+      });
+    } else {
+      res.status(500).json({
+        success: false,
+        error: err,
+      });
+    }
   }
 });
 
-export default router;
+export default router;
\ No newline at end of file
diff --git a/src/backend/views/error.twig b/src/backend/views/error.twig
index caf7ce0..33a552d 100644
--- a/src/backend/views/error.twig
+++ b/src/backend/views/error.twig
@@ -1,7 +1,10 @@
 {% extends 'layout.twig' %}
 
 {% block body %}
-  <h1>{{message}}</h1>
-  <h2>{{error.status}}</h2>
-  <pre>{{error.stack}}</pre>
+	<div class="error-page">
+    <h1>
+      ┬┴┬┴┤ {{status}} ├┬┴┬┴
+    </h1>
+		<h1>{{message}}</h1>
+	</div>
 {% endblock %}
diff --git a/src/frontend/styles/components/error.pcss b/src/frontend/styles/components/error.pcss
new file mode 100644
index 0000000..9076122
--- /dev/null
+++ b/src/frontend/styles/components/error.pcss
@@ -0,0 +1,29 @@
+.error-page {
+  font-size: 15px;
+  text-align: center;
+  position: absolute;
+  top: 45%;
+  left: 50%;
+
+  @media (--mobile) {
+    position: relative;
+    top: 30vh;
+    left: 0;
+  }
+
+  @media (--tablet) {
+    position: relative;
+    top: 30vh;
+    left: 0;
+  }
+
+  h1 {
+    @media (--mobile) {
+      font-size: 20px;
+    }
+  }
+
+  p {
+    margin: 40px 0 20px;
+  }
+}
diff --git a/src/frontend/styles/main.pcss b/src/frontend/styles/main.pcss
index 13fafb3..8805388 100644
--- a/src/frontend/styles/main.pcss
+++ b/src/frontend/styles/main.pcss
@@ -8,6 +8,7 @@
 @import './components/page.pcss';
 @import './components/landing.pcss';
 @import './components/auth.pcss';
+@import './components/error.pcss';
 @import './components/button.pcss';
 @import './components/sidebar.pcss';
 @import './components/navigator.pcss';