[Glitch] Add closed registrations modal
Port 2277913f3f
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
parent
ce27c6502b
commit
05c1dd9114
@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { domain } from 'flavours/glitch/initial_state';
|
||||
import { fetchServer } from 'flavours/glitch/actions/server';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
closed_registrations_message: state.getIn(['server', 'server', 'registrations', 'closed_registrations_message']),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class ClosedRegistrationsModal extends ImmutablePureComponent {
|
||||
|
||||
componentDidMount () {
|
||||
const { dispatch } = this.props;
|
||||
dispatch(fetchServer());
|
||||
}
|
||||
|
||||
render () {
|
||||
let closedRegistrationsMessage;
|
||||
|
||||
if (this.props.closed_registrations_message) {
|
||||
closedRegistrationsMessage = (
|
||||
<p
|
||||
className='prose'
|
||||
dangerouslySetInnerHTML={{ __html: this.props.closed_registrations_message }}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
closedRegistrationsMessage = (
|
||||
<p className='prose'>
|
||||
<FormattedMessage
|
||||
id='closed_registrations_modal.description'
|
||||
defaultMessage='Creating an account on {domain} is currently not possible, but please keep in mind that you do not need an account specifically on {domain} to use Mastodon.'
|
||||
values={{ domain: <strong>{domain}</strong> }}
|
||||
/>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal interaction-modal'>
|
||||
<div className='interaction-modal__lead'>
|
||||
<h3><FormattedMessage id='closed_registrations_modal.title' defaultMessage='Signing up on Mastodon' /></h3>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id='closed_registrations_modal.preamble'
|
||||
defaultMessage='Mastodon is decentralized, so no matter where you create your account, you will be able to follow and interact with anyone on this server. You can even self-host it!'
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='interaction-modal__choices'>
|
||||
<div className='interaction-modal__choices__choice'>
|
||||
<h3><FormattedMessage id='interaction_modal.on_this_server' defaultMessage='On this server' /></h3>
|
||||
{closedRegistrationsMessage}
|
||||
</div>
|
||||
|
||||
<div className='interaction-modal__choices__choice'>
|
||||
<h3><FormattedMessage id='interaction_modal.on_another_server' defaultMessage='On a different server' /></h3>
|
||||
<p className='prose'>
|
||||
<FormattedMessage
|
||||
id='closed_registrations.other_server_instructions'
|
||||
defaultMessage='Since Mastodon is decentralized, you can create an account on another server and still interact with this one.'
|
||||
/>
|
||||
</p>
|
||||
<a href='https://joinmastodon.org/servers' className='button button--block'><FormattedMessage id='closed_registrations_modal.find_another_server' defaultMessage='Find another server' /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
};
|
@ -5,11 +5,19 @@ import { registrationsOpen } from 'flavours/glitch/initial_state';
|
||||
import { connect } from 'react-redux';
|
||||
import Icon from 'flavours/glitch/components/icon';
|
||||
import classNames from 'classnames';
|
||||
import { openModal, closeModal } from 'flavours/glitch/actions/modal';
|
||||
|
||||
const mapStateToProps = (state, { accountId }) => ({
|
||||
displayNameHtml: state.getIn(['accounts', accountId, 'display_name_html']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onSignupClick() {
|
||||
dispatch(closeModal());
|
||||
dispatch(openModal('CLOSED_REGISTRATIONS'));
|
||||
},
|
||||
});
|
||||
|
||||
class Copypaste extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
@ -66,15 +74,20 @@ class Copypaste extends React.PureComponent {
|
||||
|
||||
}
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
class InteractionModal extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
displayNameHtml: PropTypes.string,
|
||||
url: PropTypes.string,
|
||||
type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow']),
|
||||
onSignupClick: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
handleSignupClick = () => {
|
||||
this.props.onSignupClick();
|
||||
}
|
||||
|
||||
render () {
|
||||
const { url, type, displayNameHtml } = this.props;
|
||||
|
||||
@ -105,6 +118,22 @@ class InteractionModal extends React.PureComponent {
|
||||
break;
|
||||
}
|
||||
|
||||
let signupButton;
|
||||
|
||||
if (registrationsOpen) {
|
||||
signupButton = (
|
||||
<a href='/auth/sign_up' className='button button--block button-tertiary'>
|
||||
<FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
signupButton = (
|
||||
<button className='button button--block button-tertiary' onClick={this.handleSignupClick}>
|
||||
<FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal interaction-modal'>
|
||||
<div className='interaction-modal__lead'>
|
||||
@ -116,7 +145,7 @@ class InteractionModal extends React.PureComponent {
|
||||
<div className='interaction-modal__choices__choice'>
|
||||
<h3><FormattedMessage id='interaction_modal.on_this_server' defaultMessage='On this server' /></h3>
|
||||
<a href='/auth/sign_in' className='button button--block'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a>
|
||||
<a href={registrationsOpen ? '/auth/sign_up' : 'https://joinmastodon.org/servers'} className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /></a>
|
||||
{signupButton}
|
||||
</div>
|
||||
|
||||
<div className='interaction-modal__choices__choice'>
|
||||
|
@ -29,6 +29,7 @@ import {
|
||||
FilterModal,
|
||||
InteractionModal,
|
||||
SubscribedLanguagesModal,
|
||||
ClosedRegistrationsModal,
|
||||
} from 'flavours/glitch/features/ui/util/async-components';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
@ -56,6 +57,7 @@ const MODAL_COMPONENTS = {
|
||||
'FILTER': FilterModal,
|
||||
'SUBSCRIBED_LANGUAGES': SubscribedLanguagesModal,
|
||||
'INTERACTION': InteractionModal,
|
||||
'CLOSED_REGISTRATIONS': ClosedRegistrationsModal,
|
||||
};
|
||||
|
||||
export default class ModalRoot extends React.PureComponent {
|
||||
|
@ -1,13 +1,40 @@
|
||||
import React from 'react';
|
||||
import React, { useCallback } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { registrationsOpen } from 'flavours/glitch/initial_state';
|
||||
import { openModal } from 'flavours/glitch/actions/modal';
|
||||
|
||||
const SignInBanner = () => (
|
||||
const SignInBanner = () => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const openClosedRegistrationsModal = useCallback(
|
||||
() => dispatch(openModal('CLOSED_REGISTRATIONS')),
|
||||
[dispatch],
|
||||
);
|
||||
|
||||
let signupButton;
|
||||
|
||||
if (registrationsOpen) {
|
||||
signupButton = (
|
||||
<a href='/auth/sign_up' className='button button--block button-tertiary'>
|
||||
<FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
signupButton = (
|
||||
<button className='button button--block button-tertiary' onClick={openClosedRegistrationsModal}>
|
||||
<FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='sign-in-banner'>
|
||||
<p><FormattedMessage id='sign_in_banner.text' defaultMessage='Sign in to follow profiles or hashtags, favourite, share and reply to posts, or interact from your account on a different server.' /></p>
|
||||
<a href='/auth/sign_in' className='button button--block'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a>
|
||||
<a href={registrationsOpen ? '/auth/sign_up' : 'https://joinmastodon.org/servers'} className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /></a>
|
||||
{signupButton}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignInBanner;
|
||||
|
@ -190,6 +190,10 @@ export function SubscribedLanguagesModal () {
|
||||
return import(/*webpackChunkName: "flavours/glitch/async/modals/subscribed_languages_modal" */'flavours/glitch/features/subscribed_languages_modal');
|
||||
}
|
||||
|
||||
export function ClosedRegistrationsModal () {
|
||||
return import(/*webpackChunkName: "flavours/glitch/async/modals/closed_registrations_modal" */'flavours/glitch/features/closed_registrations_modal');
|
||||
}
|
||||
|
||||
export function About () {
|
||||
return import(/*webpackChunkName: "features/glitch/async/about" */'flavours/glitch/features/about');
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user