From 4fcb5f0239407a6b52dd1121c8d2d99c8f2f4be2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 24 Sep 2021 11:24:33 -0500
Subject: [PATCH 1/5] Move RegistrationForm to auth_login directory

---
 .../components/registration_form.js                             | 0
 app/soapbox/features/landing_page/index.js                      | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename app/soapbox/features/{landing_page => auth_login}/components/registration_form.js (100%)

diff --git a/app/soapbox/features/landing_page/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js
similarity index 100%
rename from app/soapbox/features/landing_page/components/registration_form.js
rename to app/soapbox/features/auth_login/components/registration_form.js
diff --git a/app/soapbox/features/landing_page/index.js b/app/soapbox/features/landing_page/index.js
index d437233fc..f1a152483 100644
--- a/app/soapbox/features/landing_page/index.js
+++ b/app/soapbox/features/landing_page/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { Link } from 'react-router-dom';
-import RegistrationForm from './components/registration_form';
+import RegistrationForm from '../auth_login/components/registration_form';
 import SiteBanner from '../public_layout/components/site_banner';
 
 const mapStateToProps = (state, props) => ({

From 937cc18012e46077b4ca195536b73dcd467679c8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 24 Sep 2021 11:37:47 -0500
Subject: [PATCH 2/5] Add basic invite route, fix Chats fetch

---
 .../auth_login/components/registration_form.js         |  7 -------
 app/soapbox/features/register_invite/index.js          | 10 ++++++++++
 app/soapbox/features/ui/index.js                       |  8 ++++++--
 app/soapbox/features/ui/util/async-components.js       |  4 ++++
 4 files changed, 20 insertions(+), 9 deletions(-)
 create mode 100644 app/soapbox/features/register_invite/index.js

diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js
index b0518c704..3e3fb9b1b 100644
--- a/app/soapbox/features/auth_login/components/registration_form.js
+++ b/app/soapbox/features/auth_login/components/registration_form.js
@@ -167,13 +167,6 @@ class RegistrationForm extends ImmutablePureComponent {
       <SimpleForm onSubmit={this.onSubmit}>
         <fieldset disabled={isLoading || !isOpen}>
           <div className='simple_form__overlay-area'>
-            <p className='lead'>
-              <FormattedMessage
-                id='registration.lead'
-                defaultMessage="With an account on {instance} you'll be able to follow people on any server in the fediverse."
-                values={{ instance: <strong>{instance.get('title')}</strong> }}
-              />
-            </p>
             <div className='fields-group'>
               <TextInput
                 placeholder={intl.formatMessage(messages.username)}
diff --git a/app/soapbox/features/register_invite/index.js b/app/soapbox/features/register_invite/index.js
new file mode 100644
index 000000000..82e366938
--- /dev/null
+++ b/app/soapbox/features/register_invite/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
+
+export default class RegisterInvite extends React.PureComponent {
+
+  render() {
+    return <RegistrationForm />;
+  }
+
+}
diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js
index 5d9321d65..1badfaae2 100644
--- a/app/soapbox/features/ui/index.js
+++ b/app/soapbox/features/ui/index.js
@@ -106,6 +106,7 @@ import {
   NotificationsContainer,
   ModalContainer,
   ProfileHoverCard,
+  RegisterInvite,
 } from './util/async-components';
 
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
@@ -275,6 +276,9 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/statuses/:statusId' exact component={Status} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
         <WrappedRoute path='/scheduled_statuses' page={DefaultPage} component={ScheduledStatuses} content={children} />
 
+        <Redirect from='/registration/:token' to='/invite/:token' />
+        <WrappedRoute path='/invite/:token' component={RegisterInvite} content={children} publicRoute />
+
         <Redirect exact from='/settings' to='/settings/preferences' />
         <WrappedRoute path='/settings/preferences' page={DefaultPage} component={Preferences} content={children} />
         <WrappedRoute path='/settings/profile' page={DefaultPage} component={EditProfile} content={children} />
@@ -482,9 +486,9 @@ class UI extends React.PureComponent {
   componentDidUpdate(prevProps) {
     this.connectStreaming();
 
-    const { dispatch, features } = this.props;
+    const { dispatch, account, features } = this.props;
 
-    if (features.chats && !prevProps.features.chats) {
+    if (features.chats && account && !prevProps.features.chats) {
       dispatch(fetchChats());
     }
   }
diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js
index 5bee4d041..19a5fa1c5 100644
--- a/app/soapbox/features/ui/util/async-components.js
+++ b/app/soapbox/features/ui/util/async-components.js
@@ -401,3 +401,7 @@ export function WhoToFollowPanel() {
 export function FollowRecommendations() {
   return import(/* webpackChunkName: "features/follow_recommendations" */'../../follow_recommendations');
 }
+
+export function RegisterInvite() {
+  return import(/* webpackChunkName: "features/register_invite" */'../../register_invite');
+}

From 6f7e0c75b464cb0adf9890c31900b6689c8ec988 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 24 Sep 2021 11:43:28 -0500
Subject: [PATCH 3/5] RegistrationForm: refactor isOpen logic

---
 .../components/registration_form.js           | 23 +---------------
 app/soapbox/features/landing_page/index.js    | 26 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js
index 3e3fb9b1b..c0021d3df 100644
--- a/app/soapbox/features/auth_login/components/registration_form.js
+++ b/app/soapbox/features/auth_login/components/registration_form.js
@@ -140,32 +140,11 @@ class RegistrationForm extends ImmutablePureComponent {
   render() {
     const { instance, intl, supportsEmailList } = this.props;
     const { params } = this.state;
-    const isOpen = instance.get('registrations');
     const isLoading = this.state.captchaLoading || this.state.submissionLoading;
 
-    if (isOpen === false) {
-      return (
-        <div className='registrations-closed'>
-          <h2>
-            <FormattedMessage
-              id='registration.closed_title'
-              defaultMessage='Registrations Closed'
-            />
-          </h2>
-          <div className='registrations-closed__message'>
-            <FormattedMessage
-              id='registration.closed_message'
-              defaultMessage='{instance} is not accepting new members'
-              values={{ instance: <strong>{instance.get('title')}</strong> }}
-            />
-          </div>
-        </div>
-      );
-    }
-
     return (
       <SimpleForm onSubmit={this.onSubmit}>
-        <fieldset disabled={isLoading || !isOpen}>
+        <fieldset disabled={isLoading}>
           <div className='simple_form__overlay-area'>
             <div className='fields-group'>
               <TextInput
diff --git a/app/soapbox/features/landing_page/index.js b/app/soapbox/features/landing_page/index.js
index f1a152483..875bcd75b 100644
--- a/app/soapbox/features/landing_page/index.js
+++ b/app/soapbox/features/landing_page/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { Link } from 'react-router-dom';
 import RegistrationForm from '../auth_login/components/registration_form';
@@ -11,8 +12,31 @@ const mapStateToProps = (state, props) => ({
 
 class LandingPage extends ImmutablePureComponent {
 
+  renderClosed = () => {
+    const { instance } = this.props;
+
+    return (
+      <div className='registrations-closed'>
+        <h2>
+          <FormattedMessage
+            id='registration.closed_title'
+            defaultMessage='Registrations Closed'
+          />
+        </h2>
+        <div className='registrations-closed__message'>
+          <FormattedMessage
+            id='registration.closed_message'
+            defaultMessage='{instance} is not accepting new members'
+            values={{ instance: <strong>{instance.get('title')}</strong> }}
+          />
+        </div>
+      </div>
+    );
+  }
+
   render() {
     const { instance } = this.props;
+    const isOpen = instance.get('registrations', false) === true;
 
     return (
       <div className='landing'>
@@ -28,7 +52,7 @@ class LandingPage extends ImmutablePureComponent {
             </div>
           </div>
           <div className='landing-columns--right'>
-            <RegistrationForm />
+            {isOpen ? <RegistrationForm /> : this.renderClosed()}
           </div>
         </div>
       </div>

From b18ed0d0e9f923008551ad1116ebb348c52e191e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 24 Sep 2021 12:16:04 -0500
Subject: [PATCH 4/5] RegisterInvite: make registrations by invite token work

---
 .../components/registration_form.js           | 19 +++++++--
 app/soapbox/features/register_invite/index.js | 42 ++++++++++++++++++-
 app/styles/application.scss                   |  1 +
 app/styles/components/register-invite.scss    | 26 ++++++++++++
 app/styles/forms.scss                         |  2 +-
 5 files changed, 84 insertions(+), 6 deletions(-)
 create mode 100644 app/styles/components/register-invite.scss

diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js
index c0021d3df..704ce4840 100644
--- a/app/soapbox/features/auth_login/components/registration_form.js
+++ b/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 });
 
diff --git a/app/soapbox/features/register_invite/index.js b/app/soapbox/features/register_invite/index.js
index 82e366938..f9d0bf1e0 100644
--- a/app/soapbox/features/register_invite/index.js
+++ b/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>
+    );
   }
 
 }
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 9b9bbff36..63b6aa51f 100644
--- a/app/styles/application.scss
+++ b/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';
diff --git a/app/styles/components/register-invite.scss b/app/styles/components/register-invite.scss
new file mode 100644
index 000000000..e82218bf4
--- /dev/null
+++ b/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);
+      }
+    }
+  }
+}
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 1182794f3..66382ee27 100644
--- a/app/styles/forms.scss
+++ b/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;

From f5112b5b2a587bfcfb2c81d5b10a91b04d09cf85 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 24 Sep 2021 12:36:51 -0500
Subject: [PATCH 5/5] RegistrationForm: redirect home on success (if not
 already)

---
 .../features/auth_login/components/registration_form.js  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js
index 704ce4840..3ea8f6d62 100644
--- a/app/soapbox/features/auth_login/components/registration_form.js
+++ b/app/soapbox/features/auth_login/components/registration_form.js
@@ -54,6 +54,10 @@ class RegistrationForm extends ImmutablePureComponent {
     inviteToken: PropTypes.string,
   }
 
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
   state = {
     captchaLoading: true,
     submissionLoading: false,
@@ -98,11 +102,14 @@ class RegistrationForm extends ImmutablePureComponent {
 
   postRegisterAction = ({ access_token }) => {
     const { dispatch, needsConfirmation, needsApproval } = this.props;
+    const { router } = this.context;
 
     if (needsConfirmation || needsApproval) {
       return this.launchModal();
     } else {
-      return dispatch(verifyCredentials(access_token));
+      return dispatch(verifyCredentials(access_token)).then(() => {
+        router.history.push('/');
+      });
     }
   }