Fix/redirect to login page after activate an account

src/components/Account/Activate/Activate.actions.js

@@ -7,11 +7,7 @@ export function activate(url) {
   return axios
     .post(`${API_URL}user/activate/${url}`)
     .then(response => {
-      setTimeout(() => {
-        window.location.href = '/';
-      }, 1000);
-
-      return response.data;
+      return { ...response.data, success: true };
     })
     .catch(get('response.data'));
 }

src/components/Account/Activate/Activate.container.js

@@ -1,7 +1,13 @@
 import React, { Fragment, PureComponent } from 'react';
 import { Link } from 'react-router-dom';
 import { activate } from './Activate.actions';
+import { connect } from 'react-redux';
 import './Activate.css';
+import { login } from '../Login/Login.actions';
+import { isLogged } from '../../App/App.selectors';
+
+import { FormattedMessage } from 'react-intl';
+import messages from './Activate.messages';
 
 class ActivateContainer extends PureComponent {
   state = {
@@ -19,30 +25,77 @@ class ActivateContainer extends PureComponent {
     this.setState({ isActivating: true });
 
     activate(url)
-      .then(activationStatus => this.setState({ activationStatus }))
+      .then(activationStatus => {
+        this.setState({ activationStatus });
+        if (activationStatus.success) {
+          this.props.login({ activatedData: activationStatus }).catch(error => {
+            console.log(error);
+            this.handleError();
+          });
+          return;
+        }
+        this.handleError();
+      })
       .catch(activationStatus => this.setState({ activationStatus }))
       .finally(() => this.setState({ isActivating: false }));
   }
 
+  componentDidUpdate(prevProps) {
+    const { isLogged, history } = this.props;
+    if (!prevProps.isLogged && isLogged) {
+      setTimeout(() => {
+        history.replace('/');
+      }, 2000);
+    }
+  }
+
+  handleError() {
+    this.setState({ error: true });
+    setTimeout(() => {
+      this.props.history.replace('/login-signup');
+    }, 2000);
+  }
+
   render() {
-    const { isActivating, activationStatus } = this.state;
+    const { isActivating, activationStatus, error } = this.state;
+    const loginSuccess = !error && this.props.isLogged;
+
+    const startTourLink = (
+      <Link to="/" className="Activate_home">
+        <FormattedMessage {...messages.startTour} />
+      </Link>
+    );
 
     return (
       <div className="Activate">
-        {isActivating ? (
+        {isActivating || (!loginSuccess && !error) ? (
           'Activating your account...'
         ) : (
           <Fragment>
             {activationStatus.message}
             <br />
-            <Link to="/" className="Activate_home">
-              Home page
-            </Link>
+            {loginSuccess ? (
+              startTourLink
+            ) : (
+              <Link to="/login-signup" className="Activate_home">
+                <FormattedMessage {...messages.loginSignUpPage} />
+              </Link>
+            )}
           </Fragment>
         )}
       </div>
     );
   }
 }
+const mapStateToProps = state => ({
+  isLogged: isLogged(state)
+});
+
+const mapDispatchToProps = {
+  login
+};
 
-export default ActivateContainer;
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ActivateContainer);

src/components/Account/Activate/Activate.messages.js

@@ -0,0 +1,12 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  startTour: {
+    id: 'cboard.components.Activate.startTour',
+    defaultMessage: 'Start a tour across Cboard'
+  },
+  loginSignUpPage: {
+    id: 'cboard.components.Activate.LoginSignUpPage',
+    defaultMessage: 'Login or sign up page'
+  }
+});

src/components/Account/Login/Login.actions.js

@@ -24,8 +24,12 @@ export function loginSuccess(payload) {
   };
 }
 
-function firstLoginActions(dispatch, payload) {
-  API.updateUser({ ...payload, isFirstLogin: false });
+async function firstLoginActions(dispatch, payload) {
+  try {
+    await API.updateUser({ ...payload, isFirstLogin: false });
+  } catch (err) {
+    console.error(err);
+  }
   dispatch(enableAllTours());
 }
 
@@ -43,7 +47,7 @@ function logoutSuccess() {
   };
 }
 
-export function login({ email, password }, type = 'local') {
+export function login({ email, password, activatedData }, type = 'local') {
   const setAVoice = ({ loginData, dispatch, getState }) => {
     const {
       language: { lang: appLang },
@@ -117,7 +121,9 @@ export function login({ email, password }, type = 'local') {
   return async (dispatch, getState) => {
     try {
       const apiMethod = type === 'local' ? 'login' : 'oAuthLogin';
-      const loginData = await API[apiMethod](email, password);
+      const loginData = activatedData
+        ? activatedData
+        : await API[apiMethod](email, password);
       const { communicator, board } = getState();
 
       const activeCommunicatorId = communicator.activeCommunicatorId;

src/translations/src/cboard.json

@@ -12,6 +12,8 @@
   "cboard.components.WelcomeScreenInformation.text": "Cboard helps users with speech and language impairments to communicate with symbols and text-to-speech.",
   "cboard.components.AuthScreenInformation.heading": "Cboard",
   "cboard.components.AuthScreenInformation.text": "Sign up to sync your settings!",
+  "cboard.components.Activate.startTour": "Start a tour across Cboard",
+  "cboard.components.Activate.loginSignUpPage": "Login or sign up page",
   "cboard.components.Login.loginToCboard": "Login to Cboard",
   "cboard.components.Login.login": "Login",
   "cboard.components.Login.email": "Email",