PR design feedback - error state, some responsive sizing, hide My Que…

…ries for now
CDCgov · Oct 31, 2024 · 59b0865 · 59b0865
1 parent da1c832
commit 59b0865
Show file tree

Hide file tree

Showing 3 changed files with 201 additions and 50 deletions.
diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx
@@ -124,17 +124,15 @@ export default function HeaderComponent() {
             id="dropdown-menu"
             className={`usa-nav__submenu ${styles.menuDropdown}`}
           >
-            <li className={`usa-nav__submenu-item`}>
+            {/* <li className={`usa-nav__submenu-item`}>
               <a className={styles.menuItem} href="#">
                 My queries
               </a>
-            </li>
+            </li> */}
             <li className={`usa-nav__submenu-item`}>
               <a
                 className={styles.menuItem}
-                href={
-                  process.env.NODE_ENV === "production" ? "/tefca-viewer" : "/"
-                }
+                href={backLink}                
               >
                 Log out
               </a>

diff --git a/query-connector/src/app/signin/page.tsx b/query-connector/src/app/signin/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React, { useState } from "react";
 
-import { Fieldset, Label, TextInput } from "@trussworks/react-uswds";
+import { Fieldset, Icon, Label, TextInput } from "@trussworks/react-uswds";
 
 import { useRouter } from "next/navigation";
 import Image from "next/image";
@@ -13,12 +13,42 @@ import styles from "./signinPage.module.scss";
  */
 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)
+    }
 
-  const [_userName, setUserName] = useState<string>("");
-  const [_password, setPassword] = useState<string>("");
+    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`);
   };
 
@@ -36,47 +66,65 @@ export default function SigninPage() {
       </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>
+          <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>
-            <Fieldset>
-              <Label htmlFor="Username" className="margin-top-0-important">
-                Username
-              </Label>
-              <TextInput
-                id="Username"
-                name="username"
-                type="text"
-                className={styles.formInput}
-                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}
-                onChange={(event) => {
-                  setPassword(event.target.value);
-                }}
-              />
-            </Fieldset>
             <button
               className={`usa-button ${styles[`signin-button`]}`}
               type="submit"
             >
               Sign in
-            </button>
+            </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>

diff --git a/query-connector/src/app/signin/signinPage.module.scss b/query-connector/src/app/signin/signinPage.module.scss
@@ -3,6 +3,7 @@
 .column {
     width: 100%;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
 }
@@ -12,26 +13,130 @@
 }
 
 .signin-button {
-    margin: 1rem 0rem !important;
+    margin: 5px 0 5px 0;
     width: 100%;
+    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
+    font-size: 16px;
+    line-height: 19px;
+    font-weight: 700;
 }
 
 .card {
-    min-width: 10rem;
-    max-width: 50%;
+    min-width: 50%;
+    max-width: 25rem;
     color: #5c5c5c;
+    margin: 1.5rem;
 }
 
 .image {
-    max-width: 60%;
-    max-height: 60%;
-    min-width: 10rem;
+    max-height: 66%;
+    padding: 1.5rem;
 }
 
-.formText {
+@media screen and (max-width: 786px) {
+    .column-left {
+        display: none;
+    }
+}
+
+.formContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem 2.5rem 0.75rem 2.5rem;
+}
+
+.formContent {
+    padding: 0.875rem 0 0.875rem 0;
+    margin: 0.75rem 0 0.75rem 0;
+}
+
+.formHeader {
     text-align: center;
+    margin: 0 0 0.5rem 0;
+    padding: 0 0 0.5rem 0;
+
+    h3 {
+        font-size: 20px;
+        line-height: 23.5px;
+        margin: 0;
+        padding: 2.25px 0;
+    }
+
+    p {
+        font-size: 14px;
+        line-height: 19px;
+        font-weight: 400;
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.formFields {
+    padding: 0.25rem 0 0.25rem 0;
+    margin: 0 0 1rem 0;
+}
+
+.formInputGroup {
+    label {
+        font-size: 14px;
+        line-height: 19px;
+        margin-bottom: 0.25rem;
+    }
+
+    padding-bottom: 0.25rem;
 }
 
+// .formInputGroup {
+//     margin-bottom: 0.25rem;
+//     padding: 0 0 0.75rem 0 !important;
+// }
+
 .formInput {
-    margin: 0.5rem 0rem;
+    border-radius: 0.25rem;
+    padding: 0.75rem;
+    margin: 0;
+    font-size: 14px;
+    line-height: 17px;
+    height: unset;
+}
+
+.formError {
+    border-radius: 0.25rem;
+    padding: 0.75rem;
+    margin: 0;
+    font-size: 14px;
+    line-height: 17px;
+    height: unset;
+    border: 1px solid #e41d3d !important;
+}
+
+.inlineError {
+    width: 100%;
+    display: inline-flex;
+    color: #e41d3d;
+    align-items: center;
+    justify-content: center;
+
+    p {
+        margin: 0 0 0 0.5rem;
+        font-size: 14px;
+        line-height: 19px;
+    }
+}
+
+.hidden {
+    visibility: hidden;
+    width: 100%;
+    display: inline-flex;
+    color: #e41d3d;
+    align-items: center;
+    justify-content: center;
+
+    p {
+        margin: 0 0 0 0.5rem;
+        font-size: 14px;
+        line-height: 19px;
+    }
 }