diff --git a/src/client/components/Routes.js b/src/client/components/Routes.js index 1523d8673c..97f6b56988 100644 --- a/src/client/components/Routes.js +++ b/src/client/components/Routes.js @@ -11,6 +11,7 @@ import ForgotPassword from './views/ForgotPassword'; import Login from './views/Login'; import Logout from './views/Logout'; import NotFound from './views/NotFound'; +import Verify from './views/Verify'; import CreateFirstUser from './views/CreateFirstUser'; import Edit from './views/collections/Edit'; import EditGlobal from './views/Global'; @@ -77,6 +78,21 @@ const Routes = () => { + {collections.map((collection) => { + if (collection?.auth?.emailVerification) { + return ( + + + + ); + } + return null; + })} + { if (user) { diff --git a/src/client/components/views/Verify/index.js b/src/client/components/views/Verify/index.js new file mode 100644 index 0000000000..1fd7079612 --- /dev/null +++ b/src/client/components/views/Verify/index.js @@ -0,0 +1,62 @@ +import React, { useEffect, useState } from 'react'; +import { useParams, useLocation } from 'react-router-dom'; +import Logo from '../../graphics/Logo'; +import MinimalTemplate from '../../templates/Minimal'; +import Button from '../../elements/Button'; +import Meta from '../../utilities/Meta'; + +import { useConfig } from '../../providers/Config'; +import { useAuthentication } from '../../providers/Authentication'; +import Login from '../Login'; +import './index.scss'; + +const baseClass = 'verify'; + +const Verify = () => { + const { user } = useAuthentication(); + const { token } = useParams(); + const { pathname } = useLocation(); + const { serverURL, routes: { admin: adminRoute }, admin: { user: adminUser } } = useConfig(); + + const collectionToVerify = pathname.split('/')?.[2]; + const isAdminUser = collectionToVerify === adminUser; + const [verifyResult, setVerifyResult] = useState(null); + + useEffect(() => { + async function verifyToken() { + const result = await fetch(`${serverURL}/api/${collectionToVerify}/verify/${token}`, { method: 'POST' }); + setVerifyResult(result); + } + verifyToken(); + }, [setVerifyResult, collectionToVerify, pathname, serverURL, token]); + + if (user) { + return ; + } + + return ( + + +
+ +
+

+ {verifyResult?.status === 200 ? 'Verified Successfully' : 'Unable To Verify'} +

+ {isAdminUser && verifyResult?.status === 200 && ( + + )} +
+ ); +}; +export default Verify; diff --git a/src/client/components/views/Verify/index.scss b/src/client/components/views/Verify/index.scss new file mode 100644 index 0000000000..135b44ea76 --- /dev/null +++ b/src/client/components/views/Verify/index.scss @@ -0,0 +1,16 @@ +@import '../../../scss/styles'; + +.verify { + display: flex; + align-items: center; + text-align: center; + flex-wrap: wrap; + min-height: 100vh; + + &__brand { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: base(2); + } +}