implement verify view

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 = () => {
                 <ResetPassword />
               </Route>
 
+              {collections.map((collection) => {
+                if (collection?.auth?.emailVerification) {
+                  return (
+                    <Route
+                      key={`${collection.slug}-verify`}
+                      path={`${match.url}/${collection.slug}/verify/:token`}
+                      exact
+                    >
+                      <Verify />
+                    </Route>
+                  );
+                }
+                return null;
+              })}
+
               <Route
                 render={() => {
                   if (user) {

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 <Login />;
+  }
+
+  return (
+    <MinimalTemplate className={baseClass}>
+      <Meta
+        title="Verify"
+        description="Verify user"
+        keywords="Verify, Payload, CMS"
+      />
+      <div className={`${baseClass}__brand`}>
+        <Logo />
+      </div>
+      <h2>
+        {verifyResult?.status === 200 ? 'Verified Successfully' : 'Unable To Verify'}
+      </h2>
+      {isAdminUser && verifyResult?.status === 200 && (
+        <Button
+          el="link"
+          buttonStyle="secondary"
+          to={`${adminRoute}/login`}
+        >
+          Login
+        </Button>
+      )}
+    </MinimalTemplate>
+  );
+};
+export default Verify;

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);
+  }
+}