Fin

web/apps/photos/src/components/AuthenticateUser.tsx

@@ -3,6 +3,7 @@ import {
     TitledMiniDialog,
     type MiniDialogAttributes,
 } from "@/base/components/MiniDialog";
+import type { ModalVisibilityProps } from "@/base/components/utils/modal";
 import { useBaseContext } from "@/base/context";
 import log from "@/base/log";
 import { usePhotosAppContext } from "@/new/photos/types/context";
@@ -14,17 +15,24 @@ import type { KeyAttributes, User } from "@ente/shared/user/types";
 import { t } from "i18next";
 import { useCallback, useEffect, useState } from "react";
 
-interface Iprops {
-    open: boolean;
-    onClose: () => void;
+type AuthenticateUserProps = ModalVisibilityProps & {
+    /**
+     * Called when the user successfully reauthenticates themselves.
+     */
     onAuthenticate: () => void;
-}
+};
 
-export default function AuthenticateUserModal({
+/**
+ * A dialog for reauthenticating the logged in user by prompting them for their
+ * password.
+ *
+ * This is used as precursor to performing various sensitive or locked actions.
+ */
+export const AuthenticateUser: React.FC<AuthenticateUserProps> = ({
     open,
     onClose,
     onAuthenticate,
-}: Iprops) {
+}) => {
     const { logout, showMiniDialog } = useBaseContext();
     const { onGenericError } = usePhotosAppContext();
     const [user, setUser] = useState<User>();
@@ -106,7 +114,7 @@ export default function AuthenticateUserModal({
             />
         </TitledMiniDialog>
     );
-}
+};
 
 /**
  * Attributes for a dialog box that informs the user that their password was

web/apps/photos/src/pages/gallery.tsx

@@ -88,7 +88,7 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import FileUploadOutlinedIcon from "@mui/icons-material/FileUploadOutlined";
 import MenuIcon from "@mui/icons-material/Menu";
 import { IconButton, Stack, Typography } from "@mui/material";
-import AuthenticateUserModal from "components/AuthenticateUser";
+import { AuthenticateUser } from "components/AuthenticateUser";
 import CollectionNamer, {
     CollectionNamerAttributes,
 } from "components/Collections/CollectionNamer";
@@ -138,8 +138,6 @@ const defaultGalleryContext: GalleryContextType = {
     syncWithRemote: () => null,
     setBlockingLoad: () => null,
     photoListHeader: null,
-    openExportModal: () => null,
-    authenticateUser: () => null,
     user: null,
     userIDToEmailMap: null,
     emailList: null,
@@ -207,25 +205,6 @@ const Page: React.FC = () => {
     const [uploadTypeSelectorIntent, setUploadTypeSelectorIntent] =
         useState<UploadTypeSelectorIntent>("upload");
 
-    const [authenticateUserModalView, setAuthenticateUserModalView] =
-        useState(false);
-
-    const onAuthenticateCallback = useRef<(() => void) | undefined>(undefined);
-
-    const authenticateUser = (callback: () => void) => {
-        onAuthenticateCallback.current = callback;
-        setAuthenticateUserModalView(true);
-    };
-
-    const authenticateUser2 = () =>
-        new Promise<void>((resolve) => {
-            onAuthenticateCallback.current = resolve;
-            setAuthenticateUserModalView(true);
-        });
-
-    const closeAuthenticateUserModal = () =>
-        setAuthenticateUserModalView(false);
-
     // If the fix creation time dialog is being shown, then the list of files on
     // which it should act.
     const [fixCreationTimeFiles, setFixCreationTimeFiles] = useState<
@@ -260,6 +239,21 @@ const Page: React.FC = () => {
         useModalVisibility();
     const { show: showExport, props: exportVisibilityProps } =
         useModalVisibility();
+    const {
+        show: showAuthenticateUser,
+        props: authenticateUserVisibilityProps,
+    } = useModalVisibility();
+
+    const onAuthenticateCallback = useRef<(() => void) | undefined>(undefined);
+
+    const authenticateUser = useCallback(
+        () =>
+            new Promise<void>((resolve) => {
+                onAuthenticateCallback.current = resolve;
+                showAuthenticateUser();
+            }),
+        [],
+    );
 
     // TODO: Temp
     const user = state.user;
@@ -457,7 +451,7 @@ const Page: React.FC = () => {
             planSelectorVisibilityProps.open ||
             fixCreationTimeVisibilityProps.open ||
             exportVisibilityProps.open ||
-            authenticateUserModalView ||
+            authenticateUserVisibilityProps.open ||
             isPhotoSwipeOpen ||
             !filteredFiles?.length ||
             !user
@@ -787,7 +781,7 @@ const Page: React.FC = () => {
     const openHiddenSection: GalleryContextType["openHiddenSection"] = (
         callback,
     ) => {
-        authenticateUser(() => {
+        authenticateUser().then(() => {
             dispatch({ type: "showHidden" });
             callback?.();
         });
@@ -827,8 +821,6 @@ const Page: React.FC = () => {
                 syncWithRemote,
                 setBlockingLoad,
                 photoListHeader,
-                openExportModal: showExport,
-                authenticateUser,
                 userIDToEmailMap,
                 user,
                 emailList,
@@ -1007,7 +999,7 @@ const Page: React.FC = () => {
                     {...{ collectionSummaries }}
                     onShowPlanSelector={showPlanSelector}
                     onShowExport={showExport}
-                    onAuthenticateUser={authenticateUser2}
+                    onAuthenticateUser={authenticateUser}
                 />
                 <WhatsNew {...whatsNewVisibilityProps} />
                 {!isInSearchMode &&
@@ -1063,10 +1055,9 @@ const Page: React.FC = () => {
                     {...exportVisibilityProps}
                     allCollectionsNameByID={state.allCollectionsNameByID}
                 />
-                <AuthenticateUserModal
-                    open={authenticateUserModalView}
-                    onClose={closeAuthenticateUserModal}
-                    onAuthenticate={onAuthenticateCallback.current}
+                <AuthenticateUser
+                    {...authenticateUserVisibilityProps}
+                    onAuthenticate={onAuthenticateCallback.current!}
                 />
             </FullScreenDropZone>
         </GalleryContext.Provider>

web/apps/photos/src/types/gallery/index.ts

@@ -45,8 +45,6 @@ export interface GalleryContextType {
     syncWithRemote: (force?: boolean, silent?: boolean) => Promise<void>;
     setBlockingLoad: (value: boolean) => void;
     photoListHeader: TimeStampListItem;
-    openExportModal: () => void;
-    authenticateUser: (callback: () => void) => void;
     user: User;
     userIDToEmailMap: Map<number, string>;
     emailList: string[];