feat: implement unified login flow with LoginButton and contextual LoginDialog for unauthenticated form access

app/form/[id]/page.tsx

@@ -4,6 +4,7 @@ import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { notFound } from "next/navigation";
 import { getGuildMemberRoles } from "@/app/actions/discord";
+import LoginDialog from "@/components/login-dialog";
 
 export const dynamic = "force-dynamic";
 
@@ -24,26 +25,29 @@ export default async function FormsSubmitPage(
     return notFound();
   }
 
-  if (discordId) {
-    const allowedRoles = form.allowedRoles || [];
-    const deniedRoles = form.deniedRoles || [];
+  const allowedRoles = form.allowedRoles || [];
+  const deniedRoles = form.deniedRoles || [];
+  const hasRoleRestrictions = allowedRoles.length > 0 || deniedRoles.length > 0;
 
-    if (allowedRoles.length > 0 || deniedRoles.length > 0) {
-      const userRoles = await getGuildMemberRoles(discordId);
-      
-      let isAllowed = allowedRoles.length === 0;
-      if (allowedRoles.length > 0) {
-        isAllowed = userRoles.some(r => allowedRoles.includes(r));
-      }
+  if (hasRoleRestrictions) {
+    if (!discordId) {
+      return notFound();
+    }
 
-      let isDenied = false;
-      if (deniedRoles.length > 0) {
-        isDenied = userRoles.some(r => deniedRoles.includes(r));
-      }
+    const userRoles = await getGuildMemberRoles(discordId);
+    
+    let isAllowed = allowedRoles.length === 0;
+    if (allowedRoles.length > 0) {
+      isAllowed = userRoles.some(r => allowedRoles.includes(r));
+    }
 
-      if (!isAllowed || isDenied) {
-        return notFound();
-      }
+    let isDenied = false;
+    if (deniedRoles.length > 0) {
+      isDenied = userRoles.some(r => deniedRoles.includes(r));
+    }
+
+    if (!isAllowed || isDenied) {
+      return notFound();
     }
   }
 
@@ -70,12 +74,15 @@ export default async function FormsSubmitPage(
   }
 
   return (
-    <div className="max-w-2xl mx-auto p-4 md:p-6 space-y-6">
-      <FormFillerClient 
-        form={form} 
-        questions={questionsList} 
-        initialAnswers={initialAnswers} 
-      />
-    </div>
+    <>
+      <div className="max-w-2xl mx-auto p-4 md:p-6 space-y-6">
+        <FormFillerClient 
+          form={form} 
+          questions={questionsList} 
+          initialAnswers={initialAnswers} 
+        />
+      </div>
+      {!discordId && <LoginDialog />}
+    </>
   );
 }

app/form/client.tsx

@@ -17,7 +17,7 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { toast } from "sonner";
 import { submitForm, deleteOwnSubmission } from "@/app/actions/submissions";
 import { Loader2, LogOut } from "lucide-react";
-import { signOut } from "next-auth/react";
+import { signIn, signOut } from "next-auth/react";
 import Image from "next/image";
 import { z } from "zod";
 import { useForm, Controller } from "react-hook-form";
@@ -49,6 +49,14 @@ export function FormLayoutClient({
   );
 }
 
+export function LoginButton() {
+  return (
+    <Button variant="outline" size="sm" onClick={() => signIn("discord", { callbackUrl: window.location.href })}>
+      Login
+    </Button>
+  );
+}
+
 interface Question {
   id: string;
   formId: string;

app/form/layout.tsx

@@ -1,7 +1,6 @@
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
-import { FormLayoutClient } from "./client";
-import LoginDialog from "@/components/login-dialog";
+import { FormLayoutClient, LoginButton } from "./client";
 import { Metadata } from "next";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { getDiscordMemberProfile } from "@/app/actions/discord";
@@ -52,12 +51,14 @@ export default async function FormLayout({
           </span>
         </Link>
         <div className="flex items-center gap-2">
-          {session?.user && (
+          {session?.user ? (
             <FormLayoutClient
               userName={session.user.name ?? ""}
               userImage={session.user.image ?? ""}
               profile={profile}
             />
+          ) : (
+            <LoginButton />
           )}
           <ThemeToggle />
         </div>
@@ -65,7 +66,6 @@ export default async function FormLayout({
       <main className="flex-1 p-6 md:p-8 overflow-y-auto max-w-6xl mx-auto w-full">
         {children}
       </main>
-      {!session && <LoginDialog />}
     </div>
   );
 }