diff --git a/app/soapbox/features/landing_page/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js similarity index 86% rename from app/soapbox/features/landing_page/components/registration_form.js rename to app/soapbox/features/auth_login/components/registration_form.js index b0518c704..3ea8f6d62 100644 --- a/app/soapbox/features/landing_page/components/registration_form.js +++ b/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 ( -
-

- -

-
- {instance.get('title')} }} - /> -
-
- ); - } - return ( -
+
-

- {instance.get('title')} }} - /> -

({ @@ -11,8 +12,31 @@ const mapStateToProps = (state, props) => ({ class LandingPage extends ImmutablePureComponent { + renderClosed = () => { + const { instance } = this.props; + + return ( +
+

+ +

+
+ {instance.get('title')} }} + /> +
+
+ ); + } + render() { const { instance } = this.props; + const isOpen = instance.get('registrations', false) === true; return (
@@ -28,7 +52,7 @@ class LandingPage extends ImmutablePureComponent {
- + {isOpen ? : this.renderClosed()}
diff --git a/app/soapbox/features/register_invite/index.js b/app/soapbox/features/register_invite/index.js new file mode 100644 index 000000000..f9d0bf1e0 --- /dev/null +++ b/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 ( +
+
+

+ +

+

+ +

+
+
+ +
+
+ ); + } + +} diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 51a8188dc..9a7a53cad 100644 --- a/app/soapbox/features/ui/index.js +++ b/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 ends up in the application bundle. @@ -282,6 +283,9 @@ class SwitchingColumnsArea extends React.PureComponent { + + + @@ -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()); } } diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 1ab82ad4b..139fd60c6 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/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'); +} diff --git a/app/styles/application.scss b/app/styles/application.scss index fbb50eadf..61526c3d4 100644 --- a/app/styles/application.scss +++ b/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'; 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;