Build a basic Sign In page

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

@@ -5,4 +5,52 @@
   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;
+  height: 1.5rem !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,35 @@
 
 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);
+  };
+  const backLink =
+    process.env.NODE_ENV === "production" ? "/tefca-viewer" : "/";
   return (
     <>
       <header className="usa-header usa-header--basic bg-primary-darker">
@@ -26,14 +40,15 @@ 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={backLink}
                   title={metadata.title}
                 >
                   {metadata.title}
@@ -46,15 +61,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 +117,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={backLink}>
+                Log out
+              </a>
+            </li>
+          </ul>
+        </div>
+      )}
     </>
   );
 }

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

@@ -0,0 +1,147 @@
+"use client";
+import React, { useState } from "react";
+
+import { Fieldset, Icon, 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();
+
+  type Credentials = {
+    username: string;
+    password: string;
+  };
+
+  const [signinError, setSigninError] = useState<boolean>(false);
+  const [credentials, setCredentials] = useState<Credentials>({
+    username: "",
+    password: "",
+  });
+
+  const handleInput = (event: React.FormEvent<HTMLInputElement>) => {
+    event.preventDefault();
+
+    const attribute = event.currentTarget.getAttribute("name") || "";
+    const value = event.currentTarget.value;
+
+    // clear error state when entering input text
+    if (signinError && value != "") {
+      setSigninError(false);
+    }
+
+    if (attribute != "") {
+      setCredentials({ ...credentials, [attribute]: value });
+    }
+  };
+
+  const handleSignin = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (credentials.username == "" || credentials.password == "") {
+      setSigninError(true);
+      return;
+    } else {
+      setSigninError(false);
+    }
+    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
+            className={styles.formContainer}
+            onSubmit={handleSignin}
+            action=""
+            method=""
+          >
+            <div className={styles.formContent}>
+              <div className={styles.formHeader}>
+                <h3>Sign in to Query Connector</h3>
+                <p>
+                  This workspace allows you to sign in with your organizational
+                  account.
+                </p>
+              </div>
+              <Fieldset className={styles.formFields}>
+                <div className={styles.formInputGroup}>
+                  <Label htmlFor="Username" className="margin-top-0-important">
+                    Username
+                  </Label>
+                  <TextInput
+                    id="Username"
+                    name="username"
+                    type="text"
+                    className={
+                      signinError
+                        ? `${styles.formError}`
+                        : `${styles.formInput}`
+                    }
+                    onChange={(event) => {
+                      handleInput(event);
+                    }}
+                  />
+                </div>
+                <div className={styles.formInputGroup}>
+                  <Label htmlFor="Password" className="margin-top-0-important">
+                    Password
+                  </Label>
+                  <TextInput
+                    id="Password"
+                    name="password"
+                    type="password"
+                    className={
+                      signinError
+                        ? `${styles.formError}`
+                        : `${styles.formInput}`
+                    }
+                    onChange={(event) => {
+                      handleInput(event);
+                    }}
+                  />
+                </div>
+              </Fieldset>
+            </div>
+            <button
+              className={`usa-button ${styles[`signin-button`]}`}
+              type="submit"
+            >
+              Sign in
+            </button>
+          </form>
+          <div
+            className={
+              signinError ? `${styles.inlineError}` : `${styles.hidden}`
+            }
+          >
+            <Icon.Info
+              className="usa-icon qc-info"
+              size={3}
+              color="#E41D3D"
+              aria-label="Information icon indicating a form error"
+              aria-hidden={!signinError}
+            />
+            <p>You have entered an invalid username and/or password</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}