Add login to access map

Author: jboolean

frontend/src/screens/App/index.tsx

@@ -14,6 +14,7 @@ import stylesheet from './App.less';
 import AllStories from './screens/AllStories';
 import Outtakes from './screens/Outtakes';
 
+import useLoginStore from 'shared/stores/LoginStore';
 import { OptimizeExperimentsProvider } from 'shared/utils/OptimizeExperiments';
 import 'utils/optimize';
 import AdminRoutes from './screens/Admin/AdminRoutes';
@@ -117,6 +118,12 @@ function ContextWrappers({
 }: {
   children: React.ReactNode;
 }): JSX.Element {
+  const initialize = useLoginStore((state) => state.initialize);
+
+  React.useEffect(() => {
+    initialize();
+  }, [initialize]);
+
   return <OptimizeExperimentsProvider>{children}</OptimizeExperimentsProvider>;
 }
 

frontend/src/screens/App/screens/MapPane/components/MainMap/MainMap.less

@@ -6,4 +6,32 @@
     // width: 100%;
     height: 100%;
   }
+
+  .loginOverlay {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f5f5;
+  }
+
+  .loginContent {
+    text-align: center;
+    padding: 2rem;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    width: 100%;
+
+    h2 {
+      margin: 0 0 1rem 0;
+      color: #333;
+    }
+
+    p {
+      margin: 0 0 1.5rem 0;
+      color: #666;
+    }
+  }
 }

frontend/src/screens/App/screens/MapPane/components/MainMap/index.tsx

