Move LoginModal to LoginModalButton

HHS · Jan 10, 2025 · d519f77 · d519f77
1 parent 6f82fa2
commit d519f77
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/frontend/src/components/LoginModal.tsx → frontend/src/components/LoginButtonModal.tsx b/frontend/src/components/LoginModal.tsx → frontend/src/components/LoginButtonModal.tsx
@@ -11,14 +11,14 @@ import {
 
 import { USWDSIcon } from "src/components/USWDSIcon";
 
-const LOGIN_URL = "/api/auth/login";
+export const LOGIN_URL = "/api/auth/login";
 
-export const LoginModal = ({
+export const LoginButtonModal = ({
   navLoginLinkText,
 }: {
   navLoginLinkText: string;
 }) => {
-  const t = useTranslations("LoginModal");
+  const t = useTranslations("LoginButtonModal");
   const modalRef = useRef<ModalRef>(null);
 
   return (

diff --git a/frontend/src/components/user/UserControl.tsx b/frontend/src/components/user/UserControl.tsx
@@ -10,7 +10,7 @@ import {
   NavDropDownButton,
 } from "@trussworks/react-uswds";
 
-import { LoginModal } from "src/components/LoginModal";
+import { LoginButtonModal } from "src/components/LoginButtonModal";
 import { USWDSIcon } from "src/components/USWDSIcon";
 
 // used in three different places
@@ -116,7 +116,7 @@ export const UserControl = () => {
 
   return (
     <>
-      {!user?.token && <LoginModal navLoginLinkText={t("nav_link_login")} />}
+      {!user?.token && <LoginButtonModal navLoginLinkText={t("nav_link_login")} />}
       {!!user?.token && (
         <UserDropdown
           user={user}

diff --git a/frontend/src/i18n/messages/en/index.ts b/frontend/src/i18n/messages/en/index.ts
@@ -482,7 +482,7 @@ export const messages = {
     nav_link_logout: "Sign out",
     title: "Simpler.Grants.gov",
   },
-  LoginModal: {
+  LoginButtonModal: {
     title: "Sign in to Simpler.Grants.gov",
     help: "Simpler.Grants.gov uses Login.gov to verify your identity and manage your account securely. You don't need a separate username or password for this site.",
     description:

diff --git a/...tend/tests/components/LoginModal.test.tsx → ...ests/components/LoginButtonModal.test.tsx b/...tend/tests/components/LoginModal.test.tsx → ...ests/components/LoginButtonModal.test.tsx
@@ -2,7 +2,7 @@ import userEvent from "@testing-library/user-event";
 import { render, screen } from "tests/react-utils";
 
 import Header from "src/components/Header";
-import { LoginModal } from "src/components/LoginModal";
+import { LOGIN_URL, LoginButtonModal } from "src/components/LoginButtonModal";
 
 const usePathnameMock = jest.fn().mockReturnValue("/fakepath");
 
@@ -16,13 +16,18 @@ jest.mock("src/hooks/useFeatureFlags", () => ({
   }),
 }));
 
-describe("LoginModal", () => {
+describe("LoginButtonModal", () => {
   it("renders", () => {
-    render(<LoginModal navLoginLinkText="Sign in" />);
+    render(<LoginButtonModal navLoginLinkText="Sign in" />);
     const loginGovLink = screen.getByRole("link", {
       name: /Sign in with Login.gov/i,
     });
     expect(loginGovLink).toBeInTheDocument();
+    expect(loginGovLink).toHaveAttribute(
+      "href",
+      LOGIN_URL,
+    );
+
     const modalTitle = screen.getByRole("heading", { level: 2 });
     expect(modalTitle).toHaveTextContent("Sign in to Simpler.Grants.gov");
   });