direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-02 06:26:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

dashboard layout (#597)

Browse Source
This commit is contained in:
Saeed Vaziry
2025-05-13 23:42:22 +03:00
committed by GitHub
parent 38bafd7654
commit a81e9b18b7
57 changed files with 1011 additions and 843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/Http/Controllers/ServerController.php
View File

@ -10,8 +10,10 @@
use App\Models\ServerProvider;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Validation\Rule;
use Inertia\Response;
use Inertia\ResponseFactory;
use Spatie\RouteAttributes\Attributes\Delete;
use Spatie\RouteAttributes\Attributes\Get;
use Spatie\RouteAttributes\Attributes\Middleware;
use Spatie\RouteAttributes\Attributes\Post;
@ -67,4 +69,22 @@ public function switch(Server $server): RedirectResponse
return redirect()->route('servers.show', ['server' => $server->id]);
}
#[Delete('/{server}', name: 'servers.destroy')]
public function destroy(Server $server, Request $request): RedirectResponse
{
$this->authorize('delete', $server);
$this->validate($request, [
'name' => [
'required',
Rule::in([$server->name]),
],
]);
$server->delete();
return redirect()->route('servers')
->with('success', __('Server deleted successfully.'));
}
}

41
app/Http/Controllers/Settings/PasswordController.php
View File

@ -1,41 +0,0 @@
<?php
namespace App\Http\Controllers\Settings;
use App\Http\Controllers\Controller;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rules\Password;
use Inertia\Inertia;
use Inertia\Response;
use Spatie\RouteAttributes\Attributes\Get;
use Spatie\RouteAttributes\Attributes\Middleware;
use Spatie\RouteAttributes\Attributes\Prefix;
use Spatie\RouteAttributes\Attributes\Put;
#[Prefix('settings/password')]
#[Middleware(['auth'])]
class PasswordController extends Controller
{
#[Get('/', name: 'password.edit')]
public function edit(): Response
{
return Inertia::render('settings/password');
}
#[Put('/', name: 'password.update')]
public function update(Request $request): RedirectResponse
{
$validated = $request->validate([
'current_password' => ['required', 'current_password'],
'password' => ['required', Password::defaults(), 'confirmed'],
]);
$request->user()->update([
'password' => Hash::make($validated['password']),
]);
return back();
}
}

24
app/Http/Controllers/Settings/ProfileController.php
View File

@ -8,7 +8,9 @@
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rule;
use Illuminate\Validation\Rules\Password;
use Inertia\Inertia;
use Inertia\Response;
use Spatie\RouteAttributes\Attributes\Delete;
@ -16,15 +18,16 @@
use Spatie\RouteAttributes\Attributes\Middleware;
use Spatie\RouteAttributes\Attributes\Patch;
use Spatie\RouteAttributes\Attributes\Prefix;
use Spatie\RouteAttributes\Attributes\Put;
#[Prefix('settings/profile')]
#[Middleware(['auth'])]
class ProfileController extends Controller
{
#[Get('/', name: 'profile.edit')]
#[Get('/', name: 'profile')]
public function edit(Request $request): Response
{
return Inertia::render('settings/profile', [
return Inertia::render('settings/profile/index', [
'mustVerifyEmail' => $request->user() instanceof MustVerifyEmail,
'status' => $request->session()->get('status'),
]);
@ -49,7 +52,22 @@ public function update(Request $request): RedirectResponse
$request->user()->save();
return to_route('profile.edit');
return to_route('profile');
}
#[Put('/', name: 'profile.password')]
public function password(Request $request): RedirectResponse
{
$validated = $request->validate([
'current_password' => ['required', 'current_password'],
'password' => ['required', Password::defaults(), 'confirmed'],
]);
$request->user()->update([
'password' => Hash::make($validated['password']),
]);
return back();
}
#[Delete('/', name: 'profile.destroy')]

144
package-lock.json generated
View File

@ -11,14 +11,14 @@
"@radix-ui/react-avatar": "^1.1.3",
"@radix-ui/react-checkbox": "^1.1.4",
"@radix-ui/react-collapsible": "^1.1.3",
"@radix-ui/react-dialog": "^1.1.6",
"@radix-ui/react-dialog": "^1.1.13",
"@radix-ui/react-dropdown-menu": "^2.1.6",
"@radix-ui/react-label": "^2.1.4",
"@radix-ui/react-navigation-menu": "^1.2.5",
"@radix-ui/react-progress": "^1.1.6",
"@radix-ui/react-scroll-area": "^1.2.8",
"@radix-ui/react-select": "^2.1.6",
"@radix-ui/react-separator": "^1.1.2",
"@radix-ui/react-separator": "^1.1.6",
"@radix-ui/react-slot": "^1.2.2",
"@radix-ui/react-toggle": "^1.1.2",
"@radix-ui/react-toggle-group": "^1.1.2",
@ -1372,22 +1372,22 @@
}
},
"node_modules/@radix-ui/react-dialog": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.11.tgz",
"integrity": "sha512-yI7S1ipkP5/+99qhSI6nthfo/tR6bL6Zgxi/+1UO6qPa6UeM6nlafWcQ65vB4rU2XjgjMfMhI3k9Y5MztA62VQ==",
"version": "1.1.13",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.13.tgz",
"integrity": "sha512-ARFmqUyhIVS3+riWzwGTe7JLjqwqgnODBUZdqpWar/z1WFs9z76fuOs/2BOWCR+YboRn4/WN9aoaGVwqNRr8VA==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.2",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-dismissable-layer": "1.1.7",
"@radix-ui/react-dismissable-layer": "1.1.9",
"@radix-ui/react-focus-guards": "1.1.2",
"@radix-ui/react-focus-scope": "1.1.4",
"@radix-ui/react-focus-scope": "1.1.6",
"@radix-ui/react-id": "1.1.1",
"@radix-ui/react-portal": "1.1.6",
"@radix-ui/react-portal": "1.1.8",
"@radix-ui/react-presence": "1.1.4",
"@radix-ui/react-primitive": "2.1.0",
"@radix-ui/react-slot": "1.2.0",
"@radix-ui/react-primitive": "2.1.2",
"@radix-ui/react-slot": "1.2.2",
"@radix-ui/react-use-controllable-state": "1.2.2",
"aria-hidden": "^1.2.4",
"react-remove-scroll": "^2.6.3"
@ -1407,21 +1407,102 @@
}
}
},
"node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
"integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
"node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
"version": "1.1.9",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.9.tgz",
"integrity": "sha512-way197PiTvNp+WBP7svMJasHl+vibhWGQDb6Mgf5mhEWJkgb85z7Lfl9TUdkqpWsf8GRNmoopx9ZxCyDzmgRMQ==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.2"
"@radix-ui/primitive": "1.1.2",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-primitive": "2.1.2",
"@radix-ui/react-use-callback-ref": "1.1.1",
"@radix-ui/react-use-escape-keydown": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-scope": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.6.tgz",
"integrity": "sha512-r9zpYNUQY+2jWHWZGyddQLL9YHkM/XvSFHVcWs7bdVuxMAnCwTAuy6Pf47Z4nw7dYcUou1vg/VgjjrrH03VeBw==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-primitive": "2.1.2",
"@radix-ui/react-use-callback-ref": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.8.tgz",
"integrity": "sha512-hQsTUIn7p7fxCPvao/q6wpbxmCwgLrlz+nOrJgC+RwfZqWY/WN+UMqkXzrtKbPrF82P43eCTl3ekeKuyAQbFeg==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-primitive": "2.1.2",
"@radix-ui/react-use-layout-effect": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.2.tgz",
"integrity": "sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-slot": "1.2.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
@ -1986,12 +2067,35 @@
}
},
"node_modules/@radix-ui/react-separator": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.4.tgz",
"integrity": "sha512-2fTm6PSiUm8YPq9W0E4reYuv01EE3aFSzt8edBiXqPHshF8N9+Kymt/k0/R+F3dkY5lQyB/zPtrP82phskLi7w==",
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.6.tgz",
"integrity": "sha512-Izof3lPpbCfTM7WDta+LRkz31jem890VjEvpVRoWQNKpDUMMVffuyq854XPGP1KYGWWmjmYvHvPFeocWhFCy1w==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-primitive": "2.1.0"
"@radix-ui/react-primitive": "2.1.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.2.tgz",
"integrity": "sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-slot": "1.2.2"
},
"peerDependencies": {
"@types/react": "*",

4
package.json
View File

@ -32,14 +32,14 @@
"@radix-ui/react-avatar": "^1.1.3",
"@radix-ui/react-checkbox": "^1.1.4",
"@radix-ui/react-collapsible": "^1.1.3",
"@radix-ui/react-dialog": "^1.1.6",
"@radix-ui/react-dialog": "^1.1.13",
"@radix-ui/react-dropdown-menu": "^2.1.6",
"@radix-ui/react-label": "^2.1.4",
"@radix-ui/react-navigation-menu": "^1.2.5",
"@radix-ui/react-progress": "^1.1.6",
"@radix-ui/react-scroll-area": "^1.2.8",
"@radix-ui/react-select": "^2.1.6",
"@radix-ui/react-separator": "^1.1.2",
"@radix-ui/react-separator": "^1.1.6",
"@radix-ui/react-slot": "^1.2.2",
"@radix-ui/react-toggle": "^1.1.2",
"@radix-ui/react-toggle-group": "^1.1.2",

28
resources/css/app.css
View File

@ -198,3 +198,31 @@ @layer base {
@apply bg-background text-foreground;
}
}
/*
---break---
*/
@theme inline {
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
/*
---break---
*/
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}

