feat(auth): add frontend login page and guest landing gate

src/app/(frontend)/layout.tsx

@@ -8,6 +8,10 @@ import { headers as nextHeaders } from "next/headers";
 import { SiteHeader } from "@/components/frontend/SiteHeader";
 import { Metadata } from "next";
 import { resolveLevel, type ResolvedLevel } from "@/utils/xp/resolveLevel";
+import { hasLogisticsQualification } from "@/utils/access-control/hasLogisticsQualification";
+import { ShipmentToasts } from "@/components/frontend/logistics/ShipmentToasts";
+import { GameTickRealtime } from "@/components/frontend/realtime/GameTickRealtime";
+import { LandingPage } from "@/components/frontend/LandingPage";
 
 export const metadata: Metadata = {
   description: "A gamified platform for Polaris Task Force, an Arma 3 unit.",
@@ -31,7 +35,12 @@ export default async function RootLayout(props: { children: React.ReactNode }) {
     xp: 0,
   };
 
+  let isLogistics = false;
+
   if (user) {
+    isLogistics = await hasLogisticsQualification(payload, user).catch(
+      () => false,
+    );
     const [profileRes, experienceRes] = await Promise.all([
       payload.find({
         collection: "profiles",
@@ -61,21 +70,27 @@ export default async function RootLayout(props: { children: React.ReactNode }) {
   return (
     <html lang="en" className="bg-black leading-8 antialiased h-full dark">
       <body className="h-full font-sans m-0 text-white">
-        <SidebarProvider>
-          <AppSidebar
-            user={{
-              displayName: user?.payloadDisplayName ?? "Guest",
-              username: user?.username ?? "Not logged in",
-            }}
-            xpLevel={xpLevel}
-            adminUrl={payloadConfig.routes.admin}
-            className="border-r"
-          />
-          <main className="min-h-full bg-background w-full">
-            <SiteHeader />
-            {children}
-          </main>
-        </SidebarProvider>
+        {user ? (
+          <SidebarProvider>
+            <AppSidebar
+              user={{
+                displayName: user.payloadDisplayName ?? "Guest",
+                username: user.username ?? "Not logged in",
+              }}
+              xpLevel={xpLevel}
+              adminUrl={payloadConfig.routes.admin}
+              className="border-r"
+            />
+            <main className="min-h-full bg-background w-full">
+              <SiteHeader />
+              {children}
+            </main>
+          </SidebarProvider>
+        ) : (
+          <LandingPage />
+        )}
+        {user && <GameTickRealtime />}
+        {isLogistics && <ShipmentToasts />}
       </body>
     </html>
   );

src/app/(frontend)/page.tsx

@@ -1,7 +1,6 @@
 import config from "@payload-config";
 import { getPayload } from "payload";
 import { headers as nextHeaders } from "next/headers";
-import Link from "next/link";
 import type {
   User,
   Rank,
@@ -18,32 +17,13 @@ import { RecentEvents } from "@/components/frontend/dashboard/RecentEvents";
 import { QuickStats } from "@/components/frontend/dashboard/QuickStats";
 import { UpcomingMissions } from "@/components/frontend/dashboard/UpcomingMissions";
 import { ActiveCampaigns } from "@/components/frontend/dashboard/ActiveCampaigns";
-import { ArrowRightIcon, ShieldIcon } from "lucide-react";
 
 export default async function HomePage() {
   const payload = await getPayload({ config });
   const headers = await nextHeaders();
   const { user } = await payload.auth({ headers, canSetHeaders: false });
 
-  if (!user) {
-    return (
-      <div className="p-5 flex flex-col items-center justify-center min-h-[60vh] gap-4">
-        <ShieldIcon className="size-12 text-muted-foreground" />
-        <div className="text-center">
-          <h1 className="text-xl font-semibold">Welcome to Polaris Task Force</h1>
-          <p className="text-sm text-muted-foreground mt-1">
-            Log in to access the operations dashboard.
-          </p>
-        </div>
-        <Link
-          href="/admin/login"
-          className="text-sm text-primary hover:underline flex items-center gap-1"
-        >
-          Go to login <ArrowRightIcon className="size-3" />
-        </Link>
-      </div>
-    );
-  }
+  if (!user) return null;
 
   const userId = user.id;
 

src/app/login/layout.tsx

@@ -0,0 +1,9 @@
+import "@/app/(frontend)/styles.css";
+
+export default function LoginLayout(props: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className="bg-black leading-8 antialiased h-full dark">
+      <body className="h-full font-sans m-0 text-white">{props.children}</body>
+    </html>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,30 @@
+import { getPayload } from "payload";
+import config from "@payload-config";
+import { headers as nextHeaders } from "next/headers";
+import { redirect } from "next/navigation";
+import { ShieldIcon } from "lucide-react";
+import { LoginForm } from "@/components/frontend/auth/LoginForm";
+
+export default async function LoginPage() {
+  const payload = await getPayload({ config });
+  const headers = await nextHeaders();
+  const { user } = await payload.auth({ headers, canSetHeaders: false });
+
+  if (user) redirect("/");
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center p-5 gap-6 bg-background">
+      <div className="flex flex-col items-center gap-3 text-center max-w-md">
+        <div className="size-16 rounded-full border border-primary/40 bg-primary/10 flex items-center justify-center">
+          <ShieldIcon className="size-8 text-primary" />
+        </div>
+        <h1 className="text-2xl font-semibold">Polaris Task Force</h1>
+        <p className="text-sm text-muted-foreground">
+          Log in to access the operations dashboard, intelligence, and
+          logistics.
+        </p>
+      </div>
+      <LoginForm />
+    </div>
+  );
+}

src/components/frontend/LandingPage.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import { ShieldIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function LandingPage() {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center p-5 gap-6 bg-background">
+      <div className="flex flex-col items-center gap-3 text-center max-w-md">
+        <div className="size-16 rounded-full border border-primary/40 bg-primary/10 flex items-center justify-center">
+          <ShieldIcon className="size-8 text-primary" />
+        </div>
+        <h1 className="text-2xl font-semibold">Polaris Task Force</h1>
+        <p className="text-sm text-muted-foreground">
+          Classified operations portal for Polaris Task Force, an Arma 3 unit.
+          Log in to access the operations dashboard, intelligence, and
+          logistics.
+        </p>
+        <Button asChild className="mt-2">
+          <Link href="/login">Log in to access the portal</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/frontend/auth/LoginForm.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Loader2Icon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function LoginForm() {
+  const router = useRouter();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/users/login", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ username, password }),
+      });
+
+      const body = await res.json().catch(() => null);
+
+      if (!res.ok) {
+        setError(
+          body?.errors?.[0]?.message ?? "Invalid username or password.",
+        );
+        return;
+      }
+
+      router.push("/");
+      router.refresh();
+    } catch {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="w-full max-w-sm flex flex-col gap-4 rounded-xl border border-border bg-card p-6 shadow-xl"
+    >
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="username">Username</Label>
+        <Input
+          id="username"
+          name="username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          autoComplete="username"
+          autoFocus
+          required
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="password">Password</Label>
+        <Input
+          id="password"
+          name="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          autoComplete="current-password"
+          required
+        />
+      </div>
+      {error && <p className="text-sm text-destructive">{error}</p>}
+      <Button type="submit" disabled={loading} className="w-full">
+        {loading && <Loader2Icon className="size-4 animate-spin" />}
+        {loading ? "Logging in..." : "Log in"}
+      </Button>
+      <p className="text-xs text-muted-foreground text-center">
+        Military personnel only. Authorized access required.
+      </p>
+    </form>
+  );
+}