Skip to content

Commit 4c7e0b8

Browse files
BuckinghamAJBuckinghamAJ
authored
Merge pull request #153 from GSA/feature/improve_login_page
Improve Login Page
2 parents 1fb26e3 + 0a8621e commit 4c7e0b8

8 files changed

Lines changed: 192 additions & 13 deletions

File tree

‎src/app/app.routing.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const routes: Routes = [
1919
{path: 'admin/masq', component: MasqComponent, canActivate: [AuthGuardFn] , data: {}},
2020
{path: 'admin', component: AdminComponent, canActivate: [AdminGuardFn] , data: { isAccepted: false, isRejected: false }},
2121
{path: 'analytics', component: AnalyticsComponent, canActivate: [AdminGuardFn]},
22-
{path: 'help', component: HelpComponent, canActivate: [AuthGuardFn]},
22+
{path: 'help', component: HelpComponent},
2323
];
2424

2525
@NgModule({

‎src/app/auth/auth.component.html‎

Lines changed: 68 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,86 @@
11
<div class="grid-container">
2+
<div class="grid-row login-header-bg py-2 px-4 mt-2">
3+
<h1 class="usa-heading" style="font-weight: bold;"><u>Solicitation Review Tool</u></h1>
4+
<h3 class="usa-heading usa-heading--third-level">
5+
The Solicitation Review Tool (SRT) is provided to help agencies evaluate the overall solicitation compliance with accessibility, cyber security, and other regulations and requirements.
6+
</h3>
7+
</div>
8+
9+
210
<div class="grid-row">
311
<div class="grid-col-12">
412
<div class="grid-row usa-prose">
513
<div class="grid-col-8 tablet:grid-col-8 desktop:grid-col-8 desktop:grid-offset-2">
6-
<div class="usa-card margin-y-4 padding-3">
14+
<div class="usa-card margin-y-2 padding-1 card-shadow">
715
<div class="usa-card__header">
8-
<h1 class="usa-heading" style="font-weight: bold;">Solicitation Review Tool</h1>
16+
917
</div>
1018
<div class="usa-card__body">
1119
<h3 class="usa-heading usa-heading--third-level">
12-
The Solicitation Review Tool (SRT) is provided to help agencies evaluate the overall solicitation compliance with accessibility, cyber security, and other regulations and requirements.
20+
To sign in and view your agency's solicitations, you'll need a Login.gov account associated with your <b>government email address</b>.
1321
</h3>
1422
<app-userlogin></app-userlogin>
23+
<h5>
24+
If you need help adding an email address to your Login.gov account, please visit the
25+
<a href="https://www.login.gov/help/manage-your-account/change-your-email-address/" target="_blank" rel="noopener noreferrer">Login.gov Help Page.</a>
26+
</h5>
1527
</div>
1628
</div>
1729
</div>
1830
</div>
1931
</div>
2032
</div>
33+
34+
35+
36+
<div class="grid-row mt-5">
37+
<div class="tablet:grid-col-2 mobile-lg:grid-col-6"></div>
38+
<!-- Contact Us -->
39+
<div class="tablet:grid-col-4 mobile-lg:grid-col-6">
40+
<div class="usa-card">
41+
<a
42+
[routerLink]="['/help/contactus']"
43+
aria-labelledby="h3cus"
44+
class="usa-card__container usa-card__container--clickable"
45+
(click)="onClickTiles('contact_tile', 'Contact Tile')"
46+
>
47+
<div class="usa-card__media">
48+
<img alt="Contact Us Icon" src="/assets/contact-us.png" />
49+
</div>
50+
<div class="usa-card__header">
51+
<h2 class="usa-card__heading" id="h3cus">Contact Us</h2>
52+
</div>
53+
<div class="usa-card__body">
54+
<p>View contact information for the Solicitation Review Tool.</p>
55+
</div>
56+
</a>
57+
</div>
58+
</div>
59+
60+
<!-- FAQ -->
61+
<div class="tablet:grid-col-4 mobile-lg:grid-col-6">
62+
<div class="usa-card">
63+
<a
64+
[routerLink]="['/help/faq']"
65+
aria-labelledby="h3faq"
66+
class="usa-card__container usa-card__container--clickable"
67+
(click)="onClickTiles('faq_tile', 'FAQ Tile')"
68+
>
69+
<div class="usa-card__media">
70+
<img alt="FAQ Icon" src="/assets/faq.png" />
71+
</div>
72+
<div class="usa-card__header">
73+
<h2 class="usa-card__heading" id="h3faq">Learn More</h2>
74+
</div>
75+
<div class="usa-card__body">
76+
<p>Review Frequently Asked Questions and learn more about SRT.</p>
77+
</div>
78+
</a>
79+
</div>
80+
</div>
81+
82+
<div class="tablet:grid-col-2 mobile-lg:grid-col-6"></div>
83+
84+
</div>
85+
2186
</div>

‎src/app/auth/auth.component.scss‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,3 +154,91 @@ padding: 0;
154154
left: auto;
155155
right: -1px;
156156
}
157+
158+
159+
.card-shadow{
160+
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
161+
}
162+
163+
.login-header-bg {
164+
background-image: url("/assets/login.jpg");
165+
background-size: cover;
166+
background-color: rgba(255,255,255,0.8);
167+
background-blend-mode: lighten;
168+
}
169+
170+
/* Cards Section */
171+
.usa-card {
172+
height: 100%;
173+
display: flex;
174+
flex-direction: column;
175+
}
176+
177+
.usa-card__container {
178+
display: flex;
179+
flex-direction: column;
180+
justify-content: center;
181+
align-items: center;
182+
height: 100%;
183+
text-decoration: none;
184+
color: inherit;
185+
transition: box-shadow 0.3s ease, transform 0.3s ease;
186+
border-radius: 0.25rem; /* 4px */
187+
}
188+
189+
.usa-card__container--clickable {
190+
cursor: pointer; /* Show the clicky hand cursor on hover */
191+
}
192+
193+
.usa-card__container--clickable:hover,
194+
.usa-card__container--clickable:focus {
195+
box-shadow: 0 0 0 0.1875rem #2491ff; /* 3px */
196+
transform: translateY(-0.125rem); /* -2px */
197+
text-decoration: none;
198+
cursor: pointer;
199+
outline: none;
200+
}
201+
202+
.usa-card__media {
203+
flex: 0 0 auto;
204+
display: flex;
205+
justify-content: center;
206+
align-items: center;
207+
padding: 1rem;
208+
height: 7.5rem; /* 120px */
209+
}
210+
211+
.usa-card__media img {
212+
width: 5rem; /* 80px */
213+
height: 5rem; /* 80px */
214+
object-fit: contain;
215+
}
216+
217+
.usa-card__media img[alt="FAQ Icon"] {
218+
width: 10rem; /* 160px */
219+
height: 10rem; /* 160px */
220+
object-fit: contain; /* Ensures the image scales without distortion */
221+
}
222+
223+
.usa-card__header,
224+
.usa-card__body {
225+
flex: 1 1 auto;
226+
padding: 0 1rem;
227+
text-align: center;
228+
}
229+
230+
.usa-card__heading {
231+
margin-top: 0;
232+
margin-bottom: 0.5rem;
233+
}
234+
235+
.usa-card__body p {
236+
text-align: center;
237+
margin-top: 0;
238+
margin-bottom: 1rem;
239+
}
240+
241+
.tablet\:grid-col-4,
242+
.mobile-lg\:grid-col-6 {
243+
margin-bottom: 1rem;
244+
}

‎src/app/auth/auth.component.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { GoogleAnalyticsService } from 'ngx-google-analytics';
23

34
@Component({
45
selector: 'app-auth',
@@ -14,7 +15,9 @@ export class AuthComponent implements OnInit {
1415
/**
1516
* constructor
1617
*/
17-
constructor() { }
18+
constructor(
19+
private $gaService: GoogleAnalyticsService
20+
) { }
1821

1922
/**
2023
* lifecycle
@@ -30,4 +33,8 @@ export class AuthComponent implements OnInit {
3033
this.displayTab = arg;
3134
}
3235

36+
onClickTiles(action: string, label: string) {
37+
this.$gaService.event(action, 'auth_tiles', label);
38+
}
39+
3340
}

‎src/app/auth/userlogin/userlogin.component.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,12 @@
3434
}
3535
}
3636

37+
.login-image:hover {
38+
/* Increasing button size */
39+
transform: scale(1.05);
40+
}
41+
42+
3743
/* Adds space between the login container and the DEV login button */
3844
.dev-button {
3945
margin-top: 1em;

‎src/app/help/contact-us/contact-us.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
<div class="grid-container">
44
<h1 class="usa-heading text-white">Contact Us</h1>
55

6-
<p class="usa-paragraph text-white">
6+
<h5 class="usa-paragraph text-white contact-us">
77
We are here to answer any questions you may have about the Solicitation Review Tool (SRT) and assist your agency
88
in having an efficient procurement process, ensuring Section 508 Compliance. If you have any suggestions to
99
enhance SRT, we would be happy to hear from you as well. You can reach us at
10-
<b><a href="mailto:srt@gsa.gov" class="usa-link" style="color: #ffcc00 !important;">srt@gsa.gov</a></b>.
11-
</p>
10+
<a href="mailto:srt@gsa.gov" class="srt-link usa-link">srt@gsa.gov</a>.
11+
</h5>
1212

13-
<p class="usa-paragraph text-white">
13+
<h5 class="usa-paragraph text-white contact-us">
1414
Need help determining if accessibility (Section 508) requirements apply to a solicitation? Please see the
15-
<a href="https://buyaccessible.gov/" target="_blank" rel="noopener noreferrer" class="usa-link" style="color: #ffcc00 !important;">Accessibility Requirements Tool</a>.
16-
</p>
15+
<a href="https://buyaccessible.gov/" target="_blank" rel="noopener noreferrer" class="srt-link usa-link">Accessibility Requirements Tool</a>.
16+
</h5>
1717
</div>
1818
</main>

‎src/app/help/contact-us/contact-us.component.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.srt-link{
2+
color: #FF9A47 !important;
3+
}
4+
5+
.srt-link:hover{
6+
color: #FF9A47 !important;
7+
text-decoration: underline;
8+
font-weight: bolder;
9+
}
10+
11+
.contact-us {
12+
max-width: max-content !important;
13+
}

‎src/app/help/help.routing.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ const routes: Routes = [
1111
{ path: 'help',
1212
component: HelpComponent,
1313
children: [
14-
{ path: 'faq', component: FaqComponent, canActivate: [AuthGuard] },
14+
{ path: 'faq', component: FaqComponent, },
1515
{ path: 'faq/:id', component: FaqComponent, canActivate: [AuthGuard] },
16-
{ path: 'contactus', component: ContactUsComponent, canActivate: [AuthGuard] },
16+
{ path: 'contactus', component: ContactUsComponent, },
1717
]
1818
},
1919

0 commit comments

Comments
 (0)