From 661fa195d46700b379451ada0af4a9402284d542 Mon Sep 17 00:00:00 2001
From: igorkorenfeld <igor.korenfeld@gsa.gov>
Date: Mon, 8 May 2023 11:55:03 -0400
Subject: [PATCH] Add 401 page template

---
 src/registrar/templates/401.html | 51 +++++++++++++++++++++-----------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/registrar/templates/401.html b/src/registrar/templates/401.html
index 64bcec563..e5f7781c5 100644
--- a/src/registrar/templates/401.html
+++ b/src/registrar/templates/401.html
@@ -1,28 +1,45 @@
 {% extends "base.html" %}
-{% load i18n %}
+{% load i18n static %}
 
 {% block title %}{% translate "Unauthorized" %}{% endblock %}
 
 {% block content %}
 <main id="main-content" class="grid-container">
-  <h1>{% translate "Unauthorized" %}</h1>
+  <div class="grid-row grow-gap"> 
+    <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
+      <h1>
+        {% translate "You are not authorized to view this page." %}
+      </h1>
+      <h2>
+        {% translate "Status 401" %}
+      </h2>
 
-  {% if friendly_message %}
-  <p>{{ friendly_message }}</p>
-  {% else %}
-  <p>{% translate "Authorization failed." %}</p>
-  {% endif %}
 
-  <p><a href="{% url 'login' %}">
-    {% translate "Would you like to try logging in again?" %}
-  </a></p>
+      {% if friendly_message %}
+        <p>{{ friendly_message }}</p>
+      {% else %}
+        <p>{% translate "Authorization failed." %}</p>
+      {% endif %}
+      <p>
+        You must be an authorized user and need to be signed in to view this page. 
+        Would you like to <a href="{% url 'login' %}"> try loggining in again?</a>
+      </p>
+      <p>
+        If you would like help with this error <a href="https://federalist-877ab29f-16f6-4f12-961c-96cf064cf070.sites.pages.cloud.gov/site/cisagov/getgov-home/contact/"> contact us </a>
+      </p>
 
-  {% if log_identifier %}
-  <p>Here's a unique identifier for this error.</p>
-  <blockquote>{{ log_identifier }}</blockquote>
-  <p>{% translate "Please include it if you contact us." %}</p>
-  {% endif %}
-
-  TODO: Content team to create a "how to contact us" footer for the error pages
+      {% if log_identifier %}
+        <p>Here's a unique identifier for this error.</p>
+        <blockquote>{{ log_identifier }}</blockquote>
+        <p>{% translate "Please include it if you contact us." %}</p>
+      {% endif %}
+    </div>
+    <div class="tablet:grid-col-4">
+      <img 
+         src="{% static 'img/registrar/dotgov_401_illo.svg' %}"
+         alt=""
+      />
+    </div>
+  </div>
 </main>
 {% endblock %}