Finish preliminary delete user, organization, refactor delete project, create org page

frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx

@@ -0,0 +1,81 @@
+import { useRouter } from "next/router";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    DeleteActionModal
+} from "@app/components/v2";
+import { useOrganization, useUser } from "@app/context";
+import {
+    useDeleteOrgById,
+    useGetOrgUsers
+} from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+import { navigateUserToOrg } from "@app/views/Login/Login.utils";
+
+export const OrgDeleteSection = () => {
+    const router = useRouter();
+    const { currentOrg } = useOrganization();
+    const { user } = useUser();
+    const { createNotification } = useNotificationContext();
+    const { data: members } = useGetOrgUsers(currentOrg?._id ?? "");
+    
+    const membershipOrg = members?.find((member) => member.user._id === user._id);
+
+    const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
+        "deleteOrg"
+    ] as const);
+
+    const { mutateAsync, isLoading } = useDeleteOrgById();
+    
+    const handleDeleteOrgSubmit = async () => {
+        try {
+            if (!currentOrg?._id) return;
+            
+            await mutateAsync({
+                organizationId: currentOrg?._id
+            });
+        
+            createNotification({
+                text: "Successfully deleted organization",
+                type: "success"
+            });
+
+            await navigateUserToOrg(router);
+            
+            handlePopUpClose("deleteOrg");
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to delete organization",
+                type: "error"
+            });
+        }
+    }
+
+    return (
+        <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
+            <p className="text-xl font-semibold text-mineshaft-100 mb-4">
+                Danger Zone
+            </p>
+            <Button
+                isLoading={isLoading}
+                colorSchema="danger"
+                variant="outline_bg"
+                type="submit"
+                onClick={() => handlePopUpOpen("deleteOrg")}
+                isDisabled={(membershipOrg && membershipOrg.role !== "admin")}
+            >
+                {`Delete ${currentOrg?.name}`}
+            </Button>
+            <DeleteActionModal
+                isOpen={popUp.deleteOrg.isOpen}
+                title="Are you sure want to delete this organization?"
+                subTitle={`Permanently remove ${currentOrg?.name} and all of its data. This action is not reversible, so please be careful.`}
+                onChange={(isOpen) => handlePopUpToggle("deleteOrg", isOpen)}
+                deleteKey="confirm"
+                onDeleteApproved={handleDeleteOrgSubmit}
+            />
+        </div>
+    );
+}

frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/index.tsx

@@ -0,0 +1 @@
+export { OrgDeleteSection } from "./OrgDeleteSection";

frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx

@@ -1,11 +1,24 @@
+import { useOrganization, useUser } from "@app/context";
+import { useGetOrgUsers } from "@app/hooks/api";
+
+import { OrgDeleteSection } from "../OrgDeleteSection";
 import { OrgIncidentContactsSection } from "../OrgIncidentContactsSection";
 import { OrgNameChangeSection } from "../OrgNameChangeSection";
 
 export const OrgGeneralTab = () => {
+  const { currentOrg } = useOrganization();
+  const { user } = useUser();
+  const { data: members } = useGetOrgUsers(currentOrg?._id ?? "");
+
+  const membershipOrg = members?.find((member) => member.user._id === user._id);
+
   return (
     <div>
       <OrgNameChangeSection />
       <OrgIncidentContactsSection />
+      {(membershipOrg && membershipOrg.role === "admin") && (
+        <OrgDeleteSection />
+      )}
     </div>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsSection.tsx

@@ -18,7 +18,7 @@ export const OrgIncidentContactsSection = () => {
   const permission = useOrgPermission();
 
   return (
-    <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+    <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
       <div className="flex justify-between mb-4">
         <p className="min-w-max text-xl font-semibold">{t("section.incident.incident-contacts")}</p>
         <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.IncidentAccount}>

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -53,7 +53,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
       onSubmit={handleSubmit(onFormSubmit)}
       className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
     >
-      <p className="text-xl font-semibold text-mineshaft-100 mb-4">Organization name</p>
+      <p className="text-xl font-semibold text-mineshaft-100 mb-4">Name</p>
       <div className="mb-2 max-w-md">
         <Controller
           defaultValue=""

frontend/src/views/Settings/PersonalSettingsPage/DeleteAccountSection/DeleteAccountSection.tsx

@@ -0,0 +1,64 @@
+import { useRouter } from "next/router";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    DeleteActionModal
+} from "@app/components/v2";
+import { useDeleteUser } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+export const DeleteAccountSection = () => {
+    const router = useRouter();
+    const { createNotification } = useNotificationContext();
+    const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
+        "deleteAccount"
+    ] as const);
+
+    const { mutateAsync: deleteUserMutateAsync, isLoading } = useDeleteUser();
+
+    const handleDeleteAccountSubmit = async () => {
+        try {
+            await deleteUserMutateAsync();
+            
+            createNotification({
+                text: "Successfully deleted account",
+                type: "success"
+            });
+
+            router.push("/login");
+            handlePopUpClose("deleteAccount");
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to delete account",
+                type: "error"
+            });
+        }
+    }
+    
+    return (
+        <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
+            <p className="text-xl font-semibold text-mineshaft-100 mb-4">
+                Danger Zone
+            </p>
+            <Button
+                isLoading={isLoading}
+                colorSchema="danger"
+                variant="outline_bg"
+                type="submit"
+                onClick={() => handlePopUpOpen("deleteAccount")}
+            >
+                Delete my account
+            </Button>
+            <DeleteActionModal
+                isOpen={popUp.deleteAccount.isOpen}
+                title="Are you sure want to delete your account?"
+                subTitle="Permanently remove this account and all of its data. This action is not reversible, so please be careful."
+                onChange={(isOpen) => handlePopUpToggle("deleteAccount", isOpen)}
+                deleteKey="confirm"
+                onDeleteApproved={handleDeleteAccountSubmit}
+            />
+        </div>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/DeleteAccountSection/index.tsx

@@ -0,0 +1 @@
+export { DeleteAccountSection } from "./DeleteAccountSection";

frontend/src/views/Settings/PersonalSettingsPage/PersonalGeneralTab/PersonalGeneralTab.tsx

@@ -1,4 +1,5 @@
 import { ChangeLanguageSection } from "../ChangeLanguageSection";
+import { DeleteAccountSection } from "../DeleteAccountSection";
 import { EmergencyKitSection } from "../EmergencyKitSection";
 import { SessionsSection } from "../SessionsSection";
 import { UserNameSection } from "../UserNameSection";
@@ -10,6 +11,7 @@ export const PersonalGeneralTab = () => {
             <ChangeLanguageSection />
             <SessionsSection />
             <EmergencyKitSection />
+            <DeleteAccountSection />
         </div>
     );
 }

