100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { useAuth } from 'react-oidc-context';
|
|
import { LogIn, LogOut, User, Loader2, Key, ChevronDown } from 'lucide-react';
|
|
|
|
interface AuthButtonProps {
|
|
onAccountSettingsClick?: () => void;
|
|
}
|
|
|
|
export const AuthButton: React.FC<AuthButtonProps> = ({ onAccountSettingsClick }) => {
|
|
const auth = useAuth();
|
|
const [dropdownOpen, setDropdownOpen] = useState(false);
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
|
setDropdownOpen(false);
|
|
}
|
|
};
|
|
|
|
if (dropdownOpen) {
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
};
|
|
}, [dropdownOpen]);
|
|
|
|
if (auth.isLoading) {
|
|
return (
|
|
<div className="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-xl">
|
|
<Loader2 className="animate-spin" size={20} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (auth.error) {
|
|
console.error('Auth error:', auth.error);
|
|
return (
|
|
<div className="flex items-center gap-2 bg-red-500/20 px-4 py-2 rounded-xl text-sm" title={auth.error.message}>
|
|
<span>Auth Error: {auth.error.message}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (auth.isAuthenticated) {
|
|
return (
|
|
<div className="relative" ref={dropdownRef}>
|
|
<button
|
|
onClick={() => setDropdownOpen(!dropdownOpen)}
|
|
className="flex items-center gap-2 bg-white/10 px-3 py-2 rounded-xl hover:bg-white/20 transition cursor-pointer"
|
|
>
|
|
<User size={18} />
|
|
<span className="font-bold text-sm">
|
|
{auth.user?.profile.preferred_username || auth.user?.profile.name || 'User'}
|
|
</span>
|
|
<ChevronDown size={16} className={`transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
|
|
</button>
|
|
|
|
{dropdownOpen && (
|
|
<div className="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg py-2 z-50 border border-gray-100">
|
|
{onAccountSettingsClick && (
|
|
<button
|
|
onClick={() => {
|
|
setDropdownOpen(false);
|
|
onAccountSettingsClick();
|
|
}}
|
|
className="w-full px-4 py-2 text-left text-gray-700 hover:bg-gray-100 flex items-center gap-2 font-medium transition"
|
|
>
|
|
<Key size={18} />
|
|
Account Settings
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => {
|
|
setDropdownOpen(false);
|
|
auth.signoutRedirect({ post_logout_redirect_uri: window.location.origin });
|
|
}}
|
|
className="w-full px-4 py-2 text-left text-gray-700 hover:bg-gray-100 flex items-center gap-2 font-medium transition"
|
|
>
|
|
<LogOut size={18} />
|
|
Sign Out
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={() => auth.signinRedirect()}
|
|
className="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-xl hover:bg-white/20 transition font-bold"
|
|
>
|
|
<LogIn size={20} />
|
|
Sign In
|
|
</button>
|
|
);
|
|
};
|