feat(ui): Add org settings frontend

frontend/src/app/organization/layout.tsx

@@ -17,7 +17,7 @@ export default function OrganizationLayout({
       {/* DynamicNavbar needs a WorkflowProvider and a WorkspaceProvider */}
       <DynamicNavbar />
       <div className="container h-full space-y-6 overflow-auto md:block">
-        <div className="flex h-full flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
+        <div className="flex h-full flex-col space-y-8 lg:flex-row lg:space-y-0">
           <aside className="-mx-4 h-full lg:w-1/5">
             <OrganizationSidebarNav />
           </aside>

frontend/src/app/organization/settings/auth/page.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { Separator } from "@/components/ui/separator"
+import { OrgSettingsAuthForm } from "@/components/organization/org-settings-auth"
+
+export default function AuthSettingsPage() {
+  return (
+    <div className="size-full overflow-auto">
+      <div className="container flex h-full max-w-[1000px] flex-col space-y-12">
+        <div className="space-y-8">
+          <div className="flex w-full">
+            <div className="items-start space-y-3 text-left">
+              <h2 className="text-2xl font-semibold tracking-tight">
+                Authentication
+              </h2>
+              <p className="text-md text-muted-foreground">
+                View and manage your organization authentication settings here.
+              </p>
+            </div>
+          </div>
+          <Separator />
+        </div>
+        <OrgSettingsAuthForm />
+      </div>
+    </div>
+  )
+}

frontend/src/app/organization/settings/git/page.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { Separator } from "@/components/ui/separator"
+import { OrgSettingsGitForm } from "@/components/organization/org-settings-git"
+
+export default function GitSettingsPage() {
+  return (
+    <div className="size-full overflow-auto">
+      <div className="container flex h-full max-w-[1000px] flex-col space-y-12">
+        <div className="space-y-8">
+          <div className="flex w-full">
+            <div className="items-start space-y-3 text-left">
+              <h2 className="text-2xl font-semibold tracking-tight">
+                Git Repository
+              </h2>
+              <p className="text-md text-muted-foreground">
+                View and manage your organization Git settings here.
+              </p>
+            </div>
+          </div>
+          <Separator />
+        </div>
+        <OrgSettingsGitForm />
+      </div>
+    </div>
+  )
+}

frontend/src/app/organization/settings/oauth/page.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { Separator } from "@/components/ui/separator"
+import { OrgSettingsOAuthForm } from "@/components/organization/org-settings-oauth"
+
+export default function OAuthSettingsPage() {
+  return (
+    <div className="size-full overflow-auto">
+      <div className="container flex h-full max-w-[1000px] flex-col space-y-12">
+        <div className="space-y-8">
+          <div className="flex w-full">
+            <div className="items-start space-y-3 text-left">
+              <h2 className="text-2xl font-semibold tracking-tight">
+                OAuth Settings
+              </h2>
+              <p className="text-md text-muted-foreground">
+                View and manage your organization OAuth settings here.
+              </p>
+            </div>
+          </div>
+          <Separator />
+        </div>
+        <OrgSettingsOAuthForm />
+      </div>
+    </div>
+  )
+}

frontend/src/app/organization/settings/page.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+export default function SettingsPage() {
+  return (
+    <div className="size-full overflow-auto">
+      <div className="container flex h-full max-w-[1000px] flex-col space-y-12">
+        <div className="flex w-full">
+          <div className="items-start space-y-3 text-left">
+            <h2 className="text-2xl font-semibold tracking-tight">Settings</h2>
+            <p className="text-md text-muted-foreground">
+              View and manage your organization settings here.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/app/organization/settings/sso/page.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { Separator } from "@/components/ui/separator"
+import { OrgSettingsSsoForm } from "@/components/organization/org-settings-sso"
+
+export default function SsoSettingsPage() {
+  return (
+    <div className="size-full overflow-auto">
+      <div className="container flex h-full max-w-[1000px] flex-col space-y-12">
+        <div className="space-y-8">
+          <div className="flex w-full">
+            <div className="items-start space-y-3 text-left">
+              <h2 className="text-2xl font-semibold tracking-tight">
+                SAML Single Sign-On
+              </h2>
+              <p className="text-md text-muted-foreground">
+                View and manage your organization SAML SSO settings here.
+              </p>
+            </div>
+          </div>
+          <Separator />
+        </div>
+        <OrgSettingsSsoForm />
+      </div>
+    </div>
+  )
+}

frontend/src/app/organization/sidebar-nav.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { KeyRoundIcon, LucideIcon, UsersIcon } from "lucide-react"
+import { KeyRoundIcon, LucideIcon, SettingsIcon, UsersIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
@@ -13,6 +13,25 @@ type NavItem = {
   href: string
 }
 
+const settingsNavItems: NavItem[] = [
+  {
+    title: "Git Repository",
+    href: "/organization/settings/git",
+  },
+  {
+    title: "Single Sign-On",
+    href: "/organization/settings/sso",
+  },
+  {
+    title: "OAuth",
+    href: "/organization/settings/oauth",
+  },
+  {
+    title: "Authentication",
+    href: "/organization/settings/auth",
+  },
+]
+
 const secretNavItems: NavItem[] = [
   {
     title: "Credentials",
@@ -43,10 +62,15 @@ interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
 
 export function OrganizationSidebarNav() {
   return (
-    <div className="h-full space-y-4 border-r pr-4 pt-16">
+    <div className="h-full space-y-4 pr-4 pt-16">
       <div className="space-y-0.5">
         <h2 className="text-xl font-bold tracking-tight">Organization</h2>
       </div>
+      <SidebarNavBlock
+        title="Settings"
+        icon={SettingsIcon}
+        items={settingsNavItems}
+      />
       <SidebarNavBlock
         title="Secrets"
         icon={KeyRoundIcon}
@@ -56,7 +80,6 @@ export function OrganizationSidebarNav() {
     </div>
   )
 }
-const defaultRoute = "general"
 
 export function SidebarNavBlock({
   className,
@@ -66,7 +89,6 @@ export function SidebarNavBlock({
   ...props
 }: SidebarNavProps) {
   const pathname = usePathname()
-  const leafRoute = pathname.split("/").pop()
 
   return (
     <nav
@@ -86,8 +108,7 @@ export function SidebarNavBlock({
           href={item.href}
           className={cn(
             buttonVariants({ variant: "ghost" }),
-            item.href.endsWith(leafRoute ?? defaultRoute) &&
-              "bg-muted-foreground/10",
+            pathname === item.href && "bg-muted-foreground/10",
             "h-8 justify-start hover:cursor-default"
           )}
         >

frontend/src/components/auth/saml.tsx

@@ -1,10 +1,10 @@
 "use client"
 
 import { ComponentPropsWithoutRef, useState } from "react"
+import { authSamlDatabaseLogin } from "@/client"
 
 import { Button } from "@/components/ui/button"
 import { Icons } from "@/components/icons"
-import { authSamlDatabaseLogin } from "@/client"
 
 type SamlSSOButtonProps = ComponentPropsWithoutRef<typeof Button>
 export function SamlSSOButton(props: SamlSSOButtonProps) {

frontend/src/components/auth/sign-in.tsx

@@ -10,7 +10,7 @@ import TracecatIcon from "public/icon.png"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
-import { authConfig } from "@/config/auth"
+import { useAppInfo } from "@/lib/hooks"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {
@@ -33,14 +33,27 @@ import { toast } from "@/components/ui/use-toast"
 import { GoogleOAuthButton } from "@/components/auth/oauth-buttons"
 import { SamlSSOButton } from "@/components/auth/saml"
 import { Icons } from "@/components/icons"
+import { CenteredSpinner } from "@/components/loading/spinner"
 
 export function SignIn({ className }: React.HTMLProps<HTMLDivElement>) {
   const { user } = useAuth()
+  const { appInfo, appInfoIsLoading } = useAppInfo()
   const router = useRouter()
   if (user) {
     router.push("/workspaces")
   }
 
+  if (appInfoIsLoading) {
+    return <CenteredSpinner />
+  }
+
+  const allowedAuthTypes: string[] = appInfo?.auth_allowed_types ?? []
+  const showBasicAuth =
+    allowedAuthTypes.includes("basic") && appInfo?.auth_basic_enabled
+  const showGoogleOauthAuth =
+    allowedAuthTypes.includes("google_oauth") && appInfo?.oauth_google_enabled
+  const showSamlAuth =
+    allowedAuthTypes.includes("saml") && appInfo?.saml_enabled
   return (
     <div
       className={cn(
@@ -57,8 +70,8 @@ export function SignIn({ className }: React.HTMLProps<HTMLDivElement>) {
           </CardDescription>
         </CardHeader>
         <CardContent className="flex-col space-y-2">
-          {authConfig.authTypes.includes("basic") && <BasicLoginForm />}
-          {authConfig.authTypes.length > 1 && (
+          {showBasicAuth && <BasicLoginForm />}
+          {(showGoogleOauthAuth || showSamlAuth) && (
             <div className="relative">
               <div className="absolute inset-0 flex items-center">
                 <span className="w-full border-t" />
@@ -70,15 +83,11 @@ export function SignIn({ className }: React.HTMLProps<HTMLDivElement>) {
               </div>
             </div>
           )}
-          {authConfig.authTypes.includes("google_oauth") && (
-            <GoogleOAuthButton className="w-full" />
-          )}
-          {authConfig.authTypes.includes("saml") && (
-            <SamlSSOButton className="w-full" />
-          )}
+          {showGoogleOauthAuth && <GoogleOAuthButton className="w-full" />}
+          {showSamlAuth && <SamlSSOButton className="w-full" />}
           {/* <GithubOAuthButton disabled className="hover:cur" /> */}
         </CardContent>
-        {authConfig.authTypes.includes("basic") && (
+        {showBasicAuth && (
           <CardFooter className="flex items-center justify-center text-sm text-muted-foreground">
             <div className="mt-4 text-center">
               Don&apos;t have an account?{" "}