diff --git a/web/components/onboarding/index.ts b/web/components/onboarding/index.ts index 57a84818c..5f3cdcfe4 100644 --- a/web/components/onboarding/index.ts +++ b/web/components/onboarding/index.ts @@ -6,3 +6,4 @@ export * from "./workspace"; export * from "./invitations"; export * from "./onboarding-sidebar"; export * from "./step-indicator"; +export * from "./switch-delete-account-modal"; diff --git a/web/components/onboarding/switch-delete-account-modal.tsx b/web/components/onboarding/switch-delete-account-modal.tsx new file mode 100644 index 000000000..f0048fc95 --- /dev/null +++ b/web/components/onboarding/switch-delete-account-modal.tsx @@ -0,0 +1,160 @@ +import React, {useState } from "react"; +import { useRouter } from "next/router"; +import { mutate } from "swr"; +import { useTheme } from "next-themes"; +import { Dialog, Transition } from "@headlessui/react"; +import { Trash2 } from "lucide-react"; +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; +// hooks +import useToast from "hooks/use-toast"; + +type Props = { + isOpen: boolean; + onClose: () => void; +}; + +export const SwitchOrDeleteAccountModal: React.FC = (props) => { + const { isOpen, onClose } = props; + + // states + const [switchingAccount, setSwitchingAccount] = useState(false); + const [isDeactivating, setIsDeactivating] = useState(false); + + const { + user: { deactivateAccount, signOut }, + } = useMobxStore(); + + const router = useRouter(); + + const { resolvedTheme, setTheme } = useTheme(); + + const { setToastAlert } = useToast(); + + const handleClose = () => { + setSwitchingAccount(false); + setIsDeactivating(false); + onClose(); + }; + + const handleSwitchAccount = async () => { + setSwitchingAccount(true); + + await signOut() + .then(() => { + mutate("CURRENT_USER_DETAILS", null); + setTheme("system"); + router.push("/"); + handleClose(); + }) + .catch(() => + setToastAlert({ + type: "error", + title: "Error!", + message: "Failed to sign out. Please try again.", + }) + ) + .finally(() => setSwitchingAccount(false)); + }; + + const handleDeactivateAccount = async () => { + setIsDeactivating(true); + + await deactivateAccount() + .then(() => { + setToastAlert({ + type: "success", + title: "Success!", + message: "Account deleted successfully.", + }); + handleClose(); + router.push("/"); + }) + .catch((err) => + setToastAlert({ + type: "error", + title: "Error!", + message: err?.error, + }) + ) + .finally(() => setIsDeactivating(false)); + }; + + return ( + + + +
+ + +
+
+ + +
+
+
+
+
+ + Not the right workspace? + +
+ +
+
    +
  • Delete this account if you have another and won{"'"}t use this account.
  • +
  • Switch to another account if you{"'"}d like to come back to this account another time.
  • +
+
+
+
+
+ + +
+
+
+
+
+
+
+ ); +}; diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx index 636bc48b5..df7df99f4 100644 --- a/web/pages/onboarding/index.tsx +++ b/web/pages/onboarding/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState, ReactElement, Fragment } from "react"; +import { useEffect, useState, ReactElement } from "react"; import Image from "next/image"; import { useTheme } from "next-themes"; import { useRouter } from "next/router"; @@ -17,8 +17,7 @@ import useUserAuth from "hooks/use-user-auth"; import DefaultLayout from "layouts/default-layout"; import { UserAuthWrapper } from "layouts/auth-layout"; // components -import { InviteMembers, JoinWorkspaces, UserDetails } from "components/onboarding"; -import { DeactivateAccountModal } from "components/account"; +import { InviteMembers, JoinWorkspaces, UserDetails, SwitchOrDeleteAccountModal } from "components/onboarding"; // ui import { Avatar, Spinner } from "@plane/ui"; // images @@ -32,7 +31,7 @@ const workspaceService = new WorkspaceService(); const OnboardingPage: NextPageWithLayout = observer(() => { const [step, setStep] = useState(null); - const [showDeleteModal, setShowDeleteModal] = useState(false); + const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false); const { user: { currentUser, updateCurrentUser, updateUserOnBoard }, @@ -108,7 +107,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => { return ( <> - setShowDeleteModal(false)} /> + setShowDeleteAccountModal(false)} /> {user && step !== null ? (
@@ -164,15 +163,15 @@ const OnboardingPage: NextPageWithLayout = observer(() => { leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0" > - - + +
{ - setShowDeleteModal(true); + setShowDeleteAccountModal(true); }} > - Delete + Wrong e-mail address?
@@ -190,7 +189,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => { {step === 1 ? ( { - setShowDeleteModal(true); + setShowDeleteAccountModal(true); }} finishOnboarding={finishOnboarding} stepChange={stepChange}