114 lines
3.0 KiB
TypeScript
114 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { useForm } from 'react-hook-form'
|
|
import * as z from 'zod'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { IconSpinner } from '@/components/ui/icons'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage
|
|
} from '@/components/ui/form'
|
|
import { graphql } from '@/lib/gql/generates'
|
|
import { useGraphQLForm } from '@/lib/tabby/gql'
|
|
import { useSignIn } from '@/lib/tabby/auth'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
export const tokenAuth = graphql(/* GraphQL */ `
|
|
mutation tokenAuth($email: String!, $password: String!) {
|
|
tokenAuth(email: $email, password: $password) {
|
|
accessToken
|
|
refreshToken
|
|
}
|
|
}
|
|
`)
|
|
|
|
const formSchema = z.object({
|
|
email: z.string().email('Invalid email address'),
|
|
password: z.string()
|
|
})
|
|
|
|
interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
invitationCode?: string
|
|
}
|
|
|
|
export default function UserSignInForm({
|
|
className,
|
|
invitationCode,
|
|
...props
|
|
}: UserAuthFormProps) {
|
|
const form = useForm<z.infer<typeof formSchema>>({
|
|
resolver: zodResolver(formSchema)
|
|
})
|
|
|
|
const router = useRouter()
|
|
const signIn = useSignIn()
|
|
const { isSubmitting } = form.formState
|
|
const { onSubmit } = useGraphQLForm(tokenAuth, {
|
|
onSuccess: async values => {
|
|
if (await signIn(values.tokenAuth)) {
|
|
router.replace('/')
|
|
}
|
|
},
|
|
onError: (path, message) => form.setError(path as any, { message })
|
|
})
|
|
|
|
return (
|
|
<div className={cn('grid gap-6', className)} {...props}>
|
|
<Form {...form}>
|
|
<form className="grid gap-2" onSubmit={form.handleSubmit(onSubmit)}>
|
|
<FormField
|
|
control={form.control}
|
|
name="email"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Email</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder=""
|
|
type="email"
|
|
autoCapitalize="none"
|
|
autoComplete="email"
|
|
autoCorrect="off"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="password"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Password</FormLabel>
|
|
<FormControl>
|
|
<Input type="password" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<Button type="submit" className="mt-1" disabled={isSubmitting}>
|
|
{isSubmitting && (
|
|
<IconSpinner className="mr-2 h-4 w-4 animate-spin" />
|
|
)}
|
|
Login
|
|
</Button>
|
|
</form>
|
|
<FormMessage className="text-center" />
|
|
</Form>
|
|
</div>
|
|
)
|
|
}
|