Skip to content

Commit 7ad444e

Browse files
hughlvhughlv
committed
fix: recovered auth button
1 parent 155e158 commit 7ad444e

7 files changed

Lines changed: 167 additions & 141 deletions

File tree

‎frontend/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"@hookform/resolvers": "^3.9.1",
1818
"@next/bundle-analyzer": "^14.2.5",
1919
"@radix-ui/react-accordion": "^1.2.2",
20-
"@radix-ui/react-avatar": "^1.0.4",
20+
"@radix-ui/react-avatar": "^1.1.2",
2121
"@radix-ui/react-checkbox": "^1.1.3",
2222
"@radix-ui/react-dialog": "^1.1.4",
2323
"@radix-ui/react-dropdown-menu": "^2.1.4",

‎frontend/pnpm-lock.yaml‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/components/flow/node-list.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { useSettings } from '@/hooks';
77
import { getNodeIcon } from '@/lib/flow';
88
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
99
import { cn } from '@/lib/utils';
10-
import { Button } from '@/components/ui/button';
1110

1211
interface NodeButtonProps {
1312
name: string;

‎frontend/src/components/navbar/auth-button.tsx‎

Lines changed: 110 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22
import Link from 'next/link';
3-
import { usePathname, useRouter } from 'next/navigation';
3+
import { useRouter } from 'next/navigation';
44
import { useEffect, useState } from 'react';
55
import clsx from 'clsx';
66
import supabase, { getAvatarUrl } from '@/lib/supabase/client';
@@ -13,35 +13,38 @@ import {
1313
DropdownMenuItem,
1414
DropdownMenuTrigger,
1515
} from '../ui/dropdown-menu';
16+
import { Button } from '../ui/button';
17+
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
1618

17-
const UserImage = ({ user, className }: any) => {
19+
const UserAvatar = ({ user, className }: any) => {
1820
// State to handle image load error
1921
const [imgUrl, setImgUrl] = useState<string>('/logo-spaced.png');
2022
useEffect(() => {
2123
getAvatarUrl().then(setImgUrl);
2224
}, [user]);
2325

2426
return (
25-
<div
27+
<Button
2628
className={
2729
className ??
2830
'w-8 h-8 rounded-full bg-primary/10 text-primary/80 hover:text-primary hover:bg-primary/20 overflow-hidden'
2931
}
3032
>
31-
{imgUrl ? (
32-
<img
33+
<Avatar>
34+
<AvatarImage
3335
alt="avatar"
3436
src={imgUrl}
35-
className="w-full h-full object-cover rounded-full"
3637
/>
37-
) : (
38-
<Icons.user className="w-full h-full p-2" />
39-
)}
40-
</div>
38+
<AvatarFallback>
39+
{user.email?.match(/^([^@]+)/)?.[1] ?? '(No Name)'}
40+
</AvatarFallback>
41+
</Avatar>
42+
</Button>
4143
);
4244
};
4345

44-
const UserPanel = ({ user }: { user: any }) => {
46+
export const AuthButton = () => {
47+
const { user } = useUser();
4548
const router = useRouter();
4649

4750
const signOut = async () => {
@@ -51,136 +54,108 @@ const UserPanel = ({ user }: { user: any }) => {
5154
router.push('/auth/login');
5255
};
5356

54-
return (
55-
<div className="flex flex-col items-center w-96 p-4 gap-2 text-sm">
56-
<UserImage
57-
user={user}
58-
className="mt-8 w-16 h-16 rounded-full bg-primary/20 text-primary overflow-hidden"
59-
/>
60-
<span className="text-lg font-bold">
61-
{user.user_metadata.name ??
62-
user.email?.match(/^([^@]+)/)?.[1] ??
63-
'(No Name)'}
64-
</span>
65-
<span className="flex flex-col items-center gap-2">
66-
{user.email}
67-
{user.confirmed_at ? (
68-
<Icons.badgeCheck className="text-green-600 w-5 h-5" />
69-
) : (
70-
<span className="text-red-500"> (unverified)</span>
71-
)}
72-
</span>
73-
<a
74-
href="https://discord.gg/FeFSxWtn"
75-
aria-label="discord"
76-
target="_blank"
77-
rel="noreferrer"
57+
if (!user) {
58+
return (
59+
<Link
60+
href="/auth/login"
61+
className="ml-4 btn text-xs font-normal"
7862
>
79-
<img
80-
src="https://dcbadge.vercel.app/api/server/xBQxwRSWfm?timestamp=20240714"
81-
alt="discord"
82-
className="rounded-lg"
83-
/>
84-
</a>
85-
<div className="flex items-center no-wrap gap-1 mt-8 w-full">
86-
<DropdownMenuItem
87-
onClick={() => router.push('/settings/models')}
88-
className={clsx(
89-
'flex w-64 items-center justify-start py-2 px-4 gap-1.5 bg-base-content/20 rounded-r-sm rounded-l-lg',
90-
'hover:bg-base-content/30'
91-
)}
92-
>
93-
<Icons.brain className="w-5 h-5" />
94-
Models
95-
</DropdownMenuItem>
96-
<DropdownMenuItem
97-
onClick={() =>
98-
router.push('https://github.com/hughlv/agentok/issues')
99-
}
100-
className={clsx(
101-
'flex w-64 items-center justify-start py-2 px-4 gap-1.5 bg-base-content/20 rounded-l-sm rounded-r-lg',
102-
'hover:bg-base-content/30'
103-
)}
104-
>
105-
<Icons.github className="h-5 w-5" />
106-
Open Issues
107-
</DropdownMenuItem>
108-
</div>
109-
<div className="flex items-center no-wrap gap-1 w-full">
110-
<DropdownMenuItem
111-
onClick={() => router.push('/settings')}
112-
className={clsx(
113-
'flex w-64 items-center justify-start py-2 px-4 gap-1.5 bg-base-content/20 rounded-r-sm rounded-l-lg',
114-
'hover:bg-base-content/30'
115-
)}
116-
>
117-
<Icons.settings className="h-5 w-5" />
118-
Settings
119-
</DropdownMenuItem>
120-
121-
<DropdownMenuItem
122-
onClick={signOut}
123-
className={clsx(
124-
'flex w-64 items-center justify-start py-2 px-4 gap-1.5 bg-base-content/20 rounded-l-sm rounded-r-lg',
125-
'hover:bg-base-content/30'
126-
)}
127-
>
128-
<Icons.logout className="w-5 h-5" />
129-
Sign out
130-
</DropdownMenuItem>
131-
</div>
132-
<div className="flex items-center justify-center text-xs w-full gap-1">
133-
<Link
134-
href="https://agentok.ai/docs/privacy"
135-
target="_blank"
136-
className="link link-hover"
137-
>
138-
Privacy Policy
139-
</Link>
140-
<span className="">•</span>
141-
<Link
142-
href="https://agentok.ai/docs/tos"
143-
target="_blank"
144-
className="link link-hover"
145-
>
146-
Terms of Service
147-
</Link>
148-
</div>
149-
</div>
150-
);
151-
};
152-
153-
const UserAvatar = ({ user }: any) => {
63+
<Button variant="outline" size="sm">
64+
Login / Sign Up
65+
</Button>
66+
</Link>
67+
);
68+
}
15469
return (
15570
<DropdownMenu>
156-
<DropdownMenuTrigger asChild>
157-
<UserImage user={user} />
71+
<DropdownMenuTrigger>
72+
<UserAvatar user={user} />
15873
</DropdownMenuTrigger>
15974
<DropdownMenuContent align="end">
160-
<UserPanel user={user} />
75+
<div className="flex flex-col items-center w-96 p-4 gap-2 text-sm">
76+
<UserAvatar
77+
user={user}
78+
className="w-16 h-16 rounded-full bg-primary/20 text-primary overflow-hidden"
79+
/>
80+
<span className="text-lg font-bold">
81+
{user.user_metadata.name ??
82+
user.email?.match(/^([^@]+)/)?.[1] ??
83+
'(No Name)'}
84+
</span>
85+
<span className="flex flex-col items-center gap-2">
86+
{user.email}
87+
{user.confirmed_at ? (
88+
<Icons.badgeCheck className="text-green-600 w-5 h-5" />
89+
) : (
90+
<span className="text-red-500"> (unverified)</span>
91+
)}
92+
</span>
93+
<div className="flex items-center no-wrap gap-1 mt-8 w-full">
94+
<DropdownMenuItem
95+
onClick={() => router.push('/settings/models')}
96+
className={clsx(
97+
'flex w-64 items-center justify-start py-2 px-4 gap-1.5 bg-base-content/20 rounded-r-sm rounded-l-lg',
98+
'hover:bg-base-content/30'
99+
)}
100+
>
101+
<Icons.brain className="w-5 h-5" />
102+
Models
103+
</DropdownMenuItem>
104+
<DropdownMenuItem
105+
onClick={() =>
106+
router.push('https://github.com/dustland/agentok/issues')
107+
}
108+
className={clsx(
109+
'flex w-64 items-center justify-start py-2 px-4 gap-1.5 bg-base-content/20 rounded-l-sm rounded-r-lg',
110+
'hover:bg-base-content/30'
111+
)}
112+
>
113+
<Icons.github className="h-5 w-5" />
114+
Open Issues
115+
</DropdownMenuItem>
116+
</div>
117+
<div className="flex items-center no-wrap gap-1 w-full">
118+
<DropdownMenuItem
119+
onClick={() => router.push('/settings')}
120+
className={clsx(
121+
'flex w-64 items-center justify-start py-2 px-4 gap-1.5 bg-base-content/20 rounded-r-sm rounded-l-lg',
122+
'hover:bg-base-content/30'
123+
)}
124+
>
125+
<Icons.settings className="h-5 w-5" />
126+
Settings
127+
</DropdownMenuItem>
128+
129+
<DropdownMenuItem
130+
onClick={signOut}
131+
className={clsx(
132+
'flex w-64 items-center justify-start py-2 px-4 gap-1.5 bg-base-content/20 rounded-l-sm rounded-r-lg',
133+
'hover:bg-base-content/30'
134+
)}
135+
>
136+
<Icons.logout className="w-5 h-5" />
137+
Sign out
138+
</DropdownMenuItem>
139+
</div>
140+
<div className="flex items-center justify-center text-xs w-full gap-1">
141+
<Link
142+
href="https://agentok.ai/docs/privacy"
143+
target="_blank"
144+
className="link link-hover"
145+
>
146+
Privacy Policy
147+
</Link>
148+
<span className="">•</span>
149+
<Link
150+
href="https://agentok.ai/docs/tos"
151+
target="_blank"
152+
className="link link-hover"
153+
>
154+
Terms of Service
155+
</Link>
156+
</div>
157+
</div>
161158
</DropdownMenuContent>
162159
</DropdownMenu>
163160
);
164161
};
165-
166-
const AuthButton = () => {
167-
const { user } = useUser();
168-
const pathname = usePathname();
169-
170-
if (pathname.includes('/auth')) {
171-
return null; // don't show auth button on login page
172-
}
173-
174-
return user ? (
175-
<UserAvatar user={user} />
176-
) : (
177-
<Link
178-
href="/auth/login"
179-
className="ml-4 btn btn-sm btn-primary rounded text-xs font-normal"
180-
>
181-
Login / Sign Up
182-
</Link>
183-
);
184-
};
185-
186-
export default AuthButton;

‎frontend/src/components/navbar/navbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
import { usePathname } from 'next/navigation';
44
import { match } from 'path-to-regexp';
55

6-
import AuthButton from '@/components/navbar/auth-button';
6+
import { AuthButton } from './auth-button';
77
import { Logo } from './logo';
88
import { NavButton } from './nav-button';
99
import { ProjectPicker } from '@/components/project/project-picker';
1010
import Link from 'next/link';
11-
import clsx from 'clsx';
1211
import { Icons } from '../icons';
1312
import { cn } from '@/lib/utils';
13+
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
1414

1515
const apiEndpoint =
1616
process.env.NEXT_PUBLIC_BACKEND_URL || 'https://localhost:5004';

‎frontend/src/components/ui/avatar.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as AvatarPrimitive from "@radix-ui/react-avatar"
5+
6+
import { cn } from "@/lib/utils"
7+
8+
const Avatar = React.forwardRef<
9+
React.ElementRef<typeof AvatarPrimitive.Root>,
10+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11+
>(({ className, ...props }, ref) => (
12+
<AvatarPrimitive.Root
13+
ref={ref}
14+
className={cn(
15+
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16+
className
17+
)}
18+
{...props}
19+
/>
20+
))
21+
Avatar.displayName = AvatarPrimitive.Root.displayName
22+
23+
const AvatarImage = React.forwardRef<
24+
React.ElementRef<typeof AvatarPrimitive.Image>,
25+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26+
>(({ className, ...props }, ref) => (
27+
<AvatarPrimitive.Image
28+
ref={ref}
29+
className={cn("aspect-square h-full w-full", className)}
30+
{...props}
31+
/>
32+
))
33+
AvatarImage.displayName = AvatarPrimitive.Image.displayName
34+
35+
const AvatarFallback = React.forwardRef<
36+
React.ElementRef<typeof AvatarPrimitive.Fallback>,
37+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38+
>(({ className, ...props }, ref) => (
39+
<AvatarPrimitive.Fallback
40+
ref={ref}
41+
className={cn(
42+
"flex h-full w-full items-center justify-center rounded-full bg-muted",
43+
className
44+
)}
45+
{...props}
46+
/>
47+
))
48+
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49+
50+
export { Avatar, AvatarImage, AvatarFallback }

‎frontend/src/components/user-auth-form.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,9 @@ export function UserAuthForm({
145145
setIsGoogleLoading(true);
146146
}
147147

148-
const supabase = await createClient();
148+
console.log('window.location.origin', window.location.origin)
149+
150+
const supabase = createClient();
149151
const { error, data } = await supabase.auth.signInWithOAuth({
150152
provider: provider,
151153
options: {

0 commit comments

Comments
 (0)