Merge branch 'sign-up' of https://gitlab.coko.foundation/xpub/xpub-faraday into sign-up

packages/component-faraday-selectors/src/index.js

@@ -97,3 +97,7 @@ export const getUserPermissions = ({ currentUser }) =>
     objectType: t.object.type,
     role: t.teamType.permissions,
   }))
+
+export const isAuthorConfirmed = ({ currentUser }) =>
+  !currentUserIs({ currentUser }, 'staff') &&
+  get(currentUser, 'user.isConfirmed')

packages/components-faraday/src/components/AppBar/AppBar.js

@@ -4,65 +4,113 @@ import { connect } from 'react-redux'
 import { Icon, th } from '@pubsweet/ui'
 import { withRouter } from 'react-router-dom'
 import styled, { withTheme } from 'styled-components'
-import { withState, withHandlers, compose } from 'recompose'
+import { withState, withHandlers, withProps, compose } from 'recompose'
+
+import { currentUserIs } from '../../../../component-faraday-selectors/src'
 
 const AppBar = ({
+  goTo,
+  user,
+  brand,
+  theme,
   expanded,
   toggleMenu,
-  brand,
-  user,
-  goTo,
   currentUser,
   onLogoutClick,
-  theme,
+  shouldShowConfirmation,
 }) => (
-  <Root>
-    <Brand>
-      {React.cloneElement(brand, {
-        onClick: goTo('/'),
-      })}
-    </Brand>
-    {user && (
-      <User>
-        <div onClick={toggleMenu}>
-          <Icon color={theme.colorText}>user</Icon>
-          <span>
-            {get(user, 'firstName') || get(user, 'username') || 'User'}
-          </span>
-          <Icon color={theme.colorText}>chevron-down</Icon>
-        </div>
-        {expanded && (
-          <Dropdown>
-            <DropdownOption>Settings</DropdownOption>
-            {currentUser.admin && (
-              <DropdownOption onClick={goTo('/admin')}>
-                Admin dashboard
-              </DropdownOption>
-            )}
-            <DropdownOption onClick={onLogoutClick}>Logout</DropdownOption>
-          </Dropdown>
-        )}
-      </User>
+  <Root className="appbar">
+    <Row bordered className="row">
+      <Brand>
+        {React.cloneElement(brand, {
+          onClick: goTo('/'),
+        })}
+      </Brand>
+      {user && (
+        <User>
+          <div onClick={toggleMenu}>
+            <Icon color={theme.colorText}>user</Icon>
+            <span>
+              {get(user, 'firstName') || get(user, 'username') || 'User'}
+            </span>
+            <Icon color={theme.colorText}>chevron-down</Icon>
+          </div>
+          {expanded && (
+            <Dropdown>
+              <DropdownOption>Settings</DropdownOption>
+              {currentUser.admin && (
+                <DropdownOption onClick={goTo('/admin')}>
+                  Admin dashboard
+                </DropdownOption>
+              )}
+              <DropdownOption onClick={onLogoutClick}>Logout</DropdownOption>
+            </Dropdown>
+          )}
+        </User>
+      )}
+    </Row>
+    {shouldShowConfirmation && (
+      <Row bgColor="salmon" centered className="row">
+        <ConfirmationText>
+          Your author account is not confirmed. Check your email.
+        </ConfirmationText>
+      </Row>
     )}
     {expanded && <ToggleOverlay onClick={toggleMenu} />}
   </Root>
 )
 
+export default compose(
+  withRouter,
+  withTheme,
+  connect(state => ({
+    currentUser: get(state, 'currentUser.user'),
+    isStaff: currentUserIs(state, 'staff'),
+  })),
+  withState('expanded', 'setExpanded', false),
+  withHandlers({
+    toggleMenu: ({ setExpanded }) => () => {
+      setExpanded(v => !v)
+    },
+    goTo: ({ setExpanded, history }) => path => () => {
+      setExpanded(v => false)
+      history.push(path)
+    },
+  }),
+  withProps(({ isStaff, currentUser, isAuthenticated }) => ({
+    shouldShowConfirmation:
+      isAuthenticated && !isStaff && !get(currentUser, 'isConfirmed'),
+  })),
+)(AppBar)
+
 // #region styled-components
 const Root = styled.div`
   align-items: center;
-  box-shadow: ${th('dropShadow')};
+  background-color: #ffffff;
   font-family: ${th('fontInterface')};
   display: flex;
-  justify-content: space-between;
-  height: 60px;
+  flex-direction: column;
   flex-grow: 1;
+  width: 100vw;
+
   position: fixed;
-  width: 100%;
+  top: 0;
   z-index: 10;
-  background-color: #ffffff;
 `
 
+const Row = styled.div`
+  align-items: center;
+  align-self: stretch;
+  background-color: ${({ bgColor }) => bgColor || 'transparent'};
+  box-shadow: ${({ bordered }) => (bordered ? th('dropShadow') : 'none')};
+  display: flex;
+  justify-content: ${({ centered }) =>
+    centered ? 'center' : 'space-between;'};
+`
+
+const ConfirmationText = styled.span`
+  font-size: ${th('fontSizeBaseSmall')};
+`
 const Brand = styled.div`
   padding: 10px 20px;
   cursor: pointer;
@@ -126,21 +174,3 @@ const ToggleOverlay = styled.div`
   opacity: 0;
 `
 // #endregion
-
-export default compose(
-  withRouter,
-  withTheme,
-  connect(state => ({
-    currentUser: get(state, 'currentUser.user'),
-  })),
-  withState('expanded', 'setExpanded', false),
-  withHandlers({
-    toggleMenu: ({ setExpanded }) => () => {
-      setExpanded(v => !v)
-    },
-    goTo: ({ setExpanded, history }) => path => () => {
-      setExpanded(v => false)
-      history.push(path)
-    },
-  }),
-)(AppBar)

packages/components-faraday/src/components/Dashboard/Dashboard.js

@@ -7,6 +7,7 @@ import { DashboardItems, DashboardFilters } from './'
 
 const Dashboard = ({
   dashboard,
+  currentUser,
   filterItems,
   filterValues,
   deleteProject,
@@ -16,7 +17,7 @@ const Dashboard = ({
   getDefaultFilterValue,
   createDraftSubmission,
 }) => (
-  <Root>
+  <Root className="dashboard">
     <Header>
       <Heading>Manuscripts</Heading>
       <HeaderButtons>
@@ -50,6 +51,7 @@ const Root = styled.div`
   flex-direction: column;
   margin: auto;
   max-width: 60em;
+  overflow: auto;
 `
 
 const Header = styled.div`

packages/components-faraday/src/components/Dashboard/DashboardPage.js

@@ -37,6 +37,7 @@ export default compose(
               reviewer => reviewer && reviewer.user === currentUser.id,
             ),
         ),
+
         all: sortedCollections,
       }
       const userPermissions = getUserPermissions(state)

