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] 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;