Skip to content

S28-4055 Change layout of portal login form#1107

Open
oliver-scott wants to merge 19 commits into
masterfrom
S28-4055-new-login-form
Open

S28-4055 Change layout of portal login form#1107
oliver-scott wants to merge 19 commits into
masterfrom
S28-4055-new-login-form

Conversation

@oliver-scott

@oliver-scott oliver-scott commented May 20, 2026

Copy link
Copy Markdown
Contributor

JIRA link (if applicable)

https://tools.hmcts.net/jira/browse/S28-4055

Change description

Updates the layout and content of the portal b2c login form via javascript.

Yet to be QA'd

New form layout

image

@hmcts-jenkins-cnp

hmcts-jenkins-cnp Bot commented May 20, 2026

Copy link
Copy Markdown
Contributor

Plan Result (stg)

⚠️ Resource Deletion will happen

This plan contains resource delete operation. Please check the plan result very carefully!

Plan: 2 to add, 5 to change, 2 to destroy.
  • Update
    • azurerm_key_vault_secret.finalsa_storage_account_connection_string
    • azurerm_key_vault_secret.finalsa_storage_account_primary_access_key
    • azurerm_key_vault_secret.ingestsa_storage_account_connection_string
    • module.finalsa_storage_account.azurerm_storage_account.storage_account
    • module.ingestsa_storage_account.azurerm_storage_account.storage_account
  • Replace
    • azurerm_storage_blob.b2c_config["b2c.js"]
    • azurerm_storage_blob.b2c_config["main.css"]
Change Result (Click me)

⚠️ The content is omitted as it is too long. ⚠️

  # azurerm_key_vault_secret.finalsa_storage_account_connection_string will be updated in-place
  ~ resource "azurerm_key_vault_secret" "finalsa_storage_account_connection_string" {
        id                      = "https://pre-hmctskv-stg.vault.azure.net/secrets/finalsa-storage-account-connection-string/77211ab50dd9428da7e6a9e4bfe03188"
        name                    = "finalsa-storage-account-connection-string"
      ~ tags                    = {
          - "file-encoding" = "utf-8" -> null
        }
      ~ value                   = (sensitive value)
        # (10 unchanged attributes hidden)
    }

  # azurerm_key_vault_secret.finalsa_storage_account_primary_access_key will be updated in-place
  ~ resource "azurerm_key_vault_secret" "finalsa_storage_account_primary_access_key" {
        id                      = "https://pre-hmctskv-stg.vault.azure.net/secrets/finalsa-storage-account-primary-access-key/52ab557f5f98475499d151d829a6412b"
        name                    = "finalsa-storage-account-primary-access-key"
      ~ tags                    = {
          - "file-encoding" = "utf-8" -> null
        }
      ~ value                   = (sensitive value)
        # (10 unchanged attributes hidden)
    }

  # azurerm_key_vault_secret.ingestsa_storage_account_connection_string will be updated in-place
  ~ resource "azurerm_key_vault_secret" "ingestsa_storage_account_connection_string" {
        id                      = "https://pre-hmctskv-stg.vault.azure.net/secrets/ingestsa-storage-account-connection-string/adfa9b678ef3439ea206e13ef2c939a2"
        name                    = "ingestsa-storage-account-connection-string"
      ~ tags                    = {
          - "file-encoding" = "utf-8" -> null
        }
      ~ value                   = (sensitive value)
        # (10 unchanged attributes hidden)
    }

  # azurerm_storage_blob.b2c_config["b2c.js"] must be replaced