frontend/src/views/Settings/ProjectSettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx

@@ -1,10 +1,11 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, FormControl, Input } from "@app/components/v2";
+import { 
+  Button, 
+  DeleteActionModal,
+} from "@app/components/v2";
 import {
   ProjectPermissionActions,
   ProjectPermissionSub,
@@ -13,78 +14,74 @@ import {
 } from "@app/context";
 import { useToggle } from "@app/hooks";
 import { useDeleteWorkspace } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
 
 export const DeleteProjectSection = () => {
-  const { t } = useTranslation();
   const router = useRouter();
   const { createNotification } = useNotificationContext();
-  const { currentWorkspace } = useWorkspace();
-  const { currentOrg } = useOrganization();
-  const [isDeleting, setIsDeleting] = useToggle();
-  const [deleteProjectInput, setDeleteProjectInput] = useState("");
-  const deleteWorkspace = useDeleteWorkspace();
+  const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
+    "deleteWorkspace"
+] as const);
 
-  const onDeleteWorkspace = async () => {
+  const { currentOrg } = useOrganization();
+  const { currentWorkspace } = useWorkspace();
+  const [isDeleting, setIsDeleting] = useToggle();
+  const deleteWorkspace = useDeleteWorkspace();
+  
+  const handleDeleteWorkspaceSubmit = async () => {
     setIsDeleting.on();
     try {
       if (!currentWorkspace?._id) return;
+      
       await deleteWorkspace.mutateAsync({
         workspaceID: currentWorkspace?._id
       });
-      // redirect user to the org overview
-      router.push(`/org/${currentOrg?._id}/overview`);
-
+      
       createNotification({
-        text: "Successfully deleted workspace",
+        text: "Successfully deleted project",
         type: "success"
       });
-    } catch (error) {
-      console.error(error);
+      
+      router.push(`/org/${currentOrg?._id}/overview`);
+      handlePopUpClose("deleteWorkspace");
+    } catch (err) {
+      console.error(err);
       createNotification({
-        text: "Failed to delete workspace",
+        text: "Failed to delete project",
         type: "error"
       });
     } finally {
       setIsDeleting.off();
     }
-  };
+  }
 
   return (
-    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-red">
-      <p className="mb-3 text-xl font-semibold text-red">{t("settings.project.danger-zone")}</p>
-      <p className="text-gray-400 mb-8">{t("settings.project.danger-zone-note")}</p>
-      <div className="mr-auto mt-4 max-h-28 w-full max-w-md">
-        <FormControl
-          label={
-            <div className="mb-0.5 text-sm font-normal text-gray-400">
-              Type <span className="font-bold">{currentWorkspace?.name}</span> to delete the
-              workspace
-            </div>
-          }
-        >
-          <Input
-            onChange={(e) => setDeleteProjectInput(e.target.value)}
-            value={deleteProjectInput}
-            placeholder="Type the project name to delete"
-            className="bg-mineshaft-800"
-          />
-        </FormControl>
-      </div>
-      <ProjectPermissionCan I={ProjectPermissionActions.Delete} a={ProjectPermissionSub.Workspace}>
-        {(isAllowed) => (
-          <Button
-            colorSchema="danger"
-            onClick={onDeleteWorkspace}
-            isDisabled={!isAllowed || deleteProjectInput !== currentWorkspace?.name || isDeleting}
-            isLoading={isDeleting}
-          >
-            {t("settings.project.delete-project")}
-          </Button>
-        )}
-      </ProjectPermissionCan>
-      <p className="mt-3 ml-0.5 text-xs text-gray-500">
-        {t("settings.project.delete-project-note")}
-      </p>
+    <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
+        <p className="text-xl font-semibold text-mineshaft-100 mb-4">
+            Danger Zone
+        </p>
+        <ProjectPermissionCan I={ProjectPermissionActions.Delete} a={ProjectPermissionSub.Workspace}>
+          {(isAllowed) => (
+            <Button
+                isLoading={isDeleting}
+                isDisabled={!isAllowed || isDeleting}
+                colorSchema="danger"
+                variant="outline_bg"
+                type="submit"
+                onClick={() => handlePopUpOpen("deleteWorkspace")}
+            >
+                {`Delete ${currentWorkspace?.name}`}
+            </Button>
+          )}
+        </ProjectPermissionCan>
+        <DeleteActionModal
+            isOpen={popUp.deleteWorkspace.isOpen}
+            title="Are you sure want to delete this project?"
+            subTitle={`Permanently remove ${currentWorkspace?.name} and all of its data. This action is not reversible, so please be careful.`}
+            onChange={(isOpen) => handlePopUpToggle("deleteWorkspace", isOpen)}
+            deleteKey="confirm"
+            onDeleteApproved={handleDeleteWorkspaceSubmit}
+        />
     </div>
   );
 };