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