improvement(ui): share public authentication headings

apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { ChipInput, cn, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { AuthSubmitButton } from '@/app/(auth)/components'
 import { AUTH_TEXT_LINK } from '@/app/(auth)/components/auth-button-classes'
@@ -110,16 +111,14 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
     <div className='flex flex-1 items-center justify-center px-4 py-16'>
       <div className='w-full max-w-[410px]'>
         <div className='flex flex-col items-center justify-center'>
-          <div className='space-y-1 text-center'>
-            <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-              {showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
-            </h1>
-            <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-              {showOtpVerification
+          <PublicAuthHeader
+            title={showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
+            description={
+              showOtpVerification
                 ? `A verification code has been sent to ${email}`
-                : 'This chat requires email verification'}
-            </p>
-          </div>
+                : 'This chat requires email verification'
+            }
+          />
 
           <div className='mt-8 w-full max-w-[410px]'>
             {!showOtpVerification ? (

apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { cn, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { AuthSubmitButton, PasswordInput } from '@/app/(auth)/components'
 import { useChatPasswordAuth } from '@/hooks/queries/chats'
 
@@ -44,14 +45,10 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) {
     <div className='flex flex-1 items-center justify-center px-4 py-16'>
       <div className='w-full max-w-[410px]'>
         <div className='flex flex-col items-center justify-center'>
-          <div className='space-y-1 text-center'>
-            <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-              Password Required
-            </h1>
-            <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-              This chat is password-protected
-            </p>
-          </div>
+          <PublicAuthHeader
+            title='Password Required'
+            description='This chat is password-protected'
+          />
 
           <form
             onSubmit={(e) => {

apps/sim/app/f/[token]/public-file-auth-shell.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { SupportFooter } from '@/app/(auth)/components/support-footer'
 import { LogoShell } from '@/app/(landing)/components/logo-shell'
 
@@ -17,14 +18,7 @@ export function PublicFileAuthShell({ title, subtitle, children }: PublicFileAut
   return (
     <LogoShell center footer={<SupportFooter position='static' />}>
       <div className='flex w-full max-w-lg flex-col items-center justify-center px-4'>
-        <div className='space-y-1 text-center'>
-          <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-            {title}
-          </h1>
-          <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-            {subtitle}
-          </p>
-        </div>
+        <PublicAuthHeader title={title} description={subtitle} />
         <div className='mt-8 w-full max-w-[410px]'>{children}</div>
       </div>
     </LogoShell>

apps/sim/components/auth/public-auth-header.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+
+interface PublicAuthHeaderProps {
+  title: ReactNode
+  description: ReactNode
+}
+
+/** Heading shared by public chat, file-share and SSO access gates. */
+export function PublicAuthHeader({ title, description }: PublicAuthHeaderProps) {
+  return (
+    <div className='space-y-1 text-center'>
+      <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
+        {title}
+      </h1>
+      <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
+        {description}
+      </p>
+    </div>
+  )
+}

apps/sim/ee/sso/components/sso-auth.tsx

@@ -4,6 +4,7 @@ import { type KeyboardEvent, useState } from 'react'
 import { ChipInput, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { useRouter } from 'next/navigation'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { ApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import { chatSSOContract } from '@/lib/api/contracts/chats'
@@ -98,14 +99,10 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
     <div className='flex flex-1 items-center justify-center px-4 py-16'>
       <div className='w-full max-w-[410px]'>
         <div className='flex flex-col items-center justify-center'>
-          <div className='space-y-1 text-center'>
-            <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-              SSO Authentication
-            </h1>
-            <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-              This chat requires SSO authentication
-            </p>
-          </div>
+          <PublicAuthHeader
+            title='SSO Authentication'
+            description='This chat requires SSO authentication'
+          />
 
           <form
             onSubmit={(e) => {

apps/sim/ee/sso/components/sso-form.tsx

@@ -5,6 +5,7 @@ import { Button, ChipInput, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { isApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import { resolveSsoProviderContract } from '@/lib/api/contracts/auth'
@@ -186,22 +187,7 @@ function SSOFormContent({
 
   return (
     <>
-      <div className='space-y-1 text-center'>
-        <h1
-          className={
-            'text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'
-          }
-        >
-          Sign in with SSO
-        </h1>
-        <p
-          className={
-            'text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'
-          }
-        >
-          Enter your work email to continue
-        </p>
-      </div>
+      <PublicAuthHeader title='Sign in with SSO' description='Enter your work email to continue' />
 
       <form onSubmit={onSubmit} className={'mt-8 space-y-8'}>
         {formError && (