Add closed registration message fixes #177

app/soapbox/features/landing_page/components/registration_form.js

@@ -93,11 +93,32 @@ class RegistrationForm extends ImmutablePureComponent {
 
   render() {
     const { instance, intl } = this.props;
+    const isOpen = instance.get('registrations');
     const isLoading = this.state.captchaLoading || this.state.submissionLoading;
 
+    if (isOpen === false) {
+      return (
+        <div className='registrations-closed'>
+          <h2>
+            <FormattedMessage
+              id='registration.closed_title'
+              defaultMessage='Registrations Closed'
+            />
+          </h2>
+          <div className='registrations-closed__message'>
+            <FormattedMessage
+              id='registration.closed_message'
+              defaultMessage='{instance} is not accepting new members'
+              values={{ instance: <strong>{instance.get('title')}</strong> }}
+            />
+          </div>
+        </div>
+      );
+    }
+
     return (
       <SimpleForm onSubmit={this.onSubmit}>
-        <fieldset disabled={isLoading}>
+        <fieldset disabled={isLoading || !isOpen}>
           <div className='simple_form__overlay-area'>
             <p className='lead'>
               <FormattedMessage

app/styles/about.scss

@@ -443,6 +443,22 @@ $fluid-breakpoint: $maximum-width + 20px;
       }
     }
 
+    .registrations-closed {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      font-size: 18px;
+
+      h2 {
+        font-weight: bold;
+        font-size: 24px;
+        margin-bottom: 10px;
+      }
+    }
+
     @media (min-width: 767px) and (max-width: 1024px) {
       padding: 40px 20px 20px;