diff --git a/lumium-space/pages/auth/signup.tsx b/lumium-space/pages/auth/signup.tsx index 343296be..5acc63dc 100644 --- a/lumium-space/pages/auth/signup.tsx +++ b/lumium-space/pages/auth/signup.tsx @@ -15,11 +15,11 @@ import { FormErrorMessage, Image } from '@chakra-ui/react'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useState } from 'react'; import { useApi } from "@hooks/api"; import Router from 'next/router'; import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; -import { AUTH_SIGNIN, AUTH_SIGNUP, EMAIL_EXISTS, ROOT, SPACES_NEW } from '@routes/space'; +import { AUTH_SIGNIN, AUTH_SIGNUP, AUTH_VERIFY_EMAIL, EMAIL_EXISTS } from '@routes/space'; import Session from 'supertokens-auth-react/recipe/session'; import { useUserInfo } from '@hooks/api'; import { AuthBox } from '@components/auth/AuthBox'; @@ -46,7 +46,7 @@ const SignUp: React.FC = () => { "value": password } ] - }).then(() => Router.push(SPACES_NEW)); + }).then(() => Router.push(AUTH_VERIFY_EMAIL)); } else { setEmailExistsError(true); }; diff --git a/lumium-space/pages/auth/verify-email.tsx b/lumium-space/pages/auth/verify-email.tsx new file mode 100644 index 00000000..e1b75fa3 --- /dev/null +++ b/lumium-space/pages/auth/verify-email.tsx @@ -0,0 +1,48 @@ +import { InfoIcon } from "@chakra-ui/icons"; +import { Box, Button, Fade, Heading, ScaleFade, Text } from "@chakra-ui/react"; +import { Authenticator } from "@components/security/Authenticator"; +import { useApi } from "@hooks/api"; +import { EMAIL_VERIFY, EMAIL_VERIFY_TOKEN, SPACES_NEW } from "@routes/space"; +import Router, { useRouter } from 'next/router'; +import React, { useEffect, useState } from 'react' +export default function VerifyEmail() { + const [api] = useApi(); + const router = useRouter(); + const { token } = router.query; + const [resendIsShown, setResendIsShown] = useState(true); + if (token) { + api.post(EMAIL_VERIFY, { + "method": "token", + "token": token + }).then(() => Router.push(SPACES_NEW)); + }; + useEffect(() => { + api.get(EMAIL_VERIFY).then((promise) => promise.data).then((value) => { + if (value.isVerified) { + Router.push(SPACES_NEW); + }; + }); + }, [api]) + const handleResendEmail = () => { + api.post(EMAIL_VERIFY_TOKEN); + setResendIsShown(false); + }; + return ( + + + + + Verify your E-Mail + + + Check your inbox to access Lumium + + + + + + + ) +} \ No newline at end of file diff --git a/lumium-space/src/components/security/Authenticator.tsx b/lumium-space/src/components/security/Authenticator.tsx index 84fa2f15..81845642 100644 --- a/lumium-space/src/components/security/Authenticator.tsx +++ b/lumium-space/src/components/security/Authenticator.tsx @@ -1,18 +1,26 @@ -import { AUTH_SIGNIN } from "@routes/space"; +import { useApi } from "@hooks/api"; +import { AUTH_SIGNIN, AUTH_VERIFY_EMAIL, EMAIL_VERIFY } from "@routes/space"; import Router from "next/router"; import { useEffect, useState } from "react"; import Session from 'supertokens-auth-react/recipe/session'; export const Authenticator: React.FC = (props) => { + const [api] = useApi(); const [loginStatus, setLoginStatus] = useState(false); useEffect(() => { Session.doesSessionExist().then((loggedIn) => { setLoginStatus(loggedIn) if (!loggedIn) { Router.push(AUTH_SIGNIN) + } else { + api.get(EMAIL_VERIFY).then((promise) => promise.data).then((value) => { + if (!value.isVerified) { + Router.push(AUTH_VERIFY_EMAIL); + }; + }); }; }); - }, []); + }, [Session]); return ( <> {loginStatus && props.children} diff --git a/routes/space/index.ts b/routes/space/index.ts index d9510664..ad68788b 100644 --- a/routes/space/index.ts +++ b/routes/space/index.ts @@ -4,6 +4,7 @@ export const AUTH = ROOT + 'auth'; export const AUTH_SIGNIN = AUTH + '/signin'; export const AUTH_SIGNUP = AUTH + '/signup'; export const AUTH_PASSWORD_RESET = AUTH + '/reset-password'; +export const AUTH_VERIFY_EMAIL = AUTH + '/verify-email'; export const SPACES = ROOT + 'spaces'; export const SPACES_NEW = SPACES + '/new'; export const SPACES_CREATE = SPACES + '/create';