Enhance API with OIDC support, including login and callback endpoints. Update environment variables for OIDC configuration in .env.example. Add new features to the catalog service for listing software families, Minecraft versions, and deployment regions. Implement server management actions such as kill, delete, and update in the servers module. Integrate feature flags for maintenance mode in server operations. Update pnpm-lock.yaml with new dependencies and versions.

2026-07-05 18:39:53 +02:00
parent bf36cb3159
commit 50cd4b3ffd
225 changed files with 17824 additions and 436 deletions
--- a/apps/web/src/components/account/billing-content.tsx
+++ b/apps/web/src/components/account/billing-content.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
+import { getWallet } from "@/lib/api/billing";
+
+export function BillingContent() {
+  const t = useTranslations("account.billing");
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["wallet"],
+    queryFn: getWallet,
+  });
+
+  if (isLoading) {
+    return <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("loading")}</p>;
+  }
+
+  if (isError || !data) {
+    return <p className="text-sm text-red-600 dark:text-red-400">{t("loadError")}</p>;
+  }
+
+  const transactions = data.transactions ?? [];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
+          {t("title")}
+        </h1>
+        <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("subtitle")}</p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t("balanceTitle")}</CardTitle>
+          <CardDescription>
+            {t("periodStart", {
+              date: new Date(data.periodStart).toLocaleDateString(),
+            })}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="font-mono text-3xl font-semibold text-zinc-900 dark:text-zinc-50">
+            {data.balance}
+          </p>
+          <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("creditsLabel")}</p>
+        </CardContent>
+      </Card>
+
+      <section>
+        <h2 className="mb-4 text-lg font-medium text-zinc-900 dark:text-zinc-50">
+          {t("transactionsTitle")}
+        </h2>
+        {transactions.length === 0 ? (
+          <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("transactionsEmpty")}</p>
+        ) : (
+          <div className="overflow-x-auto rounded-lg border border-zinc-200 dark:border-zinc-800">
+            <table className="min-w-full text-left text-sm">
+              <thead className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
+                <tr>
+                  <th className="px-4 py-3 font-medium">{t("columns.date")}</th>
+                  <th className="px-4 py-3 font-medium">{t("columns.type")}</th>
+                  <th className="px-4 py-3 font-medium">{t("columns.amount")}</th>
+                  <th className="px-4 py-3 font-medium">{t("columns.reference")}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {transactions.map((tx) => (
+                  <tr
+                    key={tx.id}
+                    className="border-b border-zinc-100 last:border-0 dark:border-zinc-800"
+                  >
+                    <td className="px-4 py-3 font-mono text-xs">
+                      {new Date(tx.createdAt).toLocaleString()}
+                    </td>
+                    <td className="px-4 py-3 font-mono text-xs">{tx.type}</td>
+                    <td className="px-4 py-3 font-mono">{tx.amount}</td>
+                    <td className="px-4 py-3 font-mono text-xs">
+                      {tx.referenceType ?? "—"}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
--- a/apps/web/src/components/account/notifications-content.tsx
+++ b/apps/web/src/components/account/notifications-content.tsx
@@ -0,0 +1,217 @@
+"use client";
+
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { ApiError } from "@/lib/api/auth";
+import {
+  getNotificationPreferences,
+  listNotifications,
+  markAllNotificationsRead,
+  markNotificationRead,
+  updateNotificationPreferences,
+  type Notification,
+  type NotificationPreference,
+} from "@/lib/api/notifications";
+
+function formatDate(value: string): string {
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(value));
+}
+
+export function NotificationsContent() {
+  const t = useTranslations("account.notifications");
+  const queryClient = useQueryClient();
+  const [error, setError] = useState<string | null>(null);
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["notifications"],
+    queryFn: listNotifications,
+  });
+
+  const { data: preferencesData } = useQuery({
+    queryKey: ["notification-preferences"],
+    queryFn: getNotificationPreferences,
+  });
+
+  const invalidate = () => {
+    void queryClient.invalidateQueries({ queryKey: ["notifications"] });
+    void queryClient.invalidateQueries({ queryKey: ["notification-preferences"] });
+  };
+
+  const markReadMutation = useMutation({
+    mutationFn: markNotificationRead,
+    onSuccess: () => {
+      setError(null);
+      invalidate();
+    },
+    onError: (err: unknown) => {
+      setError(err instanceof ApiError ? (err.detail ?? err.title) : t("errors.markReadFailed"));
+    },
+  });
+
+  const markAllReadMutation = useMutation({
+    mutationFn: markAllNotificationsRead,
+    onSuccess: () => {
+      setError(null);
+      invalidate();
+    },
+    onError: (err: unknown) => {
+      setError(err instanceof ApiError ? (err.detail ?? err.title) : t("errors.markReadFailed"));
+    },
+  });
+
+  const preferencesMutation = useMutation({
+    mutationFn: (preferences: NotificationPreference[]) =>
+      updateNotificationPreferences(preferences),
+    onSuccess: () => {
+      setError(null);
+      invalidate();
+    },
+    onError: (err: unknown) => {
+      setError(
+        err instanceof ApiError ? (err.detail ?? err.title) : t("errors.preferencesFailed"),
+      );
+    },
+  });
+
+  function togglePreference(pref: NotificationPreference) {
+    const current = preferencesData?.preferences ?? [];
+    const next = current.some(
+      (p) => p.type === pref.type && p.channel === pref.channel,
+    )
+      ? current.map((p) =>
+          p.type === pref.type && p.channel === pref.channel
+            ? { ...p, enabled: !p.enabled }
+            : p,
+        )
+      : [...current, { ...pref, enabled: false }];
+    preferencesMutation.mutate(next);
+  }
+
+  const notifications = data?.notifications ?? [];
+  const unreadCount = data?.unreadCount ?? 0;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
+            {t("title")}
+          </h1>
+          <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("subtitle")}</p>
+        </div>
+        {unreadCount > 0 ? (
+          <Button
+            size="sm"
+            variant="secondary"
+            onClick={() => markAllReadMutation.mutate()}
+            disabled={markAllReadMutation.isPending}
+          >
+            {t("markAllRead")}
+          </Button>
+        ) : null}
+      </div>
+
+      {error ? (
+        <p className="text-sm text-red-600 dark:text-red-400" role="alert">
+          {error}
+        </p>
+      ) : null}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t("listTitle")}</CardTitle>
+          <CardDescription>
+            {unreadCount > 0 ? t("unreadCount", { count: unreadCount }) : t("allRead")}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("loading")}</p>
+          ) : isError ? (
+            <p className="text-sm text-red-600 dark:text-red-400">{t("errors.loadFailed")}</p>
+          ) : notifications.length === 0 ? (
+            <div>
+              <p className="font-medium text-zinc-900 dark:text-zinc-100">{t("emptyTitle")}</p>
+              <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
+                {t("emptyDescription")}
+              </p>
+            </div>
+          ) : (
+            <ul className="divide-y divide-zinc-200 dark:divide-zinc-800">
+              {notifications.map((notification: Notification) => (
+                <li
+                  key={notification.id}
+                  className={`flex flex-wrap items-start justify-between gap-3 py-4 ${
+                    notification.readAt ? "opacity-70" : ""
+                  }`}
+                >
+                  <div className="min-w-0 flex-1">
+                    <p className="font-medium text-zinc-900 dark:text-zinc-100">
+                      {notification.title}
+                    </p>
+                    <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
+                      {notification.body}
+                    </p>
+                    <p className="mt-2 text-xs text-zinc-500">
+                      {formatDate(notification.createdAt)} · {t(`types.${notification.type}`)}
+                    </p>
+                  </div>
+                  {!notification.readAt ? (
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => markReadMutation.mutate(notification.id)}
+                      disabled={markReadMutation.isPending}
+                    >
+                      {t("markRead")}
+                    </Button>
+                  ) : null}
+                </li>
+              ))}
+            </ul>
+          )}
+        </CardContent>
+      </Card>
+
+      {(preferencesData?.preferences ?? []).length > 0 ? (
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("preferencesTitle")}</CardTitle>
+            <CardDescription>{t("preferencesDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ul className="divide-y divide-zinc-200 dark:divide-zinc-800">
+              {preferencesData!.preferences.map((pref) => (
+                <li
+                  key={`${pref.type}-${pref.channel}`}
+                  className="flex flex-wrap items-center justify-between gap-3 py-3"
+                >
+                  <div>
+                    <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                      {t(`types.${pref.type}`)}
+                    </p>
+                    <p className="text-xs text-zinc-500">{t(`channels.${pref.channel}`)}</p>
+                  </div>
+                  <label className="flex items-center gap-2 text-sm">
+                    <input
+                      type="checkbox"
+                      checked={pref.enabled}
+                      onChange={() => togglePreference(pref)}
+                      disabled={preferencesMutation.isPending}
+                    />
+                    {pref.enabled ? t("enabled") : t("disabled")}
+                  </label>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      ) : null}
+    </div>
+  );
+}
--- a/apps/web/src/components/account/profile-content.tsx
+++ b/apps/web/src/components/account/profile-content.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
+import { useAuth } from "@/components/providers/auth-provider";
+
+export function ProfileContent() {
+  const t = useTranslations("account.profile");
+  const { user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("loading")}</p>;
+  }
+
+  if (!user) {
+    return <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("notSignedIn")}</p>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
+          {t("title")}
+        </h1>
+        <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("subtitle")}</p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t("accountInfo")}</CardTitle>
+          <CardDescription>{t("accountInfoDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3 text-sm">
+          <div className="flex justify-between gap-4">
+            <span className="text-zinc-600 dark:text-zinc-400">{t("fields.email")}</span>
+            <span className="font-mono text-zinc-900 dark:text-zinc-50">{user.email}</span>
+          </div>
+          <div className="flex justify-between gap-4">
+            <span className="text-zinc-600 dark:text-zinc-400">{t("fields.username")}</span>
+            <span className="font-mono text-zinc-900 dark:text-zinc-50">{user.username}</span>
+          </div>
+          {user.displayName ? (
+            <div className="flex justify-between gap-4">
+              <span className="text-zinc-600 dark:text-zinc-400">{t("fields.displayName")}</span>
+              <span className="text-zinc-900 dark:text-zinc-50">{user.displayName}</span>
+            </div>
+          ) : null}
+          <div className="flex justify-between gap-4">
+            <span className="text-zinc-600 dark:text-zinc-400">{t("fields.emailVerified")}</span>
+            <span className="font-mono text-zinc-900 dark:text-zinc-50">
+              {user.emailVerified || user.emailVerifiedAt ? t("yes") : t("no")}
+            </span>
+          </div>
+          <div className="flex justify-between gap-4">
+            <span className="text-zinc-600 dark:text-zinc-400">{t("fields.twoFactor")}</span>
+            <span className="font-mono text-zinc-900 dark:text-zinc-50">
+              {user.twoFactorEnabled ? t("enabled") : t("disabled")}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+
+      <p className="text-sm text-zinc-600 dark:text-zinc-400">
+        {t("securityHint")}{" "}
+        <Link href="/security" className="font-medium text-sky-600 hover:underline dark:text-sky-400">
+          {t("securityLink")}
+        </Link>
+      </p>
+    </div>
+  );
+}