Skip to content

Commit 6b10b0a

Browse files
waleedlatif1waleedlatif1
committed
feat(turnstile): conditionally added CF turnstile to signup
1 parent 86ef8eb commit 6b10b0a

20 files changed

Lines changed: 13736 additions & 318 deletions

File tree

‎apps/sim/app/(auth)/login/login-form.tsx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client'
22

3-
import { useEffect, useRef, useState } from 'react'
3+
import { useEffect, useMemo, useRef, useState } from 'react'
4+
import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile'
45
import { createLogger } from '@sim/logger'
56
import { Eye, EyeOff } from 'lucide-react'
67
import Link from 'next/link'
@@ -86,6 +87,9 @@ export default function LoginPage({
8687
const [password, setPassword] = useState('')
8788
const [passwordErrors, setPasswordErrors] = useState<string[]>([])
8889
const [showValidationError, setShowValidationError] = useState(false)
90+
const [captchaToken, setCaptchaToken] = useState<string | null>(null)
91+
const turnstileRef = useRef<TurnstileInstance>(null)
92+
const turnstileSiteKey = useMemo(() => getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'), [])
8993
const buttonClass = useBrandedButtonClass()
9094

9195
const callbackUrlParam = searchParams?.get('callbackUrl')
@@ -185,7 +189,14 @@ export default function LoginPage({
185189
callbackURL: safeCallbackUrl,
186190
},
187191
{
192+
fetchOptions: {
193+
headers: {
194+
...(captchaToken ? { 'x-captcha-response': captchaToken } : {}),
195+
},
196+
},
188197
onError: (ctx) => {
198+
turnstileRef.current?.reset()
199+
setCaptchaToken(null)
189200
logger.error('Login error:', ctx.error)
190201

191202
if (ctx.error.code?.includes('EMAIL_NOT_VERIFIED')) {
@@ -460,6 +471,17 @@ export default function LoginPage({
460471
</div>
461472
</div>
462473

474+
{turnstileSiteKey && (
475+
<Turnstile
476+
ref={turnstileRef}
477+
siteKey={turnstileSiteKey}
478+
onSuccess={setCaptchaToken}
479+
onError={() => setCaptchaToken(null)}
480+
onExpire={() => setCaptchaToken(null)}
481+
options={{ size: 'invisible' }}
482+
/>
483+
)}
484+
463485
<BrandedButton
464486
type='submit'
465487
disabled={isLoading}

‎apps/sim/app/(auth)/signup/signup-form.tsx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client'
22

3-
import { Suspense, useMemo, useState } from 'react'
3+
import { Suspense, useMemo, useRef, useState } from 'react'
4+
import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile'
45
import { createLogger } from '@sim/logger'
56
import { Eye, EyeOff } from 'lucide-react'
67
import Link from 'next/link'
@@ -90,6 +91,9 @@ function SignupFormContent({
9091
const [emailError, setEmailError] = useState('')
9192
const [emailErrors, setEmailErrors] = useState<string[]>([])
9293
const [showEmailValidationError, setShowEmailValidationError] = useState(false)
94+
const [captchaToken, setCaptchaToken] = useState<string | null>(null)
95+
const turnstileRef = useRef<TurnstileInstance>(null)
96+
const turnstileSiteKey = useMemo(() => getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'), [])
9397
const buttonClass = useBrandedButtonClass()
9498

9599
const redirectUrl = useMemo(
@@ -252,7 +256,14 @@ function SignupFormContent({
252256
name: sanitizedName,
253257
},
254258
{
259+
fetchOptions: {
260+
headers: {
261+
...(captchaToken ? { 'x-captcha-response': captchaToken } : {}),
262+
},
263+
},
255264
onError: (ctx) => {
265+
turnstileRef.current?.reset()
266+
setCaptchaToken(null)
256267
logger.error('Signup error:', ctx.error)
257268
const errorMessage: string[] = ['Failed to create account']
258269

@@ -453,6 +464,17 @@ function SignupFormContent({
453464
</div>
454465
</div>
455466

467+
{turnstileSiteKey && (
468+
<Turnstile
469+
ref={turnstileRef}
470+
siteKey={turnstileSiteKey}
471+
onSuccess={setCaptchaToken}
472+
onError={() => setCaptchaToken(null)}
473+
onExpire={() => setCaptchaToken(null)}
474+
options={{ size: 'invisible' }}
475+
/>
476+
)}
477+
456478
<BrandedButton
457479
type='submit'
458480
disabled={isLoading}

‎apps/sim/app/workspace/[workspaceId]/files/loading.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 6
66
export default function FilesLoading() {
77
return (
88
<div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
9-
<div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
9+
<div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
1010
<div className='flex items-center justify-between'>
1111
<div className='flex items-center gap-[12px]'>
1212
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -18,7 +18,7 @@ export default function FilesLoading() {
1818
</div>
1919
</div>
2020
</div>
21-
<div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
21+
<div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
2222
<div className='flex items-center'>
2323
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
2424
<Skeleton className='ml-[10px] h-[14px] w-[120px] rounded-[4px]' />
@@ -27,7 +27,7 @@ export default function FilesLoading() {
2727
<div className='min-h-0 flex-1 overflow-auto'>
2828
<table className='w-full'>
2929
<thead>
30-
<tr className='border-b border-[var(--border)]'>
30+
<tr className='border-[var(--border)] border-b'>
3131
<th className='w-[40px] px-[12px] py-[8px]'>
3232
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
3333
</th>
@@ -40,7 +40,7 @@ export default function FilesLoading() {
4040
</thead>
4141
<tbody>
4242
{Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
43-
<tr key={rowIndex} className='border-b border-[var(--border)]'>
43+
<tr key={rowIndex} className='border-[var(--border)] border-b'>
4444
<td className='w-[40px] px-[12px] py-[10px]'>
4545
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
4646
</td>

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/loading.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 4
66
export default function DocumentLoading() {
77
return (
88
<div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
9-
<div className='border-b border-[var(--border)] px-[16px] py-[8.5px]'>
9+
<div className='border-[var(--border)] border-b px-[16px] py-[8.5px]'>
1010
<div className='flex items-center justify-between'>
1111
<div className='flex items-center gap-[8px]'>
1212
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -18,7 +18,7 @@ export default function DocumentLoading() {
1818
</div>
1919
</div>
2020
</div>
21-
<div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
21+
<div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
2222
<div className='flex items-center justify-between'>
2323
<div className='flex items-center'>
2424
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -32,7 +32,7 @@ export default function DocumentLoading() {
3232
<div className='min-h-0 flex-1 overflow-auto'>
3333
<table className='w-full'>
3434
<thead>
35-
<tr className='border-b border-[var(--border)]'>
35+
<tr className='border-[var(--border)] border-b'>
3636
<th className='w-[40px] px-[12px] py-[8px]'>
3737
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
3838
</th>
@@ -45,7 +45,7 @@ export default function DocumentLoading() {
4545
</thead>
4646
<tbody>
4747
{Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
48-
<tr key={rowIndex} className='border-b border-[var(--border)]'>
48+
<tr key={rowIndex} className='border-[var(--border)] border-b'>
4949
<td className='w-[40px] px-[12px] py-[10px]'>
5050
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
5151
</td>

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/loading.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 7
66
export default function KnowledgeBaseLoading() {
77
return (
88
<div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
9-
<div className='border-b border-[var(--border)] px-[16px] py-[8.5px]'>
9+
<div className='border-[var(--border)] border-b px-[16px] py-[8.5px]'>
1010
<div className='flex items-center justify-between'>
1111
<div className='flex items-center gap-[8px]'>
1212
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -19,7 +19,7 @@ export default function KnowledgeBaseLoading() {
1919
</div>
2020
</div>
2121
</div>
22-
<div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
22+
<div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
2323
<div className='flex items-center justify-between'>
2424
<div className='flex items-center'>
2525
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -34,7 +34,7 @@ export default function KnowledgeBaseLoading() {
3434
<div className='min-h-0 flex-1 overflow-auto'>
3535
<table className='w-full'>
3636
<thead>
37-
<tr className='border-b border-[var(--border)]'>
37+
<tr className='border-[var(--border)] border-b'>
3838
<th className='w-[40px] px-[12px] py-[8px]'>
3939
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
4040
</th>
@@ -47,7 +47,7 @@ export default function KnowledgeBaseLoading() {
4747
</thead>
4848
<tbody>
4949
{Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
50-
<tr key={rowIndex} className='border-b border-[var(--border)]'>
50+
<tr key={rowIndex} className='border-[var(--border)] border-b'>
5151
<td className='w-[40px] px-[12px] py-[10px]'>
5252
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
5353
</td>

‎apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 6
66
export default function KnowledgeLoading() {
77
return (
88
<div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
9-
<div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
9+
<div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
1010
<div className='flex items-center justify-between'>
1111
<div className='flex items-center gap-[12px]'>
1212
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -18,7 +18,7 @@ export default function KnowledgeLoading() {
1818
</div>
1919
</div>
2020

21-
<div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
21+
<div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
2222
<div className='flex items-center'>
2323
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
2424
<Skeleton className='ml-[10px] h-[14px] w-[160px] rounded-[4px]' />
@@ -28,7 +28,7 @@ export default function KnowledgeLoading() {
2828
<div className='min-h-0 flex-1 overflow-auto'>
2929
<table className='w-full'>
3030
<thead>
31-
<tr className='border-b border-[var(--border)]'>
31+
<tr className='border-[var(--border)] border-b'>
3232
<th className='w-[40px] px-[12px] py-[8px]'>
3333
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
3434
</th>
@@ -41,7 +41,7 @@ export default function KnowledgeLoading() {
4141
</thead>
4242
<tbody>
4343
{Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
44-
<tr key={rowIndex} className='border-b border-[var(--border)]'>
44+
<tr key={rowIndex} className='border-[var(--border)] border-b'>
4545
<td className='w-[40px] px-[12px] py-[10px]'>
4646
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
4747
</td>

‎apps/sim/app/workspace/[workspaceId]/logs/loading.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 6
66
export default function LogsLoading() {
77
return (
88
<div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
9-
<div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
9+
<div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
1010
<div className='flex items-center justify-between'>
1111
<div className='flex items-center gap-[12px]'>
1212
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -21,7 +21,7 @@ export default function LogsLoading() {
2121
</div>
2222
</div>
2323
</div>
24-
<div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
24+
<div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
2525
<div className='flex items-center justify-between'>
2626
<div className='flex items-center'>
2727
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -36,7 +36,7 @@ export default function LogsLoading() {
3636
<div className='min-h-0 flex-1 overflow-auto'>
3737
<table className='w-full'>
3838
<thead>
39-
<tr className='border-b border-[var(--border)]'>
39+
<tr className='border-[var(--border)] border-b'>
4040
<th className='w-[40px] px-[12px] py-[8px]'>
4141
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
4242
</th>
@@ -49,7 +49,7 @@ export default function LogsLoading() {
4949
</thead>
5050
<tbody>
5151
{Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
52-
<tr key={rowIndex} className='border-b border-[var(--border)]'>
52+
<tr key={rowIndex} className='border-[var(--border)] border-b'>
5353
<td className='w-[40px] px-[12px] py-[10px]'>
5454
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
5555
</td>

‎apps/sim/app/workspace/[workspaceId]/scheduled-tasks/loading.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 4
66
export default function ScheduledTasksLoading() {
77
return (
88
<div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
9-
<div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
9+
<div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
1010
<div className='flex items-center justify-between'>
1111
<div className='flex items-center gap-[12px]'>
1212
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -17,7 +17,7 @@ export default function ScheduledTasksLoading() {
1717
</div>
1818
</div>
1919
</div>
20-
<div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
20+
<div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
2121
<div className='flex items-center'>
2222
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
2323
<Skeleton className='ml-[10px] h-[14px] w-[160px] rounded-[4px]' />
@@ -26,7 +26,7 @@ export default function ScheduledTasksLoading() {
2626
<div className='min-h-0 flex-1 overflow-auto'>
2727
<table className='w-full'>
2828
<thead>
29-
<tr className='border-b border-[var(--border)]'>
29+
<tr className='border-[var(--border)] border-b'>
3030
<th className='w-[40px] px-[12px] py-[8px]'>
3131
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
3232
</th>
@@ -39,7 +39,7 @@ export default function ScheduledTasksLoading() {
3939
</thead>
4040
<tbody>
4141
{Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
42-
<tr key={rowIndex} className='border-b border-[var(--border)]'>
42+
<tr key={rowIndex} className='border-[var(--border)] border-b'>
4343
<td className='w-[40px] px-[12px] py-[10px]'>
4444
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
4545
</td>

‎apps/sim/app/workspace/[workspaceId]/tables/[tableId]/loading.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 5
66
export default function TableDetailLoading() {
77
return (
88
<div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
9-
<div className='border-b border-[var(--border)] px-[16px] py-[8.5px]'>
9+
<div className='border-[var(--border)] border-b px-[16px] py-[8.5px]'>
1010
<div className='flex items-center justify-between'>
1111
<div className='flex items-center gap-[8px]'>
1212
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -22,7 +22,7 @@ export default function TableDetailLoading() {
2222
<div className='min-h-0 flex-1 overflow-auto'>
2323
<table className='w-full'>
2424
<thead>
25-
<tr className='border-b border-[var(--border)]'>
25+
<tr className='border-[var(--border)] border-b'>
2626
{Array.from({ length: COLUMN_COUNT }).map((_, i) => (
2727
<th key={i} className='px-[12px] py-[8px] text-left'>
2828
<Skeleton className='h-[12px] w-[72px] rounded-[4px]' />
@@ -32,7 +32,7 @@ export default function TableDetailLoading() {
3232
</thead>
3333
<tbody>
3434
{Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
35-
<tr key={rowIndex} className='border-b border-[var(--border)]'>
35+
<tr key={rowIndex} className='border-[var(--border)] border-b'>
3636
{Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
3737
<td key={colIndex} className='px-[12px] py-[10px]'>
3838
<Skeleton

‎apps/sim/app/workspace/[workspaceId]/tables/loading.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 6
66
export default function TablesLoading() {
77
return (
88
<div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
9-
<div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
9+
<div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
1010
<div className='flex items-center justify-between'>
1111
<div className='flex items-center gap-[12px]'>
1212
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -17,7 +17,7 @@ export default function TablesLoading() {
1717
</div>
1818
</div>
1919
</div>
20-
<div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
20+
<div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
2121
<div className='flex items-center'>
2222
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
2323
<Skeleton className='ml-[10px] h-[14px] w-[120px] rounded-[4px]' />
@@ -26,7 +26,7 @@ export default function TablesLoading() {
2626
<div className='min-h-0 flex-1 overflow-auto'>
2727
<table className='w-full'>
2828
<thead>
29-
<tr className='border-b border-[var(--border)]'>
29+
<tr className='border-[var(--border)] border-b'>
3030
<th className='w-[40px] px-[12px] py-[8px]'>
3131
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
3232
</th>
@@ -39,7 +39,7 @@ export default function TablesLoading() {
3939
</thead>
4040
<tbody>
4141
{Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
42-
<tr key={rowIndex} className='border-b border-[var(--border)]'>
42+
<tr key={rowIndex} className='border-[var(--border)] border-b'>
4343
<td className='w-[40px] px-[12px] py-[10px]'>
4444
<Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
4545
</td>

0 commit comments

Comments
 (0)