71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { gql, useQuery } from '@apollo/client';
|
|
import { Heading, Input, Stack } from '@chakra-ui/react';
|
|
import { Button } from '@client/components/ui/button';
|
|
import { Field } from '@client/components/ui/field';
|
|
import { createFileRoute } from '@tanstack/react-router';
|
|
import { useForm } from 'react-hook-form';
|
|
import { valibotResolver } from '@hookform/resolvers/valibot';
|
|
import * as v from 'valibot';
|
|
|
|
export const Route = createFileRoute('/login')({
|
|
component: LoginComponent
|
|
});
|
|
|
|
function LoginComponent() {
|
|
// const { data } = useQuery(getBooksQuery);
|
|
|
|
return (
|
|
<Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
|
|
<Heading>Login</Heading>
|
|
<Login />
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
interface FormValues {
|
|
email: string;
|
|
password: string;
|
|
}
|
|
|
|
function Login() {
|
|
const schema = v.pipe(
|
|
v.object({
|
|
email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email')),
|
|
password: v.pipe(v.string(), v.nonEmpty('Password is required'))
|
|
})
|
|
);
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors }
|
|
} = useForm<FormValues>({ resolver: valibotResolver(schema) });
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit(data => alert(data))}>
|
|
<Stack>
|
|
<Field label="Email" invalid={errors.email != null} errorText={errors.email?.message}>
|
|
<Input {...register('email')} />
|
|
</Field>
|
|
<Field
|
|
label="Password"
|
|
invalid={errors.password != null}
|
|
errorText={errors.password?.message}
|
|
>
|
|
<Input {...register('password')} />
|
|
</Field>
|
|
<Button type="submit">Sign in</Button>
|
|
</Stack>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
/* const getBooksQuery = gql`
|
|
query BooksMany {
|
|
booksMany {
|
|
id
|
|
author
|
|
title
|
|
}
|
|
}
|
|
`; */
|