jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add gemini key ability

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-14 21:04:58 -07:00
commit 73c7d3efed
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
11 changed files with 793 additions and 228 deletions
Download patch file Download diff file Expand all files Collapse all files

70
components/AuthButton.tsx
View file

@ -1,9 +1,31 @@
import React from 'react';
import React, { useState, useRef, useEffect } from 'react';
import { useAuth } from 'react-oidc-context';
import { LogIn, LogOut, User, Loader2 } from 'lucide-react';
import { LogIn, LogOut, User, Loader2, Key, ChevronDown } from 'lucide-react';
export const AuthButton: React.FC = () => {
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 (
@ -24,20 +46,44 @@ export const AuthButton: React.FC = () => {
if (auth.isAuthenticated) {
return (
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 bg-white/10 px-3 py-2 rounded-xl">
<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>
</div>
<button
onClick={() => auth.signoutRedirect()}
className="p-2 bg-white/10 rounded-xl hover:bg-white/20 transition"
title="Sign out"
>
<LogOut size={20} />
<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();
}}
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>
);
}