From 43fa21db4f4fe94ca7719015952a2c1f18e85cfb Mon Sep 17 00:00:00 2001
From: ReddixT <reneottenburg@icloud.com>
Date: Sun, 18 Dec 2022 14:25:33 +0100
Subject: [PATCH] feat: add email verification

---
 lumium-space/pages/auth/signup.tsx            |  6 +--
 lumium-space/pages/auth/verify-email.tsx      | 48 +++++++++++++++++++
 .../src/components/security/Authenticator.tsx | 12 ++++-
 routes/space/index.ts                         |  1 +
 4 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 lumium-space/pages/auth/verify-email.tsx

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 (
+        <Authenticator>
+            <Box textAlign="center" py={10} px={6}>
+                <InfoIcon boxSize={'50px'} color={'blue.500'} />
+                <Heading as="h2" size="xl" mt={6} mb={2}>
+                    Verify your E-Mail
+                </Heading>
+                <Text color={'gray.500'}>
+                    Check your inbox to access Lumium
+                </Text>
+                <ScaleFade initialScale={0.9} in={resendIsShown}>
+                    <Button onClick={handleResendEmail}>
+                        Resend E-Mail
+                    </Button>
+                </ScaleFade>
+            </Box>
+        </Authenticator>
+    )
+}
\ 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';