Build a basic Sign In page

query-connector/src/app/query/components/header/header.module.css

@@ -5,4 +5,51 @@
   color: white !important;
   padding: 0px !important;
   font: inherit !important;
+  margin-right: 1rem !important;
+}
+
+.signinButton {
+  padding: 0.75rem 1.25rem !important;
+  cursor: pointer;
+  background: none !important;
+  border: 2px solid white !important;
+  border-radius: 4px !important;
+  color: white !important;
+  font: inherit !important;
+}
+
+.menuButton {
+  cursor: pointer;
+  background: none !important;
+  border: none !important;
+  color: white !important;
+  padding: 0px !important;
+  font: inherit !important;
+  margin: 0 !important;
+}
+
+.menuDropdownContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.menuDropdown {
+  border-radius: 4px !important;
+  padding: 0.5rem !important;
+  background: #ffffff !important;
+  margin: 3.5rem 3rem 0rem 0rem !important;
+  width: 10rem !important;
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
+}
+
+.menuItem {
+  color: black !important;
+  text-decoration: none;
+  padding: 0.5rem 1rem !important;
+}
+
+.menuItem:hover {
+  text-decoration: none !important;
 }

query-connector/src/app/query/components/header/header.tsx

@@ -2,21 +2,34 @@
 
 import { useEffect, useRef, useState } from "react";
 import { Modal, ModalButton } from "../../designSystem/Modal";
-import { ModalRef } from "@trussworks/react-uswds";
+import { ModalRef, Button, Icon } from "@trussworks/react-uswds";
 import styles from "./header.module.css";
 import { metadata } from "@/app/constants";
+import { useRouter, usePathname } from "next/navigation";
 /**
  * Produces the header.
  * @returns The HeaderComponent component.
  */
 export default function HeaderComponent() {
   const modalRef = useRef<ModalRef>(null);
   const [isClient, setIsClient] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
 
   useEffect(() => {
     setIsClient(true);
   }, []);
 
+  const router = useRouter();
+  const path = usePathname();
+
+  const handleClick = () => {
+    router.push(`/signin`);
+  };
+
+  const toggleMenuDropdown = () => {
+    setShowMenu(!showMenu);
+  };
+
   return (
     <>
       <header className="usa-header usa-header--basic bg-primary-darker">
@@ -26,14 +39,19 @@ export default function HeaderComponent() {
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
+            height: "4.5rem !important",
           }}
         >
           <div style={{ display: "flex", alignItems: "center" }}>
             <div className="usa-logo" style={{ marginLeft: "16px" }}>
               <em className="usa-logo__text text-base-lightest">
                 <a
                   className="text-base-lightest font-sans-xl text-bold"
-                  href="/tefca-viewer"
+                  href={
+                    process.env.NODE_ENV === "production"
+                      ? "/tefca-viewer"
+                      : "/"
+                  }
                   title={metadata.title}
                 >
                   {metadata.title}
@@ -46,15 +64,50 @@ export default function HeaderComponent() {
               whiteSpace: "nowrap",
               textAlign: "right",
               marginLeft: "auto",
+              display: "flex",
             }}
           >
