75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
|
import { useState, type FormEvent } from 'react'
|
||
|
|
import { useNavigate } from 'react-router-dom'
|
||
|
|
import { api, ApiError } from '../api'
|
||
|
|
import { useAuth } from '../auth'
|
||
|
|
|
||
|
|
export default function SetupPage() {
|
||
|
|
const { onSetupComplete } = useAuth()
|
||
|
|
const navigate = useNavigate()
|
||
|
|
const [username, setUsername] = useState('')
|
||
|
|
const [password, setPassword] = useState('')
|
||
|
|
const [error, setError] = useState<string | null>(null)
|
||
|
|
const [busy, setBusy] = useState(false)
|
||
|
|
|
||
|
|
async function submit(e: FormEvent) {
|
||
|
|
e.preventDefault()
|
||
|
|
setBusy(true)
|
||
|
|
setError(null)
|
||
|
|
try {
|
||
|
|
const { user } = await api.setup(username, password)
|
||
|
|
onSetupComplete(user)
|
||
|
|
navigate('/library', { replace: true })
|
||
|
|
} catch (err) {
|
||
|
|
setError(err instanceof ApiError ? err.detail ?? err.code : 'Something went wrong')
|
||
|
|
} finally {
|
||
|
|
setBusy(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-dvh bg-neutral-950 text-neutral-100 flex items-center justify-center p-4">
|
||
|
|
<form onSubmit={submit} className="w-full max-w-sm space-y-4">
|
||
|
|
<h1 className="text-2xl font-semibold">Welcome to record-shop</h1>
|
||
|
|
<p className="text-sm text-neutral-400">Create the admin account to get started.</p>
|
||
|
|
<div>
|
||
|
|
<label htmlFor="username" className="mb-1 block text-sm">
|
||
|
|
Username
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
id="username"
|
||
|
|
value={username}
|
||
|
|
onChange={(e) => setUsername(e.target.value)}
|
||
|
|
className="w-full rounded-lg border border-neutral-700 bg-neutral-900 px-3 py-2"
|
||
|
|
autoComplete="username"
|
||
|
|
required
|
||
|
|
minLength={3}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label htmlFor="password" className="mb-1 block text-sm">
|
||
|
|
Password
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
id="password"
|
||
|
|
type="password"
|
||
|
|
value={password}
|
||
|
|
onChange={(e) => setPassword(e.target.value)}
|
||
|
|
className="w-full rounded-lg border border-neutral-700 bg-neutral-900 px-3 py-2"
|
||
|
|
autoComplete="new-password"
|
||
|
|
required
|
||
|
|
minLength={8}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{error && <p className="text-sm text-red-400">{error}</p>}
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
disabled={busy}
|
||
|
|
className="w-full rounded-lg bg-emerald-500 py-2 font-medium text-neutral-950 disabled:opacity-50"
|
||
|
|
>
|
||
|
|
Create admin account
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|