From 86d93d94fe2199792422d70c3ff8ccc244ab90e5 Mon Sep 17 00:00:00 2001
From: Abhimanyu Saharan <asaharan@onemindservices.com>
Date: Sun, 8 Feb 2026 23:30:24 +0530
Subject: [PATCH] feat: refactor authentication panels and add AdminOnlyNotice
 component

---
 .../app/gateways/[gatewayId]/edit/page.tsx    | 24 ++++++-----------
 .../src/app/gateways/[gatewayId]/page.tsx     | 23 ++++++----------
 frontend/src/app/gateways/new/page.tsx        | 23 ++++++----------
 frontend/src/app/gateways/page.tsx            | 20 ++++++--------
 .../src/components/auth/AdminOnlyNotice.tsx   | 11 ++++++++
 .../src/components/auth/SignedOutPanel.tsx    | 26 +++++++++++++++++++
 6 files changed, 69 insertions(+), 58 deletions(-)
 create mode 100644 frontend/src/components/auth/AdminOnlyNotice.tsx
 create mode 100644 frontend/src/components/auth/SignedOutPanel.tsx

diff --git a/frontend/src/app/gateways/[gatewayId]/edit/page.tsx b/frontend/src/app/gateways/[gatewayId]/edit/page.tsx
index 8fe99251..bb51515c 100644
--- a/frontend/src/app/gateways/[gatewayId]/edit/page.tsx
+++ b/frontend/src/app/gateways/[gatewayId]/edit/page.tsx
@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
 import { useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
+import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import {
@@ -18,10 +18,11 @@ import {
   useGetMyMembershipApiV1OrganizationsMeMemberGet,
 } from "@/api/generated/organizations/organizations";
 import type { GatewayUpdate } from "@/api/generated/model";
+import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
+import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
 import { GatewayForm } from "@/components/gateways/GatewayForm";
 import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
 import { DashboardShell } from "@/components/templates/DashboardShell";
-import { Button } from "@/components/ui/button";
 import {
   DEFAULT_MAIN_SESSION_KEY,
   DEFAULT_WORKSPACE_ROOT,
@@ -180,17 +181,10 @@ export default function EditGatewayPage() {
   return (
     <DashboardShell>
       <SignedOut>
-        <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
-          <div className="rounded-xl border border-slate-200 bg-white px-8 py-6 shadow-sm">
-            <p className="text-sm text-slate-600">Sign in to edit a gateway.</p>
-            <SignInButton
-              mode="modal"
-              forceRedirectUrl={`/gateways/${gatewayId}/edit`}
-            >
-              <Button className="mt-4">Sign in</Button>
-            </SignInButton>
-          </div>
-        </div>
+        <SignedOutPanel
+          message="Sign in to edit a gateway."
+          forceRedirectUrl={`/gateways/${gatewayId}/edit`}
+        />
       </SignedOut>
       <SignedIn>
         <DashboardSidebar />
@@ -210,9 +204,7 @@ export default function EditGatewayPage() {
 
           <div className="p-8">
             {!isAdmin ? (
-              <div className="rounded-xl border border-slate-200 bg-white px-6 py-5 text-sm text-slate-600 shadow-sm">
-                Only organization owners and admins can edit gateways.
-              </div>
+              <AdminOnlyNotice message="Only organization owners and admins can edit gateways." />
             ) : (
               <GatewayForm
                 name={resolvedName}
diff --git a/frontend/src/app/gateways/[gatewayId]/page.tsx b/frontend/src/app/gateways/[gatewayId]/page.tsx
index 9fa10156..e702ab65 100644
--- a/frontend/src/app/gateways/[gatewayId]/page.tsx
+++ b/frontend/src/app/gateways/[gatewayId]/page.tsx
@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
 import { useMemo } from "react";
 import { useParams, useRouter } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
+import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import {
@@ -22,6 +22,8 @@ import {
   type getMyMembershipApiV1OrganizationsMeMemberGetResponse,
   useGetMyMembershipApiV1OrganizationsMeMemberGet,
 } from "@/api/generated/organizations/organizations";
+import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
+import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
 import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
 import { DashboardShell } from "@/components/templates/DashboardShell";
 import { Button } from "@/components/ui/button";
@@ -128,17 +130,10 @@ export default function GatewayDetailPage() {
   return (
     <DashboardShell>
       <SignedOut>
-        <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
-          <div className="rounded-xl border border-slate-200 bg-white px-8 py-6 shadow-sm">
-            <p className="text-sm text-slate-600">Sign in to view a gateway.</p>
-            <SignInButton
-              mode="modal"
-              forceRedirectUrl={`/gateways/${gatewayId}`}
-            >
-              <Button className="mt-4">Sign in</Button>
-            </SignInButton>
-          </div>
-        </div>
+        <SignedOutPanel
+          message="Sign in to view a gateway."
+          forceRedirectUrl={`/gateways/${gatewayId}`}
+        />
       </SignedOut>
       <SignedIn>
         <DashboardSidebar />
@@ -173,9 +168,7 @@ export default function GatewayDetailPage() {
 
           <div className="p-8">
             {!isAdmin ? (
-              <div className="rounded-xl border border-slate-200 bg-white px-6 py-5 text-sm text-slate-600 shadow-sm">
-                Only organization owners and admins can access gateways.
-              </div>
+              <AdminOnlyNotice message="Only organization owners and admins can access gateways." />
             ) : gatewayQuery.isLoading ? (
               <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
                 Loading gateway…
diff --git a/frontend/src/app/gateways/new/page.tsx b/frontend/src/app/gateways/new/page.tsx
index 5d339ec2..c1326488 100644
--- a/frontend/src/app/gateways/new/page.tsx
+++ b/frontend/src/app/gateways/new/page.tsx
@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
+import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import { useCreateGatewayApiV1GatewaysPost } from "@/api/generated/gateways/gateways";
@@ -13,10 +13,11 @@ import {
   type getMyMembershipApiV1OrganizationsMeMemberGetResponse,
   useGetMyMembershipApiV1OrganizationsMeMemberGet,
 } from "@/api/generated/organizations/organizations";
+import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
+import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
 import { GatewayForm } from "@/components/gateways/GatewayForm";
 import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
 import { DashboardShell } from "@/components/templates/DashboardShell";
-import { Button } from "@/components/ui/button";
 import {
   DEFAULT_MAIN_SESSION_KEY,
   DEFAULT_WORKSPACE_ROOT,
@@ -141,16 +142,10 @@ export default function NewGatewayPage() {
   return (
     <DashboardShell>
       <SignedOut>
-        <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
-          <div className="rounded-xl border border-slate-200 bg-white px-8 py-6 shadow-sm">
-            <p className="text-sm text-slate-600">
-              Sign in to create a gateway.
-            </p>
-            <SignInButton mode="modal" forceRedirectUrl="/gateways/new">
-              <Button className="mt-4">Sign in</Button>
-            </SignInButton>
-          </div>
-        </div>
+        <SignedOutPanel
+          message="Sign in to create a gateway."
+          forceRedirectUrl="/gateways/new"
+        />
       </SignedOut>
       <SignedIn>
         <DashboardSidebar />
@@ -168,9 +163,7 @@ export default function NewGatewayPage() {
 
           <div className="p-8">
             {!isAdmin ? (
-              <div className="rounded-xl border border-slate-200 bg-white px-6 py-5 text-sm text-slate-600 shadow-sm">
-                Only organization owners and admins can create gateways.
-              </div>
+              <AdminOnlyNotice message="Only organization owners and admins can create gateways." />
             ) : (
               <GatewayForm
                 name={name}
diff --git a/frontend/src/app/gateways/page.tsx b/frontend/src/app/gateways/page.tsx
index 85ec2852..6ea11c6a 100644
--- a/frontend/src/app/gateways/page.tsx
+++ b/frontend/src/app/gateways/page.tsx
@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
 import { useMemo, useState } from "react";
 import Link from "next/link";
 
-import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
+import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
 import {
   type ColumnDef,
   type SortingState,
@@ -40,6 +40,8 @@ import {
   useGetMyMembershipApiV1OrganizationsMeMemberGet,
 } from "@/api/generated/organizations/organizations";
 import type { GatewayRead } from "@/api/generated/model";
+import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
+import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
 
 const truncate = (value?: string | null, max = 24) => {
   if (!value) return "—";
@@ -235,14 +237,10 @@ export default function GatewaysPage() {
   return (
     <DashboardShell>
       <SignedOut>
-        <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
-          <div className="rounded-xl border border-slate-200 bg-white px-8 py-6 shadow-sm">
-            <p className="text-sm text-slate-600">Sign in to view gateways.</p>
-            <SignInButton mode="modal" forceRedirectUrl="/gateways">
-              <Button className="mt-4">Sign in</Button>
-            </SignInButton>
-          </div>
-        </div>
+        <SignedOutPanel
+          message="Sign in to view gateways."
+          forceRedirectUrl="/gateways"
+        />
       </SignedOut>
       <SignedIn>
         <DashboardSidebar />
@@ -275,9 +273,7 @@ export default function GatewaysPage() {
 
           <div className="p-8">
             {!isAdmin ? (
-              <div className="rounded-xl border border-slate-200 bg-white px-6 py-5 text-sm text-slate-600 shadow-sm">
-                Only organization owners and admins can access gateways.
-              </div>
+              <AdminOnlyNotice message="Only organization owners and admins can access gateways." />
             ) : (
               <>
                 <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
diff --git a/frontend/src/components/auth/AdminOnlyNotice.tsx b/frontend/src/components/auth/AdminOnlyNotice.tsx
new file mode 100644
index 00000000..26a73b72
--- /dev/null
+++ b/frontend/src/components/auth/AdminOnlyNotice.tsx
@@ -0,0 +1,11 @@
+type AdminOnlyNoticeProps = {
+  message: string;
+};
+
+export function AdminOnlyNotice({ message }: AdminOnlyNoticeProps) {
+  return (
+    <div className="rounded-xl border border-slate-200 bg-white px-6 py-5 text-sm text-slate-600 shadow-sm">
+      {message}
+    </div>
+  );
+}
diff --git a/frontend/src/components/auth/SignedOutPanel.tsx b/frontend/src/components/auth/SignedOutPanel.tsx
new file mode 100644
index 00000000..062073d6
--- /dev/null
+++ b/frontend/src/components/auth/SignedOutPanel.tsx
@@ -0,0 +1,26 @@
+import { SignInButton } from "@/auth/clerk";
+
+import { Button } from "@/components/ui/button";
+
+type SignedOutPanelProps = {
+  message: string;
+  forceRedirectUrl: string;
+  buttonLabel?: string;
+};
+
+export function SignedOutPanel({
+  message,
+  forceRedirectUrl,
+  buttonLabel = "Sign in",
+}: SignedOutPanelProps) {
+  return (
+    <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
+      <div className="rounded-xl border border-slate-200 bg-white px-8 py-6 shadow-sm">
+        <p className="text-sm text-slate-600">{message}</p>
+        <SignInButton mode="modal" forceRedirectUrl={forceRedirectUrl}>
+          <Button className="mt-4">{buttonLabel}</Button>
+        </SignInButton>
+      </div>
+    </div>
+  );
+}