From 46be5994639fb7a994465858484068a29710912a Mon Sep 17 00:00:00 2001
From: Laurie Reynolds <lauriesreynolds@gmail.com>
Date: Mon, 16 Dec 2024 13:45:45 -0800
Subject: [PATCH] chore(arpa): fix headings and color contrast issues

---
 .../components/DownloadButton.vue             |   2 +-
 .../components/DownloadFileButton.vue         |   5 +-
 .../components/PageNavigation.vue             |   4 +-
 .../arpa_reporter/components/StandardForm.vue |   2 +-
 .../client/src/arpa_reporter/scss/index.scss  |  14 +-
 .../src/arpa_reporter/views/AgenciesView.vue  |   2 +-
 .../src/arpa_reporter/views/LoginView.spec.js | 132 +++++++++++++++++-
 .../src/arpa_reporter/views/LoginView.vue     |   4 +-
 .../arpa_reporter/views/NewTemplateView.vue   |   6 +-
 .../src/arpa_reporter/views/NewUploadView.vue |   2 +-
 .../views/ReportingPeriodsView.vue            |   7 +-
 .../src/arpa_reporter/views/UploadView.vue    |  10 +-
 .../src/arpa_reporter/views/UploadsView.vue   |  13 +-
 .../src/arpa_reporter/views/UserView.vue      |   2 +-
 .../src/arpa_reporter/views/UsersView.vue     |   2 +-
 .../arpa_reporter/views/ValidationView.vue    |   2 +-
 16 files changed, 174 insertions(+), 35 deletions(-)

diff --git a/packages/client/src/arpa_reporter/components/DownloadButton.vue b/packages/client/src/arpa_reporter/components/DownloadButton.vue
index da1d69551..9e35e5fc3 100644
--- a/packages/client/src/arpa_reporter/components/DownloadButton.vue
+++ b/packages/client/src/arpa_reporter/components/DownloadButton.vue
@@ -2,7 +2,7 @@
   <a
     download
     :href="href"
-    class="btn btn-primary"
+    class="btn usdr-btn-primary"
     :class="computedClasses"
     @click="setLoadingState"
   >
diff --git a/packages/client/src/arpa_reporter/components/DownloadFileButton.vue b/packages/client/src/arpa_reporter/components/DownloadFileButton.vue
index 7a8f26875..056778dbe 100644
--- a/packages/client/src/arpa_reporter/components/DownloadFileButton.vue
+++ b/packages/client/src/arpa_reporter/components/DownloadFileButton.vue
@@ -1,7 +1,8 @@
 <template>
   <a
-    :href="href"
-    class="btn-primary ml-2"
+    href=""
+    :download="href"
+    class="usdr-btn-primary ml-2"
     :class="small ? 'btn-sm' : 'btn'"
   >
     Download file