packages/components-faraday/src/components/SignUp/ConfirmAccount.js

 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

packages/components-faraday/src/redux/users.js

 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))
   })

packages/xpub-faraday/app/FaradayApp.js

@@ -6,14 +6,21 @@ import { actions } from 'pubsweet-client'
 import { withJournal } from 'xpub-journal'
 import { AppBar } from 'pubsweet-components-faraday/src/components'
 
-const App = ({ children, currentUser, journal, logoutUser }) => (
-  <Root>
+const App = ({
+  journal,
+  children,
+  logoutUser,
+  currentUser,
+  isAuthenticated,
+}) => (
+  <Root className="faraday-root">
     <AppBar
       brand={journal.metadata.name}
+      isAuthenticated={isAuthenticated}
       onLogoutClick={logoutUser}
       user={currentUser}
     />
-    <MainContainer>{children}</MainContainer>
+    <MainContainer className="faraday-main">{children}</MainContainer>
   </Root>
 )
 
@@ -21,6 +28,7 @@ export default compose(
   connect(
     state => ({
       currentUser: state.currentUser.user,
+      isAuthenticated: state.currentUser.isAuthenticated,
     }),
     { logoutUser: actions.logoutUser },
   ),
@@ -35,7 +43,7 @@ const Root = styled.div`
 `
 
 const MainContainer = styled.div`
-  padding: 90px 10px 40px;
-  min-height: 100vh;
   background-color: ${props => props.theme.backgroundColor || '#fff'};
+  padding: 110px 10px 0 10px;
+  height: 100vh;
 `