Merge pull request #1251 from jboolean/require-email

Require email to access map

Author: jboolean

backend/src/api/AuthenticationController.ts

@@ -30,7 +30,7 @@ type LoginRequest = {
   requireVerifiedEmail?: boolean;
 
   // If the user is already logged in, and the email is different, should we update the email on a named account?
-  newEmailBehavior?: 'update' | 'reject';
+  newEmailBehavior?: 'update' | 'reject' | 'create';
 };
 
 type LoginResponse = {

backend/src/business/users/UserService.ts

@@ -225,7 +225,7 @@ export async function processLoginRequest(
   apiBase: string,
   returnToPath?: string,
   requireVerifiedEmail = false,
-  newEmailBehavior: 'update' | 'reject' = 'update'
+  newEmailBehavior: 'update' | 'reject' | 'create' = 'update'
 ): Promise<LoginOutcome> {
   const userRepository = getRepository(User);
 
@@ -265,7 +265,27 @@ export async function processLoginRequest(
     );
     return LoginOutcome.SentLinkToExistingAccount;
   } else {
-    if (newEmailBehavior === 'update' || currentUser.isAnonymous) {
+    if (newEmailBehavior === 'create' && !currentUser.isAnonymous) {
+      // Create a new account for the new email if current account is non-anonymous
+      const newUser = new User();
+      newUser.email = normalizeEmail(requestedEmail);
+      newUser.isEmailVerified = false;
+      newUser.ipAddress = currentUser.ipAddress; // Keep the same IP for tracking
+      await userRepository.save(newUser);
+
+      if (requireVerifiedEmail) {
+        // We require a verified email for the new account
+        await sendMagicLink(
+          required(newUser.email, 'email'),
+          newUser.id,
+          apiBase,
+          returnToPath
+        );
+        return LoginOutcome.SentLinkToVerifyEmail;
+      }
+
+      return LoginOutcome.CreatedNewAccount as LoginOutcome;
+    } else if (newEmailBehavior === 'update' || currentUser.isAnonymous) {
       // Either account is anonymous or the current user is changing their email
       // Stays logged in, but updates account info
       currentUser.email = normalizeEmail(requestedEmail);

backend/src/enum/LoginOutcome.ts

@@ -4,6 +4,7 @@ enum LoginOutcome {
   SentLinkToExistingAccount = 'sent_link_to_existing_account',
   SentLinkToVerifyEmail = 'sent_link_to_verify_email',
   AccountDoesNotExist = 'account_does_not_exist',
+  CreatedNewAccount = 'created_new_account',
 }
 
 export default LoginOutcome;

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/AnnouncementBanner/AnnouncementRegistry.tsx

@@ -2,6 +2,16 @@ import React from 'react';
 import Announcment from './Announcement';
 
 const ANNOUNCEMENTS_REGISTRY: Announcment[] = [
+  {
+    id: 'email-required',
+    expiresAt: new Date('2026-01-18'),
+    render: () => (
+      <React.Fragment>
+        Due to high usage, an email address is temporarily required to access
+        the map.
+      </React.Fragment>
+    ),
+  },
   {
     id: 'zoom',
     expiresAt: new Date('2025-01-31'),

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,37 @@ 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
+          style={{
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#f5f5f5',
+            padding: '2rem',
+          }}
+        >
+          <div
+            style={{
+              textAlign: 'center',
+              maxWidth: '400px',
+            }}
+          >
+            <h2>Login Required</h2>
+            <p>Please log in to view the map.</p>
+            <LoginForm newEmailBehavior="create" />
+          </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';
@@ -10,6 +12,9 @@ import classNames from 'classnames';
 
 import stylesheet from './welcome.less';
 
+// Set to false to disable email requirement
+const REQUIRE_EMAIL = true;
+
 interface Props {
   isOpen: boolean;
   onRequestClose: () => void;
@@ -21,13 +26,26 @@ export default function Welcome({
   // Used to hide this annoying modal in development
   const isWelcomeDisabled = useFeatureFlag(FeatureFlag.DISABLE_WELCOME_MODAL);
 
+  const { isLoggedInToNonAnonymousAccount, isLoadingMe } = useLoginStore();
+
+  // Only require login if REQUIRE_EMAIL is true
+  const isEmailRequirementMet = REQUIRE_EMAIL
+    ? isLoggedInToNonAnonymousAccount && !isLoadingMe
+    : true;
+
+  const handleClose = (): void => {
+    if (isEmailRequirementMet) {
+      onRequestClose();
+    }
+  };
+
   return (
     <PhotoAsideModal
       isOpen={isOpen && !isWelcomeDisabled}
       className={stylesheet.welcomeModal}
-      onRequestClose={onRequestClose}
+      onRequestClose={handleClose}
       shouldCloseOnOverlayClick={false}
-      shouldCloseOnEsc
+      shouldCloseOnEsc={isEmailRequirementMet}
       size="large"
       isCloseButtonVisible={false}
       carouselProps={{
@@ -48,18 +66,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>
+
+          {REQUIRE_EMAIL && !isEmailRequirementMet ? (
+            <div className={stylesheet.loginSection}>
+              <p>
+                <strong>
+                  An email address is temporarily required to access the site.
+                </strong>
+              </p>
+              <LoginForm newEmailBehavior="create" />
+            </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 +139,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>
+        {(!REQUIRE_EMAIL || isEmailRequirementMet) && (
+          <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/components/LoginForm/index.tsx

@@ -12,7 +12,7 @@ export default function LoginForm({
   newEmailBehavior,
 }: {
   requireVerifiedEmail?: boolean;
-  newEmailBehavior?: 'update' | 'reject';
+  newEmailBehavior?: 'update' | 'reject' | 'create';
 }): JSX.Element {
   const {
     emailAddress,
@@ -23,6 +23,7 @@ export default function LoginForm({
     isVerifyEmailMessageVisible,
     isEmailUpdatedMessageVisible,
     isAccountDoesNotExistMessageVisible,
+    isNewAccountCreatedMessageVisible,
     isLoadingMe,
   } = useLoginStore();
 
@@ -83,6 +84,11 @@ export default function LoginForm({
           No account found for <i>{emailAddress}</i>.
         </p>
       )}
+      {isNewAccountCreatedMessageVisible && (
+        <p className={stylesheet.resultMessage}>
+          A new account has been created for <i>{emailAddress}</i>.
+        </p>
+      )}
     </form>
   );
 }

frontend/src/shared/stores/LoginStore.ts

@@ -10,10 +10,12 @@ import {
 interface State {
   emailAddress: string;
   isLoginValidated: boolean;
+  isLoggedInToNonAnonymousAccount: boolean;
   isFollowMagicLinkMessageVisible: boolean;
   isVerifyEmailMessageVisible: boolean;
   isEmailUpdatedMessageVisible: boolean;
   isAccountDoesNotExistMessageVisible: boolean;
+  isNewAccountCreatedMessageVisible: boolean;
   isLoadingMe: boolean;
 }
 
@@ -25,7 +27,7 @@ interface Actions {
     newEmailBehavior,
   }: {
     requireVerifiedEmail: boolean;
-    newEmailBehavior?: 'update' | 'reject';
+    newEmailBehavior?: 'update' | 'reject' | 'create';
   }) => void;
   logout: () => void;
 }
@@ -34,24 +36,30 @@ const useLoginStore = create(
   immer<State & Actions>((set, get) => ({
     emailAddress: '',
     isLoginValidated: false,
+    isLoggedInToNonAnonymousAccount: false,
     isFollowMagicLinkMessageVisible: false,
     isVerifyEmailMessageVisible: false,
     isEmailUpdatedMessageVisible: false,
     isAccountDoesNotExistMessageVisible: false,
+    isNewAccountCreatedMessageVisible: false,
     isLoadingMe: false,
 
     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;
+            draft.isNewAccountCreatedMessageVisible = false;
           });
         })
         .catch((err: unknown) => {
@@ -70,6 +78,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
       });
     },
 
@@ -89,11 +98,13 @@ const useLoginStore = create(
       );
       if (
         outcome === LoginOutcome.AlreadyAuthenticated ||
-        outcome === LoginOutcome.UpdatedEmailOnAuthenticatedAccount
+        outcome === LoginOutcome.UpdatedEmailOnAuthenticatedAccount ||
+        outcome === LoginOutcome.CreatedNewAccount
       ) {
         set((draft) => {
           // We stay logged into the current account and can proceed
           draft.isLoginValidated = true;
+          draft.isLoggedInToNonAnonymousAccount = true;
           draft.isFollowMagicLinkMessageVisible = false;
           draft.isVerifyEmailMessageVisible = false;
         });
@@ -102,6 +113,11 @@ const useLoginStore = create(
             draft.isEmailUpdatedMessageVisible = true;
           });
         }
+        if (outcome === LoginOutcome.CreatedNewAccount) {
+          set((draft) => {
+            draft.isNewAccountCreatedMessageVisible = true;
+          });
+        }
       } else if (outcome === LoginOutcome.SentLinkToExistingAccount) {
         set((draft) => {
           // The user must follow the link to log into another account, or verify their email