1795 auth redirect logged out

.firebaserc

@@ -4,4 +4,4 @@
     "prod": "digital-testimony-prod"
   },
   "targets": {}
-}
+}

components/Newsfeed/Newsfeed.tsx

@@ -7,6 +7,7 @@ import { Col, Row, Spinner } from "../bootstrap"
 import { Profile, useProfile, usePublicProfile } from "../db"
 import { NotificationProps, Notifications } from "./NotificationProps"
 import notificationQuery from "./notification-query"
+
 import {
   BillCol,
   Header,
@@ -16,6 +17,8 @@ import {
 import ProfileSettingsModal from "components/EditProfilePage/ProfileSettingsModal"
 import { NewsfeedCard } from "components/NewsfeedCard/NewsfeedCard"
 import { ProfileButtons } from "components/ProfilePage/ProfileButtons"
+import { useAppDispatch } from "components/hooks"
+import { authStepChanged } from "components/auth/redux"
 
 export default function Newsfeed() {
   const { t } = useTranslation("common")
@@ -31,6 +34,18 @@ export default function Newsfeed() {
   const [allResults, setAllResults] = useState<Notifications>([])
   const [filteredResults, setFilteredResults] = useState<Notifications>([])
 
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    console.log("loading", loading, "profile", profile)
+    console.log(!loading && !profile)
+    if (!loading && !profile) {
+      dispatch(authStepChanged("protectedpage"))
+    } else {
+      dispatch(authStepChanged(null))
+    }
+  }, [dispatch, loading, profile])
+
   useEffect(() => {
     const results = allResults.filter(result => {
       if (isShowingOrgs && result.type == `testimony`) return true
@@ -251,7 +266,7 @@ export default function Newsfeed() {
               </StyledContainer>
             </div>
           ) : (
-            <ErrorPage statusCode={404} withDarkMode={false} />
+            <ErrorPage statusCode={401} withDarkMode={false} />
           )}
         </>
       )}

components/auth/AuthModal.tsx

@@ -7,14 +7,20 @@ import VerifyEmailModal from "./VerifyEmailModal"
 import ProfileTypeModal from "./ProfileTypeModal"
 import { AuthFlowStep, authStepChanged, useAuth } from "./redux"
 import { useAppDispatch } from "components/hooks"
+import ProtectedPageAuthModal from "./ProtectedPageAuthModal"
+import { useRouter } from "next/router"
 
 export default function AuthModal() {
   const dispatch = useAppDispatch()
+  const router = useRouter()
   const { authFlowStep: currentModal } = useAuth()
   const setCurrentModal = (step: AuthFlowStep) =>
     dispatch(authStepChanged(step))
   const close = () => dispatch(authStepChanged(null))
-
+  const closeAndRedirectHome = () => {
+    dispatch(authStepChanged(null))
+    router.push("/")
+  }
   return (
     <>
       <StartModal
@@ -49,6 +55,13 @@ export default function AuthModal() {
         show={currentModal === "forgotPassword"}
         onHide={() => setCurrentModal("signIn")}
       />
+
+      <ProtectedPageAuthModal
+        show={currentModal === "protectedpage"}
+        onHide={closeAndRedirectHome}
+        onSignInClick={() => setCurrentModal("signIn")}
+        onSignUpClick={() => setCurrentModal("chooseProfileType")}
+      />
     </>
   )
 }

components/auth/ProtectedPageAuthModal.tsx

@@ -0,0 +1,41 @@
+import type { ModalProps } from "react-bootstrap"
+import { Button, Col, Image, Modal, Stack } from "../bootstrap"
+import { useTranslation } from "next-i18next"
+
+export default function ProtectedPageAuthModal({
+  show,
+  onHide,
+  onSignInClick,
+  onSignUpClick
+}: Pick<ModalProps, "show" | "onHide"> & {
+  onSignInClick: () => void
+  onSignUpClick: () => void
+}) {
+  const { t } = useTranslation("auth")
+
+  return (
+    <Modal show={show} onHide={onHide} aria-labelledby="start-modal" centered>
+      <Modal.Header closeButton className={`py-4`}>
+        <Modal.Title id="start-modal" className="visually-hidden">
+          {t("signUpOrIn")}
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Col md={7} className="mx-auto">
+          <Stack gap={3} direction="vertical" className="mb-4 text-center">
+            <Image fluid src="/gov-with-mics.svg" alt="" />
+
+            <p className="h5">{t("loginForProtectedAccess")}</p>
+          </Stack>
+
+          <Stack gap={3}>
+            <Button onClick={onSignUpClick}>{t("signUp")}</Button>
+            <Button variant="outline-primary" onClick={onSignInClick}>
+              {t("signIn")}
+            </Button>
+          </Stack>
+        </Col>
+      </Modal.Body>
+    </Modal>
+  )
+}

components/auth/redux.ts

@@ -12,6 +12,7 @@ export type AuthFlowStep =
   | "forgotPassword"
   | "verifyEmail"
   | "chooseProfileType"
+  | "protectedpage"
   | null
 
 export interface State {

components/search/SearchContainer.tsx

@@ -186,7 +186,6 @@ export const SearchContainer = styled.div`
     font-size: 30px;
     color: var(--bs-blue);
     vertical-align: middle;
-    /* margin-bottom: 1rem; */
     background-color: transparent;
     border: none;
     padding: 0%;
@@ -259,4 +258,32 @@ export const SearchContainer = styled.div`
     border: none;
     cursor: pointer;
   }
+
+  /* Mobile-specific adjustments */
+  @media (max-width: 768px) {
+    .ais-MultiselectHierarchicalMenu-toggle {
+      font-size: 16px; /* Smaller on mobile */
+      min-width: 16px;
+    }
+    .ais-MultiselectHierarchicalMenu-list {
+      max-height: 400px; /* More space on mobile */
+      padding: 0.5rem; /* Reduced padding for smaller screens */
+    }
+
+    .ais-MultiselectHierarchicalMenu-list--child {
+      padding: 0 0 0 12px; /* Adjust indent for mobile */
+    }
+
+    .ais-MultiselectHierarchicalMenu-label,
+    .ais-MultiselectHierarchicalMenu-label--child {
+      font-size: 0.875rem; /* Smaller font on mobile */
+      gap: 6px;
+    }
+
+    .ais-MultiselectHierarchicalMenu-count,
+    .ais-MultiselectHierarchicalMenu-count--child {
+      font-size: 0.625rem;
+      padding: 1px 6px;
+    }
+  }
 `

functions/src/email/partials/bills/bill.handlebars

@@ -22,11 +22,12 @@
     <div style="height: 19px; font-weight: 700; font-size: 14px; line-height: 100%;
                 color: #000000; margin: auto; padding: 16px 0px 26px 0px;
                 text-align: center">
-      <img src="https://mapletestimony.org/email/images_no-svgs/endorse.png" alt="checkmark" style="padding-right: 18px"/>
-      {{this.endorseCount}} Endorse 
-      <img src="https://mapletestimony.org/email/images_no-svgs/neutral.png" alt="dash" style="padding: 0 18px"/>
-      {{this.neutralCount}} Neutral 
-      <img src="https://mapletestimony.org/email/images_no-svgs/oppose.png" alt="x-mark" style="padding: 0 18px"/>
+      <img src="https://mapletestimony.org/email/images_no-svgs/endorse.png" alt="checkmark"
+        style="padding-right: 18px" />
+      {{this.endorseCount}} Endorse
+      <img src="https://mapletestimony.org/email/images_no-svgs/neutral.png" alt="dash" style="padding: 0 18px" />
+      {{this.neutralCount}} Neutral
+      <img src="https://mapletestimony.org/email/images_no-svgs/oppose.png" alt="x-mark" style="padding: 0 18px" />
       {{this.opposeCount}} Oppose
     </div>
   </div>

functions/src/email/partials/bills/bills.handlebars

@@ -8,37 +8,33 @@
   </div>
   <div id="sectionBills">
     {{#each bills}}
-      {{> bill}}
+    {{> bill}}
     {{else}}
-      <article style="margin-bottom: 12px">
-        {{> noUpdates }}
-      </article>
+    <article style="margin-bottom: 12px">
+      {{> noUpdates }}
+    </article>
     {{/each}}
   </div>
   <div>
     {{#ifGreaterThan numBillsWithNewTestimony 4}}
-      <div style="padding: 12px 0px 12px 36px; background: #EAE7E7;
-                  border-radius: 12px; margin-bottom: 36px;"> 
-        <div style="font-weight: 700; font-size: 14px; line-height: 125%; letter-spacing: 3%; margin-top: 5px">
-          {{#ifGreaterThan numBillsWithNewTestimony 5}}
-            {{minusFour numBillsWithNewTestimony}} other bills you follow received testimony since your last update
-          {{else}}
-            {{minusFour numBillsWithNewTestimony}} other bill you follow received testimony since your last update
-          {{/ifGreaterThan}}
-        </div>
-        <div style="padding: 20px 0 15px 0; margin: auto; text-align: center">
-          <a 
-            style="background-color: #C61E32; padding: 10px 20px;
+    <div style="padding: 12px 0px 12px 36px; background: #EAE7E7;
+                  border-radius: 12px; margin-bottom: 36px;">
+      <div style="font-weight: 700; font-size: 14px; line-height: 125%; letter-spacing: 3%; margin-top: 5px">
+        {{#ifGreaterThan numBillsWithNewTestimony 5}}
+        {{minusFour numBillsWithNewTestimony}} other bills you follow received testimony since your last update
+        {{else}}
+        {{minusFour numBillsWithNewTestimony}} other bill you follow received testimony since your last update
+        {{/ifGreaterThan}}
+      </div>
+      <div style="padding: 20px 0 15px 0; margin: auto; text-align: center">
+        <a style="background-color: #C61E32; padding: 10px 20px;
                    color: white; text-decoration:none;font-size:14px;
-                   font-family:Roboto,sans-serif;border-radius:5px" 
-            href="https://www.mapletestimony.org/edit-profile/following"
-            target="_blank" 
-            rel="noopener noreferrer"
-          > 
-            View All
-          </a>
-        </div>
-      </div>  
+                   font-family:Roboto,sans-serif;border-radius:5px"
+          href="https://www.mapletestimony.org/edit-profile/following" target="_blank" rel="noopener noreferrer">
+          View All
+        </a>
+      </div>
+    </div>
     {{else}}
     {{/ifGreaterThan}}
   </div>