import { CheckIcon, ExclamationIcon, MailOpenIcon } from "@heroicons/react/outline"; import { getSession, signIn } from "next-auth/react"; import Head from "next/head"; import { useRouter } from "next/router"; import React, { useEffect, useRef, useState } from "react"; import { WEBAPP_URL } from "@calcom/lib/constants"; import showToast from "@calcom/lib/notification"; import Button from "@calcom/ui/Button"; async function sendVerificationLogin(email: string, username: string) { await signIn("email", { email: email.toLowerCase(), username: username.toLowerCase(), redirect: false, callbackUrl: WEBAPP_URL || "https://app.cal.com", }) .then(() => { showToast("Verification email sent", "success"); }) .catch((err) => { showToast(err, "error"); }); } function useSendFirstVerificationLogin() { const router = useRouter(); const { email, username } = router.query; const sent = useRef(false); useEffect(() => { if (router.isReady && !sent.current) { (async () => { await sendVerificationLogin(`${email}`, `${username}`); sent.current = true; })(); } }, [email, router.isReady, username]); } export default function Verify() { const router = useRouter(); const { email, username, t, session_id, cancel } = router.query; const [secondsLeft, setSecondsLeft] = useState(30); // @note: check for t=timestamp and apply disabled state and secondsLeft accordingly // to avoid refresh to skip waiting 30 seconds to re-send email useEffect(() => { const lastSent = new Date(parseInt(`${t}`)); // @note: This double round() looks ugly but it's the only way I came up to get the time difference in seconds const difference = Math.round(Math.round(new Date().getTime() - lastSent.getTime()) / 1000); if (difference < 30) { // If less than 30 seconds, set the seconds left to 30 - difference setSecondsLeft(30 - difference); } else { // else set the seconds left to 0 and disabled false setSecondsLeft(0); } }, [t]); // @note: here we make sure each second is decremented if disabled up to 0. useEffect(() => { if (secondsLeft > 0) { const interval = setInterval(() => { if (secondsLeft > 0) { setSecondsLeft(secondsLeft - 1); } }, 1000); return () => clearInterval(interval); } }, [secondsLeft]); // @note: check for session, redirect to webapp if session found useEffect(() => { let intervalId: NodeJS.Timer, redirecting: boolean; // eslint-disable-next-line prefer-const intervalId = setInterval(async () => { const session = await getSession(); if (session && !redirecting) { // User connected using the magic link -> redirect him/her redirecting = true; // @note: redirect to webapp /getting-started, user will end up with two tabs open with the onboarding 'getting-started' wizard. router.push(WEBAPP_URL + "/getting-started"); } }, 1000); return () => { intervalId && clearInterval(intervalId); }; }, [router]); useSendFirstVerificationLogin(); return (
{/* @note: Ternary can look ugly ant his might be extracted later but I think at 3 it's not yet worth it or too hard to read. */} {cancel ? "Your payment failed" : session_id ? "Payment successful!" : "Verify your email" + " | Cal.com"}
{cancel ? ( ) : session_id ? ( ) : ( )}

{cancel ? "Your payment failed" : session_id ? "Payment successful!" : "Check your Inbox"}

{cancel && (

Your account has been created, but your premium has not been reserved.

)}

We have sent an email to {email} with a link to activate your account.{" "} {cancel && "Once you activate your account you will be able to try purchase your premium username again or select a different one."}

Don't see an email? Click the button below to send another email.

); }