[Glitch] Add closed registrations modal

Port 2277913f3f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/closed_registrations_modal/index.js

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

app/javascript/flavours/glitch/features/interaction_modal/index.js

@@ -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'>

app/javascript/flavours/glitch/features/ui/components/modal_root.js

@@ -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 {

app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js

@@ -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 = () => (
-  <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>
-  </div>
-);
+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>
+      {signupButton}
+    </div>
+  );
+};
 
 export default SignInBanner;

app/javascript/flavours/glitch/features/ui/util/async-components.js

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