🐛 fix: align dashboard with secured APIs

2026-09-14 03:09:50 +00:00 · 2026-08-13 03:29:33 +07:00
parent e90dc8382b
commit 3f09e330be
47 changed files with 1280 additions and 397 deletions
@@ -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>
@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation";

 export default function DashboardPage() {
-  redirect("/dashboard/users");
+  redirect("/dashboard/servers");
 }
@@ -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>
  );
@@ -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>
  );
@@ -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>
        </>
@@ -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>
  );
@@ -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>