blsmedia/bot
2
0
Fork 0
Code Activity

🚸 (auth) Disable email sign in button when email was sent

Browse Source 
This will prevent users from spamming the email sign in form
This commit is contained in:
Baptiste Arnaud
2023-01-20 11:29:04 +01:00
parent 0febaf9760
commit eff83d6327
1 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
apps/builder/src/features/auth/components/SignInForm.tsx
View File

@ -6,6 +6,7 @@ import {
HStack, HStack,
Text, Text,
Spinner, Spinner,
Tooltip,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import React, { ChangeEvent, FormEvent, useEffect } from 'react' import React, { ChangeEvent, FormEvent, useEffect } from 'react'
import { useState } from 'react' import { useState } from 'react'
@ -35,6 +36,8 @@ export const SignInForm = ({
const [isLoadingProviders, setIsLoadingProviders] = useState(true) const [isLoadingProviders, setIsLoadingProviders] = useState(true)
const [emailValue, setEmailValue] = useState(defaultEmail ?? '') const [emailValue, setEmailValue] = useState(defaultEmail ?? '')
const [isMagicLinkSent, setIsMagicLinkSent] = useState(false)
const { showToast } = useToast() const { showToast } = useToast()
const [providers, setProviders] = const [providers, setProviders] =
useState< useState<
@ -59,21 +62,25 @@ export const SignInForm = ({
const handleEmailSubmit = async (e: FormEvent) => { const handleEmailSubmit = async (e: FormEvent) => {
e.preventDefault() e.preventDefault()
if (isMagicLinkSent) return
setAuthLoading(true) setAuthLoading(true)
const response = await signIn('email', { const response = await signIn('email', {
email: emailValue, email: emailValue,
redirect: false, redirect: false,
}) })
response?.error if (response?.error) {
? showToast({ showToast({
title: 'Unauthorized', title: 'Unauthorized',
description: 'Sign ups are disabled.', description: 'Sign ups are disabled.',
}) })
: showToast({ } else {
status: 'success', setIsMagicLinkSent(true)
title: 'Success!', showToast({
description: 'Check your inbox to sign in', status: 'success',
}) title: 'Success!',
description: 'Check your inbox to sign in',
})
}
setAuthLoading(false) setAuthLoading(false)
} }
@ -107,14 +114,20 @@ export const SignInForm = ({
value={emailValue} value={emailValue}
onChange={handleEmailChange} onChange={handleEmailChange}
/> />
<Button <Tooltip
type="submit" label="A sign in email was sent. Make sure to check your SPAM folder."
isLoading={ isDisabled={!isMagicLinkSent}
['loading', 'authenticated'].includes(status) || authLoading
}
> >
Submit <Button
</Button> type="submit"
isLoading={
['loading', 'authenticated'].includes(status) || authLoading
}
isDisabled={isMagicLinkSent}
>
Submit
</Button>
</Tooltip>
</HStack> </HStack>
</> </>
)} )}