mirror of
https://github.com/simstudioai/sim.git
synced 2026-04-06 03:00:16 -04:00
680c9cddf0
* fix(sidebar): show icon-sized skeletons in collapsed settings sidebar * fix(sidebar): hide expanded skeletons during pre-hydration in collapsed settings * fix(sidebar): align collapsed settings skeletons with actual icon positions * fix(sidebar): match collapsed skeleton section grouping with loaded layout * fix(sidebar): hoist skeleton section counts to module constant * improvement(ui): align all public pages with dark landing theme and improve whitelabeling * fix(ui): address PR review comments - restore StatusPageLayout wrapper, improve whitelabel detection * fix(ui): add missing dark class to 404 page, add relative positioning to invite layout * fix(ui): fallback to white button when whitelabeled without primary color * improvement(seo): add x-default hreflang, speakable schema to landing and blog posts * fix(ui): fix OTP/input light-mode styles and add missing header classes on standalone auth pages * undo hardcoded ff config * update old components/ui usage to emcn * fix(ui): add SupportFooter to InviteLayout, remove duplicates from unsubscribe page * fix(ui): fix invite layout flex centering, use BrandedButton on 404 page * fix(ui): fix OTP group styling, props spread order in BrandedButton, invite header shrink-0 * fix: enterprise hydration error --------- Co-authored-by: Emir Karabeg <emirkarabeg@berkeley.edu>
93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Eye, EyeOff } from 'lucide-react'
|
|
import { Input, Label } from '@/components/emcn'
|
|
import { cn } from '@/lib/core/utils/cn'
|
|
import AuthBackground from '@/app/(auth)/components/auth-background'
|
|
import { BrandedButton } from '@/app/(auth)/components/branded-button'
|
|
import { SupportFooter } from '@/app/(auth)/components/support-footer'
|
|
import Navbar from '@/app/(home)/components/navbar/navbar'
|
|
|
|
interface PasswordAuthProps {
|
|
onSubmit: (password: string) => void
|
|
error?: string | null
|
|
}
|
|
|
|
export function PasswordAuth({ onSubmit, error }: PasswordAuthProps) {
|
|
const [password, setPassword] = useState('')
|
|
const [showPassword, setShowPassword] = useState(false)
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!password.trim()) return
|
|
|
|
setIsSubmitting(true)
|
|
try {
|
|
await onSubmit(password)
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AuthBackground className='dark font-[430] font-season'>
|
|
<main className='relative flex min-h-screen flex-col text-[#ECECEC]'>
|
|
<header className='shrink-0 bg-[#1C1C1C]'>
|
|
<Navbar logoOnly />
|
|
</header>
|
|
<div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
|
|
<div className='w-full max-w-lg px-4'>
|
|
<div className='flex flex-col items-center justify-center'>
|
|
<div className='space-y-1 text-center'>
|
|
<h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>
|
|
Password Required
|
|
</h1>
|
|
<p className='font-[380] text-[#999] text-[16px]'>
|
|
Enter the password to access this form.
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className='mt-8 w-full max-w-[410px] space-y-6'>
|
|
<div className='space-y-2'>
|
|
<Label htmlFor='form-password'>Password</Label>
|
|
<div className='relative'>
|
|
<Input
|
|
id='form-password'
|
|
type={showPassword ? 'text' : 'password'}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder='Enter password'
|
|
className={cn(error && 'border-red-500 focus:border-red-500')}
|
|
autoFocus
|
|
/>
|
|
<button
|
|
type='button'
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] hover:text-[#ECECEC]'
|
|
>
|
|
{showPassword ? <EyeOff className='h-4 w-4' /> : <Eye className='h-4 w-4' />}
|
|
</button>
|
|
</div>
|
|
{error && <p className='text-[14px] text-red-500'>{error}</p>}
|
|
</div>
|
|
|
|
<BrandedButton
|
|
type='submit'
|
|
disabled={!password.trim()}
|
|
loading={isSubmitting}
|
|
loadingText='Verifying'
|
|
>
|
|
Continue
|
|
</BrandedButton>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<SupportFooter position='absolute' />
|
|
</main>
|
|
</AuthBackground>
|
|
)
|
|
}
|