62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { h, type TargetedSubmitEvent } from 'preact'
|
|
import { useCallback } from 'preact/hooks'
|
|
import rek, { type FetchError } from 'rek'
|
|
|
|
import useRequestState from '../../shared/hooks/use_request_state.ts'
|
|
import Button from './button.tsx'
|
|
import Input from './input.tsx'
|
|
import Message from './message.tsx'
|
|
|
|
const RegisterForm = () => {
|
|
const [{ error, pending, success }, actions] = useRequestState<FetchError>()
|
|
|
|
const params = location.search ? new URLSearchParams(location.search) : null
|
|
|
|
const register = useCallback(async (e: TargetedSubmitEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
|
|
actions.pending()
|
|
|
|
const form = e.currentTarget
|
|
|
|
try {
|
|
await rek.post('/auth/register', {
|
|
email: form.email.value,
|
|
password: form.password.value,
|
|
...(params
|
|
? {
|
|
inviteEmail: params.get('email'),
|
|
inviteToken: params.get('token'),
|
|
}
|
|
: {}),
|
|
})
|
|
|
|
actions.success()
|
|
} catch (err) {
|
|
actions.error(err as FetchError)
|
|
}
|
|
}, [])
|
|
|
|
return success ? (
|
|
<Message type='success' noMargin>
|
|
Success! Go to <a href='/admin/login'>login</a>.
|
|
</Message>
|
|
) : (
|
|
<form onSubmit={register}>
|
|
{error && (
|
|
<Message type='error'>
|
|
{error.status}: {error.body?.message || error.message}
|
|
</Message>
|
|
)}
|
|
|
|
<Input name='email' label='Email' type='email' defaultValue={params?.get('email')} required />
|
|
<Input name='password' label='Password' type='password' required />
|
|
<Input name='confirmPassword' label='Confirm Password' type='password' sameAs='password' required />
|
|
|
|
<Button disabled={pending}>Register</Button>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
export default RegisterForm
|