Merge pull request #1121 from sharetribe/automatic-email-verification

Verify email automatically and redirect to landing page

CHANGELOG.md

@@ -14,6 +14,10 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [change] Verify email automatically once the verification link is clicked. Redirect the user to
+  the landing page after verification.
+  [#1121](https://github.com/sharetribe/flex-template-web/pull/1121)
+
 ## [v3.0.0] 2019-07-02
 
 - [add] Strong Customer Authentication (SCA) with Stripe's new PaymentIntents flow. This is a big

src/containers/EmailVerificationPage/EmailVerificationPage.js

@@ -8,6 +8,7 @@ import { propTypes } from '../../util/types';
 import { verify } from '../../ducks/EmailVerification.duck';
 import { isScrollingDisabled } from '../../ducks/UI.duck';
 import { parse } from '../../util/urlHelpers';
+import { ensureCurrentUser } from '../../util/data';
 import {
   Page,
   LayoutSingleColumn,
@@ -15,6 +16,7 @@ import {
   LayoutWrapperMain,
   LayoutWrapperFooter,
   Footer,
+  NamedRedirect,
 } from '../../components';
 import { EmailVerificationForm } from '../../forms';
 import { TopbarContainer } from '../../containers';
@@ -32,8 +34,8 @@ import css from './EmailVerificationPage.css';
   the unwanted result of the `parse` method is that it automatically
   parses the token to number.
 */
-const parseVerificationToken = location => {
-  const urlParams = parse(location.search);
+const parseVerificationToken = search => {
+  const urlParams = parse(search);
   const verificationToken = urlParams.t;
 
   if (verificationToken) {
@@ -57,7 +59,14 @@ export const EmailVerificationPageComponent = props => {
     id: 'EmailVerificationPage.title',
   });
 
-  const initialValues = { verificationToken: parseVerificationToken(location) };
+  const initialValues = {
+    verificationToken: parseVerificationToken(location ? location.search : null),
+  };
+
+  const user = ensureCurrentUser(currentUser);
+  if (user && user.attributes.emailVerified) {
+    return <NamedRedirect name="LandingPage" />;
+  }
 
   return (
     <Page title={title} scrollingDisabled={scrollingDisabled} referrer="origin">
@@ -68,11 +77,11 @@ export const EmailVerificationPageComponent = props => {
         <LayoutWrapperMain className={css.layoutWrapperMain}>
           <div className={css.root}>
             <div className={css.content}>
-              {currentUser ? (
+              {user.id ? (
                 <EmailVerificationForm
                   initialValues={initialValues}
                   onSubmit={submitVerification}
-                  currentUser={currentUser}
+                  currentUser={user}
                   inProgress={emailVerificationInProgress}
                   verificationError={verificationError}
                 />
@@ -145,4 +154,9 @@ const EmailVerificationPage = compose(
   injectIntl
 )(EmailVerificationPageComponent);
 
+EmailVerificationPage.loadData = (params, search) => {
+  const token = parseVerificationToken(search);
+  return verify(token);
+};
+
 export default EmailVerificationPage;

src/routeConfiguration.js

@@ -308,6 +308,7 @@ const routeConfiguration = () => {
       auth: true,
       authPage: 'LoginPage',
       component: props => <EmailVerificationPage {...props} />,
+      loadData: EmailVerificationPage.loadData,
     },
   ];
 };