mirror of
https://gitlab.com/soapbox-pub/mkstack.git
synced 2025-08-27 04:59:22 +00:00
Include the AccountSwitcher component
This commit is contained in:
parent
6cfd6f95ba
commit
360b9062b8
41
CONTEXT.md
41
CONTEXT.md
@ -152,54 +152,23 @@ The `useCurrentUser` hook should be used to ensure that the user is logged in be
|
||||
|
||||
### Nostr Login
|
||||
|
||||
To add Nostr login functionality, use the included `LoginForm` and `SignupForm` dialog components. For example:
|
||||
To enable login with Nostr, simply include the `AccountSwitcher` component already included in this project.
|
||||
|
||||
```tsx
|
||||
import LoginForm from "@/components/auth/LoginForm";
|
||||
import SignupForm from "@/components/auth/SignupForm";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { AccountSwitcher } from "@/components/auth/AccountSwitcher";
|
||||
|
||||
function MyComponent() {
|
||||
const [loginDialogOpen, setLoginDialogOpen] = useState(false);
|
||||
const [signupDialogOpen, setSignupDialogOpen] = useState(false);
|
||||
|
||||
const handleLogin = () => {
|
||||
setLoginDialogOpen(false);
|
||||
setSignupDialogOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={showLoginDialog}>Log in</Button>
|
||||
<Button onClick={showSignupDialog}>Sign up</Button>
|
||||
{/* other components ... */}
|
||||
|
||||
<LoginForm
|
||||
isOpen={loginDialogOpen}
|
||||
onClose={() => setLoginDialogOpen(false)}
|
||||
onLogin={handleLogin}
|
||||
onSignup={showSignupDialog}
|
||||
/>
|
||||
|
||||
<SignupForm
|
||||
isOpen={signupDialogOpen}
|
||||
onClose={() => setSignupDialogOpen(false)}
|
||||
/>
|
||||
<AccountSwitcher />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
To access the currently-logged-in account, use the `useCurrentUser` hook, eg:
|
||||
|
||||
```typescript
|
||||
import { useCurrentUser } from "@/hooks/useCurrentUser";
|
||||
|
||||
function MyComponent() {
|
||||
const { user } = useCurrentUser();
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
The `AccountSwitcher` component displays a "Log in" button when the user is logged out, and changes to an account switcher once the user is logged in.
|
||||
|
||||
## Development Practices
|
||||
|
||||
|
126
src/components/auth/AccountSwitcher.tsx
Normal file
126
src/components/auth/AccountSwitcher.tsx
Normal file
@ -0,0 +1,126 @@
|
||||
import { useState } from 'react';
|
||||
import { ChevronDown, LogOut, User, UserPlus } from 'lucide-react';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu.tsx';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.tsx';
|
||||
import { Button } from '@/components/ui/button.tsx';
|
||||
import { useNostrLogin } from '@nostrify/react/login';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useNostr } from '@nostrify/react';
|
||||
import { NSchema as n, NostrEvent, NostrMetadata } from '@nostrify/nostrify';
|
||||
import LoginForm from './LoginForm';
|
||||
import SignupForm from './SignupForm';
|
||||
|
||||
export function AccountSwitcher() {
|
||||
const { nostr } = useNostr();
|
||||
const { logins, setLogin, removeLogin } = useNostrLogin();
|
||||
|
||||
const [loginDialogOpen, setLoginDialogOpen] = useState(false);
|
||||
const [signupDialogOpen, setSignupDialogOpen] = useState(false);
|
||||
|
||||
const { data: authors } = useQuery({
|
||||
queryKey: ['logins', logins],
|
||||
queryFn: async () => {
|
||||
const events = await nostr.query([{ kinds: [0], authors: logins.map((l) => l.pubkey) }]);
|
||||
return logins.map(({ id, pubkey }): { id: string; pubkey: string; event?: NostrEvent; metadata: NostrMetadata } => {
|
||||
const event = events.find((e) => e.pubkey === pubkey);
|
||||
try {
|
||||
const metadata = n.json().pipe(n.metadata()).parse(event?.content);
|
||||
return { id, pubkey, metadata, event };
|
||||
} catch {
|
||||
return { id, pubkey, metadata: {}, event };
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const [currentUser, ...otherUsers] = authors || [];
|
||||
const isLoggedIn = !!currentUser;
|
||||
|
||||
const handleLogin = () => {
|
||||
setLoginDialogOpen(false);
|
||||
setSignupDialogOpen(false);
|
||||
};
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return (
|
||||
<Button
|
||||
onClick={() => setLoginDialogOpen(true)}
|
||||
className='flex items-center gap-2 px-4 py-2 rounded-full bg-primary text-primary-foreground w-full font-medium transition-all hover:bg-primary/90 animate-scale-in'
|
||||
>
|
||||
<User className='w-4 h-4' />
|
||||
<span>Log in</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className='flex items-center gap-3 p-3 rounded-full hover:bg-accent transition-all w-full text-foreground'>
|
||||
<Avatar className='w-10 h-10'>
|
||||
<AvatarImage src={currentUser.metadata.picture} alt={currentUser.metadata.name} />
|
||||
<AvatarFallback>{currentUser.metadata.name?.charAt(0)}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className='flex-1 text-left hidden md:block'>
|
||||
<p className='font-medium text-sm'>{currentUser.metadata.name}</p>
|
||||
</div>
|
||||
<ChevronDown className='w-4 h-4 text-muted-foreground' />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className='w-56 p-2 animate-scale-in'>
|
||||
<div className='font-medium text-sm px-2 py-1.5'>Switch Account</div>
|
||||
{otherUsers.map((user) => (
|
||||
<DropdownMenuItem
|
||||
key={user.id}
|
||||
onClick={() => setLogin(user.id)}
|
||||
className='flex items-center gap-2 cursor-pointer p-2 rounded-md'
|
||||
>
|
||||
<Avatar className='w-8 h-8'>
|
||||
<AvatarImage src={user.metadata.picture} alt={user.metadata.name} />
|
||||
<AvatarFallback>{user.metadata.name?.charAt(0)}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className='flex-1'>
|
||||
<p className='text-sm font-medium'>{user.metadata.name}</p>
|
||||
</div>
|
||||
{user.id === currentUser.id && <div className='w-2 h-2 rounded-full bg-primary'></div>}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={() => setLoginDialogOpen(true)}
|
||||
className='flex items-center gap-2 cursor-pointer p-2 rounded-md'
|
||||
>
|
||||
<UserPlus className='w-4 h-4' />
|
||||
<span>Add another account</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => removeLogin(currentUser.id)}
|
||||
className='flex items-center gap-2 cursor-pointer p-2 rounded-md text-red-500'
|
||||
>
|
||||
<LogOut className='w-4 h-4' />
|
||||
<span>Log out</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<LoginForm
|
||||
isOpen={loginDialogOpen}
|
||||
onClose={() => setLoginDialogOpen(false)}
|
||||
onLogin={handleLogin}
|
||||
onSignup={() => setSignupDialogOpen(true)}
|
||||
/>
|
||||
|
||||
<SignupForm
|
||||
isOpen={signupDialogOpen}
|
||||
onClose={() => setSignupDialogOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user