Skip to content

Commit 37fe350

Browse files
Bill LeoutsakosBill Leoutsakos
Bill Leoutsakos
authored and
Bill Leoutsakos
committed
improvement(ui): share public authentication headings
1 parent febf5d9 commit 37fe350

6 files changed

Lines changed: 42 additions & 49 deletions

File tree

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
44
import { ChipInput, cn, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn'
55
import { createLogger } from '@sim/logger'
66
import { toError } from '@sim/utils/errors'
7+
import { PublicAuthHeader } from '@/components/auth/public-auth-header'
78
import { quickValidateEmail } from '@/lib/messaging/email/validation'
89
import { AuthSubmitButton } from '@/app/(auth)/components'
910
import { AUTH_TEXT_LINK } from '@/app/(auth)/components/auth-button-classes'
@@ -110,16 +111,14 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
110111
<div className='flex flex-1 items-center justify-center px-4 py-16'>
111112
<div className='w-full max-w-[410px]'>
112113
<div className='flex flex-col items-center justify-center'>
113-
<div className='space-y-1 text-center'>
114-
<h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
115-
{showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
116-
</h1>
117-
<p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
118-
{showOtpVerification
114+
<PublicAuthHeader
115+
title={showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
116+
description={
117+
showOtpVerification
119118
? `A verification code has been sent to ${email}`
120-
: 'This chat requires email verification'}
121-
</p>
122-
</div>
119+
: 'This chat requires email verification'
120+
}
121+
/>
123122

124123
<div className='mt-8 w-full max-w-[410px]'>
125124
{!showOtpVerification ? (

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useState } from 'react'
44
import { cn, Label } from '@sim/emcn'
55
import { createLogger } from '@sim/logger'
66
import { toError } from '@sim/utils/errors'
7+
import { PublicAuthHeader } from '@/components/auth/public-auth-header'
78
import { AuthSubmitButton, PasswordInput } from '@/app/(auth)/components'
89
import { useChatPasswordAuth } from '@/hooks/queries/chats'
910

@@ -44,14 +45,10 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) {
4445
<div className='flex flex-1 items-center justify-center px-4 py-16'>
4546
<div className='w-full max-w-[410px]'>
4647
<div className='flex flex-col items-center justify-center'>
47-
<div className='space-y-1 text-center'>
48-
<h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
49-
Password Required
50-
</h1>
51-
<p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
52-
This chat is password-protected
53-
</p>
54-
</div>
48+
<PublicAuthHeader
49+
title='Password Required'
50+
description='This chat is password-protected'
51+
/>
5552

5653
<form
5754
onSubmit={(e) => {

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { ReactNode } from 'react'
2+
import { PublicAuthHeader } from '@/components/auth/public-auth-header'
23
import { SupportFooter } from '@/app/(auth)/components/support-footer'
34
import { LogoShell } from '@/app/(landing)/components/logo-shell'
45

@@ -17,14 +18,7 @@ export function PublicFileAuthShell({ title, subtitle, children }: PublicFileAut
1718
return (
1819
<LogoShell center footer={<SupportFooter position='static' />}>
1920
<div className='flex w-full max-w-lg flex-col items-center justify-center px-4'>
20-
<div className='space-y-1 text-center'>
21-
<h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
22-
{title}
23-
</h1>
24-
<p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
25-
{subtitle}
26-
</p>
27-
</div>
21+
<PublicAuthHeader title={title} description={subtitle} />
2822
<div className='mt-8 w-full max-w-[410px]'>{children}</div>
2923
</div>
3024
</LogoShell>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import type { ReactNode } from 'react'
2+
3+
interface PublicAuthHeaderProps {
4+
title: ReactNode
5+
description: ReactNode
6+
}
7+
8+
/** Heading shared by public chat, file-share and SSO access gates. */
9+
export function PublicAuthHeader({ title, description }: PublicAuthHeaderProps) {
10+
return (
11+
<div className='space-y-1 text-center'>
12+
<h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
13+
{title}
14+
</h1>
15+
<p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
16+
{description}
17+
</p>
18+
</div>
19+
)
20+
}

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { type KeyboardEvent, useState } from 'react'
44
import { ChipInput, Label } from '@sim/emcn'
55
import { createLogger } from '@sim/logger'
66
import { useRouter } from 'next/navigation'
7+
import { PublicAuthHeader } from '@/components/auth/public-auth-header'
78
import { ApiClientError } from '@/lib/api/client/errors'
89
import { requestJson } from '@/lib/api/client/request'
910
import { chatSSOContract } from '@/lib/api/contracts/chats'
@@ -98,14 +99,10 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
9899
<div className='flex flex-1 items-center justify-center px-4 py-16'>
99100
<div className='w-full max-w-[410px]'>
100101
<div className='flex flex-col items-center justify-center'>
101-
<div className='space-y-1 text-center'>
102-
<h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
103-
SSO Authentication
104-
</h1>
105-
<p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
106-
This chat requires SSO authentication
107-
</p>
108-
</div>
102+
<PublicAuthHeader
103+
title='SSO Authentication'
104+
description='This chat requires SSO authentication'
105+
/>
109106

110107
<form
111108
onSubmit={(e) => {

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

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Button, ChipInput, Label } from '@sim/emcn'
55
import { createLogger } from '@sim/logger'
66
import Link from 'next/link'
77
import { useSearchParams } from 'next/navigation'
8+
import { PublicAuthHeader } from '@/components/auth/public-auth-header'
89
import { isApiClientError } from '@/lib/api/client/errors'
910
import { requestJson } from '@/lib/api/client/request'
1011
import { resolveSsoProviderContract } from '@/lib/api/contracts/auth'
@@ -186,22 +187,7 @@ function SSOFormContent({
186187

187188
return (
188189
<>
189-
<div className='space-y-1 text-center'>
190-
<h1
191-
className={
192-
'text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'
193-
}
194-
>
195-
Sign in with SSO
196-
</h1>
197-
<p
198-
className={
199-
'text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'
200-
}
201-
>
202-
Enter your work email to continue
203-
</p>
204-
</div>
190+
<PublicAuthHeader title='Sign in with SSO' description='Enter your work email to continue' />
205191

206192
<form onSubmit={onSubmit} className={'mt-8 space-y-8'}>
207193
{formError && (

0 commit comments

Comments
 (0)