feat(plugin-default-pages): added unauthorized page and optimised styles

origami-cms · Dec 4, 2018 · 87a88f7 · 87a88f7
1 parent 89fe722
commit 87a88f7
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 76 deletions.
diff --git a/packages/plugin-default-pages/src/index.ts b/packages/plugin-default-pages/src/index.ts
@@ -1,5 +1,5 @@
 import { Origami, Renderer, Route } from '@origami/core-lib';
-import {FORBIDDEN, INTERNAL_SERVER_ERROR, NOT_FOUND} from 'http-status-codes';
+import {FORBIDDEN, INTERNAL_SERVER_ERROR, NOT_FOUND, UNAUTHORIZED} from 'http-status-codes';
 import path from 'path';
 
 const index: Origami.Server.RequestHandler = async (req, res, next) => {
@@ -32,6 +32,12 @@ const index: Origami.Server.RequestHandler = async (req, res, next) => {
       data = { title: 'Origami' };
       break;
 
+    case '/unauthorized':
+    case '/401':
+      file = 'unauthorized.html';
+      res.status(UNAUTHORIZED);
+      break;
+
     case '/forbidden':
     case '/403':
       file = 'forbidden.html';

diff --git a/packages/plugin-default-pages/static/401/background.svg b/packages/plugin-default-pages/static/401/background.svg
diff --git a/packages/plugin-default-pages/static/error.css b/packages/plugin-default-pages/static/error.css
@@ -0,0 +1,45 @@
+body {
+  background: var(--color-white);
+  padding: var(--size-main);
+}
+
+a.logo {
+  position: fixed;
+  top: var(--size-small);
+  left: var(--size-small);
+  z-index: 100;
+}
+a.button {
+  padding: 0 var(--size-main);
+}
+
+h1 {
+  font-weight: 700;
+  font-size: 3.6rem;
+}
+
+p {
+  margin: 1rem auto;
+  margin-bottom: var(--size-medium);
+  max-width: 68rem;
+  font-size: var(--font-size-large);
+  color: var(--color-grey-500);
+}
+
+img.banner {
+  max-width: 68rem;
+  margin-top: 20%;
+}
+
+
+@media screen and (min-width: 640px) {
+  img.banner {
+    margin-top: 5vh;
+  }
+
+  a.logo {
+    top: var(--size-large);
+    left: var(--size-large);
+  }
+}
+
diff --git a/packages/plugin-default-pages/templates/forbidden.html b/packages/plugin-default-pages/templates/forbidden.html
@@ -7,42 +7,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Forbidden - Origami</title>
   <link rel="stylesheet" href="/origami/zen.css">
-  <style>
-    body {
-      background: var(--color-white);
-      padding: var(--size-main);
-    }
-
-    a.logo {
-      position: fixed;
-      top: var(--size-small);
-      left: var(--size-small);
-      z-index: 100;
-    }
-
-    p {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 50rem;
-    }
-
-    img.banner {
-      max-width: 68rem;
-      margin-top: 20%;
-    }
-
-    @media screen and (min-width: 640px) {
-      img.banner {
-        margin-top: 5vh;
-      }
-
-      a.logo {
-        top: var(--size-large);
-        left: var(--size-large);
-      }
-    }
-
-  </style>
+  <link rel="stylesheet" href="/origami/error.css">
 </head>
 
 <body class="text-center">
@@ -51,7 +16,7 @@
   </a>
 
   <img class="banner" src="/origami/403/background.svg">
-  <h3 class="margin-t-main">You’re not permitted to see this.</h3>
+  <h1 class="margin-t-main">You’re not permitted to see this.</h1>
   <p>
     The page you’re trying to access has restricted access.
     If you feel this is a mistake, contact your admin.

diff --git a/packages/plugin-default-pages/templates/internal-error.html b/packages/plugin-default-pages/templates/internal-error.html
@@ -7,42 +7,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Unknown Error - Origami</title>
   <link rel="stylesheet" href="/origami/zen.css">
-  <style>
-    body {
-      background: var(--color-white);
-      padding: var(--size-main);
-    }
-
-    a.logo {
-      position: fixed;
-      top: var(--size-small);
-      left: var(--size-small);
-      z-index: 100;
-    }
-
-    p {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 50rem;
-    }
-
-    img.banner {
-      max-width: 68rem;
-      margin-top: 20%;
-    }
-
-    @media screen and (min-width: 640px) {
-      img.banner {
-        margin-top: 5vh;
-      }
-
-      a.logo {
-        top: var(--size-large);
-        left: var(--size-large);
-      }
-    }
-
-  </style>
+  <link rel="stylesheet" href="/origami/error.css">
 </head>
 
 <body class="text-center">
@@ -51,10 +16,11 @@
   </a>
 
   <img class="banner" src="/origami/500/background.svg">
-  <h3 class="margin-t-main">Oops! Something went wrong</h3>
+  <h1 class="margin-t-main">Oops! Something went wrong.</h1>
   <p>
     We're very sorry, however something went wrong when trying to load this page.
-    Please try again or <a class="color-alt" href="https://github.com/origami-cms/cms/issues/new" target="_blank">contact support</a>.
+Please try again or <br /><a class="color-alt" href="https://github.com/origami-cms/cms/issues/new" target="_blank">contact
+  support</a>.
   </p>
   <a href="/" class="button">Return home</a>
 </body>

diff --git a/packages/plugin-default-pages/templates/unauthorized.html b/packages/plugin-default-pages/templates/unauthorized.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Unauthorized - Origami</title>
+  <link rel="stylesheet" href="/origami/zen.css">
+  <link rel="stylesheet" href="/origami/error.css">
+</head>
+
+<body class="text-center">
+  <a href='/' class="logo width-large">
+    <img src="/origami/logo.svg" />
+  </a>
+
+  <img class="banner" src="/origami/401/background.svg">
+  <h1 class="margin-t-main">No authorization found.</h1>
+  <p>
+    This page is not publicly available. <br />
+    To access it please login first.
+  </p>
+  <a href="/" class="button">Return home</a>
+</body>
+
+</html>