-            {isClient && (
+            {path != "/signin" && isClient && (
               <ModalButton
                 modalRef={modalRef}
                 title={"Data Usage Policy"}
                 className={styles.dataUsagePolicyButton}
               />
             )}
+            {/* TODO: Rework show/hide rules based on actual auth status */}
+            {path != "/signin" && path != "/query" && (
+              <Button
+                className={styles.signinButton}
+                type="button"
+                id="signin-button"
+                title={"Sign in button"}
+                onClick={() => handleClick()}
+              >
+                Sign in
+              </Button>
+            )}
+            {path == "/query" && (
+              <button
+                onClick={toggleMenuDropdown}
+                className={`${styles.menuButton} usa-accordion__button usa-nav__link usa-current`}
+                aria-expanded="false"
+                aria-controls="dropdown-menu"
+                style={{
+                  background: "transparent",
+                  padding: "0 !important",
+                  height: "1.5rem !important",
+                  width: "1.5rem !important",
+                  margin: "0 1rem 0 0 !important",
+                }}
+              >
+                <Icon.Settings
+                  className="usa-icon qc-settings"
+                  size={3}
+                  color="#fff"
+                  aria-label="Gear icon indicating settings menu"
+                />
+              </button>
+            )}
           </div>
         </div>
       </header>
@@ -67,6 +120,26 @@ export default function HeaderComponent() {
           description="It's not! Data inputted into the TEFCA Query Connector is not persisted or stored anywhere."
         ></Modal>
       )}
+
+      {showMenu && (
+        <div className={styles.menuDropdownContainer}>
+          <ul
+            id="dropdown-menu"
+            className={`usa-nav__submenu ${styles.menuDropdown}`}
+          >
+            <li className={`usa-nav__submenu-item`}>
+              <a className={styles.menuItem} href="#">
+                My queries
+              </a>
+            </li>
+            <li className={`usa-nav__submenu-item`}>
+              <a className={styles.menuItem} href="/">
+                Log out
+              </a>
+            </li>
+          </ul>
+        </div>
+      )}
     </>
   );
 }

query-connector/src/app/signin/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+import React, { useState } from "react";
+
+import { Fieldset, Label, TextInput } from "@trussworks/react-uswds";
+
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import styles from "./signinPage.module.scss";
+
+/**
+ * The sign-in page for Query Connector.
+ * @returns The SigninPage component.
+ */
+export default function SigninPage() {
+  const router = useRouter();
+
+  const [userName, setUserName] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+
+  const handleSignin = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    router.push(`/query`);
+  };
+
+  return (
+    <div className="display-flex">
+      <div className={`${styles[`column-left`]} ${styles.column}`}>
+        <Image
+          alt="Graphic illustrating what TEFCA is"
+          className={styles.image}
+          src="/tefca-viewer/tefca-graphic.svg"
+          width={474}
+          height={438}
+          priority
+        />
+      </div>
+      <div className={styles.column}>
+        <div className={styles.card}>
+          <form onSubmit={handleSignin} action="" method="">
+            <div className={styles.formText}>
+              <h3>Sign in to Query Connector</h3>
+              <p>
+                This workspace allows you to sign in with your organizational
+                account.
+              </p>
+            </div>
+            <Fieldset>
+              <Label htmlFor="Username" className="margin-top-0-important">
+                Username
+              </Label>
+              <TextInput
+                id="Username"
+                name="username"
+                type="text"
+                className={styles.formInput}
+                value={userName}
+                onChange={(event) => {
+                  setUserName(event.target.value);
+                }}
+              />
+              <Label htmlFor="Password" className="margin-top-0-important">
+                Password
+              </Label>
+              <TextInput
+                id="Password"
+                name="password"
+                type="password"
+                className={styles.formInput}
+                value={password}
+                onChange={(event) => {
+                  setPassword(event.target.value);
+                }}
+              />
+            </Fieldset>
+            <button
+              className={`usa-button ${styles[`signin-button`]}`}
+              type="submit"
+            >
+              Sign in
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

query-connector/src/app/signin/signinPage.module.scss

@@ -0,0 +1,37 @@
+@use "../../styles/_variables" as *;
+
+.column {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.column-left {
+    background: #adcfdc;
+}
+
+.signin-button {
+    margin: 1rem 0rem !important;
+    width: 100%;
+}
+
+.card {
+    min-width: 10rem;
+    max-width: 50%;
+    color: #5c5c5c;
+}
+
+.image {
+    max-width: 60%;
+    max-height: 60%;
+    min-width: 10rem;
+}
+
+.formText {
+    text-align: center;
+}
+
+.formInput {
+    margin: 0.5rem 0rem;
+}

query-connector/src/styles/custom-styles.scss

@@ -191,6 +191,7 @@ body {
   grid-template-columns: 1fr; // Defines a single column
   justify-content: center; // Centers the column in the container
   background-color: rgba(247, 249, 250, 1);
+  flex: auto; // Sizes main-body to fill space between header and footer
 }
 
 .home {