Merge pull request #41 from uktrade/feature/ORPD-86-js-off-redirect

feature/ORPD-86 - Redirect to non-js search when user has JS off.
uktrade · Nov 8, 2024 · 1570675 · 1570675
2 parents 73b6592 + dfbbe5e
commit 1570675
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 16 deletions.
diff --git a/orp/config/urls.py b/orp/config/urls.py
@@ -9,8 +9,8 @@
 import core.views as core_views
 
 urlpatterns = [
-    path("", orp_search_views.search, name="search"),
-    path("new/", orp_search_views.search_react, name="search_react"),
+    path("", orp_search_views.search_react, name="search_react"),
+    path("nojs/", orp_search_views.search, name="search"),
     # If we choose to have a start page with green button, this is it:
     # path("", core_views.home, name="home"),
     path(

diff --git a/orp/orp_search/templates/orp.html b/orp/orp_search/templates/orp.html
@@ -3,18 +3,20 @@
 {% load url_replace_tags %}
 {% block head_title %}{% if is_paginated %}Page {{current_page}} - {% endif %}{{service_name}}{% endblock %}
 {% block service_name %}{{service_name}}{% endblock %}
+
+{% block js_toggle %}
+<li class="govuk-footer__inline-list-item">
+  <a class="govuk-footer__link" href="/">
+    JavaScript on version
+  </a>
+</li>
+{% endblock js_toggle %}
+
 {% block body_content %}
 
 {% comment %}
-
 This is the main template for the ORP search page.
 It includes the search form, search results and pagination.
-
-To pass small amounts of data from the Django view to the React app,
-we use the following template tags passed in from orp_search/views.py:
-{{ document_types|json_script:"document_types" }}
-{{ publishers|json_script:"publishers" }}
-
 {% endcomment %}
 
 <div class="govuk-width-container">

diff --git a/orp/orp_search/templates/react-orp.html b/orp/orp_search/templates/react-orp.html
@@ -2,10 +2,32 @@
 
 {% load render_bundle from webpack_loader %}
 
-{% block head_title %}{{service_name}}{% endblock %}
-{% block service_name %}{{service_name}}{% endblock %}
+{% block head_title %}
+  {{service_name}}
+{% endblock %}
+
+{% block service_name %}
+  {{service_name}}
+{% endblock %}
+
+{% block js_bundles %}
+{% render_bundle "main" "js" %}
+{% render_bundle "react" "js" %}
+{% endblock %}
 
+{% block no_script_redirect %}
+  <noscript>
+    <meta http-equiv="refresh" content="0;url=/nojs" />
+  </noscript>
+{% endblock %}
+
+{% comment %}
+To pass small amounts of data from the Django view to the React app,
+we use the following template tags passed in from orp_search/views.py:
+{{ publishers|json_script:"publishers" }}
+{% endcomment %}
 {% block body_content %}
+{{ document_types|json_script:"document_types" }}
 
 <div class="govuk-width-container">
   <main class="govuk-main-wrapper" id="main-content" role="main">
@@ -62,8 +84,3 @@ <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title
   </main>
 </div>
 {% endblock %}
-
-{% block js_bundles %}
-{% render_bundle "main" "js" %}
-{% render_bundle "react" "js" %}
-{% endblock %}
diff --git a/orp/orp_search/views.py b/orp/orp_search/views.py
@@ -276,6 +276,11 @@ def search_react(request: HttpRequest) -> HttpResponse:
 
     context = {
         "service_name": settings.SERVICE_NAME_SEARCH,
+        "document_types": {
+            "standard": "Standard",
+            "guidance": "Guidance",
+            "legislation": "Legislation",
+        },
     }
 
     return render(request, template_name="react-orp.html", context=context)
diff --git a/orp/templates/base.html b/orp/templates/base.html
@@ -10,11 +10,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="theme-color" content="#0b0c0c">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  {% block no_script_redirect %}{% endblock %}
 
   <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{% webpack_static 'favicon.ico' %}" type="image/x-icon">
   <link rel="mask-icon" href="{% webpack_static 'govuk-mask-icon.svg' %}" color="#0b0c0c">
   <link rel="apple-touch-icon" sizes="180x180" href="{% webpack_static 'govuk-icon-180.png' %}">
   {% render_bundle "main" "css" %}
+
 </head>
 
 <body class="govuk-template__body">
@@ -76,6 +78,13 @@ <h2 class="govuk-visually-hidden">Support links</h2>
                 Cookies
               </a>
             </li>
+            {% block js_toggle %}
+            <li class="govuk-footer__inline-list-item">
+              <a class="govuk-footer__link" href="/nojs">
+                JavaScript off version
+              </a>
+            </li>
+            {% endblock js_toggle %}
           </ul>
           <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo"
             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">