[Glitch] Add closed registrations modal

Port 2277913f3f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Claire 2022-10-26 19:35:55 +02:00
parent ce27c6502b
commit 05c1dd9114
5 changed files with 147 additions and 10 deletions

View File

@ -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>
);
}
};

View File

@ -5,11 +5,19 @@ import { registrationsOpen } from 'flavours/glitch/initial_state';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
import classNames from 'classnames'; import classNames from 'classnames';
import { openModal, closeModal } from 'flavours/glitch/actions/modal';
const mapStateToProps = (state, { accountId }) => ({ const mapStateToProps = (state, { accountId }) => ({
displayNameHtml: state.getIn(['accounts', accountId, 'display_name_html']), displayNameHtml: state.getIn(['accounts', accountId, 'display_name_html']),
}); });
const mapDispatchToProps = (dispatch) => ({
onSignupClick() {
dispatch(closeModal());
dispatch(openModal('CLOSED_REGISTRATIONS'));
},
});
class Copypaste extends React.PureComponent { class Copypaste extends React.PureComponent {
static propTypes = { 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 { class InteractionModal extends React.PureComponent {
static propTypes = { static propTypes = {
displayNameHtml: PropTypes.string, displayNameHtml: PropTypes.string,
url: PropTypes.string, url: PropTypes.string,
type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow']), type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow']),
onSignupClick: PropTypes.func.isRequired,
}; };
handleSignupClick = () => {
this.props.onSignupClick();
}
render () { render () {
const { url, type, displayNameHtml } = this.props; const { url, type, displayNameHtml } = this.props;
@ -105,6 +118,22 @@ class InteractionModal extends React.PureComponent {
break; 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 ( return (
<div className='modal-root__modal interaction-modal'> <div className='modal-root__modal interaction-modal'>
<div className='interaction-modal__lead'> <div className='interaction-modal__lead'>
@ -116,7 +145,7 @@ class InteractionModal extends React.PureComponent {
<div className='interaction-modal__choices__choice'> <div className='interaction-modal__choices__choice'>
<h3><FormattedMessage id='interaction_modal.on_this_server' defaultMessage='On this server' /></h3> <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='/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>
<div className='interaction-modal__choices__choice'> <div className='interaction-modal__choices__choice'>

View File

@ -29,6 +29,7 @@ import {
FilterModal, FilterModal,
InteractionModal, InteractionModal,
SubscribedLanguagesModal, SubscribedLanguagesModal,
ClosedRegistrationsModal,
} from 'flavours/glitch/features/ui/util/async-components'; } from 'flavours/glitch/features/ui/util/async-components';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
@ -56,6 +57,7 @@ const MODAL_COMPONENTS = {
'FILTER': FilterModal, 'FILTER': FilterModal,
'SUBSCRIBED_LANGUAGES': SubscribedLanguagesModal, 'SUBSCRIBED_LANGUAGES': SubscribedLanguagesModal,
'INTERACTION': InteractionModal, 'INTERACTION': InteractionModal,
'CLOSED_REGISTRATIONS': ClosedRegistrationsModal,
}; };
export default class ModalRoot extends React.PureComponent { export default class ModalRoot extends React.PureComponent {

View File

@ -1,13 +1,40 @@
import React from 'react'; import React, { useCallback } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { useDispatch } from 'react-redux';
import { registrationsOpen } from 'flavours/glitch/initial_state'; import { registrationsOpen } from 'flavours/glitch/initial_state';
import { openModal } from 'flavours/glitch/actions/modal';
const SignInBanner = () => ( const SignInBanner = () => {
<div className='sign-in-banner'> const dispatch = useDispatch();
<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> const openClosedRegistrationsModal = useCallback(
<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> () => dispatch(openModal('CLOSED_REGISTRATIONS')),
</div> [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>
{signupButton}
</div>
);
};
export default SignInBanner; export default SignInBanner;

View File

@ -190,6 +190,10 @@ export function SubscribedLanguagesModal () {
return import(/*webpackChunkName: "flavours/glitch/async/modals/subscribed_languages_modal" */'flavours/glitch/features/subscribed_languages_modal'); 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 () { export function About () {
return import(/*webpackChunkName: "features/glitch/async/about" */'flavours/glitch/features/about'); return import(/*webpackChunkName: "features/glitch/async/about" */'flavours/glitch/features/about');
} }