Require username to access submit page

src/app/submit/page.tsx

@@ -5,15 +5,43 @@ import SubmitAuthOverlay from "@/components/Submit/SubmitAuthOverlay";
 export default async function SubmitPage() {
   const supabase = await createClient();
   const { data: { user } } = await supabase.auth.getUser();
+  let needsInitialSetup = false;
+  if (user) {
+    const { data: profile } = await supabase
+      .from('profiles')
+      .select('username')
+      .eq('id', user.id)
+      .maybeSingle();
+    needsInitialSetup = !profile || profile.username == null;
+  }
 
   return (
     <div className="mx-auto max-w-screen-lg px-6 py-10">
       <h1 className="text-3xl font-bold tracking-tight">Submit your ROM hack</h1>
       <p className="mt-2 text-[15px] text-foreground/80">Share your hack so others can discover and play it.</p>
       <div className="mt-8">
-        <SubmitForm dummy={!user} />
+        <SubmitForm dummy={!user || needsInitialSetup} />
       </div>
-      {!user && <SubmitAuthOverlay />}
+      {!user ? (
+        <SubmitAuthOverlay
+          title='Creators only'
+          message='You need an account before you can submit your romhacks for others to play. It only takes a minute.'
+          primaryHref='/signup'
+          primaryLabel='Create account'
+          secondaryHref='/login?redirectTo=%2Fsubmit'
+          secondaryLabel='Log in'
+        />
+      ) : (
+        needsInitialSetup ? (
+          <SubmitAuthOverlay
+            title="Finish setting up your account"
+            message="You need to choose a username before you can submit your first romhack."
+            primaryHref="/account"
+            primaryLabel="Finish setup"
+            ariaLabel="Account setup required"
+          />
+        ) : null
+      )}
     </div>
   );
 }

src/components/Submit/SubmitAuthOverlay.tsx

@@ -3,7 +3,25 @@
 import React, { useEffect } from 'react'
 import Link from 'next/link'
 
-const SubmitAuthOverlay: React.FC = () => {
+type SubmitAuthOverlayProps = {
+  title: string;
+  message: string;
+  primaryHref?: string;
+  primaryLabel?: string;
+  secondaryHref?: string;
+  secondaryLabel?: string;
+  ariaLabel?: string;
+}
+
+const SubmitAuthOverlay: React.FC<SubmitAuthOverlayProps> = ({
+  title,
+  message,
+  primaryHref,
+  primaryLabel,
+  secondaryHref,
+  secondaryLabel,
+  ariaLabel,
+}) => {
   useEffect(() => {
     const html = document.documentElement;
     const body = document.body;
@@ -31,29 +49,31 @@ const SubmitAuthOverlay: React.FC = () => {
       <div
         role="dialog"
         aria-modal="true"
-        aria-label="Creators only"
+        aria-label={ariaLabel || title}
         className="relative z-[101] mb-16 card backdrop-blur-lg dark:!bg-white/6 p-6 max-w-md w-full rounded-lg"
       >
         <div className="flex flex-col gap-8 sm:gap-4">
           <div>
-            <div className="text-xl font-semibold">Creators only</div>
-            <p className="mt-1 text-sm text-foreground/80">
-              You need an account to submit new romhacks for others to play. It only takes a minute.
-            </p>
+            <div className="text-xl font-semibold">{title}</div>
+            <p className="mt-1 text-sm text-foreground/80">{message}</p>
           </div>
           <div className="flex flex-wrap justify-center items-center gap-6 sm:gap-4">
-            <Link
-              href="/signup"
-              className="shine-wrap btn-premium h-14 sm:h-11 w-full sm:w-auto text-sm font-semibold rounded-md text-[var(--accent-foreground)]"
-            >
-              <span>Create account</span>
-            </Link>
-            <Link
-              href="/login?redirectTo=%2Fsubmit"
-              className="inline-flex h-14 sm:h-11 w-full sm:w-auto items-center justify-center rounded-md px-4 text-sm font-semibold ring-1 ring-[var(--border)] hover:bg-[var(--surface-2)]"
-            >
-              Log in
-            </Link>
+            {primaryHref && primaryLabel && (
+              <Link
+                href={primaryHref}
+                className="shine-wrap btn-premium h-14 sm:h-11 w-full sm:w-auto text-sm font-semibold rounded-md text-[var(--accent-foreground)]"
+              >
+                <span>{primaryLabel}</span>
+              </Link>
+            )}
+            {secondaryHref && secondaryLabel && (
+              <Link
+                href={secondaryHref}
+                className="inline-flex h-14 sm:h-11 w-full sm:w-auto items-center justify-center rounded-md px-4 text-sm font-semibold ring-1 ring-[var(--border)] hover:bg-[var(--surface-2)]"
+              >
+                {secondaryLabel}
+              </Link>
+            )}
           </div>
         </div>
       </div>