-/+ resource "azurerm_storage_blob" "b2c_config" {
      ~ access_tier            = "Hot" -> (known after apply)
      - content_md5            = "e0162d9b0352883547c060faf9e6f8fa" -> null # forces replacement
      ~ content_type           = "text/javascript" -> "application/javascript"
      ~ id                     = "https://presastg.blob.core.windows.net/pre-b2c-container/js/b2c.js" -> (known after apply)
      ~ metadata               = {} -> (known after apply)
        name                   = "js/b2c.js"
      ~ source_content         = <<-EOT # forces replacement
            function moveForgotPassword() {
              const forgotPasswordId = 'forgotPassword'
              const forgotPassword = document.getElementById(forgotPasswordId);
            
              if (forgotPassword) {
                const text = forgotPassword.innerHTML;
                forgotPassword.remove();
            
                const newForgotPassword = document.createElement('a');
                newForgotPassword.id = forgotPasswordId;
                newForgotPassword.innerHTML = text;
                newForgotPassword.href = forgotPassword.href;
            
                const div = document.createElement('div');
                div.appendChild(newForgotPassword);
            
                const passwordInput = document.getElementById('password');
                passwordInput.parentNode.insertBefore(div, passwordInput.nextSibling);
              }
            }
            
            function moveRetryCode() {
              const retryCode = document.getElementById('retryCode');
            
              if (retryCode) {
                const text = retryCode.innerHTML;
                retryCode.remove();
            
                const newRetryCode = document.createElement('a');
                newRetryCode.id = 'retryCode';
                newRetryCode.innerHTML = text;
            
                const div = document.createElement('div');
                div.appendChild(newRetryCode);
            
                const verificationCodeInput = document.getElementById('verificationCode');
                verificationCodeInput.parentNode.insertBefore(div, verificationCodeInput.nextSibling);
              }
            }
            
          + function addFormSectionHeader() {
          +   const emailAddressInput = document.getElementById('signInName');
          +   if (!emailAddressInput) return;
          + 
          +   const header = document.createElement('h2');
          +   header.textContent = 'Existing user';
          + 
          +   const formSection = emailAddressInput.parentNode;
          +   formSection.before(header);
          + }
          + 
          + function moveAndUpdateSignUpSection() {
          +   const signUpSection = document.querySelector('.create');
          +   const formSection = document.querySelector('.entry');
          + 
          +   if (!signUpSection || !formSection) return;
          + 
          +   const newSiblingNode = formSection;
          +   moveSignUpSection(signUpSection, newSiblingNode);
          + 
          +   addHeaderToSignUpSection(signUpSection);
          +   updateSignUpSectionBody(signUpSection);
          +   removeDivider();
          +   addOrDivider(signUpSection);
          + }
          + 
          + function moveSignUpSection(signUpSection, newSiblingNode) {
          +   newSiblingNode.parentNode.insertBefore(signUpSection, newSiblingNode);
          + }
          + 
          + function addHeaderToSignUpSection(signUpSection) {
          +   const signUpHeader = document.createElement('h2');
          +   signUpHeader.id = 'signUpNowHeader';
          +   signUpHeader.textContent = 'First time here?';
          +   signUpSection.insertBefore(signUpHeader, signUpSection.firstChild);
          + }
          + 
          + function updateSignUpSectionBody(signUpSection) {
          +   const signUpBody = signUpSection.getElementsByTagName('p')[0];
          +   if (!signUpBody) return;
          + 
          +   // Change the font size
          +   signUpBody.classList.add('govuk-label');
          +   
          +   const signUpLink = signUpBody.querySelector('#createAccount') || signUpBody.querySelector('a');
          +   if (!signUpLink) return;
          + 
          +   // Find existing leading text node
          +   const leadingTextNode = Array.from(signUpBody.childNodes)
          +     .find(node => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '');
          + 
          +   const newSignUpBodyText = 'You need to register in the address book.';
          + 
          +   if (leadingTextNode) {
          +     leadingTextNode.textContent = newSignUpBodyText;
          +   } else {
          +     signUpBody.insertBefore(
          +       document.createTextNode(newSignUpBodyText),
          +       signUpLink
          +     );
          +   }
          + }
          + 
          + function removeDivider() {
          +   // Remove the "OR" divider section
          +   const divider = document.querySelector('.divider');
          +   if (!divider) return;
          +   divider.remove();
          + }
          + 
          + function addOrDivider(nodeToInsertAfter) {
          +   // Add an "OR" divider section
          +   if (!nodeToInsertAfter) return;
          +   const orDivider = document.createElement('h2');
          +   orDivider.textContent = 'OR';
          + 
          +   nodeToInsertAfter.parentNode.insertBefore(orDivider, nodeToInsertAfter.nextSibling);
          + }
          + 
          + function updatePageHeader() {
          +   const heading = document.querySelector(".intro h2");
          +   heading.classList.add("no-margin");
          + }
          + 
            function addTsAndCsLink() {
              const tsAndCsBlock = document.getElementsByClassName('CheckboxMultiSelect')[0];
              if (tsAndCsBlock) {
                const tsAndCsLabel = tsAndCsBlock.getElementsByTagName('label')[0];
                const tsAndCsText = tsAndCsBlock.getElementsByTagName('label')[1];
                // fix the wrong for attribute supplied by B2C
                tsAndCsLabel.setAttribute('for', tsAndCsText.getAttribute('for'));
                if (tsAndCsText) {
                  tsAndCsText.innerHTML = tsAndCsText.innerHTML = 'I agree to the <a href="https://pre-portal.staging.platform.hmcts.net/terms-and-conditions" target="_blank">Terms &amp; Conditions</a> (including Acceptable Use) for the Section 28 Video on Demand Portal.'
                }
              }
            }
            
            function addPasswordCriteria() {
              const passwordAttrEntry = document.querySelector('#attributeList li.Password .attrEntry');
              if (passwordAttrEntry) {
                // passwordAttrEntry.setAttribute('style', 'margin-bottom: 2px;');
                const passwordDetails = document.createElement('details');
                passwordDetails.setAttribute('class', 'govuk-details');
                passwordDetails.setAttribute('data-module', 'govuk-details');
                passwordDetails.setAttribute('style', 'margin-top: 2px;');
                passwordDetails.innerHTML = '<summary class="govuk-details__summary">\n' +
                  '                          <span class="govuk-details__summary-text">Password criteria</span>\n' +
                  '                        </summary>\n' +
                  '                        <div class="govuk-details__text">\n' +
                  '                          Passwords must have at least 8 characters. <br />\n' +
                  '                          Passwords must contain characters from at least three of the\n' +
                  '                          following four classes: uppercase, lowercase, digit, and\n' +
                  '                          non-alphanumeric (special).\n' +
                  '                        </div>';
                passwordAttrEntry.appendChild(passwordDetails);
              }
            }
            
            function lowerCaseEmailAddresses() {
              // for our TLD email validation policy to work, we need the tld to be in lowercase...
              const emailInput = document.getElementById('email');
              if (emailInput) {
                emailInput.onblur = function () {
                  emailInput.value = emailInput.value.toLowerCase();
                }
              }
              const signInName = document.getElementById('signInName');
              if (signInName) {
                signInName.onblur = function () {
                  signInName.value = signInName.value.toLowerCase();
                }
              }
            }
            
            function removeAutofocus() {
              const inputFields = document.getElementsByTagName('input');
              for (let i = 0; i < inputFields.length; i++) {
                inputFields[i].removeAttribute('autofocus');
                inputFields[i].blur();
              }
            }
            
            function addDescriptiveErrors() {
              const verifyButton = document.getElementById('email_ver_but_send');
              const continueButton = document.getElementById('continue');
              const emailButton = document.getElementById('email');
            
              if (continueButton) {
                continueButton.addEventListener('click', validateErrors);
              }
            
              if (verifyButton) {
                verifyButton.addEventListener('click', validateErrors);
              }
            
              if (emailButton) {
                emailButton.addEventListener('click', validateErrors);
              }
            }
            
            function validateErrors() {
              const errorDivs = document.getElementsByClassName('error itemLevel');
              const pageLevelErrorDiv = document.getElementById('requiredFieldMissing');
              const errorFields = []
            
              if (errorDivs) {
                for (let i = 0; i < errorDivs.length; i++) {
                  const input = errorDivs[i].nextElementSibling;
            
                  if (input && input.tagName.toLowerCase() === 'input' && input.value.trim() === '') {
                    const placeholderText = input.getAttribute('placeholder');
                    const inputId = input.getAttribute('id');
            
                    errorFields.push({
                      placeholderText: placeholderText,
                      inputId: inputId
                    });
                    errorDivs[i].textContent = `This field is required: ${placeholderText.toLowerCase()}`;
            
                    pageLevelErrorDiv.className = "govuk-error-summary";
            
                  } else {
                    errorDivs[i].textContent = ''
                  }
            
                }
            
              }
            
              if (errorFields) {
                pageLevelErrorDiv.innerHTML = `
                        <p class="govuk-error-summary__title">The following required field(s) are missing:</p>
                        <div class="govuk-error-summary__body">
                        <ul class="govuk-list govuk-error-summary__list">
                             ${errorFields
                  .map(field => `<li><a href="#${field.inputId}" style="color:rgb(212,53,19);">${field.placeholderText}</a></li>`)
                  .join("")}
                        </ul>
                        </div>
                `;
              } else {
                pageLevelErrorDiv.textContent = "";
              }
            }
            
            function monitorVerificationErrors() {
              // Monitor for verification errors and make them visible
              const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                  // Check if any error divs became visible
                  const emailFailRetry = document.getElementById('email_fail_retry');
                  const emailFailNoRetry = document.getElementById('email_fail_no_retry');
                  const emailFailCodeExpired = document.getElementById('email_fail_code_expired');
                  const claimVerificationError = document.getElementById('claimVerificationServerError');
            
                  // If any verification error is shown, make sure it's visible
                  if (emailFailRetry && emailFailRetry.style.display !== 'none') {
                    emailFailRetry.setAttribute('aria-hidden', 'false');
                  }
                  if (emailFailNoRetry && emailFailNoRetry.style.display !== 'none') {
                    emailFailNoRetry.setAttribute('aria-hidden', 'false');
                  }
                  if (emailFailCodeExpired && emailFailCodeExpired.style.display !== 'none') {
                    emailFailCodeExpired.setAttribute('aria-hidden', 'false');
                  }
                });
              });
            
              // Observe the entire form for changes
              const form = document.getElementById('attributeVerification');
              if (form) {
                observer.observe(form, {
                  attributes: true,
                  attributeFilter: ['style', 'aria-hidden'],
                  subtree: true,
                  childList: true
                });
              }
            }
            
            function handleVerifyCodeClick() {
              // Support both old and new B2C element IDs
              const verifyButton = document.getElementById('EmailVerification_but_verify_code') || document.getElementById('email_ver_but_verify');
              const verificationInput = document.getElementById('EmailVerification_ver_input') || document.getElementById('email_ver_input');
            
              if (verifyButton && verificationInput) {
                // Intercept the verify button click
                verifyButton.addEventListener('click', function(e) {
                  // Wait for the AJAX call to complete and check for errors
                  setTimeout(function() {
                    checkAndDisplayVerificationError();
                  }, 500);
            
                  // Also check again after a longer delay in case the request is slow
                  setTimeout(function() {
                    checkAndDisplayVerificationError();
                  }, 1500);
                });
              }
            }
            
            function checkAndDisplayVerificationError() {
              // Try both old and new element ID patterns
              const emailFailRetry = document.getElementById('EmailVerification_error_message') ||
                document.getElementById('email_fail_retry');
              const emailFailNoRetry = document.getElementById('email_fail_no_retry');
              const emailFailCodeExpired = document.getElementById('email_fail_code_expired');
              const claimVerificationError = document.getElementById('claimVerificationServerError');
              const fieldIncorrectError = document.getElementById('fieldIncorrect');
              const verificationInput = document.getElementById('EmailVerification_ver_input') ||
                document.getElementById('email_ver_input');
              const emailSuccess = document.getElementById('EmailVerification_success_message') ||
                document.getElementById('email_success');
            
              // If success is not showing and we have a 6-digit code, there might be an error
              const hasEnteredCode = verificationInput && verificationInput.value.trim().length === 6;
              const successShowing = emailSuccess && (emailSuccess.style.display === 'block' ||
                emailSuccess.style.display === 'inline' ||
                emailSuccess.style.display === '');
            
              if (hasEnteredCode && !successShowing) {
                // Force the retry error message to show
                if (emailFailRetry) {
                  emailFailRetry.style.display = 'block';
                  emailFailRetry.setAttribute('aria-hidden', 'false');
                  emailFailRetry.setAttribute('role', 'alert');
            
                  // Also show it at the page level if not already showing
                  if (fieldIncorrectError && fieldIncorrectError.style.display === 'none') {
                    fieldIncorrectError.style.display = 'block';
                    fieldIncorrectError.setAttribute('aria-hidden', 'false');
                  }
                }
            
                // Check for server error message
                if (claimVerificationError && claimVerificationError.textContent.trim() !== '') {
                  claimVerificationError.style.display = 'block';
                  claimVerificationError.setAttribute('aria-hidden', 'false');
                }
              }
            }
            
            // Also intercept XHR requests to catch the error response directly
            function interceptVerificationRequests() {
              // Store the original XMLHttpRequest
              const originalXHR = window.XMLHttpRequest;
            
              window.XMLHttpRequest = function() {
                const xhr = new originalXHR();
            
                // Store original open and send
                const originalOpen = xhr.open;
                const originalSend = xhr.send;
            
                let isVerifyCodeRequest = false;
            
                xhr.open = function(method, url) {
                  // Check if this is a verification request
                  if (url && url.includes('/VerifyCode')) {
                    isVerifyCodeRequest = true;
                  }
                  return originalOpen.apply(xhr, arguments);
                };
            
                xhr.send =

# ...
# ... The maximum length of GitHub Comment is 65536, so the content is omitted by tfcmt.
# ...

-right-9 {
                  padding-right: 60px !important;
                }
                
                .govuk-\!-static-padding-bottom-9 {
                  padding-bottom: 60px !important;
                }
                
                .govuk-\!-static-padding-left-9 {
                  padding-left: 60px !important;
                }
                
                
                .govuk-\!-text-align-left {
                  text-align: left !important;
                }
                
                .govuk-\!-text-align-centre {
                  text-align: center !important;
                }
                
                .govuk-\!-text-align-right {
                  text-align: right !important;
                }
                
                
                .govuk-\!-font-size-80 {
                  font-size: 3.3125rem !important;
                  line-height: 1.0377358491 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-80 {
                    font-size: 5rem !important;
                    line-height: 1 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-80 {
                    font-size: 53pt !important;
                    line-height: 1.1 !important;
                  }
                }
                
                .govuk-\!-font-size-48 {
                  font-size: 2rem !important;
                  line-height: 1.09375 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-48 {
                    font-size: 3rem !important;
                    line-height: 1.0416666667 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-48 {
                    font-size: 32pt !important;
                    line-height: 1.15 !important;
                  }
                }
                
                .govuk-\!-font-size-36 {
                  font-size: 1.5rem !important;
                  line-height: 1.0416666667 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-36 {
                    font-size: 2.25rem !important;
                    line-height: 1.1111111111 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-36 {
                    font-size: 24pt !important;
                    line-height: 1.05 !important;
                  }
                }
                
                .govuk-\!-font-size-27 {
                  font-size: 1.125rem !important;
                  line-height: 1.1111111111 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-27 {
                    font-size: 1.6875rem !important;
                    line-height: 1.1111111111 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-27 {
                    font-size: 18pt !important;
                    line-height: 1.15 !important;
                  }
                }
                
                .govuk-\!-font-size-24 {
                  font-size: 1.125rem !important;
                  line-height: 1.1111111111 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-24 {
                    font-size: 1.5rem !important;
                    line-height: 1.25 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-24 {
                    font-size: 18pt !important;
                    line-height: 1.15 !important;
                  }
                }
                
                .govuk-\!-font-size-19 {
                  font-size: 1rem !important;
                  line-height: 1.25 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-19 {
                    font-size: 1.1875rem !important;
                    line-height: 1.3157894737 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-19 {
                    font-size: 14pt !important;
                    line-height: 1.15 !important;
                  }
                }
                
                .govuk-\!-font-size-16 {
                  font-size: 0.875rem !important;
                  line-height: 1.1428571429 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-16 {
                    font-size: 1rem !important;
                    line-height: 1.25 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-16 {
                    font-size: 14pt !important;
                    line-height: 1.2 !important;
                  }
                }
                
                .govuk-\!-font-size-14 {
                  font-size: 0.75rem !important;
                  line-height: 1.25 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-14 {
                    font-size: 0.875rem !important;
                    line-height: 1.4285714286 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-14 {
                    font-size: 12pt !important;
                    line-height: 1.2 !important;
                  }
                }
                
                .govuk-\!-font-weight-regular {
                  font-weight: 400 !important;
                }
                
                .govuk-\!-font-weight-bold {
                  font-weight: 700 !important;
                }
                
                .govuk-\!-font-tabular-numbers {
                  font-variant-numeric: tabular-nums !important;
                }
                
                .govuk-\!-text-break-word {
                  word-wrap: break-word !important;
                  overflow-wrap: break-word !important;
                }
                
                
                .govuk-\!-width-full {
                  width: 100% !important;
                }
                
                .govuk-\!-width-three-quarters,
                #api input:not([type='checkbox'])  {
                  width: 100% !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-width-three-quarters,
                  #api input:not([type='checkbox']) {
                    width: 75% !important;
                  }
                }
                
                .govuk-\!-width-two-thirds {
                  width: 100% !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-width-two-thirds {
                    width: 66.66% !important;
                  }
                }
                
                .govuk-\!-width-one-half {
                  width: 100% !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-width-one-half {
                    width: 50% !important;
                  }
                }
                
                .govuk-\!-width-one-third {
                  width: 100% !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-width-one-third {
                    width: 33.33% !important;
                  }
                }
                
                .govuk-\!-width-one-quarter {
                  width: 100% !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-width-one-quarter {
                    width: 25% !important;
                  }
                }
                .video-wrapper {
                  border: 4px solid #0b0c0c;
                  margin-bottom: 30px;
                  padding: 4px;
                  position: relative;
                }
                
                .loading-gif {
                  left: 50%;
                  position: absolute;
                  top: 50%;
                  transform: translate(-50%, -50%);
                }
                
                .loading-box {
                  aspect-ratio: 16/9;
                  border: 4px solid #0b0c0c;
                  width: 100%;
                }
                .loading-box img {
                  width: 100px;
                }
                
                .loading-container {
                  align-items: center;
                  display: flex;
                  height: 100%;
                  justify-content: center;
                  width: 100%;
                }
                
                .terms-box {
                  max-height: 300px;
                  overflow-y: auto;
                  padding: 15px;
                  font-size: 0.9em;
                }
                
                .terms-text ol ol {
                  list-style-type: lower-alpha;
                }
                
                .sr-only {
                  position: absolute;
                  width: 1px;
                  height: 1px;
                  padding: 0;
                  margin: -1px;
                  overflow: hidden;
                  clip: rect(0, 0, 0, 0);
                  white-space: nowrap;
                  border: 0;
                }
                
                /* ======================= */
                /* B2C padding and margins */
                /* ======================= */
                
                .govuk-body-m, .govuk-body, .intro, div .attrEntry div, .error, .attrEntry label {
                  color: #0b0c0c;
                  font-family: "GDS Transport", arial, sans-serif;
                  -webkit-font-smoothing: antialiased;
                  -moz-osx-font-smoothing: grayscale;
                  font-weight: 400;
                  font-size: 16px;
                  font-size: 1rem;
                  line-height: 1.25;
                  margin-top: 0;
                  margin-bottom: 15px;
                }
                
                @media print {
                  .govuk-body-m, .govuk-body, .intro, div .attrEntry div, .error, .attrEntry label {
                    color: #000000;
                  }
                }
                
                @media print {
                  .govuk-body-m, .govuk-body, .intro, div .attrEntry div, .error, .attrEntry label {
                    font-family: sans-serif;
                  }
                }
                
                @media (min-width: 40.0625em) {
                  .govuk-body-m, .govuk-body, .intro, div .attrEntry div, .error, .attrEntry label {
                    font-size: 19px;
                    font-size: 1.1875rem;
                    line-height: 1.31579;
                  }
                }
                
                @media print {
                  .govuk-body-m, .govuk-body, .intro, div .attrEntry div, .error, .attrEntry label {
                    font-size: 14pt;
                    line-height: 1.15;
                  }
                }
                
                @media (min-width: 40.0625em) {
                  .govuk-body-m, .govuk-body, .intro, div .attrEntry div, .error, .attrEntry label {
                    margin-bottom: 20px;
                  }
                }
                
                .govuk-body-m + .govuk-heading-l, .govuk-body + .govuk-heading-l, .intro + .govuk-heading-l, div .attrEntry div + .govuk-heading-l, .error + .govuk-heading-l, .attrEntry label + .govuk-heading-l,
                .govuk-body-s + .govuk-heading-l,
                .govuk-list + .govuk-heading-l {
                  padding-top: 15px;
                }
                
                @media (min-width: 40.0625em) {
                  .govuk-body-m + .govuk-heading-l, .govuk-body + .govuk-heading-l, .intro + .govuk-heading-l, div .attrEntry div + .govuk-heading-l, .error + .govuk-heading-l, .attrEntry label + .govuk-heading-l,
                  .govuk-body-s + .govuk-heading-l,
                  .govuk-list + .govuk-heading-l {
                    padding-top: 20px;
                  }
                }
                
                .govuk-body-m + .govuk-heading-m, .govuk-body + .govuk-heading-m, .intro + .govuk-heading-m, div .attrEntry div + .govuk-heading-m, .error + .govuk-heading-m, .attrEntry label + .govuk-heading-m,
                .govuk-body-s + .govuk-heading-m,
                .govuk-list + .govuk-heading-m,
                .govuk-body-m + .govuk-heading-s,
                .govuk-body + .govuk-heading-s,
                .intro + .govuk-heading-s,
                div .attrEntry div + .govuk-heading-s,
                .error + .govuk-heading-s,
                .attrEntry label + .govuk-heading-s,
                .govuk-body-s + .govuk-heading-s,
                .govuk-list + .govuk-heading-s {
                  padding-top: 5px;
                }
                
                @media (min-width: 40.0625em) {
                  .govuk-body-m + .govuk-heading-m, .govuk-body + .govuk-heading-m, .intro + .govuk-heading-m, div .attrEntry div + .govuk-heading-m, .error + .govuk-heading-m, .attrEntry label + .govuk-heading-m,
                  .govuk-body-s + .govuk-heading-m,
                  .govuk-list + .govuk-heading-m,
                  .govuk-body-m + .govuk-heading-s,
                  .govuk-body + .govuk-heading-s,
                  .intro + .govuk-heading-s,
                  div .attrEntry div + .govuk-heading-s,
                  .error + .govuk-heading-s,
                  .attrEntry label + .govuk-heading-s,
                  .govuk-body-s + .govuk-heading-s,
                  .govuk-list + .govuk-heading-s {
                    padding-top: 10px;
                  }
                }
                
                #api {
                  font-family: "GDS Transport",arial,sans-serif;
                }
                
                #api .create a {
                  margin-left: 10px;
                }
                
                div .attrEntry div.error {
                  color: #d4351c;
                  display: none;
                }
                
                div .attrEntry div.show {
                  display: block !important;
                }
                
                .error {
                  color: #d4351c !important;
                }
                
                .entry-item {
                  margin-bottom: 30px;
                }
                
                .entry-item input,
                .textInput  {
                  font-family: 'GDS Transport', arial, sans-serif;
                  font-size: 19px;
                  font-size: 1.1875rem;
                  line-height: 1.31579;
                  font-family: "GDS Transport", arial, sans-serif;
                  -webkit-font-smoothing: antialiased;
                  -moz-osx-font-smoothing: grayscale;
                
                  -webkit-writing-mode: horizontal-tb !important;
                  text-rendering: auto;
                  color: -internal-light-dark(black, white);
                  letter-spacing: normal;
                  word-spacing: normal;
                  line-height: normal;
                  text-transform: none;
                  text-indent: 0px;
                  text-shadow: none;
                  display: inline-block;
                  text-align: start;
                  appearance: auto;
                  -webkit-rtl-ordering: logical;
                  cursor: text;
                
                  font-weight: 400;
                  font-size: 16px;
                  font-size: 1rem;
                  line-height: 1.25;
                  box-sizing: border-box;
                  width: 250px;
                  height: 40px;
                  margin-top: 0;
                  padding: 5px;
                  border: 2px solid #0b0c0c;
                  border-radius: 0;
                  -webkit-appearance: none;
                  -moz-appearance: none;
                  appearance: none;
                }
                
                .entry-item label, .attrEntry label {
                  font-size: 19px;
                  font-size: 1.1875rem;
                  line-height: 1.31579;
                  font-family: "GDS Transport", arial, sans-serif;
                  -webkit-font-smoothing: antialiased;
                  -moz-osx-font-smoothing: grayscale;
                  font-weight: 400;
                  line-height: 1.25;
                  color: #0b0c0c;
                  display: block;
                  margin-bottom: 5px;
                }
                
                .attr > ul {
                  list-style: none;
                  padding: 0;
                  margin: 0;
                }
                
                .attrEntry {
                  margin-bottom: 30px;
                }
                
                .helpLink {
                  margin-top: 10px;
                  display: block;
                }
                
                .buttons {
                  margin-top: 10px;
                }
                
                input[type="checkbox"] {
                  width: 44px;
                  height: 44px;
                  margin: 0;
                  cursor: pointer;
                  outline: 2px solid #000000;
                  border: 0;
                  opacity: 1;
                  accent-color: #ffffff;
                }
                
                #api .helpLink {
                  display: none;
                }
                
                #api .verify {
                  margin-top: 20px;
                  margin-right: 0;
                }
                
                #api .verify label {
                  display: block;
                  width: 100%;
                }
                
                #api .verify input {
                  display: block;
                  margin-right: 25%;
                }
                
                #api .verify button {
                  display: block;
                  margin-top: 20px;
                  margin-right: 0;
                  margin-bottom: 0;
                }
                #api .verify .verifyButton {
                  margin-right: 15px;
                }
                #attributeVerification #attributeList {
                  border-bottom: 1px solid #b1b4b6;
                  margin-bottom: 25px;
                }
                #api #retryCode {
                  cursor: pointer;
                }
                .changeClaims {
                  visibility: hidden;
                }
                
                .verificationControlContent ul {
                  padding-inline-start: 0;
                }
                
                /* Hide the verification blurb */
                #attributeVerification #verifying_blurb {
                  display: none !important;
                  visibility: hidden !important;
                }
                
                /* hide send new code button on sign up for consistency with other flows */
                #EmailVerification_but_send_new_code {
                  display: none;
                  visibility: hidden;
                }
              + 
              + .no-margin {
              +   margin: 0!important;
              + }
            EOT
          ~ content_md5   = "fff6dfaa7446a767aee9fffc0b378f77" -> "35564488ce678598bdc45c014264399f"
            name          = "main.css"
            # (4 unchanged attributes hidden)
        }
    }
