From 6013d93182fe6ba86e275a247139fc58d2fad783 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Thu, 26 Sep 2019 17:22:04 -0400
Subject: [PATCH] Styling error page

---
 atst/routes/errors.py              | 20 ++++++++++++++++--
 styles/atat.scss                   |  1 +
 styles/components/_error_page.scss | 33 ++++++++++++++++++++++++++++++
 templates/error.html               | 30 ++++++++++++++++-----------
 templates/error_base.html          |  4 ++++
 translations.yaml                  |  4 ++++
 6 files changed, 78 insertions(+), 14 deletions(-)
 create mode 100644 styles/components/_error_page.scss

diff --git a/atst/routes/errors.py b/atst/routes/errors.py
index cc3f5f21..36d19b34 100644
--- a/atst/routes/errors.py
+++ b/atst/routes/errors.py
@@ -11,6 +11,7 @@ from atst.domain.invitations import (
 from atst.domain.authnid.crl import CRLInvalidException
 from atst.domain.portfolios import PortfolioError
 from atst.utils.flash import formatted_flash as flash
+from atst.utils.localization import translate
 
 NO_NOTIFY_STATUS_CODES = set([404, 401])
 
@@ -25,10 +26,25 @@ def notify(e, message, code):
         current_app.notification_sender.send(message)
 
 
-def handle_error(e, message="Not Found", code=404):
+def handle_error(
+    e,
+    message=translate("errors.not_found"),
+    code=404,
+    submessage=translate("errors.not_found_sub"),
+    more_info=translate("common.lorem"),
+):
     log_error(e)
     notify(e, message, code)
-    return render_template("error.html", message=message), code
+    return (
+        render_template(
+            "error.html",
+            message=message,
+            code=code,
+            submessage=submessage,
+            more_info=more_info,
+        ),
+        code,
+    )
 
 
 def make_error_pages(app):
diff --git a/styles/atat.scss b/styles/atat.scss
index 73d68a03..346b5d44 100644
--- a/styles/atat.scss
+++ b/styles/atat.scss
@@ -38,6 +38,7 @@
 @import "components/usa_banner";
 @import "components/dod_login_notice.scss";
 @import "components/sticky_cta.scss";
+@import "components/error_page.scss";
 
 @import "sections/login";
 @import "sections/home";
diff --git a/styles/components/_error_page.scss b/styles/components/_error_page.scss
new file mode 100644
index 00000000..45a8b8f5
--- /dev/null
+++ b/styles/components/_error_page.scss
@@ -0,0 +1,33 @@
+.error-page {
+  max-width: 475px;
+  margin: auto;
+
+  .panel__heading {
+    text-align: center;
+    padding: $gap 0;
+
+    hr {
+      width: 100%;
+      border: 1px solid $color-red;
+    }
+
+    h1 {
+      margin-bottom: $gap;
+    }
+  }
+
+  .panel__body {
+    padding: $gap * 2;
+    margin: 0;
+  }
+
+  .icon {
+    @include icon-size(60);
+  }
+
+  hr {
+    margin-bottom: $gap * 4;
+    width: 80%;
+    border: 0.5px solid $color-gray-light;
+  }
+}
diff --git a/templates/error.html b/templates/error.html
index f58eac86..c3675e0e 100644
--- a/templates/error.html
+++ b/templates/error.html
@@ -1,19 +1,25 @@
 {% extends "error_base.html" %}
 
+{% from "components/icon.html" import Icon %}
+
 {% block content %}
 
-<main class="usa-section usa-content">
-
-{% if message %}
-    <h1>{{ message }}</h1>
-{% else %}
-    <h1>An error occurred.</h1>
-{% endif %}
-
-{% if g.current_user %}
-  <p>Return <a href="{{ url_for("atst.home") }}">home</a>.</p>
-{% endif %}
-
+<main class="usa-section usa-content error-page">
+    <div class="panel__heading">
+      {{ Icon('cloud', classes="icon--red icon--large")}}
+      <hr>
+      <h1>{{ code }} - {{ message }}</h1>
+      <p>{{ submessage }}</p>
+    </div>
+    <hr>
+    <div class="panel__body">
+      <p>
+        {{ more_info }}
+      </p>
+      <p>
+        <a href="#">More lorem</a>
+      </p>
+    </div>
 </main>
 
 {% endblock %}
diff --git a/templates/error_base.html b/templates/error_base.html
index efe3f113..253a62f8 100644
--- a/templates/error_base.html
+++ b/templates/error_base.html
@@ -13,6 +13,10 @@
 
   {% block template_vars %}{% endblock %}
 
+  {% include 'components/usa_header.html' %}
+
+  {% include 'navigation/topbar.html' %}
+
   <div class='global-layout'>
 
     <div class='global-panel-container'>
diff --git a/translations.yaml b/translations.yaml
index 509dc8c7..625870aa 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -55,6 +55,7 @@ common:
   disable: Disable
   edit: Edit
   email: Email
+  lorem: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   members: Members
   name: Name
   next: Next
@@ -96,6 +97,9 @@ components:
           The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
         </p>
       title: Here’s how you know
+errors:
+  not_found: Page Not Found
+  not_found_sub: Looks like that page does not exist!
 email:
   application_invite: "{inviter_name} has invited you to a JEDI cloud application"
   portfolio_invite: "{inviter_name} has invited you to a JEDI cloud portfolio"