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

feat: User email verification after signing-up.

packages/webapp/src/containers/Authentication/AuthContainer.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import styled from 'styled-components';
+import { Icon, FormattedMessage as T } from '@/components';
+
+interface AuthContainerProps {
+  children: React.ReactNode;
+}
+
+export function AuthContainer({ children }: AuthContainerProps) {
+  return (
+    <AuthPage>
+      <AuthInsider>
+        <AuthLogo>
+          <Icon icon="bigcapital" height={37} width={214} />
+        </AuthLogo>
+
+        {children}
+      </AuthInsider>
+    </AuthPage>
+  );
+}
+
+const AuthPage = styled.div``;
+const AuthInsider = styled.div`
+  width: 384px;
+  margin: 0 auto;
+  margin-bottom: 40px;
+  padding-top: 80px;
+`;
+
+const AuthLogo = styled.div`
+  text-align: center;
+  margin-bottom: 40px;
+`;

packages/webapp/src/containers/Authentication/Authentication.tsx

@@ -1,24 +1,16 @@
 // @ts-nocheck
-import React from 'react';
-import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
+import { Route, Switch, useLocation } from 'react-router-dom';
 import BodyClassName from 'react-body-classname';
 import styled from 'styled-components';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
 import authenticationRoutes from '@/routes/authentication';
 import { Icon, FormattedMessage as T } from '@/components';
-import { useIsAuthenticated } from '@/hooks/state';
 import { AuthMetaBootProvider } from './AuthMetaBoot';
 
 import '@/style/pages/Authentication/Auth.scss';
 
 export function Authentication() {
-  const to = { pathname: '/' };
-  const isAuthenticated = useIsAuthenticated();
-
-  if (isAuthenticated) {
-    return <Redirect to={to} />;
-  }
   return (
     <BodyClassName className={'authentication'}>
       <AuthPage>

packages/webapp/src/containers/Authentication/EmailConfirmation.tsx

@@ -0,0 +1,46 @@
+// @ts-nocheck
+import { useEffect, useMemo } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
+import { useAuthSignUpVerify } from '@/hooks/query';
+import { AppToaster } from '@/components';
+import { Intent } from '@blueprintjs/core';
+
+function useQuery() {
+  const { search } = useLocation();
+  return useMemo(() => new URLSearchParams(search), [search]);
+}
+
+export default function EmailConfirmation() {
+  const { mutateAsync: authSignupVerify } = useAuthSignUpVerify();
+  const history = useHistory();
+  const query = useQuery();
+
+  const token = query.get('token');
+  const email = query.get('email');
+
+  useEffect(() => {
+    if (!token || !email) {
+      history.push('/auth/login');
+    }
+  }, [history, token, email]);
+
+  useEffect(() => {
+    authSignupVerify({ token, email })
+      .then(() => {
+        AppToaster.show({
+          message: 'Your email has been verified, Congrats!',
+          intent: Intent.SUCCESS,
+        });
+        history.push('/');
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong',
+          intent: Intent.DANGER,
+        });
+        history.push('/');
+      });
+  }, [token, email, authSignupVerify, history]);
+
+  return null;
+}

packages/webapp/src/containers/Authentication/RegisterVerify.module.scss

@@ -0,0 +1,18 @@
+
+.root {
+  text-align: center;
+}
+
+.title{
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: #252A31;
+}
+
+.description{
+  margin-bottom: 1rem;
+  font-size: 15px;
+  line-height: 1.45;
+  color: #404854;
+}

packages/webapp/src/containers/Authentication/RegisterVerify.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+import { Button, Intent } from '@blueprintjs/core';
+import AuthInsider from './AuthInsider';
+import { AuthInsiderCard } from './_components';
+import styles from './RegisterVerify.module.scss';
+import { AppToaster, Stack } from '@/components';
+import { useAuthActions } from '@/hooks/state';
+import { useAuthSignUpVerifyResendMail } from '@/hooks/query';
+import { AuthContainer } from './AuthContainer';
+
+export default function RegisterVerify() {
+  const { setLogout } = useAuthActions();
+  const { mutateAsync: resendSignUpVerifyMail, isLoading } =
+    useAuthSignUpVerifyResendMail();
+
+  const handleResendMailBtnClick = () => {
+    resendSignUpVerifyMail()
+      .then(() => {
+        AppToaster.show({
+          intent: Intent.SUCCESS,
+          message: 'The verification mail has sent successfully.',
+        });
+      })
+      .catch(() => {
+        AppToaster.show({
+          intent: Intent.DANGER,
+          message: 'Something went wrong.',
+        });
+      });
+  };
+  const handleSignOutBtnClick = () => {
+    setLogout();
+  };
+
+  return (
+    <AuthContainer>
+      <AuthInsider>
+        <AuthInsiderCard className={styles.root}>
+          <h2 className={styles.title}>Please verify your email</h2>
+          <p className={styles.description}>
+            We sent an email to <strong>asdahmed@gmail.com</strong> Click the
+            link inside to get started.
+          </p>
+
+          <Stack spacing={4}>
+            <Button
+              large
+              fill
+              loading={isLoading}
+              intent={Intent.NONE}
+              onClick={handleResendMailBtnClick}
+            >
+              Resend email
+            </Button>
+
+            <Button
+              large
+              fill
+              minimal
+              intent={Intent.DANGER}
+              onClick={handleSignOutBtnClick}
+            >
+              Not my email
+            </Button>
+          </Stack>
+        </AuthInsiderCard>
+      </AuthInsider>
+    </AuthContainer>
+  );
+}