cleaning hard 2
This commit is contained in:
parent
7497121d60
commit
d7bde65cd0
@ -1,181 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Circle, LogOut } from "lucide-react";
|
||||
import { useSession, signIn, signOut } from "next-auth/react";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Session } from "next-auth";
|
||||
|
||||
interface UserMenuProps {
|
||||
session: Session | null;
|
||||
status: "loading" | "authenticated" | "unauthenticated";
|
||||
}
|
||||
|
||||
const requestNotificationPermission = async () => {
|
||||
try {
|
||||
const permission = await Notification.requestPermission();
|
||||
return permission === "granted";
|
||||
} catch (error) {
|
||||
console.error("Error requesting notification permission:", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export default function UserMenu({ session, status }: UserMenuProps) {
|
||||
const [userStatus, setUserStatus] = useState<'online' | 'busy' | 'away'>('online');
|
||||
|
||||
// Get user initials
|
||||
const getUserInitials = () => {
|
||||
if (session?.user?.name) {
|
||||
// Split the full name and get initials
|
||||
const names = session.user.name.split(' ');
|
||||
if (names.length >= 2) {
|
||||
return `${names[0][0]}${names[names.length - 1][0]}`.toUpperCase();
|
||||
}
|
||||
// If only one name, use first two letters
|
||||
return names[0].slice(0, 2).toUpperCase();
|
||||
}
|
||||
return "?";
|
||||
};
|
||||
|
||||
// Function to get display name
|
||||
const getDisplayName = () => {
|
||||
return session?.user?.name || "User";
|
||||
};
|
||||
|
||||
// Status configurations
|
||||
const statusConfig = {
|
||||
online: {
|
||||
color: 'text-green-500',
|
||||
label: 'Online',
|
||||
notifications: true
|
||||
},
|
||||
busy: {
|
||||
color: 'text-orange-500',
|
||||
label: 'Busy',
|
||||
notifications: false
|
||||
},
|
||||
away: {
|
||||
color: 'text-gray-500',
|
||||
label: 'Away',
|
||||
notifications: false
|
||||
},
|
||||
};
|
||||
|
||||
// Handle status change
|
||||
const handleStatusChange = async (newStatus: 'online' | 'busy' | 'away') => {
|
||||
setUserStatus(newStatus);
|
||||
|
||||
if (newStatus !== 'online') {
|
||||
const hasPermission = await requestNotificationPermission();
|
||||
|
||||
if (hasPermission) {
|
||||
// Disable notifications
|
||||
if ('serviceWorker' in navigator) {
|
||||
const registration = await navigator.serviceWorker.ready;
|
||||
await registration.pushManager.getSubscription()?.then(subscription => {
|
||||
if (subscription) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Re-enable notifications if going back online
|
||||
requestNotificationPermission();
|
||||
}
|
||||
};
|
||||
|
||||
if (status === "authenticated" && session?.user) {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="outline-none">
|
||||
<div className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white cursor-pointer hover:bg-blue-700 transition-colors">
|
||||
{getUserInitials()}
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuLabel>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>{getDisplayName()}</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="outline-none">
|
||||
<div className="flex items-center space-x-1 text-sm">
|
||||
<Circle className={`h-3 w-3 ${statusConfig[userStatus].color}`} />
|
||||
<span className="text-gray-400">{statusConfig[userStatus].label}</span>
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem onClick={() => handleStatusChange('online')}>
|
||||
<Circle className="h-3 w-3 text-green-500 mr-2" />
|
||||
<span>Online</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleStatusChange('busy')}>
|
||||
<Circle className="h-3 w-3 text-orange-500 mr-2" />
|
||||
<span>Busy</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleStatusChange('away')}>
|
||||
<Circle className="h-3 w-3 text-gray-500 mr-2" />
|
||||
<span>Away</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={async () => {
|
||||
try {
|
||||
// First sign out from NextAuth
|
||||
await signOut({
|
||||
callbackUrl: '/signin',
|
||||
redirect: false
|
||||
});
|
||||
|
||||
// Then redirect to Keycloak logout with proper parameters
|
||||
const keycloakLogoutUrl = new URL(
|
||||
`${process.env.NEXT_PUBLIC_KEYCLOAK_ISSUER}/protocol/openid-connect/logout`
|
||||
);
|
||||
|
||||
// Add required parameters
|
||||
keycloakLogoutUrl.searchParams.append(
|
||||
'post_logout_redirect_uri',
|
||||
window.location.origin
|
||||
);
|
||||
keycloakLogoutUrl.searchParams.append(
|
||||
'id_token_hint',
|
||||
session?.accessToken || ''
|
||||
);
|
||||
|
||||
// Redirect to Keycloak logout
|
||||
window.location.href = keycloakLogoutUrl.toString();
|
||||
} catch (error) {
|
||||
console.error('Error during logout:', error);
|
||||
// Fallback to simple redirect if something goes wrong
|
||||
window.location.href = '/signin';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
<span>Sign out</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="cursor-pointer">
|
||||
<span onClick={() => signIn("keycloak", { callbackUrl: "/" })}>
|
||||
Login
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user