feat(DTFS2-7093): Update Crown logo to Tudor logo (#2983)

Author: AlexBramhill

README.md

@@ -1,4 +1,5 @@
 # Digital Trade Finance Service :briefcase:
+
 This repository contains the code for the UK Export Finance Trade Finance Service.
 This documentation provides a comprehensive overview of the UKEF Digital TradeFinance Service (DTFS), including prerequisites, technology stack, setup instructions, testing procedures, deployment guidelines, and other essential information for the developers.
 
@@ -89,6 +90,7 @@ npm run stop
 ## Different docker compose files
 
 There are 3 different docker compose files right now.
+
 - docker-compose.yml is used for local development
 - docker-compose.gha.yml is used for the pipelines to run our tests against
 - docker-compose.replica-set.yml is used when you need a replica set enabled on your local database, e.g. when working with the mongodb change stream
@@ -184,7 +186,18 @@ These CSS and JS files are built from SCSS and JS source files using a tool call
 
 The developer should run `npm run build` inside the service in question to recompile the CSS and JS in the `public` folder after making any changes to the source files or their dependencies.
 
-IMPORTANT: When recompiling JS files, the developer should ensure that they update the `integrity` attribute in any HTML/Nunjucks `script` tags that use the file to reflect the new hash of the recompiled file (a good place to check for these `script` tags is the `templates/index.njk` file in the service). An easy way of finding the new hash is to render a template that uses the script in a browser; a console error should give you the hash of the recompiled file.
+### Sub-resource integrity [(SRI)](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
+
+Client side JavaScript files are protected by SRI security feature which allows the browser to verify the authenticity of the JavaScript files in use.
+
+:warning: If a client side JavaScript file is changed and recompiled during `npm run build`, a new file hash will need to be generated. Otherwise, the script will not be executed.
+
+This can be done by updating the `integrity` attribute in any HTML/Nunjucks `script` tags that use the file to reflect the new hash of the recompiled file (a good place to check for these `script` tags is the `templates/index.njk` file in the service).
+
+There are two ways to update these:
+
+1. (Preferred) Render a template that uses the script in a browser; a console error should give you the hash of the recompiled file.
+2. Run `cat FILENAME.js | openssl dgst -sha512 -binary | openssl base64 -A` on each. Note -- GEF UI references Portal UI's javascript files when using the reverse proxy, so use the hashes from Portal UI's `.js` files in GEF-UI.
 
 ## Linting :mag_right:
 

gef-ui/package.json

@@ -53,7 +53,7 @@
     "express-session": "1.17.3",
     "filesize": "9.0.11",
     "form-data": "4.0.0",
-    "govuk-frontend": "4.6.0",
+    "govuk-frontend": "^4.8.0",
     "http-errors": "^2.0.0",
     "imask": "^6.6.3",
     "joi": "^17.12.3",

gef-ui/public/css/styles.css

@@ -13,13 +13,7 @@ const routes = require('./routes');
 const supportingInformationUploadRoutes = require('./routes/supporting-information-upload');
 const healthcheck = require('./healthcheck');
 const configureNunjucks = require('./nunjucks-configuration');
-const {
-  csrfToken,
-  copyCsrfTokenFromQueryToBody,
-  security,
-  seo,
-  createRateLimit,
-} = require('./middleware');
+const { csrfToken, copyCsrfTokenFromQueryToBody, security, seo, createRateLimit } = require('./middleware');
 
 dotenv.config();
 
@@ -104,11 +98,16 @@ const generateApp = () => {
     watch: true,
   });
 
-  app.use(morgan('dev', {
-    skip: (req) => req.url.startsWith('/assets') || req.url.startsWith('/main.js'),
-  }));
+  app.use(
+    morgan('dev', {
+      skip: (req) => req.url.startsWith('/assets') || req.url.startsWith('/main.js'),
+    }),
+  );
 
-  app.use('/assets', express.static(path.join(__dirname, '..', 'public')));
+  app.use(
+    '/assets',
+    express.static(path.join(__dirname, '..', 'public')),
+  );
 
   app.use(createRateLimit());
 

gef-ui/public/js/govukFrontend.js

@@ -1,17 +1,44 @@
 <header class="govuk-header " role="banner" data-module="govuk-header" data-cy="header">
   <div class="govuk-header__container govuk-width-container">
     <div class="govuk-header__logo">
-      <a href="https://www.gov.uk" class="govuk-header__link govuk-header__link--homepage" title="Go to the GOV.UK homepage" data-cy="gov-home-link-header">
-        <span class="govuk-header__logotype">
+      <a
+        href="https://www.gov.uk"
+        class="govuk-header__link govuk-header__link--homepage"
+        title="Go to the GOV.UK homepage"
+        data-cy="gov-home-link-header">
+        <span
+          class="govuk-header__logotype">
           <!--[if gt IE 8]><!-->