ℹ️ Objects have changed outside of Terraform

This feature was introduced from Terraform v0.15.4.

Terraform detected the following changes made outside of Terraform since the
last "terraform apply" which may have affected this plan:

  # module.finalsa_storage_account.azurerm_storage_account.storage_account has changed
  ~ resource "azurerm_storage_account" "storage_account" {
        id                                 = "/subscriptions/74dacd4f-a248-45bb-a2f0-af700dc4cf68/resourceGroups/pre-stg/providers/Microsoft.Storage/storageAccounts/prefinalsastg"
        name                               = "prefinalsastg"
      ~ primary_access_key                 = (sensitive value)
      ~ primary_blob_connection_string     = (sensitive value)
      ~ primary_connection_string          = (sensitive value)
      ~ secondary_access_key               = (sensitive value)
      ~ secondary_connection_string        = (sensitive value)
        tags                               = {
            "application"         = "pre-recorded-evidence"
            "autoShutdown"        = "true"
            "builtFrom"           = "https://github.com/HMCTS/pre-shared-infrastructure.git"
            "businessArea"        = "Cross-Cutting"
            "contactSlackChannel" = "#dts-pre-rec-evidence-tech"
            "environment"         = "staging"
            "managedBy"           = "Pre Recorded Evidence"
        }
        # (92 unchanged attributes hidden)

        # (3 unchanged blocks hidden)
    }

  # module.ingestsa_storage_account.azurerm_storage_account.storage_account has changed
  ~ resource "azurerm_storage_account" "storage_account" {
        id                                 = "/subscriptions/74dacd4f-a248-45bb-a2f0-af700dc4cf68/resourceGroups/pre-stg/providers/Microsoft.Storage/storageAccounts/preingestsastg"
        name                               = "preingestsastg"
      ~ primary_access_key                 = (sensitive value)
      ~ primary_blob_connection_string     = (sensitive value)
      ~ primary_connection_string          = (sensitive value)
      ~ secondary_access_key               = (sensitive value)
      ~ secondary_connection_string        = (sensitive value)
        tags                               = {
            "application"         = "pre-recorded-evidence"
            "autoShutdown"        = "true"
            "builtFrom"           = "https://github.com/HMCTS/pre-shared-infrastructure.git"
            "businessArea"        = "Cross-Cutting"
            "contactSlackChannel" = "#dts-pre-rec-evidence-tech"
            "environment"         = "staging"
            "managedBy"           = "Pre Recorded Evidence"
        }
        # (92 unchanged attributes hidden)

        # (3 unchanged blocks hidden)
    }