@@ -10,6 +10,8 @@ import {
 import classnames from 'classnames';
 import mapboxgl from 'mapbox-gl';
 
+import LoginForm from 'shared/components/LoginForm';
+import useLoginStore from 'shared/stores/LoginStore';
 import * as overlays from './overlays';
 
 export { OverlayId } from './overlays';
@@ -153,6 +155,23 @@ function withRouterRef<
     const match = useRouteMatch();
     const location = useLocation();
     const history = useHistory();
+    const { isLoggedInToNonAnonymousAccount, isLoadingMe } = useLoginStore();
+
+    // Only show map if user is logged in to a non-anonymous account
+    const canShowMap = isLoggedInToNonAnonymousAccount && !isLoadingMe;
+
+    if (!canShowMap) {
+      return (
+        <div className={stylesheet.loginOverlay}>
+          <div className={stylesheet.loginContent}>
+            <h2>Login Required</h2>
+            <p>Please log in to view the map.</p>
+            <LoginForm />
+          </div>
+        </div>
+      );
+    }
+
     return (
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- I give up on types
       // @ts-ignore

frontend/src/screens/App/screens/Welcome/index.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { useFeatureFlag } from 'screens/App/shared/stores/FeatureFlagsStore';
 import FeatureFlag from 'screens/App/shared/types/FeatureFlag';
 import Button from 'shared/components/Button';
+import LoginForm from 'shared/components/LoginForm';
+import useLoginStore from 'shared/stores/LoginStore';
 
 import PhotoAsideModal from '../PhotoAsideModal';
 import carouselImages from './carouselImages';
@@ -21,13 +23,24 @@ export default function Welcome({
   // Used to hide this annoying modal in development
   const isWelcomeDisabled = useFeatureFlag(FeatureFlag.DISABLE_WELCOME_MODAL);
 
+  const { isLoggedInToNonAnonymousAccount, isLoadingMe } = useLoginStore();
+
+  // Only allow closing if user is logged in to a non-anonymous account
+  const canClose = isLoggedInToNonAnonymousAccount && !isLoadingMe;
+
+  const handleClose = (): void => {
+    if (canClose) {
+      onRequestClose();
+    }
+  };
+
   return (
     <PhotoAsideModal
       isOpen={isOpen && !isWelcomeDisabled}
       className={stylesheet.welcomeModal}
-      onRequestClose={onRequestClose}
+      onRequestClose={handleClose}
       shouldCloseOnOverlayClick={false}
-      shouldCloseOnEsc
+      shouldCloseOnEsc={canClose}
       size="large"
       isCloseButtonVisible={false}
       carouselProps={{
@@ -48,18 +61,31 @@ export default function Welcome({
             <br />
             <strong>Zoom in! Every dot&nbsp;is&nbsp;a&nbsp;photo.</strong>
           </p>
-          <div
-            className={classNames(
-              stylesheet.buttonContainer,
-              stylesheet.mobileButton,
-              stylesheet.mobileOnly
-            )}
-            onClick={onRequestClose}
-          >
-            <Button buttonStyle="primary" className={stylesheet.explore}>
-              Start Exploring
-            </Button>
-          </div>
+
+          {!canClose ? (
+            <div className={stylesheet.loginSection}>
+              <p>
+                <strong>
+                  An email address is temporarily required to access the site.
+                </strong>
+              </p>
+              <LoginForm />
+            </div>
+          ) : (
+            <div
+              className={classNames(
+                stylesheet.buttonContainer,
+                stylesheet.mobileButton,
+                stylesheet.mobileOnly
+              )}
+              onClick={handleClose}
+            >
+              <Button buttonStyle="primary" className={stylesheet.explore}>
+                Start Exploring
+              </Button>
+            </div>
+          )}
+
           <hr />
           <p className={stylesheet.finePrint}>
             The photos on this site were retrieved from the NYC Department of
@@ -108,17 +134,19 @@ export default function Welcome({
             </a>
           </p>
         </div>
-        <div
-          className={classNames(
-            stylesheet.buttonContainer,
-            stylesheet.desktopOnly
-          )}
-          onClick={onRequestClose}
-        >
-          <Button buttonStyle="primary" className={stylesheet.explore}>
-            Start Exploring
-          </Button>
-        </div>
+        {canClose && (
+          <div
+            className={classNames(
+              stylesheet.buttonContainer,
+              stylesheet.desktopOnly
+            )}
+            onClick={handleClose}
+          >
+            <Button buttonStyle="primary" className={stylesheet.explore}>
+              Start Exploring
+            </Button>
+          </div>
+        )}
       </div>
     </PhotoAsideModal>
   );

frontend/src/screens/App/screens/Welcome/welcome.less

@@ -46,6 +46,11 @@
   font-size: 12px;
 }
 
+.loginSection {
+  margin: 1rem 0;
+  text-align: center;
+}
+
 .buttonContainer {
   padding: 1rem;
   text-align: center;

frontend/src/shared/stores/LoginStore.ts

@@ -10,6 +10,7 @@ import {
 interface State {
   emailAddress: string;
   isLoginValidated: boolean;
+  isLoggedInToNonAnonymousAccount: boolean;
   isFollowMagicLinkMessageVisible: boolean;
   isVerifyEmailMessageVisible: boolean;
   isEmailUpdatedMessageVisible: boolean;
@@ -34,6 +35,7 @@ const useLoginStore = create(
   immer<State & Actions>((set, get) => ({
     emailAddress: '',
     isLoginValidated: false,
+    isLoggedInToNonAnonymousAccount: false,
     isFollowMagicLinkMessageVisible: false,
     isVerifyEmailMessageVisible: false,
     isEmailUpdatedMessageVisible: false,
@@ -43,12 +45,15 @@ const useLoginStore = create(
     initialize: () => {
       set((draft) => {
         draft.isLoginValidated = false;
+        draft.isLoggedInToNonAnonymousAccount = false;
         draft.isLoadingMe = true;
       });
       getMe()
         .then((me) => {
           set((draft) => {
             draft.emailAddress = me.email || '';
+            // If getMe returns an email, the user is logged in to a non-anonymous account
+            draft.isLoggedInToNonAnonymousAccount = !!me.email;
             draft.isFollowMagicLinkMessageVisible = false;
             draft.isVerifyEmailMessageVisible = false;
             draft.isEmailUpdatedMessageVisible = false;
@@ -70,6 +75,7 @@ const useLoginStore = create(
         draft.isFollowMagicLinkMessageVisible = false;
         draft.isEmailUpdatedMessageVisible = false;
         draft.isLoginValidated = false;
+        // Don't reset isLoggedInToNonAnonymousAccount here as it's based on the server state
       });
     },
 
@@ -94,6 +100,7 @@ const useLoginStore = create(
         set((draft) => {
           // We stay logged into the current account and can proceed
           draft.isLoginValidated = true;
+          draft.isLoggedInToNonAnonymousAccount = true;
           draft.isFollowMagicLinkMessageVisible = false;
           draft.isVerifyEmailMessageVisible = false;
         });