fix(api): fix swagger docs to properly generate api-client

fix(web): admin scope the settings pages

Author: AlkenD

apps/api/src/index.ts

@@ -94,8 +94,10 @@ app.use("/api/", rateLimiters.standard);
 // CORS configuration
 app.use(
   cors({
-    origin: env.CORS_ORIGIN,
+    origin: env.CORS_ORIGIN.split(",").map((origin) => origin.trim()),
     credentials: true,
+    methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
+    allowedHeaders: ["Content-Type", "Authorization", "x-csrf-token"],
   })
 );
 

apps/api/src/lib/auth/user.service.ts

@@ -108,6 +108,10 @@ export class UserService {
       );
     }
 
+    // Check if this is the first user - make them admin
+    const userCount = await prisma.user.count();
+    const finalRole = userCount === 0 ? "ADMIN" : role;
+
     // Validate authentication method
     if (!isPasswordless && !password && !pin) {
       throw new BadRequestError(
@@ -143,12 +147,14 @@ export class UserService {
         passwordHash,
         pinHash,
         isPasswordless,
-        role,
+        role: finalRole,
         lastLoginAt: new Date(),
       },
     });
 
-    logger.info(`User created: ${user.username} (${user.id})`);
+    logger.info(
+      `User created: ${user.username} (${user.id}) - Role: ${finalRole}`
+    );
 
     // Generate tokens
     const accessToken = generateAccessToken({

apps/api/src/routes/auth/auth.module.ts

@@ -33,7 +33,7 @@ const router: Router = Router();
 
 /**
  * @swagger
- * /auth/register:
+ * /api/v1/auth/register:
  *   post:
  *     tags: [Authentication]
  *     summary: Register a new user
@@ -80,7 +80,7 @@ router.post(
 
 /**
  * @swagger
- * /auth/login:
+ * /api/v1/auth/login:
  *   post:
  *     tags: [Authentication]
  *     summary: Login with username and password or PIN
@@ -111,7 +111,7 @@ router.post(
 
 /**
  * @swagger
- * /auth/login/passwordless:
+ * /api/v1/auth/login/passwordless:
  *   post:
  *     tags: [Authentication]
  *     summary: Login without password (passwordless accounts only)
@@ -138,7 +138,7 @@ router.post(
 
 /**
  * @swagger
- * /auth/refresh:
+ * /api/v1/auth/refresh:
  *   post:
  *     tags: [Authentication]
  *     summary: Refresh access token
@@ -169,7 +169,7 @@ router.post(
 
 /**
  * @swagger
- * /auth/logout:
+ * /api/v1/auth/logout:
  *   post:
  *     tags: [Authentication]
  *     summary: Logout current session
@@ -199,7 +199,7 @@ router.post(
 
 /**
  * @swagger
- * /auth/logout-all:
+ * /api/v1/auth/logout-all:
  *   post:
  *     tags: [Authentication]
  *     summary: Logout all sessions
@@ -218,7 +218,7 @@ router.post(
 
 /**
  * @swagger
- * /auth/me:
+ * /api/v1/auth/me:
  *   get:
  *     tags: [Authentication]
  *     summary: Get current user information
@@ -237,7 +237,7 @@ router.get(
 
 /**
  * @swagger
- * /auth/me:
+ * /api/v1/auth/me:
  *   put:
  *     tags: [Authentication]
  *     summary: Update current user
@@ -257,7 +257,7 @@ router.put(
 
 /**
  * @swagger
- * /auth/change-password:
+ * /api/v1/auth/change-password:
  *   post:
  *     tags: [Authentication]
  *     summary: Change password
@@ -277,7 +277,7 @@ router.post(
 
 /**
  * @swagger
- * /auth/change-pin:
+ * /api/v1/auth/change-pin:
  *   post:
  *     tags: [Authentication]
  *     summary: Change PIN
@@ -301,7 +301,7 @@ router.post(
 
 /**
  * @swagger
- * /auth/sessions:
+ * /api/v1/auth/sessions:
  *   get:
  *     tags: [Authentication]
  *     summary: Get all active sessions
@@ -320,7 +320,7 @@ router.get(
 
 /**
  * @swagger
- * /auth/sessions/{sessionId}:
+ * /api/v1/auth/sessions/{sessionId}:
  *   delete:
  *     tags: [Authentication]
  *     summary: Revoke a specific session
@@ -349,7 +349,7 @@ router.delete(
 
 /**
  * @swagger
- * /auth/api-keys:
+ * /api/v1/auth/api-keys:
  *   get:
  *     tags: [API Keys]
  *     summary: List all API keys
@@ -367,7 +367,7 @@ router.get(
 
 /**
  * @swagger
- * /auth/api-keys:
+ * /api/v1/auth/api-keys:
  *   post:
  *     tags: [API Keys]
  *     summary: Create a new API key
@@ -386,7 +386,7 @@ router.post(
 
 /**
  * @swagger
- * /auth/api-keys/{keyId}:
+ * /api/v1/auth/api-keys/{keyId}:
  *   get:
  *     tags: [API Keys]
  *     summary: Get a specific API key
@@ -410,7 +410,7 @@ router.get(
 
 /**
  * @swagger
- * /auth/api-keys/{keyId}:
+ * /api/v1/auth/api-keys/{keyId}:
  *   put:
  *     tags: [API Keys]
  *     summary: Update an API key
@@ -435,7 +435,7 @@ router.put(
 
 /**
  * @swagger
- * /auth/api-keys/{keyId}:
+ * /api/v1/auth/api-keys/{keyId}:
  *   delete:
  *     tags: [API Keys]
  *     summary: Delete an API key
@@ -459,7 +459,7 @@ router.delete(
 
 /**
  * @swagger
- * /auth/api-keys/{keyId}/revoke:
+ * /api/v1/auth/api-keys/{keyId}/revoke:
  *   post:
  *     tags: [API Keys]
  *     summary: Revoke an API key
@@ -487,7 +487,7 @@ router.post(
 
 /**
  * @swagger
- * /users:
+ * /api/v1/users:
  *   get:
  *     tags: [Users]
  *     summary: List all users (admin only)
@@ -507,7 +507,7 @@ router.get(
 
 /**
  * @swagger
- * /users/{userId}:
+ * /api/v1/users/{userId}:
  *   get:
  *     tags: [Users]
  *     summary: Get user by ID (admin only)
@@ -533,7 +533,7 @@ router.get(
 
 /**
  * @swagger
- * /users/{userId}:
+ * /api/v1/users/{userId}:
  *   put:
  *     tags: [Users]
  *     summary: Update user (admin only)
@@ -560,7 +560,7 @@ router.put(
 
 /**
  * @swagger
- * /users/{userId}:
+ * /api/v1/users/{userId}:
  *   delete:
  *     tags: [Users]
  *     summary: Delete user (admin only)

apps/api/src/routes/comics/comics.module.ts

@@ -121,7 +121,7 @@ router.get("/", (req, res, next) => {
 
 /**
  * @openapi
- * /api/comics/{id}:
+ * /api/v1/comics/{id}:
  *   get:
  *     summary: Get comic by ID
  *     description: Retrieve a specific comic by its ID

apps/web/src/components/ui/header/index.tsx

@@ -17,6 +17,7 @@ import {
 } from "./variants";
 import Logo from "../logo";
 import ModeDialog from "../mode-dialog";
+import UserMenu from "./user-menu";
 import { useSearch } from "@/lib/hooks";
 import type { GetApiV1SearchParams } from "@dester/api-client";
 import SearchResults from "./search-results";
@@ -222,6 +223,7 @@ const Header = () => {
           isDialogOpen={isDialogOpen}
           setIsDialogOpen={setIsDialogOpen}
         />
+        <UserMenu />
       </nav>
     </div>
   );

apps/web/src/components/ui/header/user-menu.tsx

@@ -0,0 +1,129 @@
+import { useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { useAuth } from "@/hooks/useAuth";
+import { Button } from "../button";
+import {
+  User,
+  Settings,
+  LogOut,
+  ChevronDown,
+  Shield,
+  LogIn,
+} from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+
+export default function UserMenu() {
+  const { user, isAuthenticated, logout } = useAuth();
+  const navigate = useNavigate();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleLogout = async () => {
+    await logout();
+    navigate({ to: "/login" });
+  };
+
+  if (!isAuthenticated) {
+    return (
+      <Button
+        onClick={() => navigate({ to: "/login" })}
+        variant="ghost"
+        className="flex items-center gap-2"
+      >
+        <LogIn className="w-4 h-4" />
+        <span>Sign In</span>
+      </Button>
+    );
+  }
+
+  return (
+    <div className="relative">
+      <Button
+        onClick={() => setIsOpen(!isOpen)}
+        variant="ghost"
+        className="flex items-center gap-2 min-w-[120px] justify-between"
+      >
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
+            {user?.role === "ADMIN" ? (
+              <Shield className="w-4 h-4 text-white" />
+            ) : (
+              <User className="w-4 h-4 text-white" />
+            )}
+          </div>
+          <span className="text-sm font-medium">{user?.username}</span>
+        </div>
+        <ChevronDown
+          className={`w-4 h-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
+        />
+      </Button>
+
+      <AnimatePresence>
+        {isOpen && (
+          <>
+            {/* Backdrop to close menu */}
+            <div
+              className="fixed inset-0 z-40"
+              onClick={() => setIsOpen(false)}
+            />
+
+            {/* Dropdown Menu */}
+            <motion.div
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.15 }}
+              className="absolute right-0 mt-2 w-56 bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl shadow-2xl z-50 overflow-hidden"
+            >
+              {/* User Info */}
+              <div className="px-4 py-3 border-b border-white/10">
+                <p className="text-sm font-medium text-white">
+                  {user?.username}
+                </p>
+                {user?.email && (
+                  <p className="text-xs text-white/60 mt-0.5">{user.email}</p>
+                )}
+                <div className="mt-2">
+                  <span
+                    className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${
+                      user?.role === "ADMIN"
+                        ? "bg-purple-500/20 text-purple-300"
+                        : "bg-blue-500/20 text-blue-300"
+                    }`}
+                  >
+                    {user?.role === "ADMIN" && <Shield className="w-3 h-3" />}
+                    {user?.role === "ADMIN" ? "Admin" : "User"}
+                  </span>
+                </div>
+              </div>
+
+              {/* Menu Items */}
+              <div className="py-1">
+                <button
+                  onClick={() => {
+                    navigate({ to: "/settings" });
+                    setIsOpen(false);
+                  }}
+                  className="w-full px-4 py-2.5 text-left text-sm text-white hover:bg-white/10 transition-colors flex items-center gap-3"
+                >
+                  <Settings className="w-4 h-4" />
+                  Settings
+                </button>
+
+                <button
+                  onClick={() => {
+                    handleLogout();
+                    setIsOpen(false);
+                  }}
+                  className="w-full px-4 py-2.5 text-left text-sm text-red-400 hover:bg-red-500/10 transition-colors flex items-center gap-3"
+                >
+                  <LogOut className="w-4 h-4" />
+                  Sign Out
+                </button>
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}