Unless you have made equivalent changes to your configuration, or ignored the

@hmcts-jenkins-cnp

hmcts-jenkins-cnp Bot commented May 20, 2026

Copy link
Copy Markdown
Contributor

Plan Result (prod)

⚠️ Resource Deletion will happen

This plan contains resource delete operation. Please check the plan result very carefully!

Plan: 2 to add, 6 to change, 2 to destroy.
  • Update
    • azurerm_key_vault_secret.finalsa_storage_account_connection_string
    • azurerm_key_vault_secret.finalsa_storage_account_primary_access_key
    • azurerm_key_vault_secret.ingestsa_storage_account_connection_string
    • azurerm_monitor_metric_alert.storage_final_alert_capacity[0]
    • module.finalsa_storage_account.azurerm_storage_account.storage_account
    • module.ingestsa_storage_account.azurerm_storage_account.storage_account
  • Replace
    • azurerm_storage_blob.b2c_config["b2c.js"]
    • azurerm_storage_blob.b2c_config["main.css"]
Change Result (Click me)

⚠️ The content is omitted as it is too long. ⚠️

  # azurerm_key_vault_secret.finalsa_storage_account_connection_string will be updated in-place
  ~ resource "azurerm_key_vault_secret" "finalsa_storage_account_connection_string" {
        id                      = "https://pre-hmctskv-prod.vault.azure.net/secrets/finalsa-storage-account-connection-string/7b97b229bbb148a1a5c4735d9a53c190"
        name                    = "finalsa-storage-account-connection-string"
      ~ tags                    = {
          - "file-encoding" = "utf-8" -> null
        }
      ~ value                   = (sensitive value)
        # (10 unchanged attributes hidden)
    }

  # azurerm_key_vault_secret.finalsa_storage_account_primary_access_key will be updated in-place
  ~ resource "azurerm_key_vault_secret" "finalsa_storage_account_primary_access_key" {
        id                      = "https://pre-hmctskv-prod.vault.azure.net/secrets/finalsa-storage-account-primary-access-key/d2e0e2999f954c02afd2c95838a53c8e"
        name                    = "finalsa-storage-account-primary-access-key"
      ~ tags                    = {
          - "file-encoding" = "utf-8" -> null
        }
      ~ value                   = (sensitive value)
        # (10 unchanged attributes hidden)
    }

  # azurerm_key_vault_secret.ingestsa_storage_account_connection_string will be updated in-place
  ~ resource "azurerm_key_vault_secret" "ingestsa_storage_account_connection_string" {
        id                      = "https://pre-hmctskv-prod.vault.azure.net/secrets/ingestsa-storage-account-connection-string/d88f1e795ebc4ab98e5db7bf59e953d4"
        name                    = "ingestsa-storage-account-connection-string"
      ~ tags                    = {
          - "file-encoding" = "utf-8" -> null
        }
      ~ value                   = (sensitive value)
        # (10 unchanged attributes hidden)
    }

  # azurerm_monitor_metric_alert.storage_final_alert_capacity[0] will be updated in-place
  ~ resource "azurerm_monitor_metric_alert" "storage_final_alert_capacity" {
        id                       = "/subscriptions/5ca62022-6aa2-4cee-aaa7-e7536c8d566c/resourceGroups/pre-prod/providers/Microsoft.Insights/metricAlerts/used_capacity"
        name                     = "used_capacity"
      ~ scopes                   = [
          - "/subscriptions/5ca62022-6aa2-4cee-aaa7-e7536c8d566c/resourceGroups/pre-prod/providers/Microsoft.Storage/storageAccounts/preingestsaprod",
          + "/subscriptions/5ca62022-6aa2-4cee-aaa7-e7536c8d566c/resourceGroups/pre-prod/providers/Microsoft.Storage/storageAccounts/prefinalsaprod",
        ]
        tags                     = {
            "application"         = "pre-recorded-evidence"
            "builtFrom"           = "https://github.com/HMCTS/pre-shared-infrastructure.git"
            "businessArea"        = "Cross-Cutting"
            "contactSlackChannel" = "#dts-pre-rec-evidence-tech"
            "environment"         = "production"
            "managedBy"           = "Pre Recorded Evidence"
        }
        # (9 unchanged attributes hidden)

        # (2 unchanged blocks hidden)
    }

  # azurerm_storage_blob.b2c_config["b2c.js"] must be replaced
