chore: import upstream snapshot with attribution

apps/sim/app/(auth)/reset-password/loading.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from '@sim/emcn'
+
+export default function ResetPasswordLoading() {
+  return (
+    <div className='flex flex-col items-center'>
+      <Skeleton className='h-[38px] w-[160px] rounded-[4px]' />
+      <Skeleton className='mt-3 h-[14px] w-[280px] rounded-[4px]' />
+      <div className='mt-8 w-full space-y-2'>
+        <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-6 h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-6 h-[14px] w-[120px] rounded-[4px]' />
+    </div>
+  )
+}

apps/sim/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from 'next'
+import ResetPasswordPage from '@/app/(auth)/reset-password/reset-password-content'
+
+export const metadata: Metadata = {
+  title: 'Reset Password',
+}
+
+export const dynamic = 'force-dynamic'
+
+export default ResetPasswordPage

apps/sim/app/(auth)/reset-password/reset-password-content.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { Suspense, useState } from 'react'
+import { createLogger } from '@sim/logger'
+import { getErrorMessage } from '@sim/utils/errors'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { requestJson } from '@/lib/api/client/request'
+import { resetPasswordContract } from '@/lib/api/contracts'
+import { AuthHeader, AuthNavPrompt } from '@/app/(auth)/components'
+import { SetNewPasswordForm } from '@/app/(auth)/reset-password/reset-password-form'
+
+const logger = createLogger('ResetPasswordPage')
+
+function ResetPasswordContent() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token')
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [statusMessage, setStatusMessage] = useState<{
+    type: 'success' | 'error' | null
+    text: string
+  }>({
+    type: null,
+    text: '',
+  })
+
+  const tokenError = !token
+    ? 'Invalid or missing reset token. Please request a new password reset link.'
+    : null
+
+  const handleResetPassword = async (password: string) => {
+    if (!token) return
+    try {
+      setIsSubmitting(true)
+      setStatusMessage({ type: null, text: '' })
+
+      await requestJson(resetPasswordContract, {
+        body: {
+          token,
+          newPassword: password,
+        },
+      })
+
+      setStatusMessage({
+        type: 'success',
+        text: 'Password reset successful! Redirecting to login...',
+      })
+
+      setTimeout(() => {
+        router.push('/login?resetSuccess=true')
+      }, 1500)
+    } catch (error) {
+      logger.error('Error resetting password:', { error })
+      setStatusMessage({
+        type: 'error',
+        text: getErrorMessage(error, 'Failed to reset password'),
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <div className='space-y-6'>
+      <AuthHeader title='Reset your password' description='Enter a new password for your account' />
+
+      <SetNewPasswordForm
+        token={token}
+        onSubmit={handleResetPassword}
+        isSubmitting={isSubmitting}
+        statusType={tokenError ? 'error' : statusMessage.type}
+        statusMessage={tokenError ?? statusMessage.text}
+      />
+
+      <AuthNavPrompt href='/login' linkLabel='Back to login' />
+    </div>
+  )
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense fallback={<div className='flex h-screen items-center justify-center'>Loading…</div>}>
+      <ResetPasswordContent />
+    </Suspense>
+  )
+}

apps/sim/app/(auth)/reset-password/reset-password-form.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { useState } from 'react'
+import { cn } from '@sim/emcn'
+import {
+  AuthField,
+  AuthFormMessage,
+  AuthSubmitButton,
+  PasswordInput,
+} from '@/app/(auth)/components'
+
+interface SetNewPasswordFormProps {
+  token: string | null
+  onSubmit: (password: string) => Promise<void>
+  isSubmitting: boolean
+  statusType: 'success' | 'error' | null
+  statusMessage: string
+  className?: string
+}
+
+export function SetNewPasswordForm({
+  token,
+  onSubmit,
+  isSubmitting,
+  statusType,
+  statusMessage,
+  className,
+}: SetNewPasswordFormProps) {
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [validationMessages, setValidationMessages] = useState<string[]>([])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    const errors: string[] = []
+
+    if (password.length < 8) {
+      errors.push('Password must be at least 8 characters long')
+    }
+
+    if (password.length > 100) {
+      errors.push('Password must not exceed 100 characters')
+    }
+
+    if (!/[A-Z]/.test(password)) {
+      errors.push('Password must contain at least one uppercase letter')
+    }
+
+    if (!/[a-z]/.test(password)) {
+      errors.push('Password must contain at least one lowercase letter')
+    }
+
+    if (!/[0-9]/.test(password)) {
+      errors.push('Password must contain at least one number')
+    }
+
+    if (!/[^A-Za-z0-9]/.test(password)) {
+      errors.push('Password must contain at least one special character')
+    }
+
+    if (password !== confirmPassword) {
+      errors.push('Passwords do not match')
+    }
+
+    if (errors.length > 0) {
+      setValidationMessages(errors)
+      return
+    }
+
+    setValidationMessages([])
+    onSubmit(password)
+  }
+
+  const hasValidationErrors = validationMessages.length > 0
+
+  return (
+    <form onSubmit={handleSubmit} className={cn('space-y-6', className)}>
+      <div className='space-y-5'>
+        <AuthField htmlFor='password' label='New Password'>
+          <PasswordInput
+            id='password'
+            autoCapitalize='none'
+            autoComplete='new-password'
+            autoCorrect='off'
+            disabled={isSubmitting || !token}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            placeholder='Enter new password'
+            error={hasValidationErrors}
+          />
+        </AuthField>
+        <AuthField htmlFor='confirmPassword' label='Confirm Password'>
+          <PasswordInput
+            id='confirmPassword'
+            autoCapitalize='none'
+            autoComplete='new-password'
+            autoCorrect='off'
+            disabled={isSubmitting || !token}
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            required
+            placeholder='Confirm new password'
+            error={hasValidationErrors}
+          />
+        </AuthField>
+
+        {hasValidationErrors && (
+          <AuthFormMessage type='error'>
+            {validationMessages.map((error) => (
+              <p key={error}>{error}</p>
+            ))}
+          </AuthFormMessage>
+        )}
+
+        {statusType && statusMessage && (
+          <AuthFormMessage type={statusType === 'success' ? 'success' : 'error'}>
+            <p>{statusMessage}</p>
+          </AuthFormMessage>
+        )}
+      </div>
+
+      <AuthSubmitButton
+        loading={isSubmitting}
+        loadingLabel='Resetting…'
+        disabled={!token || password.length === 0 || confirmPassword.length === 0}
+      >
+        Reset Password
+      </AuthSubmitButton>
+    </form>
+  )
+}