From 507973f9ae52514353adeffbc81a9e6c1451be82 Mon Sep 17 00:00:00 2001
From: Jonathan Bobel <jonathan.bobel@gsa.gov>
Date: Fri, 1 Mar 2024 09:34:25 -0500
Subject: [PATCH] Edited the test, updated content

---
 app/assets/javascripts/loginAlert.js |  2 +-
 app/templates/views/signin.html      | 22 +++++++++++++---------
 tests/javascripts/loginAlert.test.js | 22 +++++++++++++---------
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/loginAlert.js b/app/assets/javascripts/loginAlert.js
index 67ed439ae..1f3281788 100644
--- a/app/assets/javascripts/loginAlert.js
+++ b/app/assets/javascripts/loginAlert.js
@@ -12,7 +12,7 @@
     const days = Math.floor(difference / (1000 * 60 * 60 * 24));
 
     // Visibility logic
-    if (days < 0) {
+    if (days < 0 || days > 10) {
       // Hide if more than 10 days away OR if already past the date
       document.getElementById("countdown-container").style.display = "none";
     } else {
diff --git a/app/templates/views/signin.html b/app/templates/views/signin.html
index 398a39274..8773fba24 100644
--- a/app/templates/views/signin.html
+++ b/app/templates/views/signin.html
@@ -13,10 +13,11 @@
 {% block maincolumn_content %}
 
 <div class="grid-row">
-  <div id="countdown-container" class="usa-alert usa-alert--slim usa-alert--warning width-full margin-bottom-4">
+  <div id="countdown-container" class="usa-alert usa-alert--warning width-full margin-bottom-4">
     <div class="usa-alert__body">
+      <h4 class="usa-alert__heading">Login.gov is required by April 9, 2024</h4>
       <p class="usa-alert__text">
-        You have <span id="countdown"></span> left to use login.gov to sign in
+        You have <span id="countdown"></span> left to use Login.gov to sign in
       </p>
     </div>
   </div>
@@ -50,17 +51,20 @@
     {% endcall %}
   </div>
   <div class="tablet:grid-col-6 grid-offset-1 margin-top-2 padding-y-2 padding-x-4 bg-base-lightest">
-    <h2 class="font-body-lg">Notify.gov is changing the Sign in experience to Login.gov on March x, 2024</h2>
+    <h2 class="font-body-lg">Notify.gov is changing the sign-in experience to Login.gov effective<br>April 9, 2024</h2>
     <p>Why are we doing this?</p>
     <ul class="usa-list">
-      <li><strong>One single source for signing in:</strong> You can use login.gov for other sign in forms within the government</li>
-      <li><strong>Security:</strong> It's really secure and trustworthy</li>
-      <li><strong>Fast and easy:</strong> It's fast and easy</li>
+      <li><strong>Enhanced security:</strong> Login.gov is really secure and trustworthy</li>
+      <li><strong>One single source for signing in:</strong> You can use Login.gov for other services within the federal government</li>
+      <li><strong>2FA flexibility:</strong> Login.gov supports multiple methods for users to verify their identity.</li>
+    </ul>
+    <p>What do I need to do?</p>
+    <ul class="usa-list">
+      <li>If you have a Login.gov account, start using it to sign in to Notify today.</li>
+      <li>If you don’t have a Login.gov account, you must create one by April 9, 2024 to continue to access Notify.</li>
     </ul>
     <div class="border-bottom border-base-lighter margin-y-4"></div>
-    <h3>Don't have a login.gov account?</h3>
-    <p>If you don't have an account already, sign up here:</p>
-    <a class="usa-link usa-button" href="{{ create_login_account_url }}">Create Login.gov account</a>
+    <a class="usa-link usa-button margin-bottom-3" href="{{ create_login_account_url }}">Create Login.gov account</a>
   </div>
 </div>
 
diff --git a/tests/javascripts/loginAlert.test.js b/tests/javascripts/loginAlert.test.js
index 4bb0d3eaa..895aa3647 100644
--- a/tests/javascripts/loginAlert.test.js
+++ b/tests/javascripts/loginAlert.test.js
@@ -1,11 +1,23 @@
 beforeAll(() => {
     jest.spyOn(global, 'setTimeout');
+
+     document.body.innerHTML = `
+         <div id="countdown-container" class="usa-alert usa-alert--warning width-full margin-bottom-4">
+            <div class="usa-alert__body">
+            <h4 class="usa-alert__heading">Login.gov is required by April 9, 2024</h4>
+            <p class="usa-alert__text">
+                You have <span id="countdown"></span> left to use Login.gov to sign in
+            </p>
+            </div>
+        </div>
+    `
+
     const sessionTimerModule = require('../../app/assets/javascripts/loginAlert.js');
     window.GOVUK.modules.start();
 });
 
 jest.useFakeTimers();
-const targetDate = new Date("March 5, 2024 00:00:00"); // Reference point
+const targetDate = new Date("April 9, 2024 00:00:00"); // Reference point
 
 test('Hides the countdown if more than 10 days away', () => {
     jest.setSystemTime(targetDate.getTime() - 12 * 24 * 60 * 60 * 1000); // 12 days before
@@ -38,11 +50,3 @@ test('Hides the countdown if the target date has passed', () => {
 
     expect(document.getElementById("countdown-container").style.display).toBe("none");
 });
-
-test('Displays "Countdown Complete!" when the countdown finishes', () => {
-    jest.setSystemTime(targetDate.getTime());
-
-    window.updateCountdown();
-
-    expect(document.getElementById("countdown").textContent).toBe("Countdown Complete!");
-});