-/+ resource "azurerm_storage_blob" "b2c_config" {
      ~ access_tier            = "Hot" -> (known after apply)
      ~ id                     = "https://presaprod.blob.core.windows.net/pre-b2c-container/js/b2c.js" -> (known after apply)
      ~ metadata               = {} -> (known after apply)
        name                   = "js/b2c.js"
      ~ source_content         = <<-EOT # forces replacement
            function moveForgotPassword() {
              const forgotPasswordId = 'forgotPassword'
              const forgotPassword = document.getElementById(forgotPasswordId);
            
              if (forgotPassword) {
                const text = forgotPassword.innerHTML;
                forgotPassword.remove();
            
                const newForgotPassword = document.createElement('a');
                newForgotPassword.id = forgotPasswordId;
                newForgotPassword.innerHTML = text;
                newForgotPassword.href = forgotPassword.href;
            
                const div = document.createElement('div');
                div.appendChild(newForgotPassword);
            
                const passwordInput = document.getElementById('password');
                passwordInput.parentNode.insertBefore(div, passwordInput.nextSibling);
              }
            }
            
            function moveRetryCode() {
              const retryCode = document.getElementById('retryCode');
            
              if (retryCode) {
                const text = retryCode.innerHTML;
                retryCode.remove();
            
                const newRetryCode = document.createElement('a');
                newRetryCode.id = 'retryCode';
                newRetryCode.innerHTML = text;
            
                const div = document.createElement('div');
                div.appendChild(newRetryCode);
            
                const verificationCodeInput = document.getElementById('verificationCode');
                verificationCodeInput.parentNode.insertBefore(div, verificationCodeInput.nextSibling);
              }
            }
            
          + function addFormSectionHeader() {
          +   const emailAddressInput = document.getElementById('signInName');
          +   if (!emailAddressInput) return;
          + 
          +   const header = document.createElement('h2');
          +   header.textContent = 'Existing user';
          + 
          +   const formSection = emailAddressInput.parentNode;
          +   formSection.before(header);
          + }
          + 
          + function moveAndUpdateSignUpSection() {
          +   const signUpSection = document.querySelector('.create');
          +   const formSection = document.querySelector('.entry');
          + 
          +   if (!signUpSection || !formSection) return;
          + 
          +   const newSiblingNode = formSection;
          +   moveSignUpSection(signUpSection, newSiblingNode);
          + 
          +   addHeaderToSignUpSection(signUpSection);
          +   updateSignUpSectionBody(signUpSection);
          +   removeDivider();
          +   addOrDivider(signUpSection);
          + }
          + 
          + function moveSignUpSection(signUpSection, newSiblingNode) {
          +   newSiblingNode.parentNode.insertBefore(signUpSection, newSiblingNode);
          + }
          + 
          + function addHeaderToSignUpSection(signUpSection) {
          +   const signUpHeader = document.createElement('h2');
          +   signUpHeader.id = 'signUpNowHeader';
          +   signUpHeader.textContent = 'First time here?';
          +   signUpSection.insertBefore(signUpHeader, signUpSection.firstChild);
          + }
          + 
          + function updateSignUpSectionBody(signUpSection) {
          +   const signUpBody = signUpSection.getElementsByTagName('p')[0];
          +   if (!signUpBody) return;
          + 
          +   // Change the font size
          +   signUpBody.classList.add('govuk-label');
          +   
          +   const signUpLink = signUpBody.querySelector('#createAccount') || signUpBody.querySelector('a');
          +   if (!signUpLink) return;
          + 
          +   // Find existing leading text node
          +   const leadingTextNode = Array.from(signUpBody.childNodes)
          +     .find(node => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '');
          + 
          +   const newSignUpBodyText = 'You need to register in the address book.';
          + 
          +   if (leadingTextNode) {
          +     leadingTextNode.textContent = newSignUpBodyText;
          +   } else {
          +     signUpBody.insertBefore(
          +       document.createTextNode(newSignUpBodyText),
          +       signUpLink
          +     );
          +   }
          + }
          + 
          + function removeDivider() {
          +   // Remove the "OR" divider section
          +   const divider = document.querySelector('.divider');
          +   if (!divider) return;
          +   divider.remove();
          + }
          + 
          + function addOrDivider(nodeToInsertAfter) {
          +   // Add an "OR" divider section
          +   if (!nodeToInsertAfter) return;
          +   const orDivider = document.createElement('h2');
          +   orDivider.textContent = 'OR';
          + 
          +   nodeToInsertAfter.parentNode.insertBefore(orDivider, nodeToInsertAfter.nextSibling);
          + }
          + 
          + function updatePageHeader() {
          +   const heading = document.querySelector(".intro h2");
          +   heading.classList.add("no-margin");
          + }
          + 
            function addTsAndCsLink() {
              const tsAndCsBlock = document.getElementsByClassName('CheckboxMultiSelect')[0];
              if (tsAndCsBlock) {
                const tsAndCsLabel = tsAndCsBlock.getElementsByTagName('label')[0];
                const tsAndCsText = tsAndCsBlock.getElementsByTagName('label')[1];
                // fix the wrong for attribute supplied by B2C
                tsAndCsLabel.setAttribute('for', tsAndCsText.getAttribute('for'));
                if (tsAndCsText) {
                  tsAndCsText.innerHTML = tsAndCsText.innerHTML = 'I agree to the <a href="https://portal.pre-recorded-evidence.justice.gov.uk/terms-and-conditions" target="_blank">Terms &amp; Conditions</a> (including Acceptable Use) for the Section 28 Video on Demand Portal.'
                }
              }
            }
            
            function addPasswordCriteria() {
              const passwordAttrEntry = document.querySelector('#attributeList li.Password .attrEntry');
              if (passwordAttrEntry) {
                // passwordAttrEntry.setAttribute('style', 'margin-bottom: 2px;');
                const passwordDetails = document.createElement('details');
                passwordDetails.setAttribute('class', 'govuk-details');
                passwordDetails.setAttribute('data-module', 'govuk-details');
                passwordDetails.setAttribute('style', 'margin-top: 2px;');
                passwordDetails.innerHTML = '<summary class="govuk-details__summary">\n' +
                  '                          <span class="govuk-details__summary-text">Password criteria</span>\n' +
                  '                        </summary>\n' +
                  '                        <div class="govuk-details__text">\n' +
                  '                          Passwords must have at least 8 characters. <br />\n' +
                  '                          Passwords must contain characters from at least three of the\n' +
                  '                          following four classes: uppercase, lowercase, digit, and\n' +
                  '                          non-alphanumeric (special).\n' +
                  '                        </div>';
                passwordAttrEntry.appendChild(passwordDetails);
              }
            }
            
            function lowerCaseEmailAddresses() {
              // for our TLD email validation policy to work, we need the tld to be in lowercase...
              const emailInput = document.getElementById('email');
              if (emailInput) {
                emailInput.onblur = function () {
                  emailInput.value = emailInput.value.toLowerCase();
                }
              }
              const signInName = document.getElementById('signInName');
              if (signInName) {
                signInName.onblur = function () {
                  signInName.value = signInName.value.toLowerCase();
                }
              }
            }
            
            function removeAutofocus() {
              const inputFields = document.getElementsByTagName('input');
              for (let i = 0; i < inputFields.length; i++) {
                inputFields[i].removeAttribute('autofocus');
                inputFields[i].blur();
              }
            }
            
            function addDescriptiveErrors() {
              const verifyButton = document.getElementById('email_ver_but_send');
              const continueButton = document.getElementById('continue');
              const emailButton = document.getElementById('email');
            
              if (continueButton) {
                continueButton.addEventListener('click', validateErrors);
              }
            
              if (verifyButton) {
                verifyButton.addEventListener('click', validateErrors);
              }
            
              if (emailButton) {
                emailButton.addEventListener('click', validateErrors);
              }
            }
            
            function validateErrors() {
              const errorDivs = document.getElementsByClassName('error itemLevel');
              const pageLevelErrorDiv = document.getElementById('requiredFieldMissing');
              const errorFields = []
            
              if (errorDivs) {
                for (let i = 0; i < errorDivs.length; i++) {
                  const input = errorDivs[i].nextElementSibling;
            
                  if (input && input.tagName.toLowerCase() === 'input' && input.value.trim() === '') {
                    const placeholderText = input.getAttribute('placeholder');
                    const inputId = input.getAttribute('id');
            
                    errorFields.push({
                      placeholderText: placeholderText,
                      inputId: inputId
                    });
                    errorDivs[i].textContent = `This field is required: ${placeholderText.toLowerCase()}`;
            
                    pageLevelErrorDiv.className = "govuk-error-summary";
            
                  } else {
                    errorDivs[i].textContent = ''
                  }
            
                }
            
              }
            
              if (errorFields) {
                pageLevelErrorDiv.innerHTML = `
                        <p class="govuk-error-summary__title">The following required field(s) are missing:</p>
                        <div class="govuk-error-summary__body">
                        <ul class="govuk-list govuk-error-summary__list">
                             ${errorFields
                  .map(field => `<li><a href="#${field.inputId}" style="color:rgb(212,53,19);">${field.placeholderText}</a></li>`)
                  .join("")}
                        </ul>
                        </div>
                `;
              } else {
                pageLevelErrorDiv.textContent = "";
              }
            }
            
            function monitorVerificationErrors() {
              // Monitor for verification errors and make them visible
              const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                  // Check if any error divs became visible
                  const emailFailRetry = document.getElementById('email_fail_retry');
                  const emailFailNoRetry = document.getElementById('email_fail_no_retry');
                  const emailFailCodeExpired = document.getElementById('email_fail_code_expired');
                  const claimVerificationError = document.getElementById('claimVerificationServerError');
            
                  // If any verification error is shown, make sure it's visible
                  if (emailFailRetry && emailFailRetry.style.display !== 'none') {
                    emailFailRetry.setAttribute('aria-hidden', 'false');
                  }
                  if (emailFailNoRetry && emailFailNoRetry.style.display !== 'none') {
                    emailFailNoRetry.setAttribute('aria-hidden', 'false');
                  }
                  if (emailFailCodeExpired && emailFailCodeExpired.style.display !== 'none') {
                    emailFailCodeExpired.setAttribute('aria-hidden', 'false');
                  }
                });
              });
            
              // Observe the entire form for changes
              const form = document.getElementById('attributeVerification');
              if (form) {
                observer.observe(form, {
                  attributes: true,
                  attributeFilter: ['style', 'aria-hidden'],
                  subtree: true,
                  childList: true
                });
              }
            }
            
            function handleVerifyCodeClick() {
              // Support both old and new B2C element IDs
              const verifyButton = document.getElementById('EmailVerification_but_verify_code') || document.getElementById('email_ver_but_verify');
              const verificationInput = document.getElementById('EmailVerification_ver_input') || document.getElementById('email_ver_input');
            
              if (verifyButton && verificationInput) {
                // Intercept the verify button click
                verifyButton.addEventListener('click', function(e) {
                  // Wait for the AJAX call to complete and check for errors
                  setTimeout(function() {
                    checkAndDisplayVerificationError();
                  }, 500);
            
                  // Also check again after a longer delay in case the request is slow
                  setTimeout(function() {
                    checkAndDisplayVerificationError();
                  }, 1500);
                });
              }
            }
            
            function checkAndDisplayVerificationError() {
              // Try both old and new element ID patterns
              const emailFailRetry = document.getElementById('EmailVerification_error_message') ||
                document.getElementById('email_fail_retry');
              const emailFailNoRetry = document.getElementById('email_fail_no_retry');
              const emailFailCodeExpired = document.getElementById('email_fail_code_expired');
              const claimVerificationError = document.getElementById('claimVerificationServerError');
              const fieldIncorrectError = document.getElementById('fieldIncorrect');
              const verificationInput = document.getElementById('EmailVerification_ver_input') ||
                document.getElementById('email_ver_input');
              const emailSuccess = document.getElementById('EmailVerification_success_message') ||
                document.getElementById('email_success');
            
              // If success is not showing and we have a 6-digit code, there might be an error
              const hasEnteredCode = verificationInput && verificationInput.value.trim().length === 6;
              const successShowing = emailSuccess && (emailSuccess.style.display === 'block' ||
                emailSuccess.style.display === 'inline' ||
                emailSuccess.style.display === '');
            
              if (hasEnteredCode && !successShowing) {
                // Force the retry error message to show
                if (emailFailRetry) {
                  emailFailRetry.style.display = 'block';
                  emailFailRetry.setAttribute('aria-hidden', 'false');
                  emailFailRetry.setAttribute('role', 'alert');
            
                  // Also show it at the page level if not already showing
                  if (fieldIncorrectError && fieldIncorrectError.style.display === 'none') {
                    fieldIncorrectError.style.display = 'block';
                    fieldIncorrectError.setAttribute('aria-hidden', 'false');
                  }
                }
            
                // Check for server error message
                if (claimVerificationError && claimVerificationError.textContent.trim() !== '') {
                  claimVerificationError.style.display = 'block';


# ...
# ... The maximum length of GitHub Comment is 65536, so the content is omitted by tfcmt.
# ...

-right-9 {
                  padding-right: 60px !important;
                }
                
                .govuk-\!-static-padding-bottom-9 {
                  padding-bottom: 60px !important;
                }
                
                .govuk-\!-static-padding-left-9 {
                  padding-left: 60px !important;
                }
                
                
                .govuk-\!-text-align-left {
                  text-align: left !important;
                }
                
                .govuk-\!-text-align-centre {
                  text-align: center !important;
                }
                
                .govuk-\!-text-align-right {
                  text-align: right !important;
                }
                
                
                .govuk-\!-font-size-80 {
                  font-size: 3.3125rem !important;
                  line-height: 1.0377358491 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-80 {
                    font-size: 5rem !important;
                    line-height: 1 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-80 {
                    font-size: 53pt !important;
                    line-height: 1.1 !important;
                  }
                }
                
                .govuk-\!-font-size-48 {
                  font-size: 2rem !important;
                  line-height: 1.09375 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-48 {
                    font-size: 3rem !important;
                    line-height: 1.0416666667 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-48 {
                    font-size: 32pt !important;
                    line-height: 1.15 !important;
                  }
                }
                
                .govuk-\!-font-size-36 {
                  font-size: 1.5rem !important;
                  line-height: 1.0416666667 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-36 {
                    font-size: 2.25rem !important;
                    line-height: 1.1111111111 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-36 {
                    font-size: 24pt !important;
                    line-height: 1.05 !important;
                  }
                }
                
                .govuk-\!-font-size-27 {
                  font-size: 1.125rem !important;
                  line-height: 1.1111111111 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-27 {
                    font-size: 1.6875rem !important;
                    line-height: 1.1111111111 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-27 {
                    font-size: 18pt !important;
                    line-height: 1.15 !important;
                  }
                }
                
                .govuk-\!-font-size-24 {
                  font-size: 1.125rem !important;
                  line-height: 1.1111111111 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-24 {
                    font-size: 1.5rem !important;
                    line-height: 1.25 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-24 {
                    font-size: 18pt !important;
                    line-height: 1.15 !important;
                  }
                }
                
                .govuk-\!-font-size-19 {
                  font-size: 1rem !important;
                  line-height: 1.25 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-19 {
                    font-size: 1.1875rem !important;
                    line-height: 1.3157894737 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-19 {
                    font-size: 14pt !important;
                    line-height: 1.15 !important;
                  }
                }
                
                .govuk-\!-font-size-16 {
                  font-size: 0.875rem !important;
                  line-height: 1.1428571429 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-16 {
                    font-size: 1rem !important;
                    line-height: 1.25 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-16 {
                    font-size: 14pt !important;
                    line-height: 1.2 !important;
                  }
                }
                
                .govuk-\!-font-size-14 {
                  font-size: 0.75rem !important;
                  line-height: 1.25 !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-font-size-14 {
                    font-size: 0.875rem !important;
                    line-height: 1.4285714286 !important;
                  }
                }
                @media print {
                  .govuk-\!-font-size-14 {
                    font-size: 12pt !important;
                    line-height: 1.2 !important;
                  }
                }
                
                .govuk-\!-font-weight-regular {
                  font-weight: 400 !important;
                }
                
                .govuk-\!-font-weight-bold {
                  font-weight: 700 !important;
                }
                
                .govuk-\!-font-tabular-numbers {
                  font-variant-numeric: tabular-nums !important;
                }
                
                .govuk-\!-text-break-word {
                  word-wrap: break-word !important;
                  overflow-wrap: break-word !important;
                }
                
                
                .govuk-\!-width-full {
                  width: 100% !important;
                }
                
                .govuk-\!-width-three-quarters,
                #api input:not([type='checkbox'])  {
                  width: 100% !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-width-three-quarters,
                  #api input:not([type='checkbox']) {
                    width: 75% !important;
                  }
                }
                
                .govuk-\!-width-two-thirds {
                  width: 100% !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-width-two-thirds {
                    width: 66.66% !important;
                  }
                }
                
                .govuk-\!-width-one-half {
                  width: 100% !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-width-one-half {
                    width: 50% !important;
                  }
                }
                
                .govuk-\!-width-one-third {
                  width: 100% !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-width-one-third {
                    width: 33.33% !important;
                  }
                }
                
                .govuk-\!-width-one-quarter {
                  width: 100% !important;
                }
                @media (min-width: 40.0625em) {
                  .govuk-\!-width-one-quarter {
                    width: 25% !important;
                  }
                }
                .video-wrapper {
                  border: 4px solid #0b0c0c;
                  margin-bottom: 30px;
                  padding: 4px;
                  position: relative;
                }
                
                .loading-gif {
                  left: 50%;
                  position: absolute;
                  top: 50%;
                  transform: translate(-50%, -50%);
                }
                
                .loading-box {
                  aspect-ratio: 16/9;
                  border: 4px solid #0b0c0c;
                  width: 100%;
                }
                .loading-box img {
                  width: 100px;
                }
                
                .loading-container {
                  align-items: center;
                  display: flex;
                  height: 100%;
                  justify-content: center;
                  width: 100%;
                }
                
                .terms-box {
                  max-height: 300px;
                  overflow-y: auto;
                  padding: 15px;
                  font-size: 0.9em;
                }
                
                .terms-text ol ol {
                  list-style-type: lower-alpha;
                }
                
                .sr-only {
                  position: absolute;
                  width: 1px;
                  height: 1px;
                  padding: 0;
                  margin: -1px;
                  overflow: hidden;
                  clip: rect(0, 0, 0, 0);
                  white-space: nowrap;
                  border: 0;
                }
                
                /* ======================= */
                /* B2C padding and margins */
                /* ======================= */
                
                .govuk-body-m, .govuk-body, .intro, div .attrEntry div, .error, .attrEntry label {
                  color: #0b0c0c;
                  font-family: "GDS Transport", arial, sans-serif;
                  -webkit-font-smoothing: antialiased;
                  -moz-osx-font-smoothing: grayscale;
                  font-weight: 400;
                  font-size: 16px;
                  font-size: 1rem;
                  line-height: 1.25;
                  margin-top: 0;
                  margin-bottom: 15px;
                }
                
                @media print {
                  .govuk-body-m, .govuk-body, .intro, div .attrEntry div, .error, .attrEntry label {
                    color: #000000;
                  }
                }
                
                @media print {
                  .govuk-body-m, .govuk-body, .intro, div .attrEntry div, .error, .attrEntry label {
                    font-family: sans-serif;
                  }
                }
                
                @media (min-width: 40.0625em) {
                  .govuk-body-m, .govuk-body, .intro, div .attrEntry div, .error, .attrEntry label {
                    font-size: 19px;
                    font-size: 1.1875rem;
                    line-height: 1.31579;
                  }
                }
                
                @media print {
                  .govuk-body-m, .govuk-body, .intro, div .attrEntry div, .error, .attrEntry label {
                    font-size: 14pt;
                    line-height: 1.15;
                  }
                }
                
                @media (min-width: 40.0625em) {
                  .govuk-body-m, .govuk-body, .intro, div .attrEntry div, .error, .attrEntry label {
                    margin-bottom: 20px;
                  }
                }
                
                .govuk-body-m + .govuk-heading-l, .govuk-body + .govuk-heading-l, .intro + .govuk-heading-l, div .attrEntry div + .govuk-heading-l, .error + .govuk-heading-l, .attrEntry label + .govuk-heading-l,
                .govuk-body-s + .govuk-heading-l,
                .govuk-list + .govuk-heading-l {
                  padding-top: 15px;
                }
                
                @media (min-width: 40.0625em) {
                  .govuk-body-m + .govuk-heading-l, .govuk-body + .govuk-heading-l, .intro + .govuk-heading-l, div .attrEntry div + .govuk-heading-l, .error + .govuk-heading-l, .attrEntry label + .govuk-heading-l,
                  .govuk-body-s + .govuk-heading-l,
                  .govuk-list + .govuk-heading-l {
                    padding-top: 20px;
                  }
                }
                
                .govuk-body-m + .govuk-heading-m, .govuk-body + .govuk-heading-m, .intro + .govuk-heading-m, div .attrEntry div + .govuk-heading-m, .error + .govuk-heading-m, .attrEntry label + .govuk-heading-m,
                .govuk-body-s + .govuk-heading-m,
                .govuk-list + .govuk-heading-m,
                .govuk-body-m + .govuk-heading-s,
                .govuk-body + .govuk-heading-s,
                .intro + .govuk-heading-s,
                div .attrEntry div + .govuk-heading-s,
                .error + .govuk-heading-s,
                .attrEntry label + .govuk-heading-s,
                .govuk-body-s + .govuk-heading-s,
                .govuk-list + .govuk-heading-s {
                  padding-top: 5px;
                }
                
                @media (min-width: 40.0625em) {
                  .govuk-body-m + .govuk-heading-m, .govuk-body + .govuk-heading-m, .intro + .govuk-heading-m, div .attrEntry div + .govuk-heading-m, .error + .govuk-heading-m, .attrEntry label + .govuk-heading-m,
                  .govuk-body-s + .govuk-heading-m,
                  .govuk-list + .govuk-heading-m,
                  .govuk-body-m + .govuk-heading-s,
                  .govuk-body + .govuk-heading-s,
                  .intro + .govuk-heading-s,
                  div .attrEntry div + .govuk-heading-s,
                  .error + .govuk-heading-s,
                  .attrEntry label + .govuk-heading-s,
                  .govuk-body-s + .govuk-heading-s,
                  .govuk-list + .govuk-heading-s {
                    padding-top: 10px;
                  }
                }
                
                #api {
                  font-family: "GDS Transport",arial,sans-serif;
                }
                
                #api .create a {
                  margin-left: 10px;
                }
                
                div .attrEntry div.error {
                  color: #d4351c;
                  display: none;
                }
                
                div .attrEntry div.show {
                  display: block !important;
                }
                
                .error {
                  color: #d4351c !important;
                }
                
                .entry-item {
                  margin-bottom: 30px;
                }
                
                .entry-item input,
                .textInput  {
                  font-family: 'GDS Transport', arial, sans-serif;
                  font-size: 19px;
                  font-size: 1.1875rem;
                  line-height: 1.31579;
                  font-family: "GDS Transport", arial, sans-serif;
                  -webkit-font-smoothing: antialiased;
                  -moz-osx-font-smoothing: grayscale;
                
                  -webkit-writing-mode: horizontal-tb !important;
                  text-rendering: auto;
                  color: -internal-light-dark(black, white);
                  letter-spacing: normal;
                  word-spacing: normal;
                  line-height: normal;
                  text-transform: none;
                  text-indent: 0px;
                  text-shadow: none;
                  display: inline-block;
                  text-align: start;
                  appearance: auto;
                  -webkit-rtl-ordering: logical;
                  cursor: text;
                
                  font-weight: 400;
                  font-size: 16px;
                  font-size: 1rem;
                  line-height: 1.25;
                  box-sizing: border-box;
                  width: 250px;
                  height: 40px;
                  margin-top: 0;
                  padding: 5px;
                  border: 2px solid #0b0c0c;
                  border-radius: 0;
                  -webkit-appearance: none;
                  -moz-appearance: none;
                  appearance: none;
                }
                
                .entry-item label, .attrEntry label {
                  font-size: 19px;
                  font-size: 1.1875rem;
                  line-height: 1.31579;
                  font-family: "GDS Transport", arial, sans-serif;
                  -webkit-font-smoothing: antialiased;
                  -moz-osx-font-smoothing: grayscale;
                  font-weight: 400;
                  line-height: 1.25;
                  color: #0b0c0c;
                  display: block;
                  margin-bottom: 5px;
                }
                
                .attr > ul {
                  list-style: none;
                  padding: 0;
                  margin: 0;
                }
                
                .attrEntry {
                  margin-bottom: 30px;
                }
                
                .helpLink {
                  margin-top: 10px;
                  display: block;
                }
                
                .buttons {
                  margin-top: 10px;
                }
                
                input[type="checkbox"] {
                  width: 44px;
                  height: 44px;
                  margin: 0;
                  cursor: pointer;
                  outline: 2px solid #000000;
                  border: 0;
                  opacity: 1;
                  accent-color: #ffffff;
                }
                
                #api .helpLink {
                  display: none;
                }
                
                #api .verify {
                  margin-top: 20px;
                  margin-right: 0;
                }
                
                #api .verify label {
                  display: block;
                  width: 100%;
                }
                
                #api .verify input {
                  display: block;
                  margin-right: 25%;
                }
                
                #api .verify button {
                  display: block;
                  margin-top: 20px;
                  margin-right: 0;
                  margin-bottom: 0;
                }
                #api .verify .verifyButton {
                  margin-right: 15px;
                }
                #attributeVerification #attributeList {
                  border-bottom: 1px solid #b1b4b6;
                  margin-bottom: 25px;
                }
                #api #retryCode {
                  cursor: pointer;
                }
                .changeClaims {
                  visibility: hidden;
                }
                
                .verificationControlContent ul {
                  padding-inline-start: 0;
                }
                
                /* Hide the verification blurb */
                #attributeVerification #verifying_blurb {
                  display: none !important;
                  visibility: hidden !important;
                }
                
                /* hide send new code button on sign up for consistency with other flows */
                #EmailVerification_but_send_new_code {
                  display: none;
                  visibility: hidden;
                }
              + 
              + .no-margin {
              +   margin: 0!important;
              + }
            EOT
          ~ content_md5   = "fff6dfaa7446a767aee9fffc0b378f77" -> "35564488ce678598bdc45c014264399f"
            name          = "main.css"
            # (4 unchanged attributes hidden)
        }
    }