diff --git a/packages/client/src/arpa_reporter/components/PageNavigation.vue b/packages/client/src/arpa_reporter/components/PageNavigation.vue
index 11ba3212b..1429325ac 100644
--- a/packages/client/src/arpa_reporter/components/PageNavigation.vue
+++ b/packages/client/src/arpa_reporter/components/PageNavigation.vue
@@ -220,9 +220,9 @@ export default {
     },
     navLinkClass(to) {
       if (this.$route.path === to) {
-        return 'nav-link usdr-tab-nav-link active';
+        return 'nav-link usdr-link active';
       }
-      return 'nav-link usdr-tab-nav-link';
+      return 'nav-link usdr-link';
     },
     dateFormat(d) {
       return moment(d)
diff --git a/packages/client/src/arpa_reporter/components/StandardForm.vue b/packages/client/src/arpa_reporter/components/StandardForm.vue
index b001f3adf..c407b3ba6 100644
--- a/packages/client/src/arpa_reporter/components/StandardForm.vue
+++ b/packages/client/src/arpa_reporter/components/StandardForm.vue
@@ -59,7 +59,7 @@
       <div class="col-sm-2" />
       <div class="col-sm-10">
         <button
-          class="btn btn-primary"
+          class="btn usdr-btn-primary"
           :disabled="disabled"
           @click="validateAndSave()"
         >
diff --git a/packages/client/src/arpa_reporter/scss/index.scss b/packages/client/src/arpa_reporter/scss/index.scss
index af1da43fb..b7f18c0c1 100644
--- a/packages/client/src/arpa_reporter/scss/index.scss
+++ b/packages/client/src/arpa_reporter/scss/index.scss
@@ -86,7 +86,7 @@ hr {
   color: $positive-default;
 }
 
-.usdr-tab-nav-link {
+.usdr-link {
   color: #305CE0;
 }
 
@@ -100,6 +100,14 @@ hr {
   color: rgba(0,0,0)
 }
 
+.btn.usdr-btn-outline-primary,
+.btn.usdr-btn-outline-primary:hover {
+  color: $usdr-brand-primary; 
+  background-color: #ffffff;
+  border-color: $usdr-brand-primary;
+}
+
+a.usdr-btn-primary,
 .btn.usdr-btn-primary,
 .btn.usdr-btn-primary:hover {
   color: #ffff;
@@ -120,4 +128,8 @@ hr {
   -ms-flex: 1 1 0%;
   flex: 1 1 0%;
   min-width: 0;
+}
+
+.usdr-table-danger {
+  background-color: #FDD3D6;
 }
\ No newline at end of file
diff --git a/packages/client/src/arpa_reporter/views/AgenciesView.vue b/packages/client/src/arpa_reporter/views/AgenciesView.vue
index 690f65f8f..69dfbbf6e 100644
--- a/packages/client/src/arpa_reporter/views/AgenciesView.vue
+++ b/packages/client/src/arpa_reporter/views/AgenciesView.vue
@@ -5,7 +5,7 @@
     <div class="mb-4">
       <router-link
         to="/agencies/new"
-        class="btn btn-primary"
+        class="btn usdr-btn-primary"
       >
         Create New Agency
       </router-link>
diff --git a/packages/client/src/arpa_reporter/views/LoginView.spec.js b/packages/client/src/arpa_reporter/views/LoginView.spec.js
index 5111099fb..bff02caf9 100644
--- a/packages/client/src/arpa_reporter/views/LoginView.spec.js
+++ b/packages/client/src/arpa_reporter/views/LoginView.spec.js
@@ -1,21 +1,143 @@
 import LoginView from '@/arpa_reporter/views/LoginView.vue';
 
-import { describe, it, expect } from 'vitest';
-import { shallowMount } from '@vue/test-utils';
+import {
+  describe, it, afterEach, vi, expect,
+} from 'vitest';
+import {
+  fireEvent, render, screen, cleanup, waitFor,
+} from '@testing-library/vue';
+
+const mockPost = vi.fn();
+global.fetch = mockPost;
 
 describe('LoginView component', () => {
   const $route = {
     query: {},
   };
 
-  it('renders', () => {
-    const wrapper = shallowMount(LoginView, {
+  const mockRouter = {
+    push: vi.fn(),
+    resolve: vi.fn().mockReturnValue({
+      href: '/arpa_reporter/',
+    }),
+  };
+
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    mockPost.mockClear();
+  });
+
+  it('it displays expected elements and handles successful login request', async () => {
+    mockPost.mockResolvedValueOnce(
+      new Promise((resolve) => {
+        resolve({
+          ok: true,
+          success: true,
+          json: () => Promise.resolve({ message: 'Email sent to grant-admin@usdigitalresponse.org. Check your inbox', success: true }),
+        });
+      }),
+    );
+
+    render(LoginView, {
+      global: {
+        mocks: {
+          $route,
+          $http: { post: mockPost },
+          $router: mockRouter,
+        },
+      },
+    });
+
+    screen.getByRole('heading', { name: /ARPA Reporter Login/i, level: 1 });
+    const emailInput = screen.getByPlaceholderText(/email address/i);
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.update(emailInput, 'grant-admin@usdigitalresponse.org');
+    await fireEvent.click(submitButton);
+
+    await waitFor(() => screen.getByText(/Email sent to grant-admin@usdigitalresponse.org. Check your inbox/i));
+  });
+
+  it('handles login error response', async () => {
+    mockPost.mockResolvedValueOnce(
+      new Promise((resolve) => {
+        resolve({
+          ok: true,
+          success: true,
+          json: () => Promise.resolve({ message: 'User "test@eexample.com" not found', success: true }),
+        });
+      }),
+    );
+
+    render(LoginView, {
       global: {
         mocks: {
           $route,
+          $http: { post: mockPost },
+          $router: mockRouter,
         },
       },
     });
-    expect(wrapper.exists()).toBe(true);
+
+    const emailInput = screen.getByPlaceholderText(/email address/i);
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.update(emailInput, 'test@example.com');
+    await fireEvent.click(submitButton);
+
+    await waitFor(() => screen.getByText(/User "test@eexample.com" not found/i));
+  });
+
+  it('validates email format before submission', async () => {
+    render(LoginView, {
+      global: {
+        mocks: {
+          $route,
+          $http: { post: mockPost },
+          $router: mockRouter,
+        },
+      },
+    });
+
+    const emailInput = screen.getByPlaceholderText(/email address/i);
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.update(emailInput, 'invalid-email');
+    await fireEvent.click(submitButton);
+
+    expect(mockPost).not.toHaveBeenCalled();
+    screen.getByText(/please enter a valid email/i);
+  });
+  it('handles login error status', async () => {
+    mockPost.mockResolvedValueOnce(
+      new Promise((resolve) => {
+        resolve({
+          ok: false,
+          success: true,
+          statusText: 'Unable to connect to the server',
+          status: 500,
+          json: () => Promise.resolve({ }),
+        });
+      }),
+    );
+
+    render(LoginView, {
+      global: {
+        mocks: {
+          $route,
+          $http: { post: mockPost },
+          $router: mockRouter,
+        },
+      },
+    });
+
+    const emailInput = screen.getByPlaceholderText(/email address/i);
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.update(emailInput, 'test@example.com');
+    await fireEvent.click(submitButton);
+
+    await waitFor(() => screen.getByText(/login: Unable to connect to the server \(500\)/i));
   });
 });
diff --git a/packages/client/src/arpa_reporter/views/LoginView.vue b/packages/client/src/arpa_reporter/views/LoginView.vue
index 9307ad61f..f5536d37a 100644
--- a/packages/client/src/arpa_reporter/views/LoginView.vue
+++ b/packages/client/src/arpa_reporter/views/LoginView.vue
@@ -2,7 +2,7 @@
 <!-- eslint-disable vuejs-accessibility/no-autofocus -->
 <template>
   <div class="my-3">
-    <h2>ARPA Reporter Login</h2>
+    <h1>ARPA Reporter Login</h1>
     <form @submit="login">
       <div class="form-group">
         <input
@@ -16,7 +16,7 @@
       </div>
       <div class="form-group">
         <button
-          class="btn btn-primary"
+          class="btn usdr-btn-primary"
           type="Submit"
           @click="login"
         >
diff --git a/packages/client/src/arpa_reporter/views/NewTemplateView.vue b/packages/client/src/arpa_reporter/views/NewTemplateView.vue
index b61e100a1..fb6cad056 100644
--- a/packages/client/src/arpa_reporter/views/NewTemplateView.vue
+++ b/packages/client/src/arpa_reporter/views/NewTemplateView.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>Upload Period Template</h2>
+    <h1>Upload Period Template</h1>
 
     <p>
       This upload will be used as the template for period <em>{{ reportingPeriod.name }}</em>
@@ -24,7 +24,7 @@
       </div>
       <div class="form-group">
         <button
-          class="btn btn-primary"
+          class="btn usdr-btn-primary"
           type="submit"
           :disabled="uploadDisabled"
           @click.prevent="uploadTemplate"
@@ -32,7 +32,7 @@
           {{ uploadButtonLabel }}
         </button>
         <a
-          class="ml-3"
+          class="ml-3 usdr-link"
           href="#"
           @click="cancelUpload"
         >Cancel</a>
diff --git a/packages/client/src/arpa_reporter/views/NewUploadView.vue b/packages/client/src/arpa_reporter/views/NewUploadView.vue
index bf80ba37e..c95fc9e21 100644
--- a/packages/client/src/arpa_reporter/views/NewUploadView.vue
+++ b/packages/client/src/arpa_reporter/views/NewUploadView.vue
@@ -79,7 +79,7 @@ export default {
               name: 'submit',
               type: 'submit',
               label: 'Submit',
-              inputClass: ['btn', 'btn-primary'],
+              inputClass: ['btn', 'usdr-btn-primary'],
             },
             {
               type: 'button',
diff --git a/packages/client/src/arpa_reporter/views/ReportingPeriodsView.vue b/packages/client/src/arpa_reporter/views/ReportingPeriodsView.vue
index b3bde1a17..6222eea18 100644
--- a/packages/client/src/arpa_reporter/views/ReportingPeriodsView.vue
+++ b/packages/client/src/arpa_reporter/views/ReportingPeriodsView.vue
@@ -5,7 +5,7 @@
     <div class="mb-4">
       <router-link
         to="/reporting_periods/new"
-        class="btn btn-primary"
+        class="btn usdr-btn-primary"
       >
         Create New Reporting Period
       </router-link>
@@ -36,6 +36,7 @@
             <router-link
               v-if="!p.certified_at"
               :to="`/new_template/${p.id}`"
+              class="usdr-link"
             >
               Upload Template
             </router-link>
@@ -43,7 +44,7 @@
           <td>
             <span v-if="isCurrentReportingPeriod(p)">
               <button
-                class="btn btn-primary"
+                class="btn usdr-btn-primary"
                 data-toggle="modal"
                 data-target="#certify-reporting-period"
                 :disabled="certifying"
@@ -97,7 +98,7 @@
           <div class="modal-footer">
             <button
               type="button"
-              class="btn btn-primary"
+              class="btn usdr-btn-primary"
               @click="handleCertify"
             >
               Certify
diff --git a/packages/client/src/arpa_reporter/views/UploadView.vue b/packages/client/src/arpa_reporter/views/UploadView.vue
index e11bc39c9..4c145b9fd 100644
--- a/packages/client/src/arpa_reporter/views/UploadView.vue
+++ b/packages/client/src/arpa_reporter/views/UploadView.vue
@@ -132,7 +132,7 @@
               class="float-right"
             >
               <button
-                class="btn btn-primary ml-2"
+                class="btn usdr-btn-primary ml-2"
                 :disabled="validating"
                 @click="validateUpload"
               >
@@ -148,14 +148,14 @@
                 :small="false"
               />
               <button
-                class="btn btn-outline-primary ml-2"
+                class="btn usdr-btn-outline-primary ml-2"
                 :disabled="upload.invalidated_at"
                 @click="invalidateUpload"
               >
                 Invalidate
               </button>
               <button
-                class="btn btn-outline-primary ml-2"
+                class="btn usdr-btn-outline-primary ml-2"
                 :disabled="validating"
                 @click="validateUpload"
               >
@@ -178,7 +178,7 @@
                 Invalidate
               </button>
               <button
-                class="btn btn-primary ml-2"
+                class="btn usdr-btn-primary ml-2"
                 :disabled="validating"
                 @click="validateUpload"
               >
@@ -187,7 +187,7 @@
             </span>
 
             <!--
-            <button class="btn btn-primary ml-2" @click="validateUpload" :disabled="validating">
+            <button class="btn usdr-btn-primary ml-2" @click="validateUpload" :disabled="validating">
               <span v-if="validating">Validating...</span>
               <span v-else-if="upload.validated_at">Re-validate</span>
               <span v-else>Validate</span>
diff --git a/packages/client/src/arpa_reporter/views/UploadsView.vue b/packages/client/src/arpa_reporter/views/UploadsView.vue
index f6fe2a2d6..860c4cbd4 100644
--- a/packages/client/src/arpa_reporter/views/UploadsView.vue
+++ b/packages/client/src/arpa_reporter/views/UploadsView.vue
@@ -8,7 +8,7 @@
 
         <router-link
           to="/new_upload"
-          class="btn btn-primary ml-2"
+          class="btn usdr-btn-primary ml-2"
         >
           Submit Workbook
         </router-link>
@@ -71,7 +71,10 @@
 
       <template #table-row="props">
         <span v-if="props.column.field === 'id'">
-          <router-link :to="`/uploads/${props.row.id}`">
+          <router-link
+            :to="`/uploads/${props.row.id}`"
+            class="usdr-link"
+          >
             {{ shortUuid(props.row.id) }}
           </router-link>
         </span>
@@ -172,7 +175,7 @@ export default {
 
           return moment(validatedAt).local().format('MMM Do YYYY, h:mm:ss A');
         },
-        tdClass: (row) => ((!row.validated_at || row.invalidated_at) ? 'table-danger' : undefined),
+        tdClass: (row) => ((!row.validated_at || row.invalidated_at) ? 'usdr-table-danger' : undefined),
         filterOptions: {
           enabled: !this.onlyExported,
           placeholder: 'Any validation status',
@@ -205,7 +208,7 @@ export default {
         {
           label: 'Agency',
           field: 'agency_code',
-          tdClass: (row) => (!row.agency_code ? 'table-danger' : undefined),
+          tdClass: (row) => (!row.agency_code ? 'usdr-table-danger' : undefined),
           filterOptions: {
             enabled: true,
             placeholder: 'Any agency',
@@ -215,7 +218,7 @@ export default {
         {
           label: 'EC Code',
           field: 'ec_code',
-          tdClass: (row) => (!row.ec_code ? 'table-danger' : undefined),
+          tdClass: (row) => (!row.ec_code ? 'usdr-table-danger' : undefined),
           width: '120px',
           filterOptions: {
             enabled: true,
diff --git a/packages/client/src/arpa_reporter/views/UserView.vue b/packages/client/src/arpa_reporter/views/UserView.vue
index 1532a38d9..52dc938d8 100644
--- a/packages/client/src/arpa_reporter/views/UserView.vue
+++ b/packages/client/src/arpa_reporter/views/UserView.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>User</h2>
+    <h1>User</h1>
 
     <div
       v-if="user === null"
diff --git a/packages/client/src/arpa_reporter/views/UsersView.vue b/packages/client/src/arpa_reporter/views/UsersView.vue
index 30299283c..c2d5a6d20 100644
--- a/packages/client/src/arpa_reporter/views/UsersView.vue
+++ b/packages/client/src/arpa_reporter/views/UsersView.vue
@@ -4,7 +4,7 @@
     <div class="mb-4">
       <router-link
         to="/users/new"
-        class="btn btn-primary"
+        class="btn usdr-btn-primary"
       >
         Create New User
       </router-link>
diff --git a/packages/client/src/arpa_reporter/views/ValidationView.vue b/packages/client/src/arpa_reporter/views/ValidationView.vue
index 23bc7345f..04f549a2f 100644
--- a/packages/client/src/arpa_reporter/views/ValidationView.vue
+++ b/packages/client/src/arpa_reporter/views/ValidationView.vue
@@ -122,7 +122,7 @@ export default {
   computed: {
     revalidateBtnClass() {
       return {
-        'btn-primary': !this.commit,
+        'usdr-btn-primary': !this.commit,
         'btn-danger': this.commit,
       };
     },