From b9d484623c48dff654dbb919a7b6f460e135a481 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 29 Sep 2020 22:21:16 -0500
Subject: [PATCH] Add closed registration message fixes #177

---
 .../components/registration_form.js           | 23 ++++++++++++++++++-
 app/styles/about.scss                         | 16 +++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/landing_page/components/registration_form.js b/app/soapbox/features/landing_page/components/registration_form.js
index 7a2ada78a..3490e8a50 100644
--- a/app/soapbox/features/landing_page/components/registration_form.js
+++ b/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
diff --git a/app/styles/about.scss b/app/styles/about.scss
index 6a09753a6..ece0153e2 100644
--- a/app/styles/about.scss
+++ b/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;