120 lines
3.2 KiB
TypeScript
120 lines
3.2 KiB
TypeScript
import {
|
|
Button,
|
|
HTMLChakraProps,
|
|
Input,
|
|
Stack,
|
|
HStack,
|
|
useToast,
|
|
Text,
|
|
} from '@chakra-ui/react'
|
|
import React, { ChangeEvent, FormEvent, useEffect } from 'react'
|
|
import { useState } from 'react'
|
|
import {
|
|
ClientSafeProvider,
|
|
getProviders,
|
|
LiteralUnion,
|
|
signIn,
|
|
useSession,
|
|
} from 'next-auth/react'
|
|
import { DividerWithText } from './DividerWithText'
|
|
import { SocialLoginButtons } from './SocialLoginButtons'
|
|
import { useRouter } from 'next/router'
|
|
import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
|
|
import { BuiltInProviderType } from 'next-auth/providers'
|
|
|
|
type Props = {
|
|
defaultEmail?: string
|
|
}
|
|
export const SignInForm = ({
|
|
defaultEmail,
|
|
}: Props & HTMLChakraProps<'form'>) => {
|
|
const router = useRouter()
|
|
const { status } = useSession()
|
|
const [authLoading, setAuthLoading] = useState(false)
|
|
const [isLoadingProviders, setIsLoadingProviders] = useState(true)
|
|
|
|
const [emailValue, setEmailValue] = useState(defaultEmail ?? '')
|
|
const toast = useToast({
|
|
position: 'top-right',
|
|
})
|
|
const [providers, setProviders] =
|
|
useState<
|
|
Record<LiteralUnion<BuiltInProviderType, string>, ClientSafeProvider>
|
|
>()
|
|
|
|
const hasNoAuthProvider =
|
|
!isLoadingProviders && Object.keys(providers ?? {}).length === 0
|
|
|
|
useEffect(() => {
|
|
if (status === 'authenticated')
|
|
router.replace({ pathname: '/typebots', query: router.query })
|
|
;(async () => {
|
|
const providers = await getProviders()
|
|
setProviders(providers ?? undefined)
|
|
setIsLoadingProviders(false)
|
|
})()
|
|
}, [status, router])
|
|
|
|
const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) =>
|
|
setEmailValue(e.target.value)
|
|
|
|
const handleEmailSubmit = async (e: FormEvent) => {
|
|
e.preventDefault()
|
|
setAuthLoading(true)
|
|
await signIn('email', {
|
|
email: emailValue,
|
|
redirect: false,
|
|
})
|
|
toast({
|
|
status: 'success',
|
|
title: 'Success!',
|
|
description: 'Check your inbox to sign in',
|
|
})
|
|
setAuthLoading(false)
|
|
}
|
|
if (hasNoAuthProvider)
|
|
return (
|
|
<Text>
|
|
You need to{' '}
|
|
<NextChakraLink
|
|
href="https://docs.typebot.io/self-hosting/configuration"
|
|
isExternal
|
|
color="blue.400"
|
|
textDecor="underline"
|
|
>
|
|
configure at least one auth provider
|
|
</NextChakraLink>{' '}
|
|
(Email, Google, GitHub or Facebook).
|
|
</Text>
|
|
)
|
|
return (
|
|
<Stack spacing="4" w="330px">
|
|
<SocialLoginButtons providers={providers} />
|
|
{providers?.email && (
|
|
<>
|
|
<DividerWithText mt="6">Or with your email</DividerWithText>
|
|
<HStack as="form" onSubmit={handleEmailSubmit}>
|
|
<Input
|
|
name="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
placeholder="email@company.com"
|
|
required
|
|
value={emailValue}
|
|
onChange={handleEmailChange}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
isLoading={
|
|
['loading', 'authenticated'].includes(status) || authLoading
|
|
}
|
|
>
|
|
Submit
|
|
</Button>
|
|
</HStack>
|
|
</>
|
|
)}
|
|
</Stack>
|
|
)
|
|
}
|