diff --git a/src/components/Login/EmailLoginForm.tsx b/src/components/Login/EmailLoginForm.tsx index d8321b7a5..a64aece6b 100644 --- a/src/components/Login/EmailLoginForm.tsx +++ b/src/components/Login/EmailLoginForm.tsx @@ -6,45 +6,108 @@ import { TOKEN_COOKIE_NAME } from '../../lib/utils'; const EmailLoginForm: FunctionComponent<{}> = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); + const [showVerifiedError, setShowVerifiedError] = useState(false); + const [message, setMessage] = useState(''); + const [error, setError] = useState<{ message: string; status: number; } | null>(null); + const handleFormSubmit = async (e: Event) => { + e.preventDefault(); + const res = await fetch('http://localhost:8080/v1-login', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + email, + password, + }), + }); + const json = await res.json(); + + // If the response isn't ok, we'll throw an error + if (json.type === 'user_not_verified') { + setError(null); + setMessage(''); + setShowVerifiedError(true); + return; + } else { + setShowVerifiedError(false); + } + + if (json.token) { + // If the response is ok, we'll set the token in a cookie + Cookies.set(TOKEN_COOKIE_NAME, json.token); + window.location.href = '/'; + } else { + setError({ + message: json.message, + status: res.status, + }); + } + }; + + const handleResendVerificationEmail = async () => { + // Check if the verification-email-sent-at is less than 5 seconds ago + const verificationEmailSentAt = localStorage.getItem( + 'verification-email-sent-at' + ); + + if (verificationEmailSentAt) { + const now = new Date(); + if (Number(verificationEmailSentAt) > now.getTime()) { + setMessage(''); + setShowVerifiedError(false); + setError({ + message: 'Please wait before sending another verification email.', + status: 429, + }); + return; + } + } + + const res = await fetch( + 'http://localhost:8080/v1-send-verification-email', + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + email, + }), + } + ); + const json = await res.json(); + + // If the response isn't ok, we'll throw an error + if (!res.ok) { + setError({ + message: json.message, + status: res.status, + }); + } + + // If the response is ok, we'll set the token in a cookie + setShowVerifiedError(false); + setMessage('Verification instructions have been sent to your email.'); + + // Current time + 5 seconds, save it to localStorage + const now = new Date(); + const time = now.getTime(); + const expireTime = time + 5000; + now.setTime(expireTime); + localStorage.setItem( + 'verification-email-sent-at', + now.getTime().toString() + ); + }; + return ( -
{ - e.preventDefault(); - fetch('http://localhost:8080/v1-login', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - email, - password, - }), - }) - .then(async (res) => { - const json = await res.json(); - if (res.status === 200) { - Cookies.set(TOKEN_COOKIE_NAME, json.token); - window.location.href = '/'; - } else { - const error = new Error(json.message) as any; - error.status = res.status; - throw error; - } - }) - .catch((err) => { - setError({ - message: err.message, - status: 400, - }); - }); - }} - > + @@ -78,6 +141,22 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
{error.message}
)} + {message &&
{message}
} + + {showVerifiedError && ( +
+ Your account is not verified. Please click the verification link in + your email. Or{' '} + +
+ )} +