Merge pull request #1268 from GSA/1216-login-gov-pre-sign-in-page

1216 login gov pre sign in page

app/assets/javascripts/loginAlert.js

@@ -0,0 +1,35 @@
+(function (window) {
+
+// Set the target date (10 days before March 15th, 2024)
+  const targetDate = new Date("April 16, 2024 00:00:00").getTime();
+
+ // Function to update the countdown display
+  function updateCountdown() {
+    const now = new Date().getTime();
+    const difference = targetDate - now;
+
+    // Time calculations for days only
+    const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+
+    // Visibility logic
+    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 {
+      // Show if 10 days or less remaining
+      document.getElementById("countdown-container").style.display = "block";
+      document.getElementById("countdown").innerHTML = days + " days ";
+    }
+
+  }
+
+    // Expose the updateCountdown function to the outside world
+  window.updateCountdown = updateCountdown;
+
+  // Initial display update
+  updateCountdown();
+
+  // Update the countdown every second (inside the IIFE)
+  setInterval(updateCountdown, 1000);
+
+})(window);

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -568,3 +568,9 @@ details form {
 .edit-textbox-error-mt {
    margin-top: 1.5rem;
 }
+
+// Login page
+
+#countdown-container {
+   display: none; // Hide the countdown timer
+}

app/templates/views/signin.html

@@ -12,9 +12,20 @@
 
 {% block maincolumn_content %}
 
+{% if login_gov_enabled %}
 <div class="grid-row">
-  <div class="tablet:grid-col-12">
-
+  <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 16, 2024</h4>
+      <p class="usa-alert__text">
+        You have <span id="countdown"></span> left to use Login.gov to sign in
+      </p>
+    </div>
+  </div>
+</div>
+{% endif %}
+<div class="grid-row margin-bottom-4">
+  <div class="tablet:grid-col-5">
     {% if again %}
       <h1 class="font-body-2xl margin-bottom-3">You need to sign in again</h1>
       {% if other_device %}
@@ -29,9 +40,9 @@
     {% else %}
       <h1 class="font-body-2xl margin-bottom-3">Sign in</h1>
       {% if login_gov_enabled %}
-        <a class="usa-link" href="{{ initial_signin_url }}">Sign in with Login.gov</a>
-      </p>
-      <h4 class="margin-bottom-3">Or:</h4>
+      <p>You can access your account by signing in with one of the options below:</p>
+      <a class="usa-link usa-button usa-button--outline" href="{{ initial_signin_url }}">Sign in with Login.gov</a>
+      <p class="margin-y-3"><strong>Or:</strong></p>
       {% endif %}
     {% endif %}
 
@@ -41,6 +52,24 @@
       {{ page_footer("Continue", secondary_link=password_reset_url, secondary_link_text="Forgot your password?") }}
     {% endcall %}
   </div>
-</div>
+  {% if login_gov_enabled %}
+    <div class="tablet:grid-col-6 tablet: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 effective<br>April 16, 2024</h2>
+      <p>Why are we doing this?</p>
+      <ul class="usa-list">
+        <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 16, 2024 to continue to access Notify.</li>
+      </ul>
+      <div class="border-bottom border-base-lighter margin-y-4"></div>
+      <a class="usa-link usa-button margin-bottom-3" href="{{ create_login_account_url }}">Create Login.gov account</a>
+    </div>
+  </div>
+{% endif %}
 
 {% endblock %}

gulpfile.js

@@ -123,6 +123,7 @@ const javascripts = () => {
     paths.src + 'javascripts/homepage.js',
     paths.src + 'javascripts/timeoutPopup.js',
     paths.src + 'javascripts/date.js',
+    paths.src + 'javascripts/loginAlert.js',
     paths.src + 'javascripts/main.js',
   ])
     .pipe(plugins.prettyerror())

tests/javascripts/loginAlert.test.js

@@ -0,0 +1,52 @@
+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 16, 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("April 16, 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
+
+    window.updateCountdown(); // Update the countdown display
+
+    expect(document.getElementById("countdown-container").style.display).toBe("none");
+});
+
+test('Shows the countdown if 10 days or less away', () => {
+    jest.setSystemTime(targetDate.getTime() - 8 * 24 * 60 * 60 * 1000);
+
+    window.updateCountdown();
+
+    expect(document.getElementById("countdown-container").style.display).toBe("block");
+});
+
+test('Displays the correct number of days', () => {
+    jest.setSystemTime(targetDate.getTime() - 5 * 24 * 60 * 60 * 1000);
+
+    window.updateCountdown();
+
+    expect(document.getElementById("countdown").textContent).toBe("5 days ");
+});
+
+test('Hides the countdown if the target date has passed', () => {
+    jest.setSystemTime(targetDate.getTime() + 2 * 24 * 60 * 60 * 1000);
+
+    window.updateCountdown();
+
+    expect(document.getElementById("countdown-container").style.display).toBe("none");
+});