Merge pull request #426 from bigcapitalhq/big-163-user-email-verification-after-signing-up

feat: User email verification after signing-up.

packages/webapp/src/components/App.tsx

@@ -9,13 +9,24 @@ import 'moment/locale/ar-ly';
 import 'moment/locale/es-us';
 
 import AppIntlLoader from './AppIntlLoader';
-import PrivateRoute from '@/components/Guards/PrivateRoute';
+import { EnsureAuthenticated } from '@/components/Guards/EnsureAuthenticated';
 import GlobalErrors from '@/containers/GlobalErrors/GlobalErrors';
 import DashboardPrivatePages from '@/components/Dashboard/PrivatePages';
 import { Authentication } from '@/containers/Authentication/Authentication';
 
+import LazyLoader from '@/components/LazyLoader';
 import { SplashScreen, DashboardThemeProvider } from '../components';
 import { queryConfig } from '../hooks/query/base';
+import { EnsureUserEmailVerified } from './Guards/EnsureUserEmailVerified';
+import { EnsureAuthNotAuthenticated } from './Guards/EnsureAuthNotAuthenticated';
+import { EnsureUserEmailNotVerified } from './Guards/EnsureUserEmailNotVerified';
+
+const EmailConfirmation = LazyLoader({
+  loader: () => import('@/containers/Authentication/EmailConfirmation'),
+});
+const RegisterVerify = LazyLoader({
+  loader: () => import('@/containers/Authentication/RegisterVerify'),
+});
 
 /**
  * App inner.
@@ -26,9 +37,30 @@ function AppInsider({ history }) {
       <DashboardThemeProvider>
         <Router history={history}>
           <Switch>
-            <Route path={'/auth'} component={Authentication} />
+            <Route path={'/auth/register/verify'}>
+              <EnsureAuthenticated>
+                <EnsureUserEmailNotVerified>
+                  <RegisterVerify />
+                </EnsureUserEmailNotVerified>
+              </EnsureAuthenticated>
+            </Route>
+
+            <Route path={'/auth/email_confirmation'}>
+              <EmailConfirmation />
+            </Route>
+
+            <Route path={'/auth'}>
+              <EnsureAuthNotAuthenticated>
+                <Authentication />
+              </EnsureAuthNotAuthenticated>
+            </Route>
+
             <Route path={'/'}>
-              <PrivateRoute component={DashboardPrivatePages} />
+              <EnsureAuthenticated>
+                <EnsureUserEmailVerified>
+                  <DashboardPrivatePages />
+                </EnsureUserEmailVerified>
+              </EnsureAuthenticated>
             </Route>
           </Switch>
         </Router>

packages/webapp/src/components/Dashboard/DashboardBoot.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   useAuthenticatedAccount,
   useCurrentOrganization,
@@ -116,6 +116,14 @@ export function useApplicationBoot() {
       isBooted.current = true;
     },
   );
+  // Reset the loading states once the hook unmount.
+  useEffect(
+    () => () => {
+      isAuthUserLoading && !isBooted.current && stopLoading();
+      isOrgLoading && !isBooted.current && stopLoading();
+    },
+    [isAuthUserLoading, isOrgLoading, stopLoading],
+  );
 
   return {
     isLoading: isOrgLoading || isAuthUserLoading,

packages/webapp/src/components/Guards/EnsureAuthNotAuthenticated.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+import { useIsAuthenticated } from '@/hooks/state';
+
+interface EnsureAuthNotAuthenticatedProps {
+  children: React.ReactNode;
+  redirectTo?: string;
+}
+
+export function EnsureAuthNotAuthenticated({
+  children,
+  redirectTo = '/',
+}: EnsureAuthNotAuthenticatedProps) {
+  const isAuthenticated = useIsAuthenticated();
+
+  return !isAuthenticated ? (
+    <>{children}</>
+  ) : (
+    <Redirect to={{ pathname: redirectTo }} />
+  );
+}

packages/webapp/src/components/Guards/EnsureAuthenticated.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+import { useIsAuthenticated } from '@/hooks/state';
+
+interface EnsureAuthenticatedProps {
+  children: React.ReactNode;
+  redirectTo?: string;
+}
+
+export function EnsureAuthenticated({
+  children,
+  redirectTo = '/auth/login',
+}: EnsureAuthenticatedProps) {
+  const isAuthenticated = useIsAuthenticated();
+
+  return isAuthenticated ? (
+    <>{children}</>
+  ) : (
+    <Redirect to={{ pathname: redirectTo }} />
+  );
+}

packages/webapp/src/components/Guards/EnsureUserEmailNotVerified.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+import { useAuthUserVerified } from '@/hooks/state';
+
+interface EnsureUserEmailNotVerifiedProps {
+  children: React.ReactNode;
+  redirectTo?: string;
+}
+
+/**
+ * Higher Order Component to ensure that the user's email is not verified.
+ * If is verified, redirects to the inner setup page.
+ */
+export function EnsureUserEmailNotVerified({
+  children,
+  redirectTo = '/',
+}: EnsureUserEmailNotVerifiedProps) {
+  const isAuthVerified = useAuthUserVerified();
+
+  if (isAuthVerified) {
+    return <Redirect to={{ pathname: redirectTo }} />;
+  }
+  return <>{children}</>;
+}

packages/webapp/src/components/Guards/EnsureUserEmailVerified.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+import { useAuthUserVerified } from '@/hooks/state';
+
+interface EnsureUserEmailVerifiedProps {
+  children: React.ReactNode;
+  redirectTo?: string;
+}
+
+/**
+ * Higher Order Component to ensure that the user's email is verified.
+ * If not verified, redirects to the email verification page.
+ */
+export function EnsureUserEmailVerified({
+  children,
+  redirectTo = '/auth/register/verify',
+}: EnsureUserEmailVerifiedProps) {
+  const isAuthVerified = useAuthUserVerified();
+
+  if (!isAuthVerified) {
+    return <Redirect to={{ pathname: redirectTo }} />;
+  }
+  return <>{children}</>;
+}

packages/webapp/src/components/Guards/PrivateRoute.tsx

@@ -1,19 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import BodyClassName from 'react-body-classname';
-import { Redirect } from 'react-router-dom';
-import { useIsAuthenticated } from '@/hooks/state';
-
-export default function PrivateRoute({ component: Component, ...rest }) {
-  const isAuthenticated = useIsAuthenticated();
-
-  return (
-    <BodyClassName className={''}>
-      {isAuthenticated ? (
-        <Component />
-      ) : (
-        <Redirect to={{ pathname: '/auth/login' }} />
-      )}
-    </BodyClassName>
-  );
-}