Let the user know that signing in is required. (#567)

* Let the user know that signing in is required.

* Fix formatting

Author: DMalone87

frontend/app/page.tsx

@@ -7,7 +7,7 @@ export default function Home() {
     <div className={styles.page}>
       <section className={styles.hero}>
         <h1 className={styles.heading}>How can we help you?</h1>
-        <SearchBar />
+        <SearchBar showLoginRequiredMessage />
       </section>
     </div>
   )

frontend/app/search/page.tsx

@@ -27,7 +27,7 @@ const PageResults = () => {
       <section className={styles.searchWrapper}>
         <Filter />
         <div className={styles.searchResultsWrapper}>
-          <SearchBar />
+          <SearchBar showLoginRequiredMessage />
           {error && (
             <div style={{ color: "red", padding: "1rem", textAlign: "center" }}>Error: {error}</div>
           )}

frontend/components/Nav/navIcons.module.css

@@ -12,6 +12,27 @@
   color: #303463;
 }
 
+.signInPulse {
+  animation: signInPulse 0.9s ease-out;
+}
+
+@keyframes signInPulse {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(48, 52, 99, 0.4);
+  }
+
+  30% {
+    transform: scale(1.06);
+    box-shadow: 0 0 0 10px rgba(48, 52, 99, 0.18);
+  }
+
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(48, 52, 99, 0);
+  }
+}
+
 @media screen and (max-width: 700px) {
   .createIcon {
     display: none;

frontend/components/Nav/navIcons.tsx

@@ -16,6 +16,7 @@ export default function NavIcons() {
   const router = useRouter()
 
   const [open, setOpen] = React.useState(false)
+  const [pulseSignin, setPulseSignin] = React.useState(false)
   const anchorRef = React.useRef<HTMLButtonElement>(null)
 
   const handleToggle = () => {
@@ -59,6 +60,39 @@ export default function NavIcons() {
     prevOpen.current = open
   }, [open])
 
+  React.useEffect(() => {
+    if (isLoggedIn) {
+      setPulseSignin(false)
+      return
+    }
+
+    let timeoutId: number | undefined
+
+    const handleLoginRequiredSearch = () => {
+      setPulseSignin(false)
+      window.requestAnimationFrame(() => {
+        setPulseSignin(true)
+      })
+
+      if (timeoutId) {
+        window.clearTimeout(timeoutId)
+      }
+
+      timeoutId = window.setTimeout(() => {
+        setPulseSignin(false)
+      }, 900)
+    }
+
+    window.addEventListener("npdc:login-required-search", handleLoginRequiredSearch)
+
+    return () => {
+      window.removeEventListener("npdc:login-required-search", handleLoginRequiredSearch)
+      if (timeoutId) {
+        window.clearTimeout(timeoutId)
+      }
+    }
+  }, [isLoggedIn])
+
   return (
     <div className={styles.icons}>
       {!isLoggedIn && (
@@ -76,6 +110,7 @@ export default function NavIcons() {
         <Button
           variant="outlined"
           href="/login"
+          className={pulseSignin ? styles.signInPulse : undefined}
           sx={{
             color: "#303463",
             borderColor: "#303463",

frontend/components/SearchBar/index.tsx

@@ -3,20 +3,33 @@
 import { TextField, InputAdornment, CircularProgress, Box } from "@mui/material"
 import { Search } from "@mui/icons-material"
 import { useSearch } from "@/providers/SearchProvider"
+import { useAuth } from "@/providers/AuthProvider"
 import React from "react"
 
-export const SearchBar = () => {
+type SearchBarProps = {
+  showLoginRequiredMessage?: boolean
+}
+
+export const SearchBar = ({ showLoginRequiredMessage = false }: SearchBarProps) => {
   const {
     loading,
     setTerm,
     state: { term }
   } = useSearch()
+  const { accessToken, hasHydrated } = useAuth()
   const [localInput, setLocalInput] = React.useState(term)
+  const [showAuthError, setShowAuthError] = React.useState(false)
 
   React.useEffect(() => {
     setLocalInput(term)
   }, [term])
 
+  React.useEffect(() => {
+    if (accessToken) {
+      setShowAuthError(false)
+    }
+  }, [accessToken])
+
   return (
     <Box
       sx={{
@@ -27,35 +40,53 @@ export const SearchBar = () => {
         width: "100%"
       }}
     >
-      <TextField
-        variant="outlined"
-        value={localInput}
-        onChange={(e) => setLocalInput(e.target.value)}
-        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-          if (e.key === "Enter") {
-            setTerm(localInput)
-          }
-        }}
-        sx={{
-          maxWidth: "546px",
-          width: "100%",
-          "& fieldset": { borderRadius: "20px" },
-          "& .MuiInputBase-input": {
-            overflow: "hidden",
-            textOverflow: "ellipsis"
-          }
-        }}
-        placeholder="Search officer, unit, or agency"
-        slotProps={{
-          input: {
-            startAdornment: (
-              <InputAdornment position="start">
-                <Search />
-              </InputAdornment>
-            )
-          }
-        }}
-      />
+      <Box sx={{ width: "100%", maxWidth: "546px" }}>
+        <TextField
+          variant="outlined"
+          value={localInput}
+          onChange={(e) => {
+            setLocalInput(e.target.value)
+            if (showAuthError) {
+              setShowAuthError(false)
+            }
+          }}
+          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === "Enter") {
+              if (showLoginRequiredMessage && hasHydrated && !accessToken) {
+                setShowAuthError(true)
+                window.dispatchEvent(new Event("npdc:login-required-search"))
+                return
+              }
+
+              setTerm(localInput)
+            }
+          }}
+          error={showAuthError}
+          helperText={showAuthError ? "Please log in before searching." : " "}
+          sx={{
+            width: "100%",
+            "& fieldset": { borderRadius: "20px" },
+            "& .MuiInputBase-input": {
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            "& .MuiFormHelperText-root": {
+              marginLeft: 0,
+              marginRight: 0
+            }
+          }}
+          placeholder="Search officer, unit, or agency"
+          slotProps={{
+            input: {
+              startAdornment: (
+                <InputAdornment position="start">
+                  <Search />
+                </InputAdornment>
+              )
+            }
+          }}
+        />
+      </Box>
       {loading && (
         <CircularProgress
           size={24}