Enhance login functionality to support new account creation. Updated LoginRequest and LoginResponse types to include 'create' option for newEmailBehavior. Modified processLoginRequest to handle new account creation and added corresponding LoginOutcome. Updated UI components to reflect email requirement for accessing the map and display messages for new account creation.

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/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/MainMap.less

@@ -6,32 +6,4 @@
     // 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

@@ -162,11 +162,25 @@ function withRouterRef<
 
     if (!canShowMap) {
       return (
-        <div className={stylesheet.loginOverlay}>
-          <div className={stylesheet.loginContent}>
+        <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 />
+            <LoginForm newEmailBehavior="create" />
           </div>
         </div>
       );

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

@@ -12,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;
@@ -25,11 +28,13 @@ export default function Welcome({
 
   const { isLoggedInToNonAnonymousAccount, isLoadingMe } = useLoginStore();
 
-  // Only allow closing if user is logged in to a non-anonymous account
-  const canClose = isLoggedInToNonAnonymousAccount && !isLoadingMe;
+  // Only require login if REQUIRE_EMAIL is true
+  const isEmailRequirementMet = REQUIRE_EMAIL
+    ? isLoggedInToNonAnonymousAccount && !isLoadingMe
+    : true;
 
   const handleClose = (): void => {
-    if (canClose) {
+    if (isEmailRequirementMet) {
       onRequestClose();
     }
   };
@@ -40,7 +45,7 @@ export default function Welcome({
       className={stylesheet.welcomeModal}
       onRequestClose={handleClose}
       shouldCloseOnOverlayClick={false}
-      shouldCloseOnEsc={canClose}
+      shouldCloseOnEsc={isEmailRequirementMet}
       size="large"
       isCloseButtonVisible={false}
       carouselProps={{
@@ -62,14 +67,14 @@ export default function Welcome({
             <strong>Zoom in! Every dot&nbsp;is&nbsp;a&nbsp;photo.</strong>
           </p>
 
-          {!canClose ? (
+          {REQUIRE_EMAIL && !isEmailRequirementMet ? (
             <div className={stylesheet.loginSection}>
               <p>
                 <strong>
                   An email address is temporarily required to access the site.
                 </strong>
               </p>
-              <LoginForm />
+              <LoginForm newEmailBehavior="create" />
             </div>
           ) : (
             <div
@@ -134,7 +139,7 @@ export default function Welcome({
             </a>
           </p>
         </div>
-        {canClose && (
+        {(!REQUIRE_EMAIL || isEmailRequirementMet) && (
           <div
             className={classNames(
               stylesheet.buttonContainer,

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

@@ -15,6 +15,7 @@ interface State {
   isVerifyEmailMessageVisible: boolean;
   isEmailUpdatedMessageVisible: boolean;
   isAccountDoesNotExistMessageVisible: boolean;
+  isNewAccountCreatedMessageVisible: boolean;
   isLoadingMe: boolean;
 }
 
@@ -26,7 +27,7 @@ interface Actions {
     newEmailBehavior,
   }: {
     requireVerifiedEmail: boolean;
-    newEmailBehavior?: 'update' | 'reject';
+    newEmailBehavior?: 'update' | 'reject' | 'create';
   }) => void;
   logout: () => void;
 }
@@ -40,6 +41,7 @@ const useLoginStore = create(
     isVerifyEmailMessageVisible: false,
     isEmailUpdatedMessageVisible: false,
     isAccountDoesNotExistMessageVisible: false,
+    isNewAccountCreatedMessageVisible: false,
     isLoadingMe: false,
 
     initialize: () => {
@@ -57,6 +59,7 @@ const useLoginStore = create(
             draft.isFollowMagicLinkMessageVisible = false;
             draft.isVerifyEmailMessageVisible = false;
             draft.isEmailUpdatedMessageVisible = false;
+            draft.isNewAccountCreatedMessageVisible = false;
           });
         })
         .catch((err: unknown) => {
@@ -95,7 +98,8 @@ 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
@@ -109,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

frontend/src/shared/utils/AuthenticationApi.ts

@@ -6,12 +6,13 @@ export enum LoginOutcome {
   SentLinkToExistingAccount = 'sent_link_to_existing_account',
   SentLinkToVerifyEmail = 'sent_link_to_verify_email',
   AccountDoesNotExist = 'account_does_not_exist',
+  CreatedNewAccount = 'created_new_account',
 }
 
 export async function processLoginRequest(
   requestedEmail: string,
   returnToPath?: string,
-  newEmailBehavior?: 'update' | 'reject',
+  newEmailBehavior?: 'update' | 'reject' | 'create',
   requireVerifiedEmail = false
 ): Promise<LoginOutcome> {
   const resp = await api.post<{ outcome: LoginOutcome }>(