114 lines
3.6 KiB
JavaScript
114 lines
3.6 KiB
JavaScript
import { signIn } from 'next-auth/client'
|
|
import Button from 'react-bootstrap/Button'
|
|
import styles from './login.module.css'
|
|
import GithubIcon from '../svgs/github-fill.svg'
|
|
import TwitterIcon from '../svgs/twitter-fill.svg'
|
|
import LightningIcon from '../svgs/bolt.svg'
|
|
import { Form, Input, SubmitButton } from '../components/form'
|
|
import * as Yup from 'yup'
|
|
import { useState } from 'react'
|
|
import Alert from 'react-bootstrap/Alert'
|
|
import { useRouter } from 'next/router'
|
|
import { LightningAuth } from './lightning-auth'
|
|
|
|
export const EmailSchema = Yup.object({
|
|
email: Yup.string().email('email is no good').required('required')
|
|
})
|
|
|
|
export function EmailLoginForm ({ text, callbackUrl }) {
|
|
return (
|
|
<Form
|
|
initial={{
|
|
email: ''
|
|
}}
|
|
schema={EmailSchema}
|
|
onSubmit={async ({ email }) => {
|
|
signIn('email', { email, callbackUrl })
|
|
}}
|
|
>
|
|
<Input
|
|
label='Email'
|
|
name='email'
|
|
placeholder='email@example.com'
|
|
required
|
|
autoFocus
|
|
/>
|
|
<SubmitButton variant='secondary' className={styles.providerButton}>{text || 'Login'} with Email</SubmitButton>
|
|
</Form>
|
|
)
|
|
}
|
|
|
|
export default function Login ({ providers, callbackUrl, error, text, Header, Footer }) {
|
|
const errors = {
|
|
Signin: 'Try signing with a different account.',
|
|
OAuthSignin: 'Try signing with a different account.',
|
|
OAuthCallback: 'Try signing with a different account.',
|
|
OAuthCreateAccount: 'Try signing with a different account.',
|
|
EmailCreateAccount: 'Try signing with a different account.',
|
|
Callback: 'Try signing with a different account.',
|
|
OAuthAccountNotLinked: 'To confirm your identity, sign in with the same account you used originally.',
|
|
EmailSignin: 'Check your email address.',
|
|
CredentialsSignin: 'Lightning auth failed.',
|
|
default: 'Unable to sign in.'
|
|
}
|
|
|
|
const [errorMessage, setErrorMessage] = useState(error && (errors[error] ?? errors.default))
|
|
const router = useRouter()
|
|
|
|
if (router.query.type === 'lightning') {
|
|
return <LightningAuth callbackUrl={callbackUrl} text={text} />
|
|
}
|
|
|
|
return (
|
|
<div className={styles.login}>
|
|
{Header && <Header />}
|
|
{errorMessage &&
|
|
<Alert
|
|
variant='danger'
|
|
onClose={() => setErrorMessage(undefined)}
|
|
dismissible
|
|
>{errorMessage}
|
|
</Alert>}
|
|
<Button
|
|
className={`mt-2 ${styles.providerButton}`}
|
|
variant='primary'
|
|
onClick={() => router.push({
|
|
pathname: router.pathname,
|
|
query: { ...router.query, type: 'lightning' }
|
|
})}
|
|
>
|
|
<LightningIcon
|
|
width={20}
|
|
height={20}
|
|
className='mr-3'
|
|
/>{text || 'Login'} with Lightning
|
|
</Button>
|
|
{providers && Object.values(providers).map(provider => {
|
|
if (provider.name === 'Email' || provider.name === 'Lightning') {
|
|
return null
|
|
}
|
|
const [variant, Icon] =
|
|
provider.name === 'Twitter'
|
|
? ['twitter', TwitterIcon]
|
|
: ['dark', GithubIcon]
|
|
|
|
return (
|
|
<Button
|
|
className={`mt-2 ${styles.providerButton}`}
|
|
key={provider.name}
|
|
variant={variant}
|
|
onClick={() => signIn(provider.id, { callbackUrl })}
|
|
>
|
|
<Icon
|
|
className='mr-3'
|
|
/>{text || 'Login'} with {provider.name}
|
|
</Button>
|
|
)
|
|
})}
|
|
<div className='mt-2 text-center text-muted font-weight-bold'>or</div>
|
|
<EmailLoginForm text={text} callbackUrl={callbackUrl} />
|
|
{Footer && <Footer />}
|
|
</div>
|
|
)
|
|
}
|