Roughs in the accept invitation routes

Author: dzucconi

apps/authentication/Routes.js

@@ -26,7 +26,7 @@ export default () => (
     />
 
     <Route
-      path="/register/:token"
+      path="/register/:invitation_token"
       render={parseRoute(({ params, query }) => (
         <AcceptInvitationPage
           {...params}

apps/authentication/index.js

@@ -13,13 +13,14 @@ app
   .set('views', `${__dirname}/templates`)
   .set('view engine', 'jade')
 
-  .get(/^\/(sign_up|log_in|forgot|register\/\w+)/, apolloMiddleware, (req, res) => {
+  .get(/^\/(sign_up|log_in|forgot|register\/\w+)/, apolloMiddleware, (req, res, next) => {
     if (req.user && req.user.id) return res.redirect('/');
 
     res.locals.sd.REDIRECT_TO = req.query['redirect-to'] || '/';
 
     return req.apollo.render(withStaticRouter(Routes))
-      .then(apollo => res.render('index', { apollo }));
+      .then(apollo => res.render('index', { apollo }))
+      .catch(next);
   })
   .get('/me/sign_out', logoutMiddleware, redirectToMiddleware)
   .get('/me/refresh', (req, res, next) => {

assets/auth.js

@@ -1,14 +1,8 @@
-import sharify from 'sharify';
-
 import { mountWithApolloProvider } from 'react/apollo';
 
 import withBrowserRouter from 'react/hocs/WithBrowserRouter';
 
 import Routes from 'apps/authentication/Routes';
 
-const { data: { APOLLO } } = sharify;
-
-document.addEventListener('DOMContentLoaded', () => {
-  const mountPoint = document.getElementById('apolloMount');
-  mountWithApolloProvider(withBrowserRouter(Routes), APOLLO, mountPoint);
-});
+document.addEventListener('DOMContentLoaded', () =>
+  mountWithApolloProvider(withBrowserRouter(Routes), {}, document.getElementById('apolloMount')));

react/components/RegistrationForm/index.js

@@ -19,19 +19,30 @@ const { REDIRECT_TO } = require('sharify').data;
 class RegistrationForm extends Component {
   static propTypes = {
     register: PropTypes.func.isRequired,
+    email: PropTypes.string,
+    invite_token: PropTypes.string,
   }
 
-  state = {
-    mode: 'resting',
-    email: '',
-    first_name: '',
-    last_name: '',
-    password: '',
-    password_confirmation: '',
-    accept_terms: false,
-    receive_newsletter: false,
-    attributeErrors: {},
-    errorMessage: null,
+  static defaultProps = {
+    email: null,
+    invite_token: null,
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      mode: 'resting',
+      email: props.email || '',
+      first_name: '',
+      last_name: '',
+      password: '',
+      password_confirmation: '',
+      accept_terms: false,
+      receive_newsletter: false,
+      attributeErrors: {},
+      errorMessage: null,
+    };
   }
 
   handleInput = fieldName => ({ target: { value: fieldValue } }) =>
@@ -58,6 +69,8 @@ class RegistrationForm extends Component {
   handleSubmit = (e) => {
     e.preventDefault();
 
+    // TODO: Switch on invite_token
+
     const { register } = this.props;
 
     const {
@@ -127,6 +140,7 @@ class RegistrationForm extends Component {
           onChange={this.handleEmail}
           value={email}
           errorMessage={attributeErrors.email}
+          readOnly={!!this.props.email}
           required
         />
 

react/components/UI/Box/index.js

@@ -1,10 +1,12 @@
 import styled from 'styled-components';
-import { display, space, width, alignItems, minHeight } from 'styled-system';
+import { display, space, width, alignItems, minHeight, justifyContent, flexDirection } from 'styled-system';
 
 export default styled.div`
   ${display}
   ${width}
+  ${minHeight}
   ${space}
   ${alignItems}
-  ${minHeight}
+  ${justifyContent}
+  ${flexDirection}
 `;

react/components/UI/CenteringBox/index.js

@@ -7,5 +7,6 @@ export default styled(Box).attrs({
   width: '100%',
   minHeight: '100vh',
   alignItems: 'center',
+  justifyContent: 'center',
 })`
 `;

react/pages/authentication/AcceptInvitationPage/fragments/invitee.js

@@ -0,0 +1,9 @@
+import gql from 'graphql-tag';
+
+export default gql`
+  fragment Invitee on Invitee {
+    __typename
+    id
+    email
+  }
+`;

react/pages/authentication/AcceptInvitationPage/index.js

@@ -1,14 +1,57 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Query } from 'react-apollo';
 
+import inviteeQuery from 'react/pages/authentication/AcceptInvitationPage/queries/invitee';
+
+import Icon from 'react/components/UI/Icon';
 import CenteringBox from 'react/components/UI/CenteringBox';
+import Text from 'react/components/UI/Text';
 import RegistrationForm from 'react/components/RegistrationForm';
 
-export default class RegistrationPage extends Component {
+export default class AcceptInvitationPage extends Component {
+  static propTypes = {
+    invitation_token: PropTypes.string.isRequired,
+    // Double check this actually does what it says it does
+    invite_token: PropTypes.string.isRequired,
+  }
+
   render() {
+    const { invitation_token, invite_token } = this.props;
+
     return (
-      <CenteringBox p={7}>
-        <RegistrationForm />
-      </CenteringBox>
+      <Query query={inviteeQuery} variables={{ invitation_token }}>
+        {({ loading, error, data }) => {
+          if (loading) return <div />;
+
+          if (error) {
+            return (
+              <CenteringBox p={7} flexDirection="column">
+                <Icon name="ArenaMark" size={7} mb={9} />
+
+                <Text f={5} mb={6}>
+                  We cannot find that invitation code.
+                </Text>
+
+                <Text f={2} underlineLinks>
+                  If you believe this is in error please contact
+                  {' '}
+                  <a href="mailto:help@are.na">help@are.na</a>
+                </Text>
+              </CenteringBox>
+            );
+          }
+
+          return (
+            <CenteringBox p={7}>
+              <RegistrationForm
+                email={data.invitee.email}
+                invite_token={invite_token}
+              />
+            </CenteringBox>
+          );
+        }}
+      </Query>
     );
   }
 }

react/pages/authentication/AcceptInvitationPage/queries/invitee.js

@@ -0,0 +1,12 @@
+import gql from 'graphql-tag';
+
+import inviteeFragment from 'react/pages/authentication/AcceptInvitationPage/fragments/invitee';
+
+export default gql`
+  query Invitee($invitation_token: String!) {
+    invitee(invitation_token: $invitation_token) {
+      ...Invitee
+    }
+  }
+  ${inviteeFragment}
+`;