RegisterInvite: make registrations by invite token work

app/soapbox/features/auth_login/components/registration_form.js

@@ -45,9 +45,13 @@ export default @connect(mapStateToProps)
 class RegistrationForm extends ImmutablePureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     instance: ImmutablePropTypes.map,
     locale: PropTypes.string,
-    intl: PropTypes.object.isRequired,
+    needsConfirmation: PropTypes.bool,
+    needsApproval: PropTypes.bool,
+    supportsEmailList: PropTypes.bool,
+    inviteToken: PropTypes.string,
   }
 
   state = {
@@ -103,8 +107,17 @@ class RegistrationForm extends ImmutablePureComponent {
   }
 
   onSubmit = e => {
-    const { dispatch } = this.props;
-    const params = this.state.params.set('locale', this.props.locale);
+    const { dispatch, inviteToken } = this.props;
+
+    const params = this.state.params.withMutations(params => {
+      // Locale for confirmation email
+      params.set('locale', this.props.locale);
+
+      // Pleroma invites
+      if (inviteToken) {
+        params.set('token', inviteToken);
+      }
+    });
 
     this.setState({ submissionLoading: true });
 

app/soapbox/features/register_invite/index.js

@@ -1,10 +1,48 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
 
-export default class RegisterInvite extends React.PureComponent {
+const mapStateToProps = state => {
+  return {
+    siteTitle: state.getIn(['instance', 'title']),
+  };
+};
+
+export default @connect(mapStateToProps)
+class RegisterInvite extends React.Component {
+
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+    siteTitle: PropTypes.string.isRequired,
+  }
 
   render() {
-    return <RegistrationForm />;
+    const { siteTitle, params } = this.props;
+
+    return (
+      <div className='register-invite'>
+        <div className='register-invite__header'>
+          <h1 className='register-invite__title'>
+            <FormattedMessage
+              id='register_invite.title'
+              defaultMessage="You've been invited to join {siteTitle}!"
+              values={{ siteTitle }}
+            />
+          </h1>
+          <p className='register-invite__lead'>
+            <FormattedMessage
+              id='register_invite.lead'
+              defaultMessage='Complete the form below to create an account.'
+            />
+          </p>
+        </div>
+        <div className='register-invite__form'>
+          <RegistrationForm inviteToken={params.token} />
+        </div>
+      </div>
+    );
   }
 
 }

app/styles/application.scss

@@ -85,6 +85,7 @@
 @import 'components/remote-timeline';
 @import 'components/federation-restrictions';
 @import 'components/aliases';
+@import 'components/register-invite';
 
 // Holiday
 @import 'holiday/halloween';

app/styles/components/register-invite.scss

@@ -0,0 +1,26 @@
+.register-invite {
+  margin: 10px 0;
+
+  &__header {
+    padding: 15px;
+  }
+
+  &__title {
+    font-weight: bold;
+    font-size: 25px;
+    line-height: normal;
+    margin-bottom: 5px;
+  }
+
+  &__form {
+    .simple_form {
+      input[type=text],
+      input[type=number],
+      input[type=email],
+      input[type=password],
+      textarea {
+        background-color: var(--foreground-color);
+      }
+    }
+  }
+}

app/styles/forms.scss

@@ -316,7 +316,7 @@ code {
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: var(--background-color);
+    background-color: var(--background-color);
     border: 1px solid var(--highlight-text-color);
     border-radius: 4px;
     padding: 10px;