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

@@ -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;
   }
 }

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 {
   /**

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;

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 %}

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;
+  }
+}

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';