18
resources/js/components/app-content.tsx
View File

@ -1,18 +0,0 @@
import { SidebarInset } from '@/components/ui/sidebar';
import * as React from 'react';
interface AppContentProps extends React.ComponentProps<'main'> {
variant?: 'header' | 'sidebar';
}
export function AppContent({ variant = 'header', children, ...props }: AppContentProps) {
if (variant === 'sidebar') {
return <SidebarInset {...props}>{children}</SidebarInset>;
}
return (
<main className="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl px-4" {...props}>
{children}
</main>
);
}

218
resources/js/components/app-header.tsx
View File

@ -1,204 +1,26 @@
import { Icon } from '@/components/icon';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { NavigationMenu, NavigationMenuItem, NavigationMenuList, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { UserMenuContent } from '@/components/user-menu-content';
import { useInitials } from '@/hooks/use-initials';
import { cn } from '@/lib/utils';
import { type NavItem, type SharedData } from '@/types';
import { Link, usePage } from '@inertiajs/react';
import { BookOpen, CogIcon, Folder, Menu, Search, ServerIcon, SlashIcon } from 'lucide-react';
import AppLogo from './app-logo';
import AppLogoIcon from './app-logo-icon';
import { ProjectSwitch } from '@/components/project-switch';
import { ServerSwitch } from '@/components/server-switch';
import { SidebarTrigger } from '@/components/ui/sidebar';
import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
const mainNavItems: NavItem[] = [
{
title: 'Servers',
href: '/servers',
activePath: '/servers',
icon: ServerIcon,
},
{
title: 'Settings',
href: '/settings/profile',
activePath: '/settings',
icon: CogIcon,
},
];
const rightNavItems: NavItem[] = [
{
title: 'Repository',
href: 'https://github.com/vitodeploy/vito',
icon: Folder,
},
{
title: 'Documentation',
href: 'https://vitodeploy.com',
icon: BookOpen,
},
];
const activeItemStyles = '';
import { ProjectSwitch } from '@/components/project-switch';
import { SlashIcon } from 'lucide-react';
import { ServerSwitch } from '@/components/server-switch';
export function AppHeader() {
const page = usePage<SharedData>();
const { auth } = page.props;
const getInitials = useInitials();
return (
<>
<div className="border-sidebar-border/80 border-b">
<div className="mx-auto flex h-16 items-center px-4 md:max-w-7xl">
{/* Mobile Menu */}
<div className="lg:hidden">
<Sheet>
<SheetTrigger asChild>
<Button variant="ghost" size="icon" className="mr-2 h-[34px] w-[34px]">
<Menu className="h-5 w-5" />
</Button>
</SheetTrigger>
<SheetContent side="left" className="bg-sidebar flex h-full w-64 flex-col items-stretch justify-between">
<SheetTitle className="sr-only">Navigation Menu</SheetTitle>
<SheetHeader className="flex justify-start text-left">
<AppLogoIcon className="h-6 w-6 fill-current text-black dark:text-white" />
</SheetHeader>
<div className="flex h-full flex-1 flex-col space-y-4 p-4">
<div className="flex h-full flex-col justify-between text-sm">
<div className="flex flex-col space-y-4">
{mainNavItems.map((item) => (
<Link key={item.title} href={item.href} className="flex items-center space-x-2 font-medium">
{item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
<span>{item.title}</span>
</Link>
))}
</div>
<div className="flex flex-col space-y-4">
{rightNavItems.map((item) => (
<a
key={item.title}
href={item.href}
target="_blank"
rel="noopener noreferrer"
className="flex items-center space-x-2 font-medium"
>
{item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
<span>{item.title}</span>
</a>
))}
</div>
</div>
</div>
</SheetContent>
</Sheet>
</div>
<Link href={route('home')} prefetch className="flex items-center space-x-2">
<AppLogo />
</Link>
{/* Desktop Navigation */}
<div className="ml-6 flex h-full items-center space-x-6">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<ProjectSwitch />
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<ServerSwitch />
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<div className="ml-auto flex items-center space-x-2">
<div className="relative flex items-center space-x-1">
<Button variant="ghost" size="icon" className="group h-9 w-9 cursor-pointer">
<Search className="!size-5 opacity-80 group-hover:opacity-100" />
</Button>
<div className="hidden lg:flex">
{rightNavItems.map((item) => (
<TooltipProvider key={item.title} delayDuration={0}>
<Tooltip>
<TooltipTrigger>
<a
href={item.href}
target="_blank"
rel="noopener noreferrer"
className="group text-accent-foreground ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring ml-1 inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
>
<span className="sr-only">{item.title}</span>
{item.icon && <Icon iconNode={item.icon} className="size-5 opacity-80 group-hover:opacity-100" />}
</a>
</TooltipTrigger>
<TooltipContent>
<p>{item.title}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
))}
</div>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="size-10 rounded-full p-1">
<Avatar className="size-8 overflow-hidden rounded-full">
<AvatarImage src={auth.user.avatar} alt={auth.user.name} />
<AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
{getInitials(auth.user.name)}
</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end">
<UserMenuContent user={auth.user} />
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
{/* Desktop Navigation */}
<div className="mx-auto hidden h-12 items-center px-2 md:max-w-7xl lg:flex">
<NavigationMenu className="flex h-full items-stretch">
<NavigationMenuList className="flex h-full items-stretch">
{mainNavItems.map((item, index) => (
<NavigationMenuItem key={index} className="relative flex h-full items-center">
<Link
href={item.href}
className={cn(
navigationMenuTriggerStyle(),
item.activePath && page.url.startsWith(item.activePath) && activeItemStyles,
'h-9 cursor-pointer px-3',
)}
>
{item.icon && <Icon iconNode={item.icon} className="mr-2 h-4 w-4" />}
{item.title}
</Link>
{item.activePath && page.url.startsWith(item.activePath) && (
<div className="absolute right-3 bottom-0 left-3 h-0.5 translate-y-px bg-black dark:bg-white"></div>
)}
</NavigationMenuItem>
))}
</NavigationMenuList>
</NavigationMenu>
</div>
</div>
{/*{breadcrumbs.length > 1 && (*/}
{/* <div className="border-sidebar-border/70 flex w-full border-b">*/}
{/* <div*/}
{/* className="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl">*/}
{/* <Breadcrumbs breadcrumbs={breadcrumbs} />*/}
{/* </div>*/}
{/* </div>*/}
{/*)}*/}
</>
<header className="bg-background -ml-1 flex h-12 shrink-0 items-center gap-2 border-b p-4 md:-ml-2">
<SidebarTrigger className="-ml-1 md:hidden" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<ProjectSwitch />
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<ServerSwitch />
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</header>
);
}

18
resources/js/components/app-shell.tsx
View File

@ -1,18 +0,0 @@
import { SidebarProvider } from '@/components/ui/sidebar';
import { SharedData } from '@/types';
import { usePage } from '@inertiajs/react';
interface AppShellProps {
children: React.ReactNode;
variant?: 'header' | 'sidebar';
}
export function AppShell({ children, variant = 'header' }: AppShellProps) {
const isOpen = usePage<SharedData>().props.sidebarOpen;
if (variant === 'header') {
return <div className="flex min-h-screen w-full flex-col">{children}</div>;
}
return <SidebarProvider defaultOpen={isOpen}>{children}</SidebarProvider>;
}

14
resources/js/components/app-sidebar-header.tsx
View File

@ -1,14 +0,0 @@
import { Breadcrumbs } from '@/components/breadcrumbs';
import { SidebarTrigger } from '@/components/ui/sidebar';
import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
export function AppSidebarHeader({ breadcrumbs = [] }: { breadcrumbs?: BreadcrumbItemType[] }) {
return (
<header className="border-sidebar-border/50 flex h-16 shrink-0 items-center gap-2 border-b px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">
<div className="flex items-center gap-2">
<SidebarTrigger className="-ml-1" />
<Breadcrumbs breadcrumbs={breadcrumbs} />
</div>
</header>
);
}

128
resources/js/components/app-sidebar.tsx
View File

@ -1,11 +1,20 @@
import { NavFooter } from '@/components/nav-footer';
import { NavMain } from '@/components/nav-main';
import { NavUser } from '@/components/nav-user';
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupContent,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/react';
import { BookOpen, Folder, ServerIcon } from 'lucide-react';
import { BookOpen, CogIcon, Folder, ServerIcon } from 'lucide-react';
import AppLogo from './app-logo';
import { Icon } from '@/components/icon';
const mainNavItems: NavItem[] = [
{
@ -13,6 +22,11 @@ const mainNavItems: NavItem[] = [
href: route('servers'),
icon: ServerIcon,
},
{
title: 'Settings',
href: route('profile'),
icon: CogIcon,
},
];
const footerNavItems: NavItem[] = [
@ -28,29 +42,93 @@ const footerNavItems: NavItem[] = [
},
];
export function AppSidebar() {
export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?: NavItem[]; secondNavTitle?: string }) {
return (
<Sidebar collapsible="icon" variant="sidebar">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild>
<Link href={route('servers')} prefetch>
<AppLogo />
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<Sidebar collapsible="icon" className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row">
{/* This is the first sidebar */}
{/* We disable collapsible and adjust width to icon. */}
{/* This will make the sidebar appear as icons. */}
<Sidebar collapsible="none" className="h-auto !w-[calc(var(--sidebar-width-icon)_+_1px)] border-r">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
<Link href={route('servers')} prefetch>
<AppLogo />
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupContent className="md:px-0">
<SidebarMenu>
{mainNavItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
isActive={window.location.href.startsWith(item.href)}
tooltip={{ children: item.title, hidden: false }}
>
<Link href={item.href} prefetch>
{item.icon && <item.icon />}
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter className="hidden md:flex">
<SidebarMenu>
{footerNavItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild tooltip={{ children: item.title, hidden: false }}>
<a href={item.href} target="_blank" rel="noopener noreferrer">
{item.icon && <Icon iconNode={item.icon} />}
<span className="sr-only">{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
<NavUser />
</SidebarFooter>
</Sidebar>
<SidebarContent>
<NavMain items={mainNavItems} />
</SidebarContent>
<SidebarFooter>
<NavFooter items={footerNavItems} className="mt-auto" />
<NavUser />
</SidebarFooter>
{/* This is the second sidebar */}
{/* We enable collapsible and adjust width to icon. */}
{/* This will make the sidebar appear as icons. */}
{secondNavItems && secondNavItems.length > 0 && (
<Sidebar collapsible="none" className="flex flex-1">
<SidebarHeader className="hidden h-12 border-b p-0 md:flex">
<div className="flex h-full items-center p-2">
<span className="max-w-[200px] truncate overflow-ellipsis">{secondNavTitle}</span>
</div>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
{secondNavItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild isActive={window.location.href.startsWith(item.href)}>
<Link href={item.href} prefetch>
{item.icon && <item.icon />}
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
)}
</Sidebar>
);
}

34
resources/js/components/breadcrumbs.tsx
View File

@ -1,34 +0,0 @@
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
import { Link } from '@inertiajs/react';
import { Fragment } from 'react';
export function Breadcrumbs({ breadcrumbs }: { breadcrumbs: BreadcrumbItemType[] }) {
return (
<>
{breadcrumbs.length > 0 && (
<Breadcrumb>
<BreadcrumbList>
{breadcrumbs.map((item, index) => {
const isLast = index === breadcrumbs.length - 1;
return (
<Fragment key={index}>
<BreadcrumbItem>
{isLast ? (
<BreadcrumbPage>{item.title}</BreadcrumbPage>
) : (
<BreadcrumbLink asChild>
<Link href={item.href}>{item.title}</Link>
</BreadcrumbLink>
)}
</BreadcrumbItem>
{!isLast && <BreadcrumbSeparator />}
</Fragment>
);
})}
</BreadcrumbList>
</Breadcrumb>
)}
</>
);
}

5
resources/js/components/container.tsx
View File

@ -1,5 +1,6 @@
import { ReactNode } from 'react';
import { cn } from '@/lib/utils';
export default function Container({ children }: { children?: ReactNode }) {
return <div className="container mx-auto space-y-5 py-10">{children}</div>;
export default function Container({ className, children }: { className?: string; children?: ReactNode }) {
return <div className={cn('container mx-auto space-y-5 px-4 py-5', className)}>{children}</div>;
}

2
resources/js/components/heading.tsx
View File

@ -1,6 +1,6 @@
export default function Heading({ title, description }: { title: string; description?: string }) {
return (
<div className="mb-8 space-y-0.5">
<div className="space-y-0.5">
<h2 className="text-xl font-semibold tracking-tight">{title}</h2>
{description && <p className="text-muted-foreground text-sm">{description}</p>}
</div>

31
resources/js/components/nav-footer.tsx
View File

@ -1,31 +0,0 @@
import { Icon } from '@/components/icon';
import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { type ComponentPropsWithoutRef } from 'react';
export function NavFooter({
items,
className,
...props
}: ComponentPropsWithoutRef<typeof SidebarGroup> & {
items: NavItem[];
}) {
return (
<SidebarGroup {...props} className={`group-data-[collapsible=icon]:p-0 ${className || ''}`}>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild className="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100">
<a href={item.href} target="_blank" rel="noopener noreferrer">
{item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
);
}

24
resources/js/components/nav-main.tsx
View File

@ -1,24 +0,0 @@
import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { Link, usePage } from '@inertiajs/react';
export function NavMain({ items = [] }: { items: NavItem[] }) {
const page = usePage();
return (
<SidebarGroup className="px-2 py-0">
<SidebarGroupLabel>Platform</SidebarGroupLabel>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild isActive={item.href === page.url} tooltip={{ children: item.title }}>
<Link href={item.href} prefetch>
{item.icon && <item.icon />}
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroup>
);
}

13
resources/js/components/nav-user.tsx
View File

@ -1,5 +1,5 @@
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar';
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { UserInfo } from '@/components/user-info';
import { UserMenuContent } from '@/components/user-menu-content';
import { useIsMobile } from '@/hooks/use-mobile';
@ -9,7 +9,6 @@ import { ChevronsUpDown } from 'lucide-react';
export function NavUser() {
const { auth } = usePage<SharedData>().props;
const { state } = useSidebar();
const isMobile = useIsMobile();
return (
@ -17,15 +16,19 @@ export function NavUser() {
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton size="lg" className="text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent group">
<SidebarMenuButton
size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
>
<UserInfo user={auth.user} />
<ChevronsUpDown className="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
side={isMobile ? 'bottom' : 'right'}
align="end"
side={isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'}
sideOffset={4}
>
<UserMenuContent user={auth.user} />
</DropdownMenuContent>

4
resources/js/components/project-switch.tsx
View File

@ -33,8 +33,8 @@ export function ProjectSwitch() {
<div className="flex items-center">
<Link href={route('servers')}>
<Button variant="ghost" className="px-2">
<Avatar className="size-7 rounded-md">
<AvatarFallback className="rounded-md">{initials(auth.currentProject?.name ?? '')}</AvatarFallback>
<Avatar className="size-6 rounded-sm">
<AvatarFallback className="rounded-sm">{initials(auth.currentProject?.name ?? '')}</AvatarFallback>
</Avatar>
<span className="hidden lg:flex">{auth.currentProject?.name}</span>
</Button>

8
resources/js/components/server-switch.tsx
View File

@ -31,8 +31,8 @@ export function ServerSwitch() {
{selectedServer && (
<Link href={route('servers.show', { server: selectedServer?.id || '' })}>
<Button variant="ghost" className="px-2">
<Avatar className="size-7 rounded-md">
<AvatarFallback className="rounded-md">{initials(selectedServer?.name ?? '')}</AvatarFallback>
<Avatar className="size-6 rounded-sm">
<AvatarFallback className="rounded-sm">{initials(selectedServer?.name ?? '')}</AvatarFallback>
</Avatar>
<span className="hidden lg:flex">{selectedServer?.name}</span>
</Button>
@ -41,8 +41,8 @@ export function ServerSwitch() {
{!selectedServer && (
<Button variant="ghost" className="cursor-default px-2">
<Avatar className="size-7 rounded-md">
<AvatarFallback className="rounded-md">S</AvatarFallback>
<Avatar className="size-6 rounded-sm">
<AvatarFallback className="rounded-sm">S</AvatarFallback>
</Avatar>
<span className="hidden lg:flex">Select a server</span>
</Button>

11
resources/js/components/ui/button.tsx
View File

@ -5,21 +5,22 @@ import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
"cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
destructive:
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
outline:
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
sm: 'h-8 rounded-md px-3 has-[>svg]:px-2.5',
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
icon: 'size-9',
},

0
resources/js/components/input-error.tsx → resources/js/components/ui/input-error.tsx
View File

2
resources/js/components/ui/input.tsx
View File

@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
type={type}
data-slot="input"
className={cn(
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-background border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
className,

2
resources/js/components/ui/separator.tsx
View File

@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import * as SeparatorPrimitive from '@radix-ui/react-separator';

8
resources/js/components/ui/sheet.tsx
View File

@ -25,7 +25,7 @@ function SheetOverlay({ className, ...props }: React.ComponentProps<typeof Sheet
<SheetPrimitive.Overlay
data-slot="sheet-overlay"
className={cn(
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
className,
)}
{...props}
@ -48,8 +48,10 @@ function SheetContent({
data-slot="sheet-content"
className={cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
side === 'right' && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l',
side === 'left' && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r',
side === 'right' &&
'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
side === 'left' &&
'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
side === 'top' && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
side === 'bottom' && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
className,

2
resources/js/components/ui/skeleton.tsx
View File

@ -1,7 +1,7 @@
import { cn } from '@/lib/utils';
function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
return <div data-slot="skeleton" className={cn('bg-primary/10 animate-pulse rounded-md', className)} {...props} />;
return <div data-slot="skeleton" className={cn('bg-accent animate-pulse rounded-md', className)} {...props} />;
}
export { Skeleton };

2
resources/js/components/ui/tooltip.tsx
View File

@ -1,3 +1,5 @@
'use client';
import * as React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';

2
resources/js/components/user-info.tsx
View File

@ -7,7 +7,7 @@ export function UserInfo({ user, showEmail = false }: { user: User; showEmail?:
return (
<>
<Avatar className="h-8 w-8 overflow-hidden rounded-full">
<Avatar className="h-8 w-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">{getInitials(user.name)}</AvatarFallback>
</Avatar>

2
resources/js/components/user-menu-content.tsx
View File

@ -30,7 +30,7 @@ export function UserMenuContent({ user }: UserMenuContentProps) {
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem asChild>
<Link className="block w-full" href={route('profile.edit')} as="button" prefetch onClick={cleanup}>
<Link className="block w-full" href={route('profile')} as="button" prefetch onClick={cleanup}>
<Settings className="mr-2" />
Settings
</Link>

19
resources/js/hooks/use-mobile.ts Normal file
View File

@ -0,0 +1,19 @@
import * as React from 'react';
const MOBILE_BREAKPOINT = 768;
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
};
mql.addEventListener('change', onChange);
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
return () => mql.removeEventListener('change', onChange);
}, []);
return !!isMobile;
}

4
resources/js/layouts/app-layout.tsx
View File

@ -1,4 +1,4 @@
import AppLayoutTemplate from '@/layouts/app/app-header-layout';
import AppLayout from '@/layouts/app/layout';
import { type BreadcrumbItem } from '@/types';
import { type ReactNode } from 'react';
@ -7,4 +7,4 @@ interface AppLayoutProps {
breadcrumbs?: BreadcrumbItem[];
}
export default ({ children, ...props }: AppLayoutProps) => <AppLayoutTemplate {...props}>{children}</AppLayoutTemplate>;
export default ({ children, ...props }: AppLayoutProps) => <AppLayout {...props}>{children}</AppLayout>;

19
resources/js/layouts/app/app-header-layout.tsx
View File

@ -1,19 +0,0 @@
import { AppContent } from '@/components/app-content';
import { AppHeader } from '@/components/app-header';
import { AppShell } from '@/components/app-shell';
import { type BreadcrumbItem } from '@/types';
import type { PropsWithChildren } from 'react';
import { usePoll } from '@inertiajs/react';
import { Toaster } from '@/components/ui/sonner';
export default function AppHeaderLayout({ children }: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
usePoll(10000);
return (
<AppShell>
<AppHeader />
<AppContent>{children}</AppContent>
<Toaster />
</AppShell>
);
}

18
resources/js/layouts/app/app-sidebar-layout.tsx
View File

@ -1,18 +0,0 @@
import { AppContent } from '@/components/app-content';
import { AppShell } from '@/components/app-shell';
import { AppSidebar } from '@/components/app-sidebar';
import { AppSidebarHeader } from '@/components/app-sidebar-header';
import { type BreadcrumbItem } from '@/types';
import { type PropsWithChildren } from 'react';
export default function AppSidebarLayout({ children, breadcrumbs = [] }: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
return (
<AppShell variant="sidebar">
<AppSidebar />
<AppContent variant="sidebar">
<AppSidebarHeader breadcrumbs={breadcrumbs} />
{children}
</AppContent>
</AppShell>
);
}

35
resources/js/layouts/app/layout.tsx Normal file
View File

@ -0,0 +1,35 @@
import { AppSidebar } from '@/components/app-sidebar';
import { AppHeader } from '@/components/app-header';
import { type BreadcrumbItem, NavItem } from '@/types';
import { CSSProperties, type PropsWithChildren } from 'react';
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
import { usePoll } from '@inertiajs/react';
export default function Layout({
children,
secondNavItems,
secondNavTitle,
}: PropsWithChildren<{
breadcrumbs?: BreadcrumbItem[];
secondNavItems?: NavItem[];
secondNavTitle?: string;
}>) {
usePoll(10000);
return (
<SidebarProvider
style={
{
'--sidebar-width': '300px',
} as CSSProperties
}
defaultOpen={!!(secondNavItems && secondNavItems.length > 0)}
>
<AppSidebar secondNavItems={secondNavItems} secondNavTitle={secondNavTitle} />
<SidebarInset>
<AppHeader />
<div className="flex flex-1 flex-col">{children}</div>
</SidebarInset>
</SidebarProvider>
);
}

102
resources/js/layouts/server/layout.tsx Normal file
View File

@ -0,0 +1,102 @@
import { type NavItem } from '@/types';
import {
ChartPieIcon,
ClockIcon,
CogIcon,
DatabaseIcon,
FlameIcon,
FolderOpenIcon,
HomeIcon,
KeyIcon,
ListEndIcon,
LogsIcon,
MousePointerClickIcon,
Settings2Icon,
TerminalSquareIcon,
} from 'lucide-react';
import { ReactNode } from 'react';
import { Server } from '@/types/server';
import ServerHeader from '@/pages/servers/partials/header';
import Layout from '@/layouts/app/layout';
export default function ServerLayout({ server, children }: { server: Server; children: ReactNode }) {
// When server-side rendering, we only render the layout on the client...
if (typeof window === 'undefined') {
return null;
}
const sidebarNavItems: NavItem[] = [
{
title: 'Overview',
href: route('servers.show', { server: server.id }),
icon: HomeIcon,
},
{
title: 'Databases',
href: '#',
icon: DatabaseIcon,
},
{
title: 'Sites',
href: '#',
icon: MousePointerClickIcon,
},
{
title: 'File Manager',
href: '#',
icon: FolderOpenIcon,
},
{
title: 'Firewall',
href: '#',
icon: FlameIcon,
},
{
title: 'CronJobs',
href: '#',
icon: ClockIcon,
},
{
title: 'Workers',
href: '#',
icon: ListEndIcon,
},
{
title: 'SSH Keys',
href: '#',
icon: KeyIcon,
},
{
title: 'Services',
href: '#',
icon: CogIcon,
},
{
title: 'Metrics',
href: '#',
icon: ChartPieIcon,
},
{
title: 'Console',
href: '#',
icon: TerminalSquareIcon,
},
{
title: 'Logs',
href: '#',
icon: LogsIcon,
},
{
title: 'Settings',
href: '#',
icon: Settings2Icon,
},
];
return (
<Layout secondNavItems={sidebarNavItems} secondNavTitle={server.name}>
<ServerHeader server={server} />
<div className="p-4">{children}</div>
</Layout>
);
}

56
resources/js/layouts/settings/layout.tsx
View File

@ -1,16 +1,12 @@
import Container from '@/components/container';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/react';
import { ListIcon, LockIcon, UserIcon } from 'lucide-react';
import { type PropsWithChildren } from 'react';
import { type BreadcrumbItem, type NavItem } from '@/types';
import { ListIcon, UserIcon } from 'lucide-react';
import { ReactNode } from 'react';
import Layout from '@/layouts/app/layout';
const sidebarNavItems: NavItem[] = [
{
title: 'Profile',
href: '/settings/profile',
href: route('profile'),
icon: UserIcon,
},
{
@ -18,51 +14,17 @@ const sidebarNavItems: NavItem[] = [
href: '/',
icon: ListIcon,
},
{
title: 'Password',
href: '/settings/password',
icon: LockIcon,
},
];
export default function SettingsLayout({ children }: PropsWithChildren) {
export default function SettingsLayout({ children, breadcrumbs }: { children: ReactNode; breadcrumbs?: BreadcrumbItem[] }) {
// When server-side rendering, we only render the layout on the client...
if (typeof window === 'undefined') {
return null;
}
const currentPath = window.location.pathname;
return (
<Container>
<div className="flex flex-col space-y-8 lg:flex-row lg:space-y-0 lg:space-x-12">
<aside className="w-full max-w-xl lg:w-60">
<nav className="flex flex-col space-y-1 space-x-0">
{sidebarNavItems.map((item, index) => (
<Button
key={`${item.href}-${index}`}
size="sm"
variant="ghost"
asChild
className={cn('w-full justify-start', {
'bg-muted': currentPath === item.href,
})}
>
<Link href={item.href} prefetch>
{item.icon && <item.icon />}
{item.title}
</Link>
</Button>
))}
</nav>
</aside>
<Separator className="my-6 md:hidden" />
<div className="flex-1">
<section className="space-y-12">{children}</section>
</div>
</div>
</Container>
<Layout breadcrumbs={breadcrumbs} secondNavItems={sidebarNavItems} secondNavTitle="Settings">
{children}
</Layout>
);
}

2
resources/js/pages/auth/confirm-password.tsx
View File

@ -3,7 +3,7 @@ import { Head, useForm } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
import { FormEventHandler } from 'react';
import InputError from '@/components/input-error';
import InputError from '@/components/ui/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

2
resources/js/pages/auth/forgot-password.tsx
View File

@ -3,7 +3,7 @@ import { Head, useForm } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
import { FormEventHandler } from 'react';
import InputError from '@/components/input-error';
import InputError from '@/components/ui/input-error';
import TextLink from '@/components/text-link';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

2
resources/js/pages/auth/login.tsx
View File

@ -2,7 +2,7 @@ import { Head, useForm } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
import { FormEventHandler } from 'react';
import InputError from '@/components/input-error';
import InputError from '@/components/ui/input-error';
import TextLink from '@/components/text-link';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';

2
resources/js/pages/auth/reset-password.tsx
View File

@ -2,7 +2,7 @@ import { Head, useForm } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
import { FormEventHandler } from 'react';
import InputError from '@/components/input-error';
import InputError from '@/components/ui/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

2
resources/js/pages/server-logs/columns.tsx → resources/js/pages/server-logs/partials/columns.tsx
View File

@ -45,7 +45,7 @@ const LogActionCell = ({ row }: { row: Row<ServerLog> }) => {
<DialogTitle>View Log</DialogTitle>
<DialogDescription>This is all content of the log</DialogDescription>
</DialogHeader>
<ScrollArea className="border-border relative h-[500px] w-full rounded-md border bg-black p-3 font-mono text-sm whitespace-pre-line text-gray-50">
<ScrollArea className="border-border bg-accent text-accent-foreground relative h-[500px] w-full rounded-md border p-3 font-mono text-sm whitespace-pre-line">
{content}
<ScrollBar orientation="vertical" />
</ScrollArea>

2
resources/js/pages/server-providers/create-server-provider.tsx → resources/js/pages/server-providers/partials/create-server-provider.tsx
View File

@ -14,7 +14,7 @@ import { useForm, usePage } from '@inertiajs/react';
import { FormEventHandler, useEffect, useState } from 'react';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import InputError from '@/components/input-error';
import InputError from '@/components/ui/input-error';
import { Form, FormField, FormFields } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { SharedData } from '@/types';

14
resources/js/pages/servers/index.tsx
View File

@ -2,16 +2,16 @@ import { Head, usePage } from '@inertiajs/react';
import { type Configs } from '@/types';
import AppLayout from '@/layouts/app-layout';
import { DataTable } from '@/components/data-table';
import { columns } from '@/pages/servers/columns';
import { columns } from '@/pages/servers/partials/columns';
import { Server } from '@/types/server';
import Heading from '@/components/heading';
import CreateServer from '@/pages/servers/create-server';
import CreateServer from '@/pages/servers/partials/create-server';
import Container from '@/components/container';
import { PlusIcon } from 'lucide-react';
import { Button } from '@/components/ui/button';
import React from 'react';
import Layout from '@/layouts/app/layout';
type Response = {
servers: {
@ -24,12 +24,12 @@ type Response = {
export default function Servers() {
const page = usePage<Response>();
return (
<AppLayout>
<Layout>
<Head title="Servers" />
<Container>
<Container className="max-w-5xl">
<div className="flex items-start justify-between">
<Heading title="Servers" description="All of the servers on your project are here" />
<Heading title="Servers" />
<div className="flex items-center gap-2">
<CreateServer>
<Button variant="outline">
@ -40,6 +40,6 @@ export default function Servers() {
</div>
<DataTable columns={columns} data={page.props.servers.data} />
</Container>
</AppLayout>
</Layout>
);
}

15
resources/js/pages/servers/installing.tsx
View File

@ -1,12 +1,9 @@
import type { Server } from '@/types/server';
import type { ServerLog } from '@/types/server-log';
import Container from '@/components/container';
import Heading from '@/components/heading';
import { Progress } from '@/components/ui/progress';
import { DataTable } from '@/components/data-table';
import { columns } from '@/pages/server-logs/columns';
import { columns } from '@/pages/server-logs/partials/columns';
import { usePage } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
export default function InstallingServer() {
const page = usePage<{
@ -17,14 +14,8 @@ export default function InstallingServer() {
}>();
return (
<Container>
<div className="flex items-start justify-between">
<Heading title={`Installing ${page.props.server.name}`} description="Your server is being installed" />
{page.props.server.status === 'installation_failed' && <Button variant="destructive">Delete</Button>}
</div>
<Progress value={parseInt(page.props.server.progress || '0')} />
<div className="mt-2 text-center">{page.props.server.progress}%</div>
<DataTable columns={columns} data={page.props.logs.data} />
<Container className="max-w-3xl">
<DataTable columns={columns} data={page.props.logs.data} />{' '}
</Container>
);
}

21
resources/js/pages/servers/overview.tsx Normal file
View File

@ -0,0 +1,21 @@
import type { Server } from '@/types/server';
import type { ServerLog } from '@/types/server-log';
import { DataTable } from '@/components/data-table';
import { columns } from '@/pages/server-logs/partials/columns';
import { usePage } from '@inertiajs/react';
import Container from '@/components/container';
export default function ServerOverview() {
const page = usePage<{
server: Server;
logs: {
data: ServerLog[];
};
}>();
return (
<Container className="max-w-3xl">
<DataTable columns={columns} data={page.props.logs.data} />
</Container>
);
}

27
resources/js/pages/servers/partials/actions.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Server } from '@/types/server';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { MoreVerticalIcon } from 'lucide-react';
import DeleteServer from '@/pages/servers/partials/delete-server';
export default function ServerActions({ server }: { server: Server }) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreVerticalIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>Copy payment ID</DropdownMenuItem>
<DropdownMenuSeparator />
<DeleteServer server={server}>
<DropdownMenuItem onSelect={(e) => e.preventDefault()} variant="destructive">
Delete Server
</DropdownMenuItem>
</DeleteServer>
</DropdownMenuContent>
</DropdownMenu>
);
}

4
resources/js/pages/servers/columns.tsx → resources/js/pages/servers/partials/columns.tsx
View File

@ -2,10 +2,10 @@
import { ColumnDef } from '@tanstack/react-table';
import { Server } from '@/types/server';
import { Badge } from '@/components/ui/badge';
import { Link } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { EyeIcon } from 'lucide-react';
import ServerStatus from '@/pages/servers/partials/status';
export const columns: ColumnDef<Server>[] = [
{
@ -33,7 +33,7 @@ export const columns: ColumnDef<Server>[] = [
enableColumnFilter: true,
enableSorting: true,
cell: ({ row }) => {
return <Badge variant={row.original.status_color}>{row.original.status}</Badge>;
return <ServerStatus server={row.original} />;
},
},
{

4
resources/js/pages/servers/create-server.tsx → resources/js/pages/servers/partials/create-server.tsx
View File

@ -5,11 +5,11 @@ import { useForm, usePage } from '@inertiajs/react';
import React, { FormEventHandler, useState } from 'react';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import InputError from '@/components/input-error';
import InputError from '@/components/ui/input-error';
import { Input } from '@/components/ui/input';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { ServerProvider } from '@/types/server-provider';
import CreateServerProvider from '@/pages/server-providers/create-server-provider';
import CreateServerProvider from '@/pages/server-providers/partials/create-server-provider';
import axios from 'axios';
import { Form, FormField, FormFields } from '@/components/ui/form';
import type { SharedData } from '@/types';

63
resources/js/pages/servers/partials/delete-server.tsx Normal file
View File

@ -0,0 +1,63 @@
import { Server } from '@/types/server';
import { FormEvent, ReactNode } from 'react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { useForm } from '@inertiajs/react';
import { Form, FormField, FormFields } from '@/components/ui/form';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import InputError from '@/components/ui/input-error';
import { LoaderCircleIcon } from 'lucide-react';
export default function DeleteServer({ server, children }: { server: Server; children: ReactNode }) {
const form = useForm({
name: '',
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.delete(route('servers.destroy', server.id));
};
return (
<Dialog>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete {server.name}</DialogTitle>
<DialogDescription>Delete server and its resources.</DialogDescription>
</DialogHeader>
<Form id="delete-server-form" onSubmit={submit}>
<FormFields>
<FormField>
<Label htmlFor="server-name">Name</Label>
<Input id="server-name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
<InputError message={form.errors.name} />
</FormField>
</FormFields>
</Form>
<DialogFooter className="gap-2">
<DialogClose asChild>
<Button variant="secondary">Cancel</Button>
</DialogClose>
<Button form="delete-server-form" variant="destructive" disabled={form.processing}>
{form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
Delete server
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

73
resources/js/pages/servers/partials/header.tsx Normal file
View File

@ -0,0 +1,73 @@
import { Server } from '@/types/server';
import { CloudIcon, IdCardIcon, LoaderCircleIcon, MapPinIcon, SlashIcon } from 'lucide-react';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import ServerStatus from '@/pages/servers/partials/status';
import ServerActions from '@/pages/servers/partials/actions';
import { cn } from '@/lib/utils';
export default function ServerHeader({ server }: { server: Server }) {
return (
<div className="flex items-center justify-between border-b px-4 py-2">
<div className="space-y-2">
<div className="text-accent-foreground/50 flex items-center space-x-2 text-xs">
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<IdCardIcon className="size-4" />
<div className="hidden lg:inline-flex">{server.name}</div>
</div>
</TooltipTrigger>
<TooltipContent>
<span className="lg:hidden">{server.name}</span>
<span className="hidden lg:inline-flex">Server Name</span>
</TooltipContent>
</Tooltip>
<SlashIcon className="size-3" />
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<CloudIcon className="size-4" />
<div className="hidden lg:inline-flex">{server.provider}</div>
</div>
</TooltipTrigger>
<TooltipContent>
<span className="lg:hidden">{server.provider}</span>
<span className="hidden lg:inline-flex">Server Provider</span>
</TooltipContent>
</Tooltip>
<SlashIcon className="size-3" />
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<MapPinIcon className="size-4" />
<div className="hidden lg:inline-flex">{server.ip}</div>
</div>
</TooltipTrigger>
<TooltipContent>
<span className="lg:hidden">{server.ip}</span>
<span className="hidden lg:inline-flex">Server IP</span>
</TooltipContent>
</Tooltip>
{['installing', 'installation_failed'].includes(server.status) && (
<>
<SlashIcon className="size-3" />
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<LoaderCircleIcon className={cn('size-4', server.status === 'installing' ? 'animate-spin' : '')} />
<div>%{server.progress}</div>
</div>
</TooltipTrigger>
<TooltipContent>Installation Progress</TooltipContent>
</Tooltip>
</>
)}
</div>
</div>
<div className="flex items-center space-x-1">
<ServerStatus server={server} />
<ServerActions server={server} />
</div>
</div>
);
}

6
resources/js/pages/servers/partials/status.tsx Normal file
View File

@ -0,0 +1,6 @@
import { Server } from '@/types/server';
import { Badge } from '@/components/ui/badge';
export default function ServerStatus({ server }: { server: Server }) {
return <Badge variant={server.status_color}>{server.status}</Badge>;
}

9
resources/js/pages/servers/show.tsx
View File

@ -2,10 +2,11 @@ import { Head, usePage } from '@inertiajs/react';
import { type Configs } from '@/types';
import AppLayout from '@/layouts/app-layout';
import { type Server } from '@/types/server';
import InstallingServer from '@/pages/servers/installing';
import type { ServerLog } from '@/types/server-log';
import ServerOverview from '@/pages/servers/overview';
import ServerLayout from '@/layouts/server/layout';
type Response = {
servers: {
@ -22,10 +23,10 @@ type Response = {
export default function ShowServer() {
const page = usePage<Response>();
return (
<AppLayout>
<ServerLayout server={page.props.server}>
<Head title={page.props.server.name} />
{['installing', 'installation_failed'].includes(page.props.server.status) && <InstallingServer />}
</AppLayout>
{['installing', 'installation_failed'].includes(page.props.server.status) ? <InstallingServer /> : <ServerOverview />}
</ServerLayout>
);
}

128
resources/js/pages/settings/password.tsx
View File

@ -1,128 +0,0 @@
import InputError from '@/components/input-error';
import AppLayout from '@/layouts/app-layout';
import SettingsLayout from '@/layouts/settings/layout';
import { type BreadcrumbItem } from '@/types';
import { Transition } from '@headlessui/react';
import { Head, useForm } from '@inertiajs/react';
import { FormEventHandler, useRef } from 'react';
import HeadingSmall from '@/components/heading-small';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
const breadcrumbs: BreadcrumbItem[] = [
{
title: 'Password settings',
href: '/settings/password',
},
];
export default function Password() {
const passwordInput = useRef<HTMLInputElement>(null);
const currentPasswordInput = useRef<HTMLInputElement>(null);
const { data, setData, errors, put, reset, processing, recentlySuccessful } = useForm({
current_password: '',
password: '',
password_confirmation: '',
});
const updatePassword: FormEventHandler = (e) => {
e.preventDefault();
put(route('password.update'), {
preserveScroll: true,
onSuccess: () => reset(),
onError: (errors) => {
if (errors.password) {
reset('password', 'password_confirmation');
passwordInput.current?.focus();
}
if (errors.current_password) {
reset('current_password');
currentPasswordInput.current?.focus();
}
},
});
};
return (
<AppLayout breadcrumbs={breadcrumbs}>
<Head title="Profile settings" />
<SettingsLayout>
<div className="space-y-6">
<HeadingSmall title="Update password" description="Ensure your account is using a long, random password to stay secure" />
<form onSubmit={updatePassword} className="space-y-6">
<div className="grid gap-2">
<Label htmlFor="current_password">Current password</Label>
<Input
id="current_password"
ref={currentPasswordInput}
value={data.current_password}
onChange={(e) => setData('current_password', e.target.value)}
type="password"
className="mt-1 block w-full"
autoComplete="current-password"
placeholder="Current password"
/>
<InputError message={errors.current_password} />
</div>
<div className="grid gap-2">
<Label htmlFor="password">New password</Label>
<Input
id="password"
ref={passwordInput}
value={data.password}
onChange={(e) => setData('password', e.target.value)}
type="password"
className="mt-1 block w-full"
autoComplete="new-password"
placeholder="New password"
/>
<InputError message={errors.password} />
</div>
<div className="grid gap-2">
<Label htmlFor="password_confirmation">Confirm password</Label>
<Input
id="password_confirmation"
value={data.password_confirmation}
onChange={(e) => setData('password_confirmation', e.target.value)}
type="password"
className="mt-1 block w-full"
autoComplete="new-password"
placeholder="Confirm password"
/>
<InputError message={errors.password_confirmation} />
</div>
<div className="flex items-center gap-4">
<Button disabled={processing}>Save password</Button>
<Transition
show={recentlySuccessful}
enter="transition ease-in-out"
enterFrom="opacity-0"
leave="transition ease-in-out"
leaveTo="opacity-0"
>
<p className="text-sm text-neutral-600">Saved</p>
</Transition>
</div>
</form>
</div>
</SettingsLayout>
</AppLayout>
);
}

129
resources/js/pages/settings/profile.tsx
View File

@ -1,129 +0,0 @@
import { type BreadcrumbItem, type SharedData } from '@/types';
import { Transition } from '@headlessui/react';
import { Head, Link, useForm, usePage } from '@inertiajs/react';
import { FormEventHandler } from 'react';
import DeleteUser from '@/components/delete-user';
import HeadingSmall from '@/components/heading-small';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AppLayout from '@/layouts/app-layout';
import SettingsLayout from '@/layouts/settings/layout';
const breadcrumbs: BreadcrumbItem[] = [
{
title: 'Home',
href: '/',
},
{
title: 'Profile settings',
href: '/settings/profile',
},
];
type ProfileForm = {
name: string;
email: string;
};
export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
const { auth } = usePage<SharedData>().props;
const { data, setData, patch, errors, processing, recentlySuccessful } = useForm<Required<ProfileForm>>({
name: auth.user.name,
email: auth.user.email,
});
const submit: FormEventHandler = (e) => {
e.preventDefault();
patch(route('profile.update'), {
preserveScroll: true,
});
};
return (
<AppLayout breadcrumbs={breadcrumbs}>
<Head title="Profile settings" />
<SettingsLayout>
<div className="space-y-6">
<HeadingSmall title="Profile information" description="Update your name and email address" />
<form onSubmit={submit} className="space-y-6">
<div className="grid gap-2">
<Label htmlFor="name">Name</Label>
<Input
id="name"
className="mt-1 block w-full"
value={data.name}
onChange={(e) => setData('name', e.target.value)}
required
autoComplete="name"
placeholder="Full name"
/>
<InputError className="mt-2" message={errors.name} />
</div>
<div className="grid gap-2">
<Label htmlFor="email">Email address</Label>
<Input
id="email"
type="email"
className="mt-1 block w-full"
value={data.email}
onChange={(e) => setData('email', e.target.value)}
required
autoComplete="username"
placeholder="Email address"
/>
<InputError className="mt-2" message={errors.email} />
</div>
{mustVerifyEmail && auth.user.email_verified_at === null && (
<div>
<p className="text-muted-foreground -mt-4 text-sm">
Your email address is unverified.{' '}
<Link
href={route('verification.send')}
method="post"
as="button"
className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
>
Click here to resend the verification email.
</Link>
</p>
{status === 'verification-link-sent' && (
<div className="mt-2 text-sm font-medium text-green-600">A new verification link has been sent to your email address.</div>
)}
</div>
)}
<div className="flex items-center gap-4">
<Button disabled={processing}>Save</Button>
<Transition
show={recentlySuccessful}
enter="transition ease-in-out"
enterFrom="opacity-0"
leave="transition ease-in-out"
leaveTo="opacity-0"
>
<p className="text-sm text-neutral-600">Saved</p>
</Transition>
</div>
</form>
</div>
<DeleteUser />
</SettingsLayout>
</AppLayout>
);
}

19
resources/js/pages/settings/profile/index.tsx Normal file
View File

@ -0,0 +1,19 @@
import { Head } from '@inertiajs/react';
import DeleteUser from '@/pages/settings/profile/partials/delete-user';
import SettingsLayout from '@/layouts/settings/layout';
import Container from '@/components/container';
import UpdatePassword from '@/pages/settings/profile/partials/update-password';
import UpdateUser from '@/pages/settings/profile/partials/update-user';
export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
return (
<SettingsLayout>
<Head title="Profile settings" />
<Container className="max-w-xl">
<UpdateUser mustVerifyEmail={mustVerifyEmail} status={status} />
<UpdatePassword />
<DeleteUser />
</Container>
</SettingsLayout>
);
}

42
resources/js/components/delete-user.tsx → resources/js/pages/settings/profile/partials/delete-user.tsx
View File

@ -1,18 +1,29 @@
import { useForm } from '@inertiajs/react';
import { FormEventHandler, useRef } from 'react';
import InputError from '@/components/input-error';
import InputError from '@/components/ui/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import HeadingSmall from '@/components/heading-small';
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
export default function DeleteUser() {
const passwordInput = useRef<HTMLInputElement>(null);
const { data, setData, delete: destroy, processing, reset, errors, clearErrors } = useForm<Required<{ password: string }>>({ password: '' });
const {
data,
setData,
delete: destroy,
processing,
reset,
errors,
clearErrors,
} = useForm<
Required<{
password: string;
}>
>({ password: '' });
const deleteUser: FormEventHandler = (e) => {
e.preventDefault();
@ -31,14 +42,19 @@ export default function DeleteUser() {
};
return (
<div className="space-y-6">
<HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
<div className="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
<div className="relative space-y-0.5 text-red-600 dark:text-red-100">
<p className="font-medium">Warning</p>
<p className="text-sm">Please proceed with caution, this cannot be undone.</p>
</div>
<Card>
<CardHeader>
<CardTitle>Delete account</CardTitle>
<CardDescription>Delete your account and all of its resources</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
<div className="relative space-y-0.5 text-red-600 dark:text-red-100">
<p className="font-medium">Warning</p>
<p className="text-sm">Please proceed with caution, this cannot be undone.</p>
</div>
</div>
<Dialog>
<DialogTrigger asChild>
<Button variant="destructive">Delete account</Button>
@ -83,7 +99,7 @@ export default function DeleteUser() {
</form>
</DialogContent>
</Dialog>
</div>
</div>
</CardContent>
</Card>
);
}

116
resources/js/pages/settings/profile/partials/update-password.tsx Normal file
View File

@ -0,0 +1,116 @@
import InputError from '@/components/ui/input-error';
import { Transition } from '@headlessui/react';
import { useForm } from '@inertiajs/react';
import { FormEventHandler, useRef } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
export default function UpdatePassword() {
const passwordInput = useRef<HTMLInputElement>(null);
const currentPasswordInput = useRef<HTMLInputElement>(null);
const { data, setData, errors, put, reset, processing, recentlySuccessful } = useForm({
current_password: '',
password: '',
password_confirmation: '',
});
const updatePassword: FormEventHandler = (e) => {
e.preventDefault();
put(route('profile.password'), {
preserveScroll: true,
onSuccess: () => reset(),
onError: (errors) => {
if (errors.password) {
reset('password', 'password_confirmation');
passwordInput.current?.focus();
}
if (errors.current_password) {
reset('current_password');
currentPasswordInput.current?.focus();
}
},
});
};
return (
<Card>
<CardHeader>
<CardTitle>Update password</CardTitle>
<CardDescription>Ensure your account is using a long, random password to stay secure.</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={updatePassword} className="space-y-6">
<div className="grid gap-2">
<Label htmlFor="current_password">Current password</Label>
<Input
id="current_password"
ref={currentPasswordInput}
value={data.current_password}
onChange={(e) => setData('current_password', e.target.value)}
type="password"
className="mt-1 block w-full"
autoComplete="current-password"
placeholder="Current password"
/>
<InputError message={errors.current_password} />
</div>
<div className="grid gap-2">
<Label htmlFor="password">New password</Label>
<Input
id="password"
ref={passwordInput}
value={data.password}
onChange={(e) => setData('password', e.target.value)}
type="password"
className="mt-1 block w-full"
autoComplete="new-password"
placeholder="New password"
/>
<InputError message={errors.password} />
</div>
<div className="grid gap-2">
<Label htmlFor="password_confirmation">Confirm password</Label>
<Input
id="password_confirmation"
value={data.password_confirmation}
onChange={(e) => setData('password_confirmation', e.target.value)}
type="password"
className="mt-1 block w-full"
autoComplete="new-password"
placeholder="Confirm password"
/>
<InputError message={errors.password_confirmation} />
</div>
<div className="flex items-center gap-4">
<Button disabled={processing}>Save password</Button>
<Transition
show={recentlySuccessful}
enter="transition ease-in-out"
enterFrom="opacity-0"
leave="transition ease-in-out"
leaveTo="opacity-0"
>
<p className="text-sm text-neutral-600">Saved</p>
</Transition>
</div>
</form>
</CardContent>
</Card>
);
}

110
resources/js/pages/settings/profile/partials/update-user.tsx Normal file
View File

@ -0,0 +1,110 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import InputError from '@/components/ui/input-error';
import { Link, useForm, usePage } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { Transition } from '@headlessui/react';
import type { SharedData } from '@/types';
import { FormEventHandler } from 'react';
type ProfileForm = {
name: string;
email: string;
};
export default function UpdateUser({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
const { auth } = usePage<SharedData>().props;
const { data, setData, patch, errors, processing, recentlySuccessful } = useForm<Required<ProfileForm>>({
name: auth.user.name,
email: auth.user.email,
});
const submit: FormEventHandler = (e) => {
e.preventDefault();
patch(route('profile.update'), {
preserveScroll: true,
});
};
return (
<Card>
<CardHeader>
<CardTitle>Profile information</CardTitle>
<CardDescription>Update your profile information and email address.</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={submit} className="space-y-6">
<div className="grid gap-2">
<Label htmlFor="name">Name</Label>
<Input
id="name"
className="mt-1 block w-full"
value={data.name}
onChange={(e) => setData('name', e.target.value)}
required
autoComplete="name"
placeholder="Full name"
/>
<InputError className="mt-2" message={errors.name} />
</div>
<div className="grid gap-2">
<Label htmlFor="email">Email address</Label>
<Input
id="email"
type="email"
className="mt-1 block w-full"
value={data.email}
onChange={(e) => setData('email', e.target.value)}
required
autoComplete="username"
placeholder="Email address"
/>
<InputError className="mt-2" message={errors.email} />
</div>
{mustVerifyEmail && auth.user.email_verified_at === null && (
<div>
<p className="text-muted-foreground -mt-4 text-sm">
Your email address is unverified.{' '}
<Link
href={route('verification.send')}
method="post"
as="button"
className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
>
Click here to resend the verification email.
</Link>
</p>
{status === 'verification-link-sent' && (
<div className="mt-2 text-sm font-medium text-green-600">A new verification link has been sent to your email address.</div>
)}
</div>
)}
<div className="flex items-center gap-4">
<Button disabled={processing}>Save</Button>
<Transition
show={recentlySuccessful}
enter="transition ease-in-out"
enterFrom="opacity-0"
leave="transition ease-in-out"
leaveTo="opacity-0"
>
<p className="text-sm text-neutral-600">Saved</p>
</Transition>
</div>
</form>
</CardContent>
</Card>
);
}