-          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36" data-cy="gov-crown-svg-header">
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            class="govuk-header__logotype-crown"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 32 30"
+            height="30"
+            width="32"
+            data-cy="gov-crown-svg-header">
             <title data-cy="gov-crown-svg-title-header">GOVUK logo</title>
-            <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
+            <path
+              fill="currentColor"
+              fill-rule="evenodd"
+              d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4
+                2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1
+                .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9
+                3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2
+                0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1
+                2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1
+                2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8
+                2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1
+                1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5
+                2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2
+                2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3
+                3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7
+                1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
           </svg>
           <!--<![endif]-->
-          <!--[if IE 8]>
-          <img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" alt="GOVUK logo" width="36" height="32">
-          <![endif]-->
+          <!-- [if IE 8]> <img src="/assets/images/govuk-logotype-tudor-crown.png"
+          class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt=""> <![endif] -->
           <span class="govuk-header__logotype-text">
             GOV.UK
           </span>
@@ -24,15 +51,20 @@
       </a>
       {% if user %}
         <nav aria-label="Menu" class="govuk-header__navigation" data-cy="navigation-header">
-          <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide menu">Menu</button>
+          <button
+            type="button"
+            class="govuk-header__menu-button govuk-js-header-toggle"
+            aria-controls="navigation"
+            aria-label="Show or hide menu">Menu</button>
           <ul id="navigation" class="govuk-header__navigation-list">
             <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
-              <a class="govuk-header__link" href="/user/{{user._id}}" data-cy="username-header">
-                {{user.firstname}} {{user.surname}}
+              <a class="govuk-header__link" href="/user/{{ user._id }}" data-cy="username-header">
+                {{ user.firstname }}
+                {{ user.surname }}
               </a>
             </li>
             <li class="govuk-header__navigation-item">
-              <a class="govuk-header__link" href="/user/{{user._id}}" data-cy="profile-header">
+              <a class="govuk-header__link" href="/user/{{ user._id }}" data-cy="profile-header">
                 Profile
               </a>
             </li>
@@ -46,6 +78,4 @@
       {% endif %}
     </div>
   </div>
-</header>
-
-
+</header>

gef-ui/public/js/govukFrontend.js.map

@@ -45,7 +45,7 @@
 
     {% include "includes/footer.njk" %}
     <script src="/gef/assets/js/main.js" type="text/javascript" integrity="sha512-FzbNufq1YfgPho6SYcKW4eZ4wBHJEPnFN50f/9WNFwLltqksUhSAJ93AP+7AQdYfTCSLPD79pjUai2fvfasFPg==" crossorigin="anonymous"></script>
-    <script src="/assets/js/govukFrontend.js" type="text/javascript" integrity="sha512-I1Jdj+zpeRra1n0yK5AnISUZ4vJugD+b4LOtOkYEn9flOvVx/QjW11FmwOGEP+KBYk/mwTqQ1MDFvpBmXeKJqw==" crossorigin="anonymous"></script>
+    <script src="/assets/js/govukFrontend.js" type="text/javascript" integrity="sha512-FCYqqgwMLyRhD+3K520tAkikpg9RfGv3VUQzUqo5CVwjlRxo/Ol56fxOlRhKGRxZ1LvhwYGAkyamg1Y5pX6VFg==" crossorigin="anonymous"></script>
     <script src="/assets/js/mojFrontend.js" type="text/javascript" integrity="sha512-Ap7qengYJPIRuxlVyln9ThfoCD/SIeefliy26hN7ZG1ywrC9y2YL9o3kpKHAXT5S2gcUOuMi/GkfYLJtAaIJig==" crossorigin="anonymous"></script>
     <script src="/assets/js/maskedInputs.js" type="text/javascript" integrity="sha512-4XTH3IT3oQN/60lRAdBZWXMXq4/L1n5kUoGEftu+nY0Bba/7T0RDIZ62es6v+dCyNJ+uaYZTjWl3nPYv0rR6WA==" crossorigin="anonymous"></script>
     {% block scripts %}{% endblock %}

gef-ui/server/generateApp.js

@@ -26,7 +26,7 @@ module.exports = {
   resolve: {
     // resolves paths in library files that we don't control, pointing them to the root hoisted dependencies
     alias: {
-      'node_modules/govuk-frontend': path.resolve(__dirname, '../node_modules/govuk-frontend/dist'),
+      'node_modules/govuk-frontend': path.resolve(__dirname, '../node_modules/govuk-frontend'),
       'node_modules/@ministryofjustice': path.resolve(__dirname, '../node_modules/@ministryofjustice'),
     },
   },

gef-ui/templates/includes/header.njk

@@ -49,7 +49,7 @@
     "express-rate-limit": "^6.11.2",
     "express-session": "1.17.3",
     "form-data": "4.0.0",
-    "govuk-frontend": "4.6.0",
+    "govuk-frontend": "^4.8.0",
     "http-errors": "^2.0.0",
     "imask": "^6.6.3",
     "joi": "^17.12.3",