From 1bd3f613a9b3720037c38abf6603d79d21e50c6a Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Thu, 5 Jul 2018 11:04:40 +0300
Subject: [PATCH] feat(signup-confirmation): add dedicated confirmation page
---
.../src/components/SignUp/ConfirmAccount.js | 49 +++++++++++++++++--
.../components-faraday/src/redux/users.js | 13 ++++-
2 files changed, 58 insertions(+), 4 deletions(-)
diff --git a/packages/components-faraday/src/components/SignUp/ConfirmAccount.js b/packages/components-faraday/src/components/SignUp/ConfirmAccount.js
index 979c221a0..b370b739b 100644
--- a/packages/components-faraday/src/components/SignUp/ConfirmAccount.js
+++ b/packages/components-faraday/src/components/SignUp/ConfirmAccount.js
@@ -1,19 +1,62 @@
import React from 'react'
-import { compose, lifecycle } from 'recompose'
+import { connect } from 'react-redux'
+import { Button } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+import { compose, lifecycle, withState } from 'recompose'
import { parseSearchParams } from '../utils'
import { confirmUser } from '../../redux/users'
-const ConfirmAccount = ({ location }) => <div>confirm</div>
+const ConfirmAccount = ({ location, message, history }) => (
+ <Root>
+ <Title>{message}</Title>
+ <Button onClick={() => history.replace('/')} primary>
+ Go to Dashboard
+ </Button>
+ </Root>
+)
+
+const confirmMessage = `Your account has been successfully confirmed. Welcome to Hindawi!`
+const errorMessage = `Something went wrong with your account confirmation. Please try again.`
export default compose(
+ connect(null, { confirmUser }),
+ withState('message', 'setConfirmMessage', 'Loading...'),
lifecycle({
componentDidMount() {
- const { location } = this.props
+ const { location, confirmUser, setConfirmMessage } = this.props
const { confirmationToken, userId } = parseSearchParams(location.search)
if (userId) {
confirmUser(userId, confirmationToken)
+ .then(() => {
+ setConfirmMessage(confirmMessage)
+ })
+ .catch(() => {
+ // errors are still gobbled up by pubsweet
+ setConfirmMessage(errorMessage)
+ })
}
},
}),
)(ConfirmAccount)
+
+// #region styled components
+const Root = styled.div`
+ color: ${th('colorText')};
+ margin: 0 auto;
+ text-align: center;
+ width: 70vw;
+
+ a {
+ color: ${th('colorText')};
+ }
+`
+
+const Title = styled.div`
+ color: ${th('colorPrimary')};
+ font-size: ${th('fontSizeHeading5')};
+ font-family: ${th('fontHeading')};
+ margin: 10px auto;
+`
+// #endregion
diff --git a/packages/components-faraday/src/redux/users.js b/packages/components-faraday/src/redux/users.js
index e7cfc67be..a4e6d1a12 100644
--- a/packages/components-faraday/src/redux/users.js
+++ b/packages/components-faraday/src/redux/users.js
@@ -1,11 +1,22 @@
import { get } from 'lodash'
import { create } from 'pubsweet-client/src/helpers/api'
+const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
+
+const loginSuccess = user => ({
+ type: LOGIN_SUCCESS,
+ token: user.token,
+ user,
+})
+
export const currentUserIs = (state, role) =>
get(state, `currentUser.user.${role}`)
-export const confirmUser = (userId, confirmationToken) =>
+export const confirmUser = (userId, confirmationToken) => dispatch =>
create(`/users/confirm`, {
userId,
confirmationToken,
+ }).then(user => {
+ localStorage.setItem('token', user.token)
+ return dispatch(loginSuccess(user))
})
--
GitLab