Skip to content

Commit

Permalink
feat(grants): login screen - update registration section text and lin…
Browse files Browse the repository at this point in the history 
…ks (#3604)

* feat(grants): login screen - update registration section text and links

* feat(grants): move registration links below panel and update test import to shallowMount
  • Loading branch information
@lsr-explore
lsr-explore authored Oct 11, 2024
1 parent 61956a6 commit 767c92b
Show file tree
Hide file tree
Showing 2 changed files with 166 additions and 71 deletions.
78 changes: 75 additions & 3 deletions packages/client/src/views/LoginView.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,93 @@
import LoginView from '@/views/LoginView.vue';

import { describe, it, expect } from 'vitest';
import {
describe, it, expect, beforeEach,
} from 'vitest';
import { shallowMount } from '@vue/test-utils';

describe('LoginView', () => {
const $route = {
query: {},
};

it('renders', () => {
const wrapper = shallowMount(LoginView, {
let wrapper;

beforeEach(() => {
wrapper = shallowMount(LoginView, {
global: {
mocks: {
$route,
},
},
});
});

it('renders', () => {
expect(wrapper.exists()).toBe(true);
});

it('should show the Login heading', () => {
const heading = wrapper.find('h1');
expect(heading.text()).toEqual('Log in to Federal Grant Finder');
});

it('should show error if email submitted is invalid', async () => {
const input = wrapper.find('input');
expect(input.attributes('placeholder')).toEqual('Email address');

await input.setValue('invalid email');

const button = wrapper.find('b-button-stub');
expect(button.text()).toEqual('Send me the link');

await button.trigger('click');

const divs = wrapper.findAll('div');
expect(divs[2].text()).toBe('Please enter a valid email address');
});

// Reenable after setting up mock for the API call to /api/sessions
it.skip('should show "check inbox" message if known email is submitted', async () => {
const input = wrapper.find('input');
await input.setValue('[email protected]');

const button = wrapper.find('b-button-stub');
await button.trigger('click');

const divs = wrapper.findAll('div');
expect(divs[2].text()).toBe('Email sent to [email protected]. Check your inbox');
});

// Reenable after setting up mock for the API call to /api/sessions
it.skip('should show error message if unknown email is submitted', async () => {
const input = wrapper.find('input');
await input.setValue('[email protected]');

const button = wrapper.find('b-button-stub');
await button.trigger('click');

const divs = wrapper.findAll('div');
expect(divs[2].text()).toBe('User \'[email protected]\' not found');
});

it('should have expected hrefs and text for registration links', () => {
const links = wrapper.findAll('a');

const newJerseyLink = links[0];
const nevadaLink = links[1];
const usdrLink = links[2];
const contactUSDREmail = links[3];

expect(newJerseyLink.attributes('aria-label')).toEqual('link to New Jersey registration form');
expect(newJerseyLink.attributes('href')).toEqual('https://forms.office.com/pages/responsepage.aspx?id=0cN2UAI4n0uzauCkG9ZCp7ITdp07WUhBmfHGHVfxwctUNVFJNFNPUllWSTBQNFZCQlMyMjlWWU5NUiQlQCN0PWcu&route=shorturl');

expect(nevadaLink.attributes('aria-label')).toEqual('link to Nevada registration form');
expect(nevadaLink.attributes('href')).toEqual('https://forms.office.com/pages/responsepage.aspx?id=5kCj5J64aE6OqhVE0nA5gBT1YIeXbrtMjy6yqM5ILm1UQVQwT0xOT1QxU0dNU1BDN05WWDdaVFRBRS4u&route=shorturl');

expect(usdrLink.text()).toBe('connect with USDR here.');
expect(usdrLink.attributes('href')).toEqual('https://form.jotform.com/240083950102041');

expect(contactUSDREmail.text()).toBe('Contact USDR for support.');
expect(contactUSDREmail.attributes('href')).toEqual('mailto:[email protected]?subject=Federal Grant Finder Login Issue');
});
});
159 changes: 91 additions & 68 deletions packages/client/src/views/LoginView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,101 @@
<template>
<b-card
no-body
tag="div"
style="max-width: 26rem; margin-top: 11rem"
class="mx-auto border-0"
>
<b-card-img
:src="logo"
style="max-width: 14rem"
alt="United States Digital Response logo"
class="mx-auto mb-3"
top
/>
<b-card-text class="mt-4 p-3 dropshadow-card">
<h1 class="h3 my-4">
Log in to Federal Grant Finder
</h1>
<p class="mb-4">
Enter your email to receive a one-time login link.
</p>
<form @submit="login">
<div>
<label for="email">Email</label>
<input
id="email"
v-model="email"
class="form-control mb-4"
name="email"
placeholder="Email address"
autofocus
<main>
<b-card
no-body
tag="div"
style="max-width: 26rem; margin-top: 11rem"
class="mx-auto border-0"
>
<b-card-img
:src="logo"
style="max-width: 14rem"
alt="United States Digital Response logo"
class="mx-auto mb-3"
top
/>
<b-card-text class="mt-4 p-3 dropshadow-card">
<h1 class="h3 my-4">
Log in to Federal Grant Finder
</h1>
<p class="mb-4">
Enter your email to receive a one-time login link.
</p>
<form @submit="login">
<div>
<label for="email">Email</label>
<input
id="email"
v-model="email"
class="form-control mb-4"
name="email"
placeholder="Email address"
autofocus
>
</div>
<div
class="d-flex justify-content-center"
>
<b-button
variant="primary"
class="btn-block"
type="Submit"
@click="login"
>
Send me the link
</b-button>
</div>
</form>
<div
v-if="serverResponse"
class="mt-3"
:class="{
'alert alert-success': serverResponse.success,
'alert alert-danger': !serverResponse.success,
}"
>
{{ serverResponse.message }}
</div>
<div
class="d-flex justify-content-center"
v-for="error of v$.$errors"
:key="error.$uid"
class="mt-3 alert alert-danger"
>
<b-button
variant="primary"
class="btn-block"
type="Submit"
@click="login"
>
Send me the link
</b-button>
{{ error.$message }}
</div>
</b-card-text>
<div>
<div class="font-weight-bold">
Don't have an account?
</div>
<div>
<span>If you are within the state of New Jersey </span>
<a
href="https://forms.office.com/pages/responsepage.aspx?id=0cN2UAI4n0uzauCkG9ZCp7ITdp07WUhBmfHGHVfxwctUNVFJNFNPUllWSTBQNFZCQlMyMjlWWU5NUiQlQCN0PWcu&route=shorturl"
target="_blank"
aria-label="link to New Jersey registration form"
>register here.</a>
</div>
<div>
<span>If you are within the state of Nevada </span>
<a
href="https://forms.office.com/pages/responsepage.aspx?id=5kCj5J64aE6OqhVE0nA5gBT1YIeXbrtMjy6yqM5ILm1UQVQwT0xOT1QxU0dNU1BDN05WWDdaVFRBRS4u&route=shorturl"
target="_blank"
aria-label="link to Nevada registration form"
>register here.</a>
</div>
<div>
<span>If you are located elsewhere </span>
<a
href="https://form.jotform.com/240083950102041"
target="_blank"
>connect with USDR here.</a>
</div>
<div class="mt-3">
<span class="font-weight-bold">Need help? </span><a href="mailto:[email protected]?subject=Federal Grant Finder Login Issue">Contact USDR for support.</a>
</div>
</form>
<div
v-if="serverResponse"
class="mt-3"
:class="{
'alert alert-success': serverResponse.success,
'alert alert-danger': !serverResponse.success,
}"
>
{{ serverResponse.message }}
</div>
<div
v-for="error of v$.$errors"
:key="error.$uid"
class="mt-3 alert alert-danger"
>
{{ error.$message }}
</div>
<hr class="my-4">
<p>
Don't have an account? Please fill out
<a
href="https://form.jotform.com/201195733501145"
target="_blank"
>USDR's request form</a>
and indicate you'd like to create one.
</p>
<p>Need help? <a href="mailto:[email protected]?subject=Federal Grant Finder Login Issue">Contact us</a> for support.</p>
</b-card-text>
</b-card>
</b-card>
</main>
</template>

<script>
Expand Down

0 comments on commit 767c92b

Please sign in to comment.