mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
style: switch or delete account modal (#2926)
* style: switch or delete account modal * fix: popover text color * fix: typo
This commit is contained in:
Lakhan Baheti
sriram veeraghanta
parent
011db50da6
commit
c2c0dde824
@ -6,3 +6,4 @@ export * from "./workspace";
|
||||
export * from "./invitations";
|
||||
export * from "./onboarding-sidebar";
|
||||
export * from "./step-indicator";
|
||||
export * from "./switch-delete-account-modal";
|
||||
|
||||
160
web/components/onboarding/switch-delete-account-modal.tsx
Normal file
160
web/components/onboarding/switch-delete-account-modal.tsx
Normal file
@ -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> = (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 (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel
|
||||
className={`relative transform overflow-hidden rounded-lg bg-onboarding-background-200 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]`}
|
||||
>
|
||||
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-x-4">
|
||||
<div
|
||||
className={`grid place-items-center rounded-full ${
|
||||
resolvedTheme === "dark" ? "bg-[#2F3135]" : "bg-red-500/20"
|
||||
} p-4`}
|
||||
>
|
||||
<Trash2 className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<Dialog.Title as="h3" className="text-2xl font-medium leading-6 text-onboarding-text-100">
|
||||
Not the right workspace?
|
||||
</Dialog.Title>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 px-4">
|
||||
<ul className="text-onboarding-text-300 list-disc font-normal text-base">
|
||||
<li>Delete this account if you have another and won{"'"}t use this account.</li>
|
||||
<li>Switch to another account if you{"'"}d like to come back to this account another time.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-3 p-4 mb-2 sm:px-6">
|
||||
<button
|
||||
onClick={handleSwitchAccount}
|
||||
disabled={switchingAccount}
|
||||
className={`${resolvedTheme === "dark" ? "bg-[#2F3135]" : ""} px-4 py-1.5 text-sm rounded-sm`}
|
||||
>
|
||||
{switchingAccount ? "Switching..." : "Switch account"}
|
||||
</button>
|
||||
<button
|
||||
disabled={isDeactivating}
|
||||
onClick={handleDeactivateAccount}
|
||||
className={`${
|
||||
resolvedTheme === "dark" ? "bg-[#2F3135]" : ""
|
||||
} px-4 py-1.5 text-sm border border-red-500 rounded-sm text-red-500`}
|
||||
>
|
||||
{isDeactivating ? "Deleting..." : "Delete account"}
|
||||
</button>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
@ -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<number | null>(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 (
|
||||
<>
|
||||
<DeactivateAccountModal isOpen={showDeleteModal} onClose={() => setShowDeleteModal(false)} />
|
||||
<SwitchOrDeleteAccountModal isOpen={showDeleteAccountModal} onClose={() => setShowDeleteAccountModal(false)} />
|
||||
{user && step !== null ? (
|
||||
<div className={`bg-onboarding-gradient-100 h-full flex flex-col fixed w-full`}>
|
||||
<div className="sm:pt-14 sm:pb-8 py-10 px-4 sm:px-7 md:px-14 lg:pl-28 lg:pr-24 flex items-center">
|
||||
@ -164,15 +163,15 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Menu.Items className={"absolute translate-x-full"}>
|
||||
<Menu.Item>
|
||||
<Menu.Items className={"absolute min-w-full"}>
|
||||
<Menu.Item as="div">
|
||||
<div
|
||||
className="absolute pr-28 hover:cursor-pointer bg-onboarding-background-200 mr-auto mt-2 rounded-md text-custom-text-300 text-base font-normal p-3 shadow-sm border border-custom-border-200"
|
||||
className="hover:cursor-pointer bg-onboarding-background-200 mr-auto mt-2 rounded-md font-normal text-red-400 text-base p-3 shadow-sm border border-red-400"
|
||||
onClick={() => {
|
||||
setShowDeleteModal(true);
|
||||
setShowDeleteAccountModal(true);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
Wrong e-mail address?
|
||||
</div>
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
@ -190,7 +189,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
{step === 1 ? (
|
||||
<JoinWorkspaces
|
||||
setTryDiffAccount={() => {
|
||||
setShowDeleteModal(true);
|
||||
setShowDeleteAccountModal(true);
|
||||
}}
|
||||
finishOnboarding={finishOnboarding}
|
||||
stepChange={stepChange}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user