Julien Valverdé
93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
import { runtime } from "@/runtime"
|
|
import { Button, Callout, Container, Flex, TextField } from "@radix-ui/themes"
|
|
import { createFileRoute } from "@tanstack/react-router"
|
|
import { Array, Effect, Option, Schema } from "effect"
|
|
import { Component, Form } from "effect-fc"
|
|
import { useContext, useSubscribables } from "effect-fc/hooks"
|
|
|
|
|
|
const email = Schema.pattern<typeof Schema.String>(
|
|
/^(?!\.)(?!.*\.\.)([A-Z0-9_+-.]*)[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\.)+[A-Z]{2,}$/i,
|
|
|
|
{
|
|
identifier: "email",
|
|
title: "email",
|
|
message: () => "Not an email address",
|
|
},
|
|
)
|
|
|
|
const RegisterFormSchema = Schema.Struct({
|
|
email: Schema.String.pipe(email),
|
|
password: Schema.String.pipe(Schema.minLength(3)),
|
|
})
|
|
|
|
class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
|
|
scoped: Form.service({
|
|
schema: RegisterFormSchema,
|
|
initialEncodedValue: { email: "", password: "" },
|
|
submit: () => Effect.void,
|
|
})
|
|
}) {}
|
|
|
|
class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
|
|
const form = yield* RegisterForm
|
|
const emailField = Form.useField(form, ["email"])
|
|
const passwordField = Form.useField(form, ["password"])
|
|
const emailInput = yield* Form.useInput(emailField, { debounce: "200 millis" })
|
|
const passwordInput = yield* Form.useInput(passwordField, { debounce: "200 millis" })
|
|
|
|
const [canSubmit] = yield* useSubscribables(form.canSubmitSubscribable)
|
|
|
|
return (
|
|
<Container>
|
|
<Flex direction="column" gap="2">
|
|
<TextField.Root
|
|
value={emailInput.value}
|
|
onChange={e => emailInput.setValue(e.target.value)}
|
|
/>
|
|
|
|
{Option.match(Array.head(emailInput.issues), {
|
|
onSome: issue => (
|
|
<Callout.Root>
|
|
<Callout.Text>{issue.message}</Callout.Text>
|
|
</Callout.Root>
|
|
),
|
|
|
|
onNone: () => <></>,
|
|
})}
|
|
|
|
<TextField.Root
|
|
value={passwordInput.value}
|
|
onChange={e => passwordInput.setValue(e.target.value)}
|
|
/>
|
|
|
|
{Option.match(Array.head(passwordInput.issues), {
|
|
onSome: issue => (
|
|
<Callout.Root>
|
|
<Callout.Text>{issue.message}</Callout.Text>
|
|
</Callout.Root>
|
|
),
|
|
|
|
onNone: () => <></>,
|
|
})}
|
|
|
|
<Button disabled={!canSubmit}>Submit</Button>
|
|
</Flex>
|
|
</Container>
|
|
)
|
|
}) {}
|
|
|
|
|
|
const RegisterRoute = Component.makeUntraced(function* RegisterRoute() {
|
|
const context = yield* useContext(RegisterForm.Default, { finalizerExecutionMode: "fork" })
|
|
const RegisterRouteFC = yield* Effect.provide(RegisterPage, context)
|
|
|
|
return <RegisterRouteFC />
|
|
}).pipe(
|
|
Component.withRuntime(runtime.context)
|
|
)
|
|
|
|
export const Route = createFileRoute("/form")({
|
|
component: RegisterRoute
|
|
})
|