chore: import upstream snapshot with attribution

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

@@ -0,0 +1,134 @@
+'use client'
+
+import { useState } from 'react'
+import { cn, Input, Label } from '@sim/emcn'
+import { createLogger } from '@sim/logger'
+import { toError } from '@sim/utils/errors'
+import { Eye, EyeOff } from 'lucide-react'
+import { AuthSubmitButton } from '@/app/(auth)/components'
+import { useChatPasswordAuth } from '@/hooks/queries/chats'
+
+const logger = createLogger('PasswordAuth')
+
+interface PasswordAuthProps {
+  identifier: string
+}
+
+export default function PasswordAuth({ identifier }: PasswordAuthProps) {
+  const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [showValidationError, setShowValidationError] = useState(false)
+  const [passwordErrors, setPasswordErrors] = useState<string[]>([])
+  const authenticate = useChatPasswordAuth(identifier)
+
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newPassword = e.target.value
+    setPassword(newPassword)
+    setShowValidationError(false)
+    setPasswordErrors([])
+  }
+
+  const handleAuthenticate = async () => {
+    if (!password.trim()) {
+      setPasswordErrors(['Password is required'])
+      setShowValidationError(true)
+      return
+    }
+
+    try {
+      await authenticate.mutateAsync({ password })
+      setPassword('')
+    } catch (error) {
+      logger.error('Authentication error:', error)
+      setPasswordErrors([toError(error).message || 'Invalid password. Please try again.'])
+      setShowValidationError(true)
+    }
+  }
+
+  return (
+    <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>
+
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              handleAuthenticate()
+            }}
+            className='mt-8 w-full max-w-[410px] space-y-6'
+          >
+            <div className='space-y-6'>
+              <div className='flex items-center justify-between'>
+                <Label htmlFor='password'>Password</Label>
+              </div>
+              <div className='relative'>
+                <div className='relative'>
+                  <Input
+                    id='password'
+                    name='password'
+                    required
+                    type={showPassword ? 'text' : 'password'}
+                    autoCapitalize='none'
+                    autoComplete='new-password'
+                    autoCorrect='off'
+                    placeholder='Enter password'
+                    value={password}
+                    onChange={handlePasswordChange}
+                    className={cn(
+                      'pr-10',
+                      showValidationError &&
+                        passwordErrors.length > 0 &&
+                        'border-[var(--text-error)] focus:border-[var(--text-error)]'
+                    )}
+                  />
+                  <button
+                    type='button'
+                    onClick={() => setShowPassword(!showPassword)}
+                    className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                    aria-label={showPassword ? 'Hide password' : 'Show password'}
+                  >
+                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
+                </div>
+                <div
+                  className={cn(
+                    'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                    showValidationError && passwordErrors.length > 0
+                      ? 'grid-rows-[1fr]'
+                      : 'grid-rows-[0fr]'
+                  )}
+                  aria-live='polite'
+                >
+                  <div className='overflow-hidden'>
+                    <div className='mt-1 space-y-1 text-[var(--text-error)] text-xs'>
+                      {passwordErrors.map((error) => (
+                        <p key={error}>{error}</p>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <AuthSubmitButton
+              type='submit'
+              disabled={!password.trim()}
+              loading={authenticate.isPending}
+              loadingLabel='Authenticating…'
+            >
+              Continue
+            </AuthSubmitButton>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}