YuzuZensai/Minikura
1
0
Fork 0
mirror of https://github.com/YuzuZensai/Minikura.git synced 2026-09-13 18:59:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix: align dashboard with secured APIs

Browse Source
This commit is contained in:
yuzu
2026-08-13 03:29:33 +07:00
parent e90dc8382b
commit 3f09e330be
47 changed files with 1280 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/bootstrap/page.tsx
+81 -52
View File
@@ -2,21 +2,23 @@
import { ArrowRight, Check } from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { useEffect, useRef, useState } from "react";
import { AuthFormCard, FormError } from "@/components/auth/auth-form-card";
import { BrandMark } from "@/components/brand";
import { FullScreenLoader } from "@/components/page-layout";
import { ThemeToggle } from "@/components/theme-toggle";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { api } from "@/lib/api-client";
import { gsap, motionEase, prefersReducedMotion, useGSAP } from "@/lib/motion";
export default function BootstrapPage() {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [checkingStatus, setCheckingStatus] = useState(true);
const [error, setError] = useState("");
const stageRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const checkStatus = async () => {
@@ -35,6 +37,27 @@ export default function BootstrapPage() {
checkStatus();
}, [router]);
useGSAP(
() => {
const root = stageRef.current;
if (!root || prefersReducedMotion()) return;
gsap.fromTo(
root,
{ y: 28, autoAlpha: 0 },
{ y: 0, autoAlpha: 1, duration: 0.65, ease: motionEase.out }
);
const panelItems = root.querySelectorAll("[data-boot-item]");
gsap.fromTo(
panelItems,
{ y: 16, autoAlpha: 0 },
{ y: 0, autoAlpha: 1, duration: 0.5, stagger: 0.07, delay: 0.12, ease: motionEase.out }
);
},
{ scope: stageRef }
);
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setLoading(true);
@@ -85,10 +108,16 @@ export default function BootstrapPage() {
return (
<main className="auth-grid relative flex min-h-screen items-center justify-center bg-sidebar p-5 sm:p-10">
<ThemeToggle className="absolute top-5 right-5 sm:top-8 sm:right-8" />
<div className="grid w-full max-w-5xl overflow-hidden border border-sidebar-border bg-background text-foreground shadow-[12px_12px_0_color-mix(in_oklch,var(--sidebar-primary)_18%,transparent)] lg:grid-cols-[0.8fr_1.2fr]">
<section className="flex flex-col justify-between bg-primary p-8 text-primary-foreground sm:p-10">
<BrandMark inverted />
<div className="my-16">
<div
ref={stageRef}
className="grid w-full max-w-5xl overflow-hidden border border-sidebar-border bg-background text-foreground shadow-[12px_12px_0_color-mix(in_oklch,var(--sidebar-primary)_18%,transparent)] lg:grid-cols-[0.8fr_1.2fr]"
>
<section className="relative flex flex-col justify-between overflow-hidden bg-primary p-8 text-primary-foreground sm:p-10">
<div className="auth-scanlines pointer-events-none absolute inset-0 opacity-40" />
<div data-boot-item="">
<BrandMark inverted />
</div>
<div className="my-16" data-boot-item="">
<span className="page-eyebrow text-primary-foreground/60">System bootstrap / 01</span>
<h1 className="text-5xl font-black uppercase leading-[0.9] tracking-[-0.055em]">
Build your command center.
@@ -98,13 +127,13 @@ export default function BootstrapPage() {
</p>
</div>
<div className="space-y-3 font-mono text-[10px] font-bold uppercase tracking-[0.12em]">
<p className="flex items-center gap-2">
<p className="flex items-center gap-2" data-boot-item="">
<Check className="size-3" /> Admin authority
</p>
<p className="flex items-center gap-2">
<p className="flex items-center gap-2" data-boot-item="">
<Check className="size-3" /> Secure session
</p>
<p className="flex items-center gap-2">
<p className="flex items-center gap-2" data-boot-item="">
<Check className="size-3" /> Ready in one step
</p>
</div>
@@ -116,49 +145,49 @@ export default function BootstrapPage() {
headerClassName="px-7 sm:px-10"
contentClassName="px-7 sm:px-10"
>
<form onSubmit={handleSubmit} className="space-y-5">
<div className="space-y-2">
<Label htmlFor="name">Full Name</Label>
<Input id="name" name="name" placeholder="John Doe" required autoFocus />
</div>
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
name="email"
type="email"
placeholder="admin@example.com"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Input
id="password"
name="password"
type="password"
placeholder="Minimum 8 characters"
minLength={8}
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="confirmPassword">Confirm Password</Label>
<Input
id="confirmPassword"
name="confirmPassword"
type="password"
placeholder="Repeat password"
minLength={8}
required
/>
</div>
<FormError message={error} />
<Button type="submit" size="lg" className="w-full" disabled={loading}>
{loading ? "Initializing..." : "Initialize Console"}
{!loading && <ArrowRight className="ml-auto" />}
</Button>
</form>
<form onSubmit={handleSubmit} className="space-y-5">
<div className="space-y-2">
<Label htmlFor="name">Full Name</Label>
<Input id="name" name="name" placeholder="John Doe" required autoFocus />
</div>
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
name="email"
type="email"
placeholder="admin@example.com"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Input
id="password"
name="password"
type="password"
placeholder="Minimum 8 characters"
minLength={8}
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="confirmPassword">Confirm Password</Label>
<Input
id="confirmPassword"
name="confirmPassword"
type="password"
placeholder="Repeat password"
minLength={8}
required
/>
</div>
<FormError message={error} />
<Button type="submit" size="lg" className="w-full" disabled={loading}>
{loading ? "Initializing..." : "Initialize Console"}
{!loading && <ArrowRight className="ml-auto" />}
</Button>
</form>
</AuthFormCard>
</div>
</main>
apps/web/app/dashboard/k8s/page.tsx
+1 -1
View File
@@ -150,7 +150,7 @@ export default function K8sResourcesPage() {
{pageHeader}
<StatePanel
title="Kubernetes not connected"
icon={<AlertCircle className="size-6 text-yellow-500" />}
icon={<AlertCircle className="size-6 text-warning" />}
description={
<>
<p>Ensure the operator is running with a valid Kubernetes configuration.</p>
apps/web/app/dashboard/page.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { redirect } from "next/navigation";
export default function DashboardPage() {
redirect("/dashboard/users");
redirect("/dashboard/servers");
}
apps/web/app/dashboard/servers/create/page.tsx
+5 -5
View File
@@ -56,11 +56,11 @@ export default function CreateServerPage() {
title="Server Configuration"
description="Complete configuration for the itzg/minecraft-server workload."
>
<ServerForm
onSubmit={handleSubmit}
onCancel={() => router.push("/dashboard/servers")}
submitLabel="Create Server"
/>
<ServerForm
onSubmit={handleSubmit}
onCancel={() => router.push("/dashboard/servers")}
submitLabel="Create Server"
/>
</SectionCard>
</PageShell>
);
apps/web/app/dashboard/servers/edit/[id]/page.tsx
+25 -14
View File
@@ -1,6 +1,6 @@
"use client";
import type { NormalServer, UpdateServerRequest } from "@minikura/api";
import type { NormalServer, ReverseProxyServer, UpdateServerRequest } from "@minikura/api";
import { ArrowLeft } from "lucide-react";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
@@ -19,6 +19,7 @@ export default function EditServerPage() {
const [loading, setLoading] = useState(true);
const [serverData, setServerData] = useState<NormalServer | null>(null);
const [resourceKind, setResourceKind] = useState<"server" | "proxy">("server");
const [error, setError] = useState<string | null>(null);
useEffect(() => {
@@ -32,6 +33,7 @@ export default function EditServerPage() {
const server = servers.find((s) => s.id === serverId);
if (server) {
setServerData(server);
setResourceKind("server");
setLoading(false);
return;
}
@@ -39,10 +41,11 @@ export default function EditServerPage() {
const proxyResponse = await getReverseProxyApi().get();
if (proxyResponse.data) {
const proxies = proxyResponse.data as unknown as NormalServer[];
const proxies = proxyResponse.data as unknown as ReverseProxyServer[];
const proxy = proxies.find((p) => p.id === serverId);
if (proxy) {
setServerData(proxy);
setServerData(proxy as unknown as NormalServer);
setResourceKind("proxy");
setLoading(false);
return;
}
@@ -66,7 +69,18 @@ export default function EditServerPage() {
const payload: UpdateServerRequest = toCommonServerRequestFields(data);
const response = await api.api.servers({ id: serverId }).patch(payload);
const response =
resourceKind === "server"
? await api.api.servers({ id: serverId }).patch(payload)
: await getReverseProxyApi()({ id: serverId }).patch({
description: payload.description,
listen_port: payload.listen_port,
service_type: payload.service_type,
node_port: payload.node_port,
memory: payload.memory,
cpu_request: payload.cpu_request,
cpu_limit: payload.cpu_limit,
});
if (response.error) {
const errorMsg =
@@ -95,10 +109,7 @@ export default function EditServerPage() {
tone="error"
className="min-h-[50vh]"
action={
<Button
variant="outline"
onClick={() => router.push("/dashboard/servers")}
>
<Button variant="outline" onClick={() => router.push("/dashboard/servers")}>
<ArrowLeft className="size-4" />
Back to Servers
</Button>
@@ -127,12 +138,12 @@ export default function EditServerPage() {
title="Server Configuration"
description="Modify settings for your Minecraft server"
>
<ServerForm
initialData={initialData}
onSubmit={handleSubmit}
onCancel={() => router.push("/dashboard/servers")}
submitLabel="Save Changes"
/>
<ServerForm
initialData={initialData}
onSubmit={handleSubmit}
onCancel={() => router.push("/dashboard/servers")}
submitLabel="Save Changes"
/>
</SectionCard>
</PageShell>
);
apps/web/app/dashboard/servers/page.tsx
+13 -8
View File
@@ -9,9 +9,12 @@ import { ResourceSection } from "@/components/section-card";
import { ServerTable } from "@/components/servers/server-table";
import { Button } from "@/components/ui/button";
import { useServerList } from "@/hooks/use-server-list";
import { useSession } from "@/lib/auth-client";
export default function ServersPage() {
const router = useRouter();
const { data: session } = useSession();
const isAdmin = session?.user.role === "admin";
const { normalServers, reverseProxies, loading, error, deleteServer } = useServerList();
const [deleteTarget, setDeleteTarget] = useState<{
id: string;
@@ -34,10 +37,12 @@ export default function ServersPage() {
title="Servers"
description="Provision Minecraft runtimes and route traffic through edge proxies."
actions={
<Button size="lg" onClick={() => router.push("/dashboard/servers/create")}>
<Plus className="size-4" />
Create Server
</Button>
isAdmin ? (
<Button size="lg" onClick={() => router.push("/dashboard/servers/create")}>
<Plus className="size-4" />
Create Server
</Button>
) : undefined
}
/>
@@ -59,8 +64,8 @@ export default function ServersPage() {
<ServerTable
type="normal"
servers={normalServers}
onEdit={(id) => router.push(`/dashboard/servers/edit/${id}`)}
onDelete={(id) => setDeleteTarget({ id, type: "normal" })}
onEdit={isAdmin ? (id) => router.push(`/dashboard/servers/edit/${id}`) : undefined}
onDelete={isAdmin ? (id) => setDeleteTarget({ id, type: "normal" }) : undefined}
/>
</ResourceSection>
@@ -76,8 +81,8 @@ export default function ServersPage() {
<ServerTable
type="proxy"
servers={reverseProxies}
onEdit={(id) => router.push(`/dashboard/servers/edit/${id}`)}
onDelete={(id) => setDeleteTarget({ id, type: "proxy" })}
onEdit={isAdmin ? (id) => router.push(`/dashboard/servers/edit/${id}`) : undefined}
onDelete={isAdmin ? (id) => setDeleteTarget({ id, type: "proxy" }) : undefined}
/>
</ResourceSection>
</>
apps/web/app/dashboard/topology/page.tsx
+29 -7
View File
@@ -1,12 +1,13 @@
"use client";
import { Network } from "lucide-react";
import { Network, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PageHeader, PageShell, StatePanel } from "@/components/page-layout";
import { TopologyCanvas } from "@/components/topology/topology-canvas";
import { useTopologyData } from "@/hooks/use-topology-data";
export default function TopologyPage() {
const { graph, loading, error } = useTopologyData();
const { graph, loading, error, refreshing, refresh } = useTopologyData();
const header = (
<PageHeader
@@ -25,8 +26,12 @@ export default function TopologyPage() {
<PageShell>
{header}
{loading ? (
<StatePanel loading title="Loading topology..." className="h-[calc(100vh-250px)]" />
) : error ? (
<StatePanel
loading
title="Loading topology..."
className="h-[70vh] sm:h-[calc(100vh-250px)]"
/>
) : error && !graph ? (
<StatePanel
title="Error loading topology"
description={
@@ -36,16 +41,33 @@ export default function TopologyPage() {
</>
}
tone="error"
className="h-[calc(100vh-250px)]"
className="h-[70vh] sm:h-[calc(100vh-250px)]"
action={<Button onClick={() => void refresh()}>Retry now</Button>}
/>
) : !graph || graph.nodes.length === 0 ? (
<StatePanel
title="No infrastructure found"
description="Create a server to see it appear in the topology."
className="h-[calc(100vh-250px)]"
className="h-[70vh] sm:h-[calc(100vh-250px)]"
/>
) : (
<TopologyCanvas graph={graph} />
<div className="space-y-3">
{error && (
<div className="flex flex-col gap-2 border border-destructive/40 bg-destructive/10 p-3 text-sm sm:flex-row sm:items-center sm:justify-between">
<span>Refresh failed: {error}. Showing the last successful topology.</span>
<Button
size="sm"
variant="outline"
disabled={refreshing}
onClick={() => void refresh(true)}
>
<RefreshCw className={refreshing ? "animate-spin" : undefined} />
Retry
</Button>
</div>
)}
<TopologyCanvas graph={graph} />
</div>
)}
</PageShell>
);
apps/web/app/dashboard/users/page.tsx
+129 -36
View File
@@ -1,7 +1,8 @@
"use client";
import { Ban, CheckCircle, Edit, ShieldCheck, Trash2, UserRoundCheck, Users } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { getErrorMessage } from "@minikura/shared/errors";
import { useCallback, useEffect, useRef, useState } from "react";
import { ConfirmDialog } from "@/components/confirm-dialog";
import { DataTable, type DataTableColumn } from "@/components/data-table";
import { PageHeader, PageShell, StatePanel } from "@/components/page-layout";
@@ -36,12 +37,27 @@ type User = {
name: string;
email: string;
role: string;
createdAt: Date;
createdAt: Date | string;
emailVerified: boolean;
isSuspended: boolean;
suspendedUntil: Date | null;
banned: boolean;
suspendedUntil: Date | string | null;
};
function formatDateTime(value: Date | string): string {
return new Intl.DateTimeFormat(undefined, {
dateStyle: "medium",
timeStyle: "short",
timeZoneName: "short",
}).format(new Date(value));
}
function localDateTimeMinimum(): string {
const now = new Date(Date.now() + 60_000);
const local = new Date(now.getTime() - now.getTimezoneOffset() * 60_000);
return local.toISOString().slice(0, 16);
}
export default function UsersPage() {
const { data: session } = useSession();
const [users, setUsers] = useState<User[]>([]);
@@ -49,16 +65,23 @@ export default function UsersPage() {
const [editingUser, setEditingUser] = useState<User | null>(null);
const [suspendingUser, setSuspendingUser] = useState<User | null>(null);
const [deleteUser, setDeleteUser] = useState<User | null>(null);
const [error, setError] = useState<string | null>(null);
const [pendingAction, setPendingAction] = useState<string | null>(null);
const fetchSequence = useRef(0);
const fetchUsers = useCallback(async () => {
const sequence = ++fetchSequence.current;
setLoading(true);
setError(null);
try {
const { data, error } = await api.api.users.get();
if (!error && data) {
setUsers(data);
}
} catch (_error) {
if (error) throw error;
if (!data) throw new Error("The user directory returned no data");
if (sequence === fetchSequence.current) setUsers(data);
} catch (requestError) {
if (sequence === fetchSequence.current) setError(getErrorMessage(requestError));
} finally {
setLoading(false);
if (sequence === fetchSequence.current) setLoading(false);
}
}, []);
@@ -72,19 +95,32 @@ export default function UsersPage() {
const formData = new FormData(e.currentTarget);
const name = formData.get("name") as string;
const role = formData.get("role") as string;
const role =
editingUser.id === session?.user?.id
? editingUser.role
: String(formData.get("role") || editingUser.role);
if (editingUser.id === session?.user?.id && role !== "admin") {
setError("You cannot remove your own administrator access.");
return;
}
setPendingAction(`edit:${editingUser.id}`);
setError(null);
try {
const { error } = await api.api.users({ id: editingUser.id }).patch({
name,
role: role as "admin" | "user",
});
if (!error) {
await fetchUsers();
setEditingUser(null);
}
} catch (_error) {}
if (error) throw error;
setEditingUser(null);
await fetchUsers();
} catch (requestError) {
setError(getErrorMessage(requestError));
} finally {
setPendingAction(null);
}
};
const handleSuspend = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -94,46 +130,81 @@ export default function UsersPage() {
const formData = new FormData(e.currentTarget);
const suspendedUntil = formData.get("suspendedUntil") as string;
if (suspendingUser.id === session?.user?.id) {
setError("You cannot suspend your own account.");
return;
}
const suspensionDate = suspendedUntil ? new Date(suspendedUntil) : null;
if (
suspensionDate &&
(Number.isNaN(suspensionDate.getTime()) || suspensionDate <= new Date())
) {
setError("Suspension end time must be in the future.");
return;
}
setPendingAction(`suspend:${suspendingUser.id}`);
setError(null);
try {
const { error } = await getUserApi(suspendingUser.id).suspension.patch({
isSuspended: true,
suspendedUntil: suspendedUntil || null,
suspendedUntil: suspensionDate?.toISOString() || null,
});
if (!error) {
await fetchUsers();
setSuspendingUser(null);
}
} catch (_error) {}
if (error) throw error;
setSuspendingUser(null);
await fetchUsers();
} catch (requestError) {
setError(getErrorMessage(requestError));
} finally {
setPendingAction(null);
}
};
const handleUnsuspend = async (userId: string) => {
setPendingAction(`unsuspend:${userId}`);
setError(null);
try {
const { error } = await getUserApi(userId).suspension.patch({
isSuspended: false,
suspendedUntil: null,
});
if (!error) {
await fetchUsers();
}
} catch (_error) {}
if (error) throw error;
await fetchUsers();
} catch (requestError) {
setError(getErrorMessage(requestError));
} finally {
setPendingAction(null);
}
};
const handleDelete = async () => {
if (!deleteUser) return;
if (deleteUser.id === session?.user?.id) {
setError("You cannot delete your own account.");
setDeleteUser(null);
return;
}
setPendingAction(`delete:${deleteUser.id}`);
setError(null);
try {
const { error } = await api.api.users({ id: deleteUser.id }).delete();
if (!error) {
await fetchUsers();
setDeleteUser(null);
}
} catch (_error) {}
if (error) throw error;
setDeleteUser(null);
await fetchUsers();
} catch (requestError) {
setError(getErrorMessage(requestError));
} finally {
setPendingAction(null);
}
};
const isUserSuspended = (user: User): boolean => {
if (user.banned) return true;
if (!user.isSuspended) return false;
if (user.suspendedUntil && new Date(user.suspendedUntil) <= new Date()) {
return false;
@@ -162,8 +233,8 @@ export default function UsersPage() {
cell: (user) =>
isUserSuspended(user) ? (
<StatusBadge tone="error">
Suspended
{user.suspendedUntil && ` until ${new Date(user.suspendedUntil).toLocaleDateString()}`}
{user.banned ? "Banned" : "Suspended"}
{!user.banned && user.suspendedUntil && ` until ${formatDateTime(user.suspendedUntil)}`}
</StatusBadge>
) : (
<StatusBadge tone={user.emailVerified ? "success" : "warning"}>
@@ -187,15 +258,17 @@ export default function UsersPage() {
<Button
variant="ghost"
size="icon"
disabled={pendingAction !== null}
onClick={() => setEditingUser(user)}
aria-label={`Edit ${user.name}`}
>
<Edit />
</Button>
{isUserSuspended(user) ? (
{user.banned ? null : isUserSuspended(user) ? (
<Button
variant="ghost"
size="icon"
disabled={pendingAction !== null}
onClick={() => handleUnsuspend(user.id)}
aria-label={`Restore ${user.name}`}
>
@@ -205,6 +278,7 @@ export default function UsersPage() {
<Button
variant="ghost"
size="icon"
disabled={user.id === session?.user?.id || pendingAction !== null}
onClick={() => setSuspendingUser(user)}
aria-label={`Suspend ${user.name}`}
>
@@ -214,7 +288,7 @@ export default function UsersPage() {
<Button
variant="ghost"
size="icon"
disabled={user.id === session?.user?.id}
disabled={user.id === session?.user?.id || pendingAction !== null}
onClick={() => setDeleteUser(user)}
aria-label={`Delete ${user.name}`}
>
@@ -253,6 +327,18 @@ export default function UsersPage() {
}
/>
{error && !loading && (
<div
role="alert"
className="flex flex-col gap-3 border border-destructive/50 bg-destructive/10 p-4 text-sm sm:flex-row sm:items-center sm:justify-between"
>
<span>{error}</span>
<Button variant="outline" size="sm" onClick={() => void fetchUsers()}>
Retry
</Button>
</div>
)}
{loading ? (
<StatePanel loading title="Loading directory..." className="h-64" />
) : (
@@ -278,7 +364,11 @@ export default function UsersPage() {
</div>
<div className="space-y-2">
<Label htmlFor="role">Role</Label>
<Select name="role" defaultValue={editingUser?.role}>
<Select
name="role"
defaultValue={editingUser?.role}
disabled={editingUser?.id === session?.user?.id}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
@@ -293,7 +383,9 @@ export default function UsersPage() {
<Button type="button" variant="outline" onClick={() => setEditingUser(null)}>
Cancel
</Button>
<Button type="submit">Save Changes</Button>
<Button type="submit" disabled={pendingAction !== null}>
Save Changes
</Button>
</DialogFooter>
</form>
</DialogContent>
@@ -315,6 +407,7 @@ export default function UsersPage() {
id="suspendedUntil"
name="suspendedUntil"
type="datetime-local"
min={localDateTimeMinimum()}
placeholder="Leave empty for indefinite suspension"
/>
<p className="text-sm text-muted-foreground">
@@ -326,7 +419,7 @@ export default function UsersPage() {
<Button type="button" variant="outline" onClick={() => setSuspendingUser(null)}>
Cancel
</Button>
<Button type="submit" variant="destructive">
<Button type="submit" variant="destructive" disabled={pendingAction !== null}>
Suspend User
</Button>
</DialogFooter>
apps/web/app/globals.css
+59 -35
View File
@@ -26,10 +26,13 @@
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-info: var(--info);
--color-info-foreground: var(--info-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
@@ -69,10 +72,13 @@
--accent: oklch(0.88 0.04 112);
--accent-foreground: oklch(0.2 0.028 110);
--destructive: oklch(0.57 0.205 28);
--destructive-foreground: oklch(0.99 0.005 28);
--success: oklch(0.59 0.155 132);
--success-foreground: oklch(0.28 0.09 132);
--warning: oklch(0.72 0.15 76);
--warning-foreground: oklch(0.34 0.09 66);
--info: oklch(0.52 0.12 230);
--info-foreground: oklch(0.3 0.07 230);
--border: oklch(0.79 0.018 90);
--input: oklch(0.76 0.02 90);
--ring: oklch(0.68 0.19 125);
@@ -93,41 +99,44 @@
}
.dark {
--background: oklch(0.16 0.018 75);
--foreground: oklch(0.94 0.012 95);
--card: oklch(0.21 0.018 75);
--card-foreground: oklch(0.94 0.012 95);
--popover: oklch(0.19 0.018 75);
--popover-foreground: oklch(0.94 0.012 95);
--primary: oklch(0.75 0.205 125);
--primary-foreground: oklch(0.15 0.025 125);
--secondary: oklch(0.26 0.02 80);
--secondary-foreground: oklch(0.94 0.012 95);
--muted: oklch(0.24 0.016 80);
--muted-foreground: oklch(0.72 0.018 90);
--accent: oklch(0.28 0.04 112);
--accent-foreground: oklch(0.92 0.03 110);
--destructive: oklch(0.68 0.19 28);
--success: oklch(0.72 0.155 132);
--success-foreground: oklch(0.22 0.06 132);
--warning: oklch(0.78 0.14 76);
--warning-foreground: oklch(0.28 0.08 66);
--border: oklch(0.35 0.02 80);
--input: oklch(0.32 0.02 80);
--ring: oklch(0.75 0.205 125);
--chart-1: oklch(0.75 0.205 125);
--chart-2: oklch(0.66 0.16 205);
--chart-3: oklch(0.72 0.17 80);
--chart-4: oklch(0.62 0.16 50);
--chart-5: oklch(0.58 0.14 300);
--sidebar: oklch(0.13 0.018 75);
--sidebar-foreground: oklch(0.91 0.015 95);
--sidebar-primary: oklch(0.75 0.205 125);
--sidebar-primary-foreground: oklch(0.15 0.025 125);
--sidebar-accent: oklch(0.22 0.022 80);
--sidebar-accent-foreground: oklch(0.96 0.01 95);
--sidebar-border: oklch(0.28 0.022 80);
--sidebar-ring: oklch(0.75 0.205 125);
--background: oklch(0.175 0.012 152);
--foreground: oklch(0.93 0.014 105);
--card: oklch(0.215 0.012 152);
--card-foreground: oklch(0.93 0.014 105);
--popover: oklch(0.2 0.012 152);
--popover-foreground: oklch(0.93 0.014 105);
--primary: oklch(0.79 0.165 128);
--primary-foreground: oklch(0.18 0.04 128);
--secondary: oklch(0.255 0.014 152);
--secondary-foreground: oklch(0.9 0.012 110);
--muted: oklch(0.24 0.012 152);
--muted-foreground: oklch(0.7 0.02 130);
--accent: oklch(0.27 0.03 140);
--accent-foreground: oklch(0.93 0.03 120);
--destructive: oklch(0.72 0.16 25);
--destructive-foreground: oklch(0.98 0.01 25);
--success: oklch(0.76 0.13 148);
--success-foreground: oklch(0.2 0.05 148);
--warning: oklch(0.82 0.12 88);
--warning-foreground: oklch(0.24 0.06 80);
--info: oklch(0.76 0.1 220);
--info-foreground: oklch(0.86 0.04 220);
--border: oklch(0.3 0.016 150);
--input: oklch(0.28 0.016 150);
--ring: oklch(0.79 0.165 128);
--chart-1: oklch(0.79 0.165 128);
--chart-2: oklch(0.72 0.12 210);
--chart-3: oklch(0.8 0.12 88);
--chart-4: oklch(0.7 0.12 55);
--chart-5: oklch(0.68 0.1 300);
--sidebar: oklch(0.135 0.014 155);
--sidebar-foreground: oklch(0.9 0.012 110);
--sidebar-primary: oklch(0.79 0.165 128);
--sidebar-primary-foreground: oklch(0.18 0.04 128);
--sidebar-accent: oklch(0.21 0.02 150);
--sidebar-accent-foreground: oklch(0.95 0.01 110);
--sidebar-border: oklch(0.24 0.016 150);
--sidebar-ring: oklch(0.79 0.165 128);
color-scheme: dark;
}
@@ -146,6 +155,11 @@
linear-gradient(to bottom, color-mix(in oklch, var(--border) 22%, transparent) 1px, transparent 1px);
background-size: 32px 32px;
}
.dark body {
background-image:
linear-gradient(to right, color-mix(in oklch, var(--border) 12%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in oklch, var(--border) 12%, transparent) 1px, transparent 1px);
}
h1,
h2,
h3 {
@@ -185,6 +199,16 @@
background-size: 36px 36px;
}
.auth-scanlines {
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 2px,
color-mix(in oklch, white 6%, transparent) 3px
);
mix-blend-mode: overlay;
}
.server-form [data-slot="tabs-content"] {
@apply border border-border bg-background/65 p-4 sm:p-6;
}
apps/web/app/login/page.tsx
+136 -60
View File
@@ -2,15 +2,111 @@
import { ArrowRight } from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { useEffect, useRef, useState } from "react";
import { AuthFormCard, FormError } from "@/components/auth/auth-form-card";
import { BrandLockup } from "@/components/brand";
import { BrandLockup, BrandMark } from "@/components/brand";
import { FullScreenLoader } from "@/components/page-layout";
import { ThemeToggle } from "@/components/theme-toggle";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { authClient, signIn, useSession } from "@/lib/auth-client";
import { gsap, motionEase, prefersReducedMotion, useGSAP } from "@/lib/motion";
function LoginHero() {
const heroRef = useRef<HTMLElement>(null);
useGSAP(
() => {
const root = heroRef.current;
if (!root || prefersReducedMotion()) return;
const bg = root.querySelector("[data-hero-bg]");
const brand = root.querySelector("[data-hero-brand]");
const chip = root.querySelector("[data-hero-chip]");
const lines = root.querySelectorAll("[data-hero-line]");
const copy = root.querySelector("[data-hero-copy]");
const foot = root.querySelector("[data-hero-foot]");
const rail = root.querySelector("[data-hero-rail]");
const tl = gsap.timeline({ defaults: { ease: motionEase.out } });
tl.from(bg, { scale: 1.12, duration: 1.2, ease: "power2.out" }, 0)
.from(rail, { scaleY: 0, duration: 0.6, transformOrigin: "top" }, 0.05)
.from(brand, { y: -12, autoAlpha: 0, duration: 0.45 }, 0.08)
.from(chip, { y: 14, autoAlpha: 0, duration: 0.4 }, 0.16)
.from(lines, { yPercent: 110, duration: 0.7, stagger: 0.08, ease: motionEase.snap }, 0.2)
.from(copy, { y: 14, autoAlpha: 0, duration: 0.45 }, 0.42)
.from(foot, { autoAlpha: 0, duration: 0.35 }, 0.55);
gsap.to(bg, {
scale: 1.06,
duration: 18,
ease: "none",
yoyo: true,
repeat: -1,
delay: 1.2,
});
},
{ scope: heroRef }
);
return (
<section
ref={heroRef}
className="relative flex min-h-[42vh] flex-col justify-between overflow-hidden border-b border-sidebar-border p-6 sm:min-h-[48vh] sm:p-10 lg:min-h-screen lg:border-r lg:border-b-0 xl:p-16"
>
<div
data-hero-bg=""
className="absolute inset-0 origin-center bg-[url('/background.png')] bg-cover bg-center will-change-transform"
/>
<div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-black/25" />
<div className="auth-scanlines pointer-events-none absolute inset-0" />
<div
data-hero-rail=""
className="absolute top-0 bottom-0 left-0 w-1 origin-top bg-sidebar-primary"
/>
<div data-hero-brand="" className="relative z-10">
<BrandLockup subtitle="Minecraft control plane" />
</div>
<div className="relative z-10 max-w-2xl py-10 lg:py-20">
<span
data-hero-chip=""
className="mb-5 inline-flex items-center gap-2 border border-sidebar-border bg-sidebar-accent px-3 py-1.5 font-mono text-[10px] font-bold uppercase tracking-[0.18em]"
>
<span className="size-2 bg-sidebar-primary" />
Minecraft Control Plane
</span>
<h1 className="text-4xl font-black uppercase leading-[0.86] tracking-[-0.065em] sm:text-6xl xl:text-8xl">
<span className="block overflow-hidden">
<span data-hero-line="" className="block">
Play more
</span>
</span>
<span className="block overflow-hidden">
<span data-hero-line="" className="block text-sidebar-primary">
Operate less
</span>
</span>
</h1>
<p
data-hero-copy=""
className="mt-6 max-w-lg text-sm leading-7 text-sidebar-foreground/55 sm:mt-7 sm:text-base"
>
Spin up servers, route players, and run the whole network from one console.
</p>
</div>
<p
data-hero-foot=""
className="relative z-10 font-mono text-[9px] uppercase tracking-[0.2em] text-sidebar-foreground/35"
>
Built for people who actually run servers
</p>
</section>
);
}
export default function LoginPage() {
const router = useRouter();
@@ -47,7 +143,9 @@ export default function LoginPage() {
});
if (!refreshedSession.data?.user) {
setError("Signed in, but the session cookie was not accepted. Check the web and API URLs.");
setError(
"Signed in, but the session cookie was not accepted. Check the web and API URLs."
);
return;
}
@@ -64,67 +162,45 @@ export default function LoginPage() {
return (
<main className="grid min-h-screen bg-sidebar text-sidebar-foreground lg:grid-cols-[1.2fr_0.8fr]">
<section className="relative hidden overflow-hidden border-r border-sidebar-border bg-[url('/background.png')] bg-cover bg-center p-10 lg:flex lg:flex-col lg:justify-between xl:p-16">
<div className="absolute inset-0 bg-gradient-to-r from-black/75 via-black/45 to-black/20" />
<BrandLockup subtitle="Infrastructure console" className="relative z-10" />
<div className="relative z-10 max-w-2xl py-20">
<span className="mb-5 inline-flex items-center gap-2 border border-sidebar-border bg-sidebar-accent px-3 py-1.5 font-mono text-[10px] font-bold uppercase tracking-[0.18em]">
<span className="size-2 bg-sidebar-primary" /> Minecraft operations platform
</span>
<h1 className="text-6xl font-black uppercase leading-[0.86] tracking-[-0.065em] xl:text-8xl">
Orchestrate
<br />
<span className="text-sidebar-primary">Every World.</span>
</h1>
<p className="mt-7 max-w-lg text-base leading-7 text-sidebar-foreground/55">
Provision servers, manage proxy routes, and monitor Kubernetes workloads from a single
operational interface.
</p>
</div>
<p className="relative z-10 font-mono text-[9px] uppercase tracking-[0.2em] text-sidebar-foreground/35">
Server and cluster administration
</p>
</section>
<LoginHero />
<section className="relative flex items-center justify-center bg-background p-5 text-foreground sm:p-10">
<ThemeToggle className="absolute top-5 right-5 sm:top-8 sm:right-8" />
<ThemeToggle className="absolute top-5 right-5 z-10 sm:top-8 sm:right-8" />
<AuthFormCard
title="Sign In"
description="Use your administrator account to access Minikura."
className="border-2 border-foreground shadow-none"
title="Sign in"
description="Use your administrator account to access the console."
leading={<BrandMark className="size-10" />}
className="border-2 border-foreground shadow-[8px_8px_0_color-mix(in_oklch,var(--foreground)_18%,transparent)]"
headerClassName="border-b"
contentClassName="pt-2"
>
<form onSubmit={handleSubmit} className="space-y-5">
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
name="email"
type="email"
placeholder="admin@example.com"
required
autoFocus
/>
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Input
id="password"
name="password"
type="password"
placeholder="Enter password"
required
/>
</div>
<FormError message={error} />
<Button type="submit" size="lg" className="w-full" disabled={loading}>
{loading ? "Signing in..." : "Sign In"}
{!loading && <ArrowRight className="ml-auto" />}
</Button>
</form>
<form onSubmit={handleSubmit} className="space-y-5">
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
name="email"
type="email"
placeholder="admin@example.com"
required
autoFocus
/>
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Input
id="password"
name="password"
type="password"
placeholder="Enter password"
required
/>
</div>
<FormError message={error} />
<Button type="submit" size="lg" className="w-full" disabled={loading}>
{loading ? "Signing in..." : "Sign In"}
{!loading && <ArrowRight className="ml-auto" />}
</Button>
</form>
</AuthFormCard>
</section>
</main>