mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
update: ui
This commit is contained in:
Théo LAGACHE
@@ -1,11 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import {Input} from "@/components/ui/input";
|
||||
import {Label} from "@/components/ui/label";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {Copy, Check} from "lucide-react";
|
||||
import {Copy, Check, Eye, EyeOff, Terminal, Key, Info} from "lucide-react";
|
||||
import {useState} from "react";
|
||||
import {copyToClipboardWithMeta} from "@/components/wrappers/common/button/copy-button";
|
||||
import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
|
||||
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type AgentCardKeyProps = {
|
||||
edgeKey: string;
|
||||
@@ -15,74 +17,199 @@ export type AgentCardKeyProps = {
|
||||
export const AgentCardKey = ({edgeKey, agentName}: AgentCardKeyProps) => {
|
||||
const [isCopiedKey, setIsCopiedKey] = useState(false);
|
||||
const [isCopiedCommand, setIsCopiedCommand] = useState(false);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
const command = `portabase agent "${agentName}" --key ${edgeKey}`;
|
||||
const maskedKey = "••••••••••••••••••••••••••••••••";
|
||||
|
||||
const handleCopy = async (text: string, setter: (v: boolean) => void) => {
|
||||
await copyToClipboardWithMeta(text);
|
||||
setter(true);
|
||||
setTimeout(() => setter(false), 2000);
|
||||
};
|
||||
|
||||
const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
|
||||
event.target.select();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 py-2">
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
1. Registration Key
|
||||
</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
readOnly
|
||||
value={edgeKey}
|
||||
onFocus={handleFocus}
|
||||
className="font-mono text-xs bg-muted/30 focus-visible:ring-1 cursor-pointer"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handleCopy(edgeKey, setIsCopiedKey)}
|
||||
className="shrink-0"
|
||||
type="button"
|
||||
>
|
||||
{isCopiedKey ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Use this key for manual configuration of your agent.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 py-2">
|
||||
<Tabs defaultValue="automatic" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="automatic" className="gap-2">
|
||||
<Terminal className="h-4 w-4" />
|
||||
<span>Automatic</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="manual" className="gap-2">
|
||||
<Key className="h-4 w-4" />
|
||||
<span>Manual</span>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<div className="flex flex-col gap-2 pt-2">
|
||||
<Label className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
2. Automatic Setup (CLI)
|
||||
</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
readOnly
|
||||
value={command}
|
||||
onFocus={handleFocus}
|
||||
className="font-mono text-xs bg-muted/30 focus-visible:ring-1 cursor-pointer"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handleCopy(command, setIsCopiedCommand)}
|
||||
className="shrink-0"
|
||||
type="button"
|
||||
>
|
||||
{isCopiedCommand ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Run this command on your server to automatically register the agent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<TabsContent value="automatic" className="mt-4 focus-visible:outline-none">
|
||||
<Card className="border-muted/60 shadow-none py-0">
|
||||
<CardHeader className="pb-3 px-4 pt-4">
|
||||
<CardTitle className="text-sm font-semibold flex items-center gap-2 uppercase tracking-tight">
|
||||
CLI Setup
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs leading-relaxed">
|
||||
Click the input below to reveal the key and copy it to your terminal.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4 space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Input
|
||||
readOnly
|
||||
value={isVisible ? command : `portabase agent "${agentName}" --key ${maskedKey}`}
|
||||
onFocus={(e) => {
|
||||
setIsVisible(true);
|
||||
handleCopy(command, setIsCopiedCommand);
|
||||
e.currentTarget.select();
|
||||
}}
|
||||
onClick={(e) => e.currentTarget.select()}
|
||||
onBlur={() => {
|
||||
setIsVisible(false);
|
||||
setIsCopiedCommand(false);
|
||||
}}
|
||||
className="font-mono text-xs bg-muted/30 h-10 pr-10 cursor-pointer"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsVisible(!isVisible);
|
||||
}}
|
||||
className="absolute right-1 top-1.5 h-7 w-7"
|
||||
type="button"
|
||||
>
|
||||
{isVisible ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => handleCopy(command, setIsCopiedCommand)}
|
||||
className="shrink-0 gap-2 h-10 px-4"
|
||||
type="button"
|
||||
>
|
||||
{isCopiedCommand ? (
|
||||
<><Check className="h-4 w-4 text-green-500" /></>
|
||||
) : (
|
||||
<><Copy className="h-4 w-4" /></>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-3 rounded-md bg-orange-500/10 dark:bg-orange-500/5 border border-orange-500/20">
|
||||
<div className="flex gap-2.5">
|
||||
<Terminal className="h-4 w-4 text-orange-600 dark:text-orange-400 shrink-0 mt-0.5" />
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-bold text-orange-900 dark:text-orange-100">CLI Installation</p>
|
||||
<p className="text-[11px] text-orange-800/80 dark:text-orange-400/80 leading-normal">
|
||||
This command requires the <strong>portabase cli</strong>. If you haven't installed it yet, you can find the instructions at{" "}
|
||||
<a
|
||||
href="https://portabase.io/docs/cli"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-bold underline underline-offset-2 hover:text-orange-700 dark:hover:text-orange-300 transition-colors"
|
||||
>
|
||||
portabase.io/docs/cli
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual" className="mt-4 focus-visible:outline-none">
|
||||
<Card className="border-muted/60 shadow-none py-0">
|
||||
<CardHeader className="pb-3 px-4 pt-4">
|
||||
<CardTitle className="text-sm font-semibold flex items-center gap-2 uppercase tracking-tight">
|
||||
Registration Key
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs leading-relaxed">
|
||||
Use this key to manually configure your agent in your configuration file.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4 space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Input
|
||||
readOnly
|
||||
value={isVisible ? edgeKey : maskedKey}
|
||||
onFocus={(e) => {
|
||||
setIsVisible(true);
|
||||
handleCopy(edgeKey, setIsCopiedKey);
|
||||
e.currentTarget.select();
|
||||
}}
|
||||
onClick={(e) => e.currentTarget.select()}
|
||||
onBlur={() => {
|
||||
setIsVisible(false);
|
||||
setIsCopiedKey(false);
|
||||
}}
|
||||
className="font-mono text-xs bg-muted/30 h-10 pr-10 cursor-pointer"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsVisible(!isVisible);
|
||||
}}
|
||||
className="absolute right-1 top-1.5 h-7 w-7 hover:bg-transparent"
|
||||
type="button"
|
||||
>
|
||||
{isVisible ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => handleCopy(edgeKey, setIsCopiedKey)}
|
||||
className="shrink-0 gap-2 h-10 px-4 "
|
||||
type="button"
|
||||
>
|
||||
{isCopiedKey ? (
|
||||
<><Check className="h-4 w-4 text-green-500" /></>
|
||||
) : (
|
||||
<><Copy className="h-4 w-4" /></>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="p-3 rounded-md bg-orange-500/10 dark:bg-orange-500/5 border border-orange-500/20">
|
||||
<div className="flex gap-2.5">
|
||||
<Info className="h-4 w-4 text-orange-600 dark:text-orange-400 shrink-0 mt-0.5" />
|
||||
<div className="space-y-0.5">
|
||||
<p className="text-xs font-bold text-orange-900 dark:text-orange-100">Important Security Note</p>
|
||||
<p className="text-[11px] text-orange-800/80 dark:text-orange-400/80 leading-normal">
|
||||
Never share this key. Anyone with access to it can register as this agent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 rounded-md bg-muted/30 border border-muted/50">
|
||||
<div className="flex gap-2.5">
|
||||
<Terminal className="h-4 w-4 text-muted-foreground shrink-0 mt-0.5" />
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-bold text-foreground">Need help with manual setup?</p>
|
||||
<p className="text-[11px] text-muted-foreground leading-normal">
|
||||
Check out our guide for manual configuration and Docker deployment at{" "}
|
||||
<a
|
||||
href="https://portabase.io/docs/agent/setup#docker"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-bold underline underline-offset-2 hover:text-orange-500 transition-colors text-foreground"
|
||||
>
|
||||
portabase.io/docs/setup
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,26 +1,36 @@
|
||||
"use client";
|
||||
|
||||
import {PropsWithChildren, ReactNode, useState} from "react";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { CircleUser, LogOut } from "lucide-react";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||||
|
||||
import { LogOut, User } from "lucide-react";
|
||||
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||||
|
||||
import { signOut } from "@/lib/auth/auth-client";
|
||||
|
||||
import {ProfileModal} from "@/components/wrappers/dashboard/common/profile/profile-modal";
|
||||
import {Account, Session, User} from "@/db/schema/02_user";
|
||||
|
||||
import {Account, Session, User as UserType} from "@/db/schema/02_user";
|
||||
|
||||
import {AuthProviderConfig} from "../../../../../../portabase.config";
|
||||
|
||||
export type LoggedInDropdownProps = PropsWithChildren<{
|
||||
user: User;
|
||||
user: UserType;
|
||||
sessions: Session[];
|
||||
currentSession: Session;
|
||||
accounts: Account[];
|
||||
children: ReactNode;
|
||||
providers: AuthProviderConfig[]
|
||||
|
||||
}>;
|
||||
|
||||
|
||||
|
||||
export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, children, providers }: LoggedInDropdownProps) => {
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
@@ -34,34 +44,57 @@ export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, chi
|
||||
onOpenChange={setIsModalOpen}
|
||||
providers={providers}
|
||||
/>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="top" className="min-w-[var(--radix-popper-anchor-width)]">
|
||||
<DropdownMenuItem onClick={() => setIsModalOpen(!isModalOpen)}>
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<CircleUser size={16} />
|
||||
<span>Account</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={async () => {
|
||||
await signOut({
|
||||
fetchOptions: {
|
||||
onSuccess: () => {
|
||||
router.push("/login");
|
||||
},
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<LogOut size={16} className="text-red-500" />
|
||||
<span className="text-red-500">Logout</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="min-w-[220px] rounded-xl border-2 border-border bg-popover shadow-none p-1"
|
||||
align="start"
|
||||
side="top"
|
||||
sideOffset={8}
|
||||
>
|
||||
<div className="flex flex-col space-y-1 p-2 mb-1">
|
||||
<p className="text-sm font-semibold leading-none truncate">{user.name}</p>
|
||||
<p className="text-xs leading-none text-muted-foreground truncate">
|
||||
{user.email}
|
||||
</p>
|
||||
</div>
|
||||
<DropdownMenuSeparator className="-mx-1 mb-1 bg-border/50" />
|
||||
<DropdownMenuItem
|
||||
onClick={() => setIsModalOpen(!isModalOpen)}
|
||||
className="group gap-2 p-1 cursor-pointer rounded-lg mb-1 transition-colors focus:bg-accent hover:bg-accent/50 border border-transparent"
|
||||
>
|
||||
<div className="flex size-9 items-center justify-center rounded-md border border-border bg-muted/50 shadow-sm transition-all group-hover:shadow-md group-hover:bg-background">
|
||||
<User size={18} className="text-muted-foreground group-hover:text-foreground transition-colors" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium leading-none">Account Settings</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="group gap-2 p-1 cursor-pointer rounded-lg transition-colors focus:bg-red-50 dark:focus:bg-red-950/20 border border-transparent text-red-600 focus:text-red-600"
|
||||
onClick={async () => {
|
||||
await signOut({
|
||||
fetchOptions: {
|
||||
onSuccess: () => {
|
||||
router.push("/login");
|
||||
},
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div className="flex size-9 items-center justify-center rounded-md border border-red-100 bg-red-50/50 dark:border-red-900/30 dark:bg-red-950/20 shadow-sm transition-all group-hover:shadow-md">
|
||||
<LogOut size={18} className="text-red-500" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium leading-none">Logout</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</>
|
||||
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuItem
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarSeparator
|
||||
} from "@/components/ui/sidebar";
|
||||
import {SidebarLogo} from "@/components/wrappers/dashboard/common/sidebar/logo-sidebar";
|
||||
import {SidebarMenuCustomMain} from "@/components/wrappers/dashboard/common/sidebar/menu-sidebar-main";
|
||||
@@ -12,6 +15,7 @@ import {OrganizationCombobox} from "@/components/wrappers/dashboard/organization
|
||||
import {env} from "@/env.mjs";
|
||||
import {LoggedInButton} from "@/components/wrappers/dashboard/common/logged-in/logged-in-button.server";
|
||||
import {UpdateNotification} from "@/features/updates/components/update-notification";
|
||||
import {Book} from "lucide-react";
|
||||
|
||||
export function AppSidebar() {
|
||||
const projectName = env.PROJECT_NAME;
|
||||
@@ -33,13 +37,28 @@ export function AppSidebar() {
|
||||
</SidebarContent>
|
||||
|
||||
<UpdateNotification />
|
||||
|
||||
<SidebarMenu className="mb-2">
|
||||
<SidebarMenuItem className="p-2">
|
||||
<LoggedInButton/>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
<SideBarFooterCredit/>
|
||||
|
||||
<SidebarFooter>
|
||||
<SidebarSeparator />
|
||||
<div className="flex flex-col gap-1 p-2">
|
||||
<a
|
||||
href="https://portabase.io/docs"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="flex items-center gap-2 px-2 py-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors group-data-[collapsible=icon]:justify-center"
|
||||
>
|
||||
<Book className="size-4 shrink-0" />
|
||||
<span className="group-data-[collapsible=icon]:hidden">Documentation</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<SidebarMenu className="mb-2">
|
||||
<SidebarMenuItem className="p-2">
|
||||
<LoggedInButton/>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
<SideBarFooterCredit/>
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -39,7 +39,6 @@ function ThemeSelector() {
|
||||
isActive ? "border-primary bg-primary/5" : "border-muted/40"
|
||||
)}
|
||||
onClick={async () => {
|
||||
// setTheme(item.value)
|
||||
await authClient.updateUser({theme: item.value});
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user