From 6f444cef835e5e8d00c57bd697b893d523581ee6 Mon Sep 17 00:00:00 2001 From: pruthviarj7714 Date: Fri, 30 Aug 2024 22:44:09 +0530 Subject: [PATCH] added confirmation dialog for logout --- package.json | 1 + pnpm-lock.yaml | 30 ++++ .../profile-menu/ProfileDropdown.tsx | 49 +++++- src/components/sidebar/index.tsx | 63 ++++++-- src/components/ui/alert-dialog.tsx | 141 ++++++++++++++++++ tsconfig.json | 10 +- 6 files changed, 266 insertions(+), 28 deletions(-) create mode 100644 src/components/ui/alert-dialog.tsx diff --git a/package.json b/package.json index 7d6565e95..4baab957b 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "@icons-pack/react-simple-icons": "^9.4.0", "@prisma/client": "^5.6.0", "@radix-ui/react-accordion": "^1.1.2", + "@radix-ui/react-alert-dialog": "^1.1.1", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9304d93c3..af4efa4c9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: '@radix-ui/react-accordion': specifier: ^1.1.2 version: 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-alert-dialog': + specifier: ^1.1.1 + version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-avatar': specifier: ^1.0.4 version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1593,6 +1596,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-alert-dialog@1.1.1': + resolution: {integrity: sha512-wmCoJwj7byuVuiLKqDLlX7ClSUU0vd9sdCeM+2Ls+uf13+cpSJoMgwysHq1SGVVkJj5Xn0XWi1NoRCdkMpr6Mw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-arrow@1.1.0': resolution: {integrity: sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==} peerDependencies: @@ -8626,6 +8642,20 @@ snapshots: '@types/react': 18.3.3 '@types/react-dom': 18.3.0 + '@radix-ui/react-alert-dialog@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-dialog': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + '@types/react-dom': 18.3.0 + '@radix-ui/react-arrow@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) diff --git a/src/components/profile-menu/ProfileDropdown.tsx b/src/components/profile-menu/ProfileDropdown.tsx index a97337469..029154eb5 100644 --- a/src/components/profile-menu/ProfileDropdown.tsx +++ b/src/components/profile-menu/ProfileDropdown.tsx @@ -18,10 +18,23 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from '@/components/ui/alert-dialog'; import ExternalLinks from './ExternalLinks'; import { signOut } from 'next-auth/react'; +import { useRouter } from 'next/navigation'; const ProfileDropdown = () => { + const router = useRouter(); const menuItemLinks = [ { href: '/history', @@ -79,14 +92,34 @@ const ProfileDropdown = () => { - { - signOut(); - }} - > - - Logout - + + +
+ + Logout +
+ + + + Confirm Logout + + Are you sure you want to log out? You will need to sign in again + to access your account. + + + + Cancel + { + await signOut(); + router.push('/'); + }} + > + Continue + + + + ); diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx index d28777ba4..4e8058e9c 100644 --- a/src/components/sidebar/index.tsx +++ b/src/components/sidebar/index.tsx @@ -3,7 +3,17 @@ import { useEffect, useState } from 'react'; import { AnimatedTooltip } from '@/components/ui/animated-tooltip'; import { signOut } from 'next-auth/react'; import { refreshDb } from '@/actions/refresh-db'; - +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from '@/components/ui/alert-dialog'; import Logo from '../landing/logo/logo'; import { Library, @@ -15,6 +25,7 @@ import { LogOut, } from 'lucide-react'; import { RefreshDb } from '../RefreshDb'; +import { useRouter } from 'next/navigation'; export const menuOptions = [ { id: 1, name: 'My Courses', Component: Library, href: '/my-courses' }, @@ -25,7 +36,7 @@ export const menuOptions = [ export const MenuOptions = () => { const [expanded, setExpanded] = useState(true); - + const router = useRouter(); useEffect(() => { if (window.innerWidth < 500) { setExpanded(false); @@ -62,19 +73,41 @@ export const MenuOptions = () => {
-
- - -
+ + +
+ + +
+ + + + Confirm Logout + + Are you sure you want to log out? You will need to sign in + again to access your account. + + + + Cancel + { + await signOut(); + router.push('/'); + }} + > + Continue + + + +
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx new file mode 100644 index 000000000..6c2748ce7 --- /dev/null +++ b/src/components/ui/alert-dialog.tsx @@ -0,0 +1,141 @@ +'use client'; + +import * as React from 'react'; +import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'; + +import { cn } from '@/lib/utils'; +import { buttonVariants } from '@/components/ui/button'; + +const AlertDialog = AlertDialogPrimitive.Root; + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger; + +const AlertDialogPortal = AlertDialogPrimitive.Portal; + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName; + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)); +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName; + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +AlertDialogHeader.displayName = 'AlertDialogHeader'; + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +AlertDialogFooter.displayName = 'AlertDialogFooter'; + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName; + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName; + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName; + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName; + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +}; diff --git a/tsconfig.json b/tsconfig.json index cec286f06..1f308869a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -16,14 +16,14 @@ "incremental": true, "plugins": [ { - "name": "next", - }, + "name": "next" + } ], "paths": { "@/*": ["./src/*"], - "@public/*": ["./public/*"], - }, + "@public/*": ["./public/*"] + } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"], + "exclude": ["node_modules"] }