del 1

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

@@ -24,8 +24,7 @@ import {
 } from "@mui/material";
 import { Formik, type FormikHelpers } from "formik";
 import { t } from "i18next";
-import { GalleryContext } from "pages/gallery";
-import React, { useContext, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Trans } from "react-i18next";
 import { deleteAccount, getAccountDeleteChallenge } from "services/userService";
 import * as Yup from "yup";
@@ -35,13 +34,23 @@ interface FormValues {
     feedback: string;
 }
 
-const DeleteAccountModal: React.FC<ModalVisibilityProps> = ({
+type DeleteAccountProps = ModalVisibilityProps & {
+    /**
+     * Called when the user should be authenticated again.
+     *
+     * Account deletion only proceeds if the promise returned by this function
+     * is fulfilled.
+     */
+    onAuthenticateUser: () => Promise<void>;
+};
+
+export const DeleteAccount: React.FC<DeleteAccountProps> = ({
     open,
     onClose,
+    onAuthenticateUser,
 }) => {
     const { logout, showMiniDialog } = useBaseContext();
     const { onGenericError } = usePhotosAppContext();
-    const { authenticateUser } = useContext(GalleryContext);
 
     const [loading, setLoading] = useState(false);
     const deleteAccountChallenge = useRef<string | undefined>(undefined);
@@ -76,7 +85,7 @@ const DeleteAccountModal: React.FC<ModalVisibilityProps> = ({
             deleteAccountChallenge.current =
                 deleteChallengeResponse.encryptedChallenge;
             if (deleteChallengeResponse.allowDelete) {
-                authenticateUser(confirmAccountDeletion);
+                onAuthenticateUser().then(confirmAccountDeletion);
             } else {
                 askToMailForDeletion();
             }
@@ -213,8 +222,6 @@ const DeleteAccountModal: React.FC<ModalVisibilityProps> = ({
     );
 };
 
-export default DeleteAccountModal;
-
 /**
  * All of these must have a corresponding localized string nested under the
  * "delete_reason" key.

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

@@ -109,7 +109,7 @@ import {
     useColorScheme,
 } from "@mui/material";
 import Typography from "@mui/material/Typography";
-import DeleteAccountModal from "components/DeleteAccountModal";
+import DeleteAccountModal from "components/DeleteAccount";
 import { WatchFolder } from "components/WatchFolder";
 import { t } from "i18next";
 import { useRouter } from "next/router";

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

@@ -216,6 +216,7 @@ const Page: React.FC = () => {
         onAuthenticateCallback.current = callback;
         setAuthenticateUserModalView(true);
     };
+
     const closeAuthenticateUserModal = () =>
         setAuthenticateUserModalView(false);