Merge remote-tracking branch 'origin/develop' into next

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

@@ -45,11 +45,19 @@ 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,
   }
 
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
   state = {
     captchaLoading: true,
     submissionLoading: false,
@@ -94,17 +102,29 @@ 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('/');
+      });
     }
   }
 
   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 });
 
@@ -140,40 +160,12 @@ 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'>
-            <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)}

app/soapbox/features/landing_page/index.js

@@ -1,8 +1,9 @@
 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 './components/registration_form';
+import RegistrationForm from '../auth_login/components/registration_form';
 import SiteBanner from '../public_layout/components/site_banner';
 
 const mapStateToProps = (state, props) => ({
@@ -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>

app/soapbox/features/register_invite/index.js

@@ -0,0 +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';
+
+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() {
+    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/soapbox/features/ui/index.js

@@ -109,6 +109,7 @@ import {
   NotificationsContainer,
   ModalContainer,
   ProfileHoverCard,
+  RegisterInvite,
 } from './util/async-components';
 
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
@@ -282,6 +283,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} />
@@ -489,9 +493,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());
     }
   }

app/soapbox/features/ui/util/async-components.js

@@ -405,3 +405,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');
+}

app/styles/application.scss

@@ -89,6 +89,7 @@
 @import 'components/icon';
 @import 'components/profile-stats';
 @import 'components/progress-circle';
+@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;