Merge pull request #153 from GSA/feature/improve_login_page

Improve Login Page
GSA · Nov 25, 2024 · 4c7e0b8 · 4c7e0b8
2 parents 1fb26e3 + 0a8621e
commit 4c7e0b8
Show file tree

Hide file tree

Showing 8 changed files with 192 additions and 13 deletions.
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
@@ -19,7 +19,7 @@ const routes: Routes = [
   {path: 'admin/masq', component: MasqComponent, canActivate: [AuthGuardFn] , data: {}},
   {path: 'admin', component: AdminComponent, canActivate: [AdminGuardFn] , data: { isAccepted: false, isRejected: false }},
   {path: 'analytics', component: AnalyticsComponent, canActivate: [AdminGuardFn]},
-  {path: 'help', component: HelpComponent, canActivate: [AuthGuardFn]},
+  {path: 'help', component: HelpComponent},
 ];
 
 @NgModule({

diff --git a/src/app/auth/auth.component.html b/src/app/auth/auth.component.html
@@ -1,21 +1,86 @@
 <div class="grid-container">
+  <div class="grid-row login-header-bg py-2 px-4 mt-2">
+    <h1 class="usa-heading" style="font-weight: bold;"><u>Solicitation Review Tool</u></h1>
+    <h3 class="usa-heading usa-heading--third-level">
+      The Solicitation Review Tool (SRT) is provided to help agencies evaluate the overall solicitation compliance with accessibility, cyber security, and other regulations and requirements.
+    </h3>
+  </div>
+
+
   <div class="grid-row">
     <div class="grid-col-12">
       <div class="grid-row usa-prose">
         <div class="grid-col-8 tablet:grid-col-8 desktop:grid-col-8 desktop:grid-offset-2">
-          <div class="usa-card margin-y-4 padding-3">
+          <div class="usa-card margin-y-2 padding-1 card-shadow">
             <div class="usa-card__header">
-                <h1 class="usa-heading" style="font-weight: bold;">Solicitation Review Tool</h1>
+
             </div>
             <div class="usa-card__body">
               <h3 class="usa-heading usa-heading--third-level">
-                The Solicitation Review Tool (SRT) is provided to help agencies evaluate the overall solicitation compliance with accessibility, cyber security, and other regulations and requirements.
+                To sign in and view your agency's solicitations, you'll need a Login.gov account associated with your <b>government email address</b>.
               </h3>
               <app-userlogin></app-userlogin>
+              <h5>
+                If you need help adding an email address to your Login.gov account, please visit the 
+                <a href="https://www.login.gov/help/manage-your-account/change-your-email-address/" target="_blank" rel="noopener noreferrer">Login.gov Help Page.</a>
+              </h5>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
+
+
+
+  <div class="grid-row mt-5">
+    <div class="tablet:grid-col-2 mobile-lg:grid-col-6"></div>
+    <!-- Contact Us -->
+    <div class="tablet:grid-col-4 mobile-lg:grid-col-6">
+      <div class="usa-card">
+        <a
+          [routerLink]="['/help/contactus']"
+          aria-labelledby="h3cus"
+          class="usa-card__container usa-card__container--clickable"
+          (click)="onClickTiles('contact_tile', 'Contact Tile')"
+        >
+          <div class="usa-card__media">
+            <img alt="Contact Us Icon" src="/assets/contact-us.png" />
+          </div>
+          <div class="usa-card__header">
+            <h2 class="usa-card__heading" id="h3cus">Contact Us</h2>
+          </div>
+          <div class="usa-card__body">
+            <p>View contact information for the Solicitation Review Tool.</p>
+          </div>
+        </a>
+      </div>
+    </div>
+
+    <!-- FAQ -->
+    <div class="tablet:grid-col-4 mobile-lg:grid-col-6">
+      <div class="usa-card">
+        <a
+          [routerLink]="['/help/faq']"
+          aria-labelledby="h3faq"
+          class="usa-card__container usa-card__container--clickable"
+          (click)="onClickTiles('faq_tile', 'FAQ Tile')"
+        >
+          <div class="usa-card__media">
+            <img alt="FAQ Icon" src="/assets/faq.png" />
+          </div>
+          <div class="usa-card__header">
+            <h2 class="usa-card__heading" id="h3faq">Learn More</h2>
+          </div>
+          <div class="usa-card__body">
+            <p>Review Frequently Asked Questions and learn more about SRT.</p>
+          </div>
+        </a>
+      </div>
+    </div>
+
+    <div class="tablet:grid-col-2 mobile-lg:grid-col-6"></div>
+
+  </div>
+
 </div>
diff --git a/src/app/auth/auth.component.scss b/src/app/auth/auth.component.scss
@@ -154,3 +154,91 @@ padding: 0;
 left: auto;
 right: -1px;
 }
+
+
+.card-shadow{
+    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+}
+
+.login-header-bg {
+    background-image: url("/assets/login.jpg");
+    background-size: cover;
+    background-color: rgba(255,255,255,0.8);
+    background-blend-mode: lighten;
+}
+
+/* Cards Section */
+.usa-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.usa-card__container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    text-decoration: none;
+    color: inherit;
+    transition: box-shadow 0.3s ease, transform 0.3s ease;
+    border-radius: 0.25rem; /* 4px */
+}
+
+.usa-card__container--clickable {
+    cursor: pointer; /* Show the clicky hand cursor on hover */
+}
+
+.usa-card__container--clickable:hover,
+.usa-card__container--clickable:focus {
+    box-shadow: 0 0 0 0.1875rem #2491ff; /* 3px */
+    transform: translateY(-0.125rem); /* -2px */
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+}
+
+.usa-card__media {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    height: 7.5rem; /* 120px */
+}
+
+.usa-card__media img {
+    width: 5rem; /* 80px */
+    height: 5rem; /* 80px */
+    object-fit: contain;
+}
+
+.usa-card__media img[alt="FAQ Icon"] {
+    width: 10rem; /* 160px */
+    height: 10rem; /* 160px */
+    object-fit: contain; /* Ensures the image scales without distortion */
+}
+
+.usa-card__header,
+.usa-card__body {
+    flex: 1 1 auto;
+    padding: 0 1rem;
+    text-align: center;
+}
+
+.usa-card__heading {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+}
+
+.usa-card__body p {
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
+
+.tablet\:grid-col-4,
+.mobile-lg\:grid-col-6 {
+    margin-bottom: 1rem;
+}
diff --git a/src/app/auth/auth.component.ts b/src/app/auth/auth.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { GoogleAnalyticsService } from 'ngx-google-analytics';
 
 @Component({
   selector: 'app-auth',
@@ -14,7 +15,9 @@ export class AuthComponent implements OnInit {
   /**
    * constructor
    */
-  constructor() { }
+  constructor(
+    private $gaService: GoogleAnalyticsService
+  ) { }
 
   /**
    * lifecycle
@@ -30,4 +33,8 @@ export class AuthComponent implements OnInit {
     this.displayTab = arg;
   }
 
+  onClickTiles(action: string, label: string) {
+    this.$gaService.event(action, 'auth_tiles', label);
+  }
+
 }
diff --git a/src/app/auth/userlogin/userlogin.component.scss b/src/app/auth/userlogin/userlogin.component.scss
@@ -34,6 +34,12 @@
   }
 }
 
+.login-image:hover {
+  /* Increasing button size */
+  transform: scale(1.05);
+}
+
+
 /* Adds space between the login container and the DEV login button */
 .dev-button {
   margin-top: 1em;

diff --git a/src/app/help/contact-us/contact-us.component.html b/src/app/help/contact-us/contact-us.component.html
@@ -3,16 +3,16 @@
   <div class="grid-container">
     <h1 class="usa-heading text-white">Contact Us</h1>
 
-    <p class="usa-paragraph text-white">
+    <h5 class="usa-paragraph text-white contact-us">
       We are here to answer any questions you may have about the Solicitation Review Tool (SRT) and assist your agency 
       in having an efficient procurement process, ensuring Section 508 Compliance. If you have any suggestions to 
       enhance SRT, we would be happy to hear from you as well. You can reach us at 
-      <b><a href="mailto:[email protected]" class="usa-link" style="color: #ffcc00 !important;">[email protected]</a></b>.
-    </p>
+      <a href="mailto:[email protected]" class="srt-link usa-link">[email protected]</a>.
+    </h5>
 
-    <p class="usa-paragraph text-white">
+    <h5 class="usa-paragraph text-white contact-us">
       Need help determining if accessibility (Section 508) requirements apply to a solicitation? Please see the 
-      <a href="https://buyaccessible.gov/" target="_blank" rel="noopener noreferrer" class="usa-link" style="color: #ffcc00 !important;">Accessibility Requirements Tool</a>.
-    </p>
+      <a href="https://buyaccessible.gov/" target="_blank" rel="noopener noreferrer" class="srt-link usa-link">Accessibility Requirements Tool</a>.
+    </h5>
   </div>
 </main>
diff --git a/src/app/help/contact-us/contact-us.component.scss b/src/app/help/contact-us/contact-us.component.scss
@@ -0,0 +1,13 @@
+.srt-link{
+    color: #FF9A47 !important;
+}
+
+.srt-link:hover{
+    color: #FF9A47 !important;
+    text-decoration: underline;
+    font-weight: bolder;
+}
+
+.contact-us {
+    max-width: max-content !important;
+}
diff --git a/src/app/help/help.routing.ts b/src/app/help/help.routing.ts
@@ -11,9 +11,9 @@ const routes: Routes = [
     { path: 'help',
         component: HelpComponent,
         children: [
-            { path: 'faq', component: FaqComponent, canActivate: [AuthGuard] },
+            { path: 'faq', component: FaqComponent,  },
             { path: 'faq/:id', component: FaqComponent, canActivate: [AuthGuard] },
-            { path: 'contactus', component: ContactUsComponent, canActivate: [AuthGuard] },
+            { path: 'contactus', component: ContactUsComponent, },
         ]
     },