ℹ️ Objects have changed outside of Terraform

This feature was introduced from Terraform v0.15.4.

Terraform detected the following changes made outside of Terraform since the
last "terraform apply" which may have affected this plan:

  # module.finalsa_storage_account.azurerm_storage_account.storage_account has changed
  ~ resource "azurerm_storage_account" "storage_account" {
        id                                 = "/subscriptions/5ca62022-6aa2-4cee-aaa7-e7536c8d566c/resourceGroups/pre-prod/providers/Microsoft.Storage/storageAccounts/prefinalsaprod"
        name                               = "prefinalsaprod"
      ~ primary_access_key                 = (sensitive value)
      ~ primary_blob_connection_string     = (sensitive value)
      ~ primary_connection_string          = (sensitive value)
      ~ secondary_access_key               = (sensitive value)
      ~ secondary_connection_string        = (sensitive value)
        tags                               = {
            "application"         = "pre-recorded-evidence"
            "builtFrom"           = "https://github.com/HMCTS/pre-shared-infrastructure.git"
            "businessArea"        = "Cross-Cutting"
            "contactSlackChannel" = "#dts-pre-rec-evidence-tech"
            "environment"         = "production"
            "managedBy"           = "Pre Recorded Evidence"
        }
        # (92 unchanged attributes hidden)

        # (3 unchanged blocks hidden)
    }

  # module.ingestsa_storage_account.azurerm_storage_account.storage_account has changed
  ~ resource "azurerm_storage_account" "storage_account" {
        id                                 = "/subscriptions/5ca62022-6aa2-4cee-aaa7-e7536c8d566c/resourceGroups/pre-prod/providers/Microsoft.Storage/storageAccounts/preingestsaprod"
        name                               = "preingestsaprod"
      ~ primary_access_key                 = (sensitive value)
      ~ primary_blob_connection_string     = (sensitive value)
      ~ primary_connection_string          = (sensitive value)
      ~ secondary_access_key               = (sensitive value)
      ~ secondary_connection_string        = (sensitive value)
        tags                               = {
            "application"         = "pre-recorded-evidence"
            "builtFrom"           = "https://github.com/HMCTS/pre-shared-infrastructure.git"
            "businessArea"        = "Cross-Cutting"
            "contactSlackChannel" = "#dts-pre-rec-evidence-tech"
            "environment"         = "production"
            "managedBy"           = "Pre Recorded Evidence"
        }
        # (92 unchanged attributes hidden)

        # (3 unchanged blocks hidden)
    }


Unless you have made equivalent changes to your configuration, or ignored the

Comment thread b2c/views/css/main.css
font-style: normal;
font-weight: normal;
src: url("https://presa{env}.blob.core.windows.net/pre-b2c-container/assets/fonts/light-94a07e06a1-v2.woff2") format("woff2"), url("https://presa{env}.blob.core.windows.net/pre-b2c-container/assets/fonts/light-f591b13f7d-v2.woff") format("woff");
src: url("https://presastg.blob.core.windows.net/pre-b2c-container/assets/fonts/light-94a07e06a1-v2.woff2") format("woff2"), url("https://presastg.blob.core.windows.net/pre-b2c-container/assets/fonts/light-f591b13f7d-v2.woff") format("woff");

@oliver-scott oliver-scott May 20, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Temporary - revert the url changes in this file before merge

@oliver-scott oliver-scott marked this pull request as ready for review May 21, 2026 15:23
@oliver-scott oliver-scott requested a review from a team as a code owner May 21, 2026 15:23
RuthKirby
RuthKirby previously approved these changes May 21, 2026
Comment thread b2c/views/css/main.css
visibility: hidden;
}

.no-margin {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

keep this though

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants