EREGCSC-2734 -- Create "Get Account Access" instructions page (#1510)

* feat: add /get-account-access/ page

* feat: begin building out django template markup

* feat: add all content and style access pg

* feat: add Get Account Access link wip

* style: scss linting; height tweak

* feat: break access link out to its own component

* style: minor header row gap refactor

* feat: hide Get Access link when authenticated

* feat: shorter label for narrow devices

* feat: better handle narrow devices down to ~390px wide

* fix: missing sign in/access links

when expanding header search input in narrow width and then expanding window to wide width

* fix: update final sign in link on access page

to take user to sign in page for current environment and not always prod

* fix: lowercase letter numbering type for nested lists

* test: Access Link unit tests

* test: add cypress e2e tests

* test: formatting

* feat: redirect sign in from get access page to homepage

* fix: remove stray period

* chore: remove stray console.log

* feat: make EUA sign in website link external

solution/backend/regulations/templates/regulations/get_account_access.html

@@ -0,0 +1,98 @@
+{% extends "regulations/base.html" %}
+{% load static %}
+{% block title_prefix %}
+    Get Account Access |
+{% endblock title_prefix %}
+{% block header %}
+    {% include "regulations/partials/header.html" %}
+{% endblock header %}
+{% block body %}
+    <div class="site-container">
+        <main class="get-account-access">
+            <h1>Get access to internal documents</h1>
+            <aside class="login-invite">
+                Already have an eRegulations job code?
+                <sign-in-link
+                    custom-login-url="{% url 'custom_login' %}"
+                    home-url="{% url 'homepage' %}"
+                    is-authenticated="{{ user.is_authenticated }}"
+                    link-label="Sign in through IDM"
+                    location="{{ location }}"
+                    direct-link="{% url 'homepage' %}"
+                ></sign-in-link>.
+            </aside>
+            <section>
+                <p>
+                    CMCS staff with policy-related responsibilities may
+                    request access to view and manage internal policy
+                    reference documents in eRegulations.
+                </p>
+                <p>
+                    These internal documents are <strong>only available
+                        to CMCS staff who sign into eRegulations through CMS
+                        IDM.</strong> Before signing in for the first time,
+                    CMCS staff need to request and be approved for an EUA
+                    job code for eRegulations.
+                </p>
+            </section>
+            <section class="access-list">
+                <h2>Request access for CMCS staff</h2>
+                <ol>
+                    <li>
+                        Sign in to the <a href="https://eua.cms.gov/" target="_blank" rel="noopener noreferrer" class="external">CMS EUA website</a>.
+                    </li>
+                    <li>
+                        Click <strong>Modify My Job Codes</strong>.
+                    </li>
+                    <li>
+                        Read the screen text, check the Confirmation (Required) checkbox, and click <strong>Next</strong>.
+                    </li>
+                    <li>
+                        Scroll to the bottom of the Modify My Job Codes: My Job Codes screen and click <strong>Add a Job Code</strong>.
+                    </li>
+                    <li>
+                        To find the job code, enter the following in the “Search for a group” box:
+                        <ol type="a">
+                            <li>
+                                Select <strong>Job Code</strong> from the first drop-down menu.
+                            </li>
+                            <li>Select = from the middle drop-down menu.</li>
+                            <li>Type or copy EREGS_EDITOR_PRD into the empty field.</li>
+                            <li>Click Search to the right of the job code field.</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Click the checkbox to confirm the job code, then click <strong>Select</strong> to move to the next screen.
+                    </li>
+                    <li>
+                        At this Modify My Job Codes: My Job Codes screen, do not click any checkboxes. Scroll to the bottom and click <strong>Next</strong>.
+                    </li>
+                    <li>
+                        At the Modify My Job Codes: My Job Codes screen:
+                        <ol type="a">
+                            <li>
+                                Enter a response in the <strong>Justification Reason</strong> field. Suggested language: I’m a CMCS staff member in [group and division name]. I am an eRegulations user and need access to internal policy repository documents for [reason].
+                            </li>
+                            <li>
+                                At the <strong>Is Job Code Temporary</strong> radio box, select <strong>No</strong>.
+                            </li>
+                        </ol>
+                    </li>
+                    <li>
+                        Click <strong>Finish</strong>.
+                    </li>
+                    <li>
+                        Your job code request may take several days to process. When approved, you will receive an email with an update, and can then <sign-in-link
+                            custom-login-url="{% url 'custom_login' %}"
+                            home-url="{% url 'homepage' %}"
+                            is-authenticated="{{ user.is_authenticated }}"
+                            link-label="sign in"
+                            location="{{ location }}"
+                            direct-link="{% url 'homepage' %}"
+                        ></sign-in-link> to eRegulations. If you do not receive this email within 2 weeks, please contact Stephanie Boyd (<a href="mailto:[email protected]">[email protected]</a>).
+                    </li>
+                </ol>
+            </section>
+        </main>
+    </div>
+{% endblock body %}

solution/backend/regulations/templates/regulations/partials/header.html

@@ -38,5 +38,10 @@
                 ></sign-in-link>
             {% endif %}
         </template>
+        <template #get-access>
+            {% if not user.is_authenticated %}
+                <access-link base="{% url 'homepage' %}"></access-link>
+            {% endif %}
+        </template>
     </header-component>
 </header>

solution/backend/regulations/urls.py

@@ -5,6 +5,7 @@
 from regulations import converters
 from regulations.views.about import AboutView
 from regulations.views.cache import CacheView
+from regulations.views.get_account_access import GetAccountAccessView
 from regulations.views.goto import GoToRedirectView
 from regulations.views.homepage import HomepageView
 from regulations.views.login import LoginView
@@ -29,6 +30,7 @@
 urlpatterns = [
     path('', HomepageView.as_view(), name='homepage'),
     path('about/', AboutView.as_view(), name='about'),
+    path('get-account-access/', GetAccountAccessView.as_view(), name='get_account_access'),
     path('login/', LoginView.as_view(), name='custom_login'),
     path('<numeric:title>/<numeric:part>/', RegulationLandingView.as_view(), name="regulation_landing_view"),
     path('<numeric:title>/<numeric:part>/', RegulationLandingView.as_view(), name="reader_view"),

solution/backend/regulations/views/get_account_access.py

@@ -0,0 +1,6 @@
+from django.views.generic.base import TemplateView
+
+
+class GetAccountAccessView(TemplateView):
+
+    template_name = 'regulations/get_account_access.html'

solution/ui/e2e/cypress/e2e/get-access-page.cy.js

@@ -0,0 +1,82 @@
+const username = Cypress.env("TEST_USERNAME");
+const password = Cypress.env("TEST_PASSWORD");
+
+describe("Get Account Access page", { scrollBehavior: "center" }, () => {
+    beforeEach(() => {
+        cy.clearIndexedDB();
+        cy.intercept("/**", (req) => {
+            req.headers["x-automated-test"] = Cypress.env("DEPLOYING");
+        });
+    });
+
+    it("checks a11y for Get Account Access page", () => {
+        cy.viewport("macbook-15");
+        cy.visit("/get-account-access");
+        cy.checkLinkRel();
+        cy.injectAxe();
+        cy.checkAccessibility();
+    });
+
+    it("goes to the Get Account Access page from homepage", () => {
+        cy.viewport("macbook-15");
+        cy.visit("/");
+        cy.get("a[data-testid='get-account-access-narrow']")
+            .should("not.be.visible");
+        cy.get("a[data-testid='get-account-access-wide']")
+            .should("be.visible")
+            .and("have.text", "Get Account Access")
+            .and("have.attr", "class")
+            .and("not.match", /active/);
+        cy.get("a[data-testid='get-account-access-wide']")
+            .click();
+        cy.url().should("include", "/get-account-access/");
+        cy.get("a[data-testid='get-account-access-wide']")
+            .should("be.visible")
+            .and("have.text", "Get Account Access")
+            .and("have.attr", "class")
+            .and("match", /active/);
+        cy.get("h1").contains("Get access to internal documents");
+    });
+
+    it("goes to the Get Account Access page from a SPA page like /subjects", () => {
+        cy.viewport("macbook-15");
+        cy.visit("/subjects");
+        cy.get("a[data-testid='get-account-access-wide']")
+            .click();
+        cy.url().should("include", "/get-account-access/");
+    });
+
+    it("should have a shorter header label on narrow screens", () => {
+        cy.viewport("iphone-x");
+        cy.visit("/");
+        cy.get("a[data-testid='get-account-access-wide']")
+            .should("not.be.visible");
+        cy.get("a[data-testid='get-account-access-narrow']")
+            .should("be.visible")
+            .and("have.text", "Get Access")
+            .click();
+        cy.url().should("include", "/get-account-access/");
+        cy.get("h1").contains("Get access to internal documents");
+    });
+
+    it("should not show the header link when logged in", () => {
+        cy.viewport("macbook-15");
+        cy.eregsLogin({ username, password, landingPage: "/" });
+        cy.get("a[data-testid='get-account-access-wide']")
+            .should("not.exist");
+        cy.get("a[data-testid='get-account-access-narrow']")
+            .should("not.exist");
+    });
+
+    // if subjects page works, statutes and search do as well
+    it("goes to the Subjects page using header link", () => {
+        cy.viewport("macbook-15");
+        cy.visit("/get-account-access/");
+        cy.clickHeaderLink({
+            page: "subjects",
+            label: "Research a Subject",
+            screen: "wide",
+        });
+        cy.url().should("include", "/subjects");
+    });
+});

solution/ui/e2e/cypress/e2e/title-tags.spec.cy.js

@@ -16,6 +16,18 @@ describe("Updated HTML Title Tags", { scrollBehavior: "center" }, () => {
         cy.title().should("eq", "Medicaid & CHIP eRegulations");
     });
 
+    it("About page title tags", () => {
+        cy.viewport("macbook-15");
+        cy.visit("/about/");
+        cy.title().should("eq", "About This Tool | Medicaid & CHIP eRegulations");
+    });
+
+    it("Get Account Access page title tags", () => {
+        cy.viewport("macbook-15");
+        cy.visit("/get-account-access/");
+        cy.title().should("eq", "Get Account Access | Medicaid & CHIP eRegulations");
+    });
+
     it("Statutes page title tags", () => {
         cy.viewport("macbook-15");
         cy.visit("/statutes/");

solution/ui/regulations/composables/login.js

@@ -5,18 +5,21 @@ export default function useLoginRedirectUrl({
     customLoginUrl,
     homeUrl,
     route,
+    directLink = undefined,
 }) {
     const loginUrl = ref(customLoginUrl);
 
     const setLoginUrl = () => {
         let basePath;
-        let fullPath;
+        let fullPath = "no-url-params";
         let redirectUrl;
 
         if (route) {
             basePath = route.path.substring(1);
             fullPath = route.fullPath;
             redirectUrl = `${customLoginUrl}?next=${homeUrl}${basePath}`;
+        } else if (directLink) {
+            redirectUrl = `${customLoginUrl}?next=${directLink}`;
         } else {
             basePath = window.location.pathname;
             fullPath = window.location.href;

solution/ui/regulations/css/scss/main.scss

@@ -37,7 +37,7 @@ $eregs-image-path: "../images" !default;
 @import "partials/error_pages";
 @import "partials/dropdown";
 @import "partials/expanded_toc";
-@import "partials/about";
+@import "partials/info_pages";
 @import "partials/login";
 @import "partials/buttons_and_tooltip";
 @import "partials/jump_to";