Add closed registrations modal (#19437)
parent
aafbc82d88
commit
2277913f3f
6 changed files with 155 additions and 11 deletions
@ -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 'mastodon/initial_state'; |
||||||
|
import { fetchServer } from 'mastodon/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> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
}; |
@ -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 'mastodon/initial_state'; |
import { registrationsOpen } from 'mastodon/initial_state'; |
||||||
|
import { openModal } from 'mastodon/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; |
||||||
|
Loading…
Reference in new issue