2
0

build(docker): 🧱 Improve runtime environment

This commit is contained in:
Baptiste Arnaud
2022-05-30 16:40:13 +02:00
parent 92cd56e5d0
commit a04a11ae02
19 changed files with 308 additions and 174 deletions

View File

@ -9,20 +9,18 @@ import {
} from '@chakra-ui/react'
import React, { ChangeEvent, FormEvent, useEffect } from 'react'
import { useState } from 'react'
import { signIn, useSession } from 'next-auth/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 { isEmpty, isNotEmpty } from 'utils'
const hasNoAuthProvider =
(isEmpty(process.env.NEXT_PUBLIC_SMTP_FROM) ||
process.env.NEXT_PUBLIC_SMTP_AUTH_DISABLED === 'true') &&
isEmpty(process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) &&
isEmpty(process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID) &&
isEmpty(process.env.NEXT_PUBLIC_FACEBOOK_CLIENT_ID) &&
isEmpty(process.env.NEXT_PUBLIC_GITLAB_CLIENT_ID)
import { BuiltInProviderType } from 'next-auth/providers'
type Props = {
defaultEmail?: string
@ -33,14 +31,28 @@ export const SignInForm = ({
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>) =>
@ -77,32 +89,31 @@ export const SignInForm = ({
)
return (
<Stack spacing="4" w="330px">
<SocialLoginButtons />
{isNotEmpty(process.env.NEXT_PUBLIC_SMTP_FROM) &&
process.env.NEXT_PUBLIC_SMTP_AUTH_DISABLED !== 'true' && (
<>
<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>
</>
)}
<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>
)
}

View File

@ -1,13 +1,24 @@
import { Stack, Button } from '@chakra-ui/react'
import { GithubIcon } from 'assets/icons'
import { signIn, useSession } from 'next-auth/react'
import {
ClientSafeProvider,
LiteralUnion,
signIn,
useSession,
} from 'next-auth/react'
import { useRouter } from 'next/router'
import React from 'react'
import { stringify } from 'qs'
import { FacebookLogo, GoogleLogo, GitlabLogo } from 'assets/logos'
import { isEmpty } from 'utils'
import { BuiltInProviderType } from 'next-auth/providers'
export const SocialLoginButtons = () => {
type Props = {
providers:
| Record<LiteralUnion<BuiltInProviderType, string>, ClientSafeProvider>
| undefined
}
export const SocialLoginButtons = ({ providers }: Props) => {
const { query } = useRouter()
const { status } = useSession()
@ -33,7 +44,7 @@ export const SocialLoginButtons = () => {
return (
<Stack>
{!isEmpty(process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID) && (
{providers?.github && (
<Button
leftIcon={<GithubIcon />}
onClick={handleGitHubClick}
@ -44,7 +55,7 @@ export const SocialLoginButtons = () => {
Continue with GitHub
</Button>
)}
{!isEmpty(process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) && (
{providers?.google && (
<Button
leftIcon={<GoogleLogo />}
onClick={handleGoogleClick}
@ -55,7 +66,7 @@ export const SocialLoginButtons = () => {
Continue with Google
</Button>
)}
{!isEmpty(process.env.NEXT_PUBLIC_FACEBOOK_CLIENT_ID) && (
{providers?.facebook && (
<Button
leftIcon={<FacebookLogo />}
onClick={handleFacebookClick}
@ -66,7 +77,7 @@ export const SocialLoginButtons = () => {
Continue with Facebook
</Button>
)}
{!isEmpty(process.env.NEXT_PUBLIC_GITLAB_CLIENT_ID) && (
{providers?.gitlab && (
<Button
leftIcon={<GitlabLogo />}
onClick={handleGitlabClick}
@ -74,10 +85,7 @@ export const SocialLoginButtons = () => {
isLoading={['loading', 'authenticated'].includes(status)}
variant="outline"
>
Continue with{' '}
{isEmpty(process.env.NEXT_PUBLIC_GITLAB_NAME)
? 'GitLab'
: process.env.NEXT_PUBLIC_GITLAB_NAME}
Continue with {providers.gitlab.name}
</Button>
)}
</Stack>