Add confirm modal to all logouts

Author: MrBartusek

apps/client/src/components/ConfirmLogoutButton.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import ConfirmLogoutModal from './ConfirmLogoutModal';
+import { createPortal } from 'react-dom';
+
+type ButtonProps = React.DetailedHTMLProps<
+	React.ButtonHTMLAttributes<HTMLButtonElement>,
+	HTMLButtonElement
+>;
+
+export interface ConfirmLogoutButtonProps extends ButtonProps {
+	children: React.ReactNode;
+}
+
+function ConfirmLogoutButton({ children, ...props }: ConfirmLogoutButtonProps) {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<>
+			{createPortal(
+				<ConfirmLogoutModal
+					open={open}
+					handleClose={() => setOpen(false)}
+				/>,
+				document.body,
+			)}
+			<button
+				{...props}
+				onClick={() => setOpen(true)}
+			>
+				{children}
+			</button>
+		</>
+	);
+}
+export default ConfirmLogoutButton;

apps/client/src/components/ConfirmLogoutModal.tsx

@@ -0,0 +1,55 @@
+import { useContext } from 'react';
+import { BsBoxArrowLeft, BsTrash, BsTrash3, BsTrashFill } from 'react-icons/bs';
+import { UserContext } from '../context/UserContext';
+import IconButton from './IconButton';
+import ModalBody from './Modal/ModalBody';
+import ModalCloseButton from './Modal/ModalCloseButton';
+import ModalDialog, { ModalDialogProps } from './Modal/ModalDialog';
+import ModalHeader from './Modal/ModalHeader';
+import ModalTitle from './Modal/ModalTitle';
+import ModelFooter from './Modal/ModelFooter';
+import { useNavigate } from 'react-router-dom';
+import toast from 'react-hot-toast';
+import Alert from './Helpers/Alert';
+
+export interface ConfirmLogoutModalProps extends ModalDialogProps {}
+
+function ConfirmLogoutModal(props: ConfirmLogoutModalProps) {
+	const { user, logout } = useContext(UserContext);
+	const navigate = useNavigate();
+
+	async function handleClick() {
+		navigate('/');
+		await logout();
+		toast.success('Successfully logged out');
+	}
+
+	return (
+		<ModalDialog {...props}>
+			<ModalHeader closeButton>
+				<ModalTitle>Logout</ModalTitle>
+			</ModalHeader>
+
+			<ModalBody>
+				{user.isDemo && (
+					<Alert className="mb-2">
+						<BsTrash3 />
+						This action is going to delete this demo account{' '}
+					</Alert>
+				)}
+				Are you sure do you want to logout?
+			</ModalBody>
+
+			<ModelFooter>
+				<IconButton
+					icon={BsBoxArrowLeft}
+					onClick={handleClick}
+				>
+					Logout
+				</IconButton>
+				<ModalCloseButton />
+			</ModelFooter>
+		</ModalDialog>
+	);
+}
+export default ConfirmLogoutModal;

apps/client/src/components/Helpers/Alert.tsx

@@ -12,6 +12,7 @@ function Alert({ children, ...props }: AlertProps) {
 			{...props}
 			className={classNames(
 				'overflow-hidden break-words rounded-sm border border-red-300 bg-red-200 p-4',
+				'flex items-center gap-2',
 				props.className,
 			)}
 		>

apps/client/src/components/Pages/User/UserSettingsSidebar.tsx

@@ -1,12 +1,9 @@
-import { useContext } from 'react';
 import { BsBoxArrowLeft, BsPersonFill, BsShieldLockFill } from 'react-icons/bs';
-import { UserContext } from '../../../context/UserContext';
+import ConfirmLogoutButton from '../../ConfirmLogoutButton';
 import SidebarLink from '../../Sidebar/SidebarLink';
 import SidebarSection from '../../Sidebar/SidebarSection';
 
 function UserSettingsSidebar() {
-	const { logout } = useContext(UserContext);
-
 	const baseUrl = `/dashboard/user/me`;
 
 	return (
@@ -24,12 +21,13 @@ function UserSettingsSidebar() {
 				/>
 			</SidebarSection>
 			<SidebarSection name="Actions">
-				<SidebarLink
-					to="/"
-					onClick={logout}
-					icon={BsBoxArrowLeft}
-					text="Logout"
-				/>
+				<ConfirmLogoutButton>
+					<SidebarLink
+						to="."
+						icon={BsBoxArrowLeft}
+						text="Logout"
+					/>
+				</ConfirmLogoutButton>
 			</SidebarSection>
 		</nav>
 	);

apps/client/src/components/UserInfo.tsx

@@ -6,9 +6,10 @@ import {
 	BsExclamationOctagon,
 	BsPerson,
 } from 'react-icons/bs';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import Badge from '../Badge';
 import { UserContext } from '../context/UserContext';
+import ConfirmLogoutButton from './ConfirmLogoutButton';
 import Dropdown from './Dropdown/Dropdown';
 import DropdownItem from './Dropdown/DropdownItem';
 import DropdownMenu from './Dropdown/DropdownMenu';
@@ -17,13 +18,7 @@ import UserAvatar from './UserAvatar';
 import UserSettingsDropdownItem from './UserSettingsDropdownItem';
 
 function UserInfo() {
-	const { user, logout } = useContext(UserContext);
-	const navigate = useNavigate();
-
-	function handleLogout() {
-		logout();
-		navigate('/');
-	}
+	const { user } = useContext(UserContext);
 
 	return (
 		<Dropdown>
@@ -60,12 +55,9 @@ function UserInfo() {
 						Report issue
 					</DropdownItem>
 				</Link>
-				<DropdownItem
-					icon={BsBoxArrowLeft}
-					onClick={handleLogout}
-				>
-					Logout
-				</DropdownItem>
+				<ConfirmLogoutButton className="w-full">
+					<DropdownItem icon={BsBoxArrowLeft}>Logout</DropdownItem>
+				</ConfirmLogoutButton>
 			</DropdownMenu>
 		</Dropdown>
 	);