add anonymous access toggle

Author: msukkari

packages/web/src/actions.ts

@@ -37,7 +37,7 @@ import JoinRequestApprovedEmail from "./emails/joinRequestApprovedEmail";
 import { createLogger } from "@sourcebot/logger";
 import { getAuditService } from "@/ee/features/audit/factory";
 import { addUserToOrganization, orgHasAvailability } from "@/lib/authUtils";
-import { orgMetadataSchema } from "@/types";
+import { getOrgMetadata } from "@/types";
 import { getOrgFromDomain } from "./data/org";
 
 const ajv = new Ajv({
@@ -1952,16 +1952,16 @@ export const getAnonymousAccessStatus = async (domain: string): Promise<boolean
         return false;
     }
 
-    const orgMetadata = orgMetadataSchema.safeParse(org.metadata);
-    if (!orgMetadata.success) {
+    const orgMetadata = getOrgMetadata(org);
+    if (!orgMetadata) {
         return {
             statusCode: StatusCodes.INTERNAL_SERVER_ERROR,
             errorCode: ErrorCode.INVALID_ORG_METADATA,
             message: "Invalid organization metadata",
         } satisfies ServiceError;
     }
 
-    return !!orgMetadata.data.anonymousAccessEnabled;
+    return !!orgMetadata.anonymousAccessEnabled;
 });
 
 export const setAnonymousAccessStatus = async (domain: string, enabled: boolean): Promise<ServiceError | boolean> => sew(async () => {
@@ -1978,9 +1978,9 @@ export const setAnonymousAccessStatus = async (domain: string, enabled: boolean)
                 } satisfies ServiceError;
             }
 
-            const currentMetadata = orgMetadataSchema.safeParse(org.metadata);
+            const currentMetadata = getOrgMetadata(org);
             const mergedMetadata = {
-                ...(currentMetadata.success ? currentMetadata.data : {}),
+                ...(currentMetadata ?? {}),
                 anonymousAccessEnabled: enabled,
             };
 

packages/web/src/app/[domain]/settings/access/page.tsx

@@ -0,0 +1,45 @@
+import { getOrgFromDomain } from "@/data/org";
+import { getAnonymousAccessStatus } from "@/actions";
+import { hasEntitlement } from "@sourcebot/shared";
+import { isServiceError, getBaseUrl, createInviteLink } from "@/lib/utils";
+import { headers } from "next/headers";
+import { OrganizationAccessSettings } from "@/app/components/organizationAccessSettings";
+
+interface AccessPageProps {
+    params: {
+        domain: string;
+    }
+}
+
+export default async function AccessPage({ params: { domain } }: AccessPageProps) {
+    const org = await getOrgFromDomain(domain);
+    if (!org) {
+        throw new Error("Organization not found");
+    }
+
+    // Get the current URL to construct the full invite link
+    const headersList = headers();
+    const baseUrl = getBaseUrl(headersList);
+    const inviteLink = createInviteLink(baseUrl, org.inviteLinkId);
+
+    // Get anonymous access status
+    const anonymousAccessEntitlement = hasEntitlement("anonymous-access");
+    const anonymousAccessStatus = await getAnonymousAccessStatus(domain);
+    const anonymousAccessEnabled = anonymousAccessEntitlement && !isServiceError(anonymousAccessStatus) && anonymousAccessStatus;
+
+    return (
+        <div className="flex flex-col gap-6">
+            <div>
+                <h3 className="text-lg font-medium">Access Control</h3>
+                <p className="text-sm text-muted-foreground">Configure how users can access your Sourcebot deployment.</p>
+            </div>
+
+            <OrganizationAccessSettings 
+                anonymousAccessEnabled={anonymousAccessEnabled} 
+                memberApprovalRequired={org.memberApprovalRequired} 
+                inviteLinkEnabled={org.inviteLinkEnabled} 
+                inviteLink={inviteLink} 
+            />
+        </div>
+    )
+}

packages/web/src/app/[domain]/settings/layout.tsx

@@ -64,6 +64,10 @@ export default async function SettingsLayout({
                 href: `/${domain}/settings/billing`,
             }
         ] : []),
+        {
+            title: "Access",
+            href: `/${domain}/settings/access`,
+        },
         {
             title: (
                 <div className="flex items-center gap-2">

packages/web/src/app/[domain]/settings/members/page.tsx

@@ -12,9 +12,6 @@ import { ServiceErrorException } from "@/lib/serviceError";
 import { getSeats, SOURCEBOT_UNLIMITED_SEATS } from "@sourcebot/shared";
 import { RequestsList } from "./components/requestsList";
 import { OrgRole } from "@prisma/client";
-import { MemberApprovalRequiredToggle } from "@/app/onboard/components/memberApprovalRequiredToggle";
-import { headers } from "next/headers";
-import { getBaseUrl, createInviteLink } from "@/lib/utils";
 
 interface MembersSettingsPageProps {
     params: {
@@ -62,11 +59,6 @@ export default async function MembersSettingsPage({ params: { domain }, searchPa
     const usedSeats = members.length
     const seatsAvailable = seats === SOURCEBOT_UNLIMITED_SEATS || usedSeats < seats;
 
-    // Get the current URL to construct the full invite link
-    const headersList = headers();
-    const baseUrl = getBaseUrl(headersList);
-    const inviteLink = createInviteLink(baseUrl, org.inviteLinkId);
-
     return (
         <div className="flex flex-col gap-6">
             <div className="flex items-start justify-between">
@@ -86,10 +78,6 @@ export default async function MembersSettingsPage({ params: { domain }, searchPa
                 )}
             </div>
 
-            {userRoleInOrg === OrgRole.OWNER && (
-                <MemberApprovalRequiredToggle memberApprovalRequired={org.memberApprovalRequired} inviteLinkEnabled={org.inviteLinkEnabled} inviteLink={inviteLink} />
-            )}
-
             <InviteMemberCard
                 currentUserRole={userRoleInOrg}
                 isBillingEnabled={IS_BILLING_ENABLED}

packages/web/src/app/components/anonymousAccessToggle.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import { useState } from "react"
+import { Switch } from "@/components/ui/switch"
+import { setAnonymousAccessStatus } from "@/actions"
+import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants"
+import { isServiceError } from "@/lib/utils"
+import { useToast } from "@/components/hooks/use-toast"
+
+interface AnonymousAccessToggleProps {
+    anonymousAccessEnabled: boolean
+    onToggleChange?: (checked: boolean) => void
+}
+
+export function AnonymousAccessToggle({ anonymousAccessEnabled, onToggleChange }: AnonymousAccessToggleProps) {
+    const [enabled, setEnabled] = useState(anonymousAccessEnabled)
+    const [isLoading, setIsLoading] = useState(false)
+    const { toast } = useToast()
+
+    const handleToggle = async (checked: boolean) => {
+        setIsLoading(true)
+        try {
+            const result = await setAnonymousAccessStatus(SINGLE_TENANT_ORG_DOMAIN, checked)
+            
+            if (isServiceError(result)) {
+                toast({
+                    title: "Error",
+                    description: result.message || "Failed to update anonymous access setting",
+                    variant: "destructive",
+                })
+                return
+            }
+
+            setEnabled(checked)
+            onToggleChange?.(checked)
+        } catch (error) {
+            console.error("Error updating anonymous access setting:", error)
+            toast({
+                title: "Error",
+                description: "Failed to update anonymous access setting",
+                variant: "destructive",
+            })
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    return (
+        <div className="p-4 rounded-lg border border-[var(--border)] bg-[var(--card)]">
+            <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                    <h3 className="font-medium text-[var(--foreground)] mb-2">
+                        Enable anonymous access
+                    </h3>
+                    <div className="max-w-2xl">
+                        <p className="text-sm text-[var(--muted-foreground)] leading-relaxed">
+                            When enabled, users can access your deployment without logging in.{" "}
+                            <a
+                                href="https://docs.sourcebot.dev/docs/configuration/auth/anonymous-access"
+                                target="_blank"
+                                rel="noopener"
+                                className="underline text-[var(--primary)] hover:text-[var(--primary)]/80 transition-colors"
+                            >
+                                Learn More
+                            </a>
+                        </p>
+                    </div>
+                </div>
+                <div className="flex-shrink-0">
+                    <Switch
+                        checked={enabled}
+                        onCheckedChange={handleToggle}
+                        disabled={isLoading}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}

packages/web/src/app/components/memberApprovalRequiredToggle.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import { useState } from "react"
+import { Switch } from "@/components/ui/switch"
+import { setMemberApprovalRequired } from "@/actions"
+import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants"
+import { isServiceError } from "@/lib/utils"
+import { useToast } from "@/components/hooks/use-toast"
+
+interface MemberApprovalRequiredToggleProps {
+    memberApprovalRequired: boolean
+    onToggleChange?: (checked: boolean) => void
+}
+
+export function MemberApprovalRequiredToggle({ memberApprovalRequired, onToggleChange }: MemberApprovalRequiredToggleProps) {
+    const [enabled, setEnabled] = useState(memberApprovalRequired)
+    const [isLoading, setIsLoading] = useState(false)
+    const { toast } = useToast()
+
+    const handleToggle = async (checked: boolean) => {
+        setIsLoading(true)
+        try {
+            const result = await setMemberApprovalRequired(SINGLE_TENANT_ORG_DOMAIN, checked)
+            
+            if (isServiceError(result)) {
+                toast({
+                    title: "Error",
+                    description: "Failed to update member approval setting",
+                    variant: "destructive",
+                })
+                return
+            }
+
+            setEnabled(checked)
+            onToggleChange?.(checked)
+        } catch (error) {
+            console.error("Error updating member approval setting:", error)
+            toast({
+                title: "Error",
+                description: "Failed to update member approval setting",
+                variant: "destructive",
+            })
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    return (
+        <div className="p-4 rounded-lg border border-[var(--border)] bg-[var(--card)]">
+            <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                    <h3 className="font-medium text-[var(--foreground)] mb-2">
+                        Require approval for new members
+                    </h3>
+                    <div className="max-w-2xl">
+                        <p className="text-sm text-[var(--muted-foreground)] leading-relaxed">
+                            When enabled, new users will need approval from an organization owner before they can access your deployment.{" "}
+                            <a
+                                href="https://docs.sourcebot.dev/docs/configuration/auth/inviting-members"
+                                target="_blank"
+                                rel="noopener"
+                                className="underline text-[var(--primary)] hover:text-[var(--primary)]/80 transition-colors"
+                            >
+                                Learn More
+                            </a>
+                        </p>
+                    </div>
+                </div>
+                <div className="flex-shrink-0">
+                    <Switch
+                        checked={enabled}
+                        onCheckedChange={handleToggle}
+                        disabled={isLoading}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+} 

packages/web/src/app/components/organizationAccessSettings.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { useState } from "react"
+import { AnonymousAccessToggle } from "./anonymousAccessToggle"
+import { MemberApprovalRequiredToggle } from "./memberApprovalRequiredToggle"
+import { InviteLinkToggle } from "./inviteLinkToggle"
+
+interface OrganizationAccessSettingsProps {
+    anonymousAccessEnabled: boolean
+    memberApprovalRequired: boolean
+    inviteLinkEnabled: boolean
+    inviteLink: string | null
+}
+
+export function OrganizationAccessSettings({ 
+    anonymousAccessEnabled,
+    memberApprovalRequired, 
+    inviteLinkEnabled, 
+    inviteLink 
+}: OrganizationAccessSettingsProps) {
+    const [showInviteLink, setShowInviteLink] = useState(memberApprovalRequired && !anonymousAccessEnabled)
+    const handleMemberApprovalToggle = (checked: boolean) => {
+        setShowInviteLink(checked)
+    }
+
+    return (
+        <div className="space-y-6">
+            <AnonymousAccessToggle 
+                anonymousAccessEnabled={anonymousAccessEnabled}
+            />
+
+            <div className={`transition-all duration-300 ease-in-out overflow-hidden max-h-96 opacity-100`}>
+                <MemberApprovalRequiredToggle 
+                    memberApprovalRequired={memberApprovalRequired}
+                    onToggleChange={handleMemberApprovalToggle}
+                />
+            </div>
+            
+            <div className={`transition-all duration-300 ease-in-out overflow-hidden ${
+                showInviteLink 
+                    ? 'max-h-96 opacity-100' 
+                    : 'max-h-0 opacity-0 pointer-events-none'
+            }`}>
+                <InviteLinkToggle 
+                    inviteLinkEnabled={inviteLinkEnabled} 
+                    inviteLink={inviteLink} 
+                />
+            </div>
+        </div>
+    )
+}