From 59e729e7bda0d6248ba9b02b140b5e6fe5cddcb9 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Fri, 16 Oct 2020 16:42:46 +0200
Subject: [PATCH] Refined invite-only signup page

no refs.
- added default invitation icon for sites without icon
- refined copy and position of invite only notification
---
 ghost/portal/src/App.js                       |  2 +-
 .../src/components/pages/MagicLinkPage.js     |  4 +--
 .../portal/src/components/pages/SignupPage.js | 36 +++++++++++++++++--
 ghost/portal/src/images/icons/invitation.svg  |  1 +
 4 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 ghost/portal/src/images/icons/invitation.svg

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index d0abfc9716..e25a07429b 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -16,7 +16,7 @@ const DEV_MODE_DATA = {
     showPopup: true,
     site: Fixtures.site,
     member: Fixtures.member.paid,
-    page: 'accountHome'
+    page: 'signup'
 };
 export default class App extends React.Component {
     constructor(props) {
diff --git a/ghost/portal/src/components/pages/MagicLinkPage.js b/ghost/portal/src/components/pages/MagicLinkPage.js
index c01177f3de..a056276860 100644
--- a/ghost/portal/src/components/pages/MagicLinkPage.js
+++ b/ghost/portal/src/components/pages/MagicLinkPage.js
@@ -6,7 +6,7 @@ import {ReactComponent as EnvelopeIcon} from '../../images/icons/envelope.svg';
 const React = require('react');
 
 export const MagicLinkStyles = `
-    .gh-portal-envelope {
+    .gh-portal-icon-envelope {
         width: 44px;
         margin: 0 0 2px;
     }
@@ -30,7 +30,7 @@ export default class MagicLinkPage extends React.Component {
         return (
             <section className='gh-portal-inbox-notification'>
                 <header className='gh-portal-header'>
-                    <EnvelopeIcon className='gh-portal-icon gh-portal-envelope' />
+                    <EnvelopeIcon className='gh-portal-icon gh-portal-icon-envelope' />
                     <h2>Check your inbox!</h2>
                 </header>
                 <p>Check your inbox and click on the login link to complete the signin.</p>
diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js
index 7e0927e4a5..39d482c8d9 100644
--- a/ghost/portal/src/components/pages/SignupPage.js
+++ b/ghost/portal/src/components/pages/SignupPage.js
@@ -6,6 +6,7 @@ import InputForm from '../common/InputForm';
 import {ValidateInputForm} from '../../utils/form';
 import CalculateDiscount from '../../utils/discount';
 import {getSitePlans, hasOnlyFreePlan} from '../../utils/helpers';
+import {ReactComponent as InvitationIcon} from '../../images/icons/invitation.svg';
 
 const React = require('react');
 
@@ -111,6 +112,28 @@ export const SignupPageStyles = `
     .gh-portal-content.signin + footer.gh-portal-signin-footer {
         height: 120px;
     }
+
+    footer.gh-portal-signup-footer.invite-only {
+        height: unset;
+    }
+
+    .gh-portal-invite-only-notification {
+        margin: 8px 32px;
+        padding: 0;
+        text-align: center;
+        color: var(--grey2);
+    }
+
+    .gh-portal-icon-invitation {
+        width: 44px;
+        margin: 12px 0 2px;
+    }
+
+    .gh-portal-icon-invitation path,
+    .gh-portal-icon-invitation circle,
+    .gh-portal-icon-invitation line {
+        stroke-width: 1.2px;
+    }
 `;
 
 class SignupPage extends React.Component {
@@ -378,7 +401,7 @@ class SignupPage extends React.Component {
             return (
                 <section>
                     <div className='gh-portal-section'>
-                        This site is invite only. Contact owner if you'd like to sign up.
+                        <p className='gh-portal-invite-only-notification'>This site is invite-only, contact the owner for access.</p>
                     </div>
                 </section>
             );
@@ -398,6 +421,7 @@ class SignupPage extends React.Component {
     }
 
     renderSiteLogo() {
+        const plansData = this.getPlans();
         const {site} = this.context;
         const siteLogo = site.icon;
 
@@ -408,6 +432,10 @@ class SignupPage extends React.Component {
             return (
                 <img className='gh-portal-signup-logo' src={siteLogo} alt={site.title} />
             );
+        } else if (plansData.length === 0) {
+            return (
+                <InvitationIcon className='gh-portal-icon gh-portal-icon-invitation' />
+            );
         }
         return null;
     }
@@ -428,6 +456,7 @@ class SignupPage extends React.Component {
         const plansData = this.getPlans();
         const fields = this.getInputFields({state: this.state});
         let sectionClass = '';
+        let footerClass = '';
 
         if (plansData.length <= 1) {
             if ((plansData.length === 1 && plansData[0].type === 'free') || plansData.length === 0) {
@@ -435,6 +464,9 @@ class SignupPage extends React.Component {
                 if (fields.length === 1) {
                     sectionClass = 'single-field';
                 }
+                if (plansData.length === 0) {
+                    footerClass = 'invite-only';
+                }
             } else {
                 sectionClass = 'singleplan';
             }
@@ -447,7 +479,7 @@ class SignupPage extends React.Component {
                     {this.renderFormHeader()}
                     {this.renderForm()}
                 </div>
-                <footer className='gh-portal-signup-footer'>
+                <footer className={'gh-portal-signup-footer ' + footerClass}>
                     {this.renderSubmitButton()}
                     {this.renderLoginMessage()}
                 </footer>
diff --git a/ghost/portal/src/images/icons/invitation.svg b/ghost/portal/src/images/icons/invitation.svg
new file mode 100644
index 0000000000..8ead5912a9
--- /dev/null
+++ b/ghost/portal/src/images/icons/invitation.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>invitation</title><path class="a" d="M12,13.5H3.75A1.5,1.5,0,0,1,2.25,12V2.25A1.5,1.5,0,0,1,3.75.75h16.5a1.5,1.5,0,0,1,1.5,1.5V12a1.5,1.5,0,0,1-1.5,1.5h-4.5"/><line class="a" x1="12.9" y1="3.75" x2="18.75" y2="3.75"/><path class="a" d="M15.75,13.5V9.375a1.875,1.875,0,0,0-3.75,0v5.1l-.488,1.949a5.593,5.593,0,0,0,0,2.925A14.112,14.112,0,0,0,12.75,21.3v1.95H19.5c0-4.414-.189-3.769.557-6.8"/><path class="a" d="M11.633,15.941a4.34,4.34,0,0,1-1.516,1.946c-.59.309-1.867.115-1.867-.975V13.5"/><circle class="a" cx="7.5" cy="6.375" r="2.25"/></svg>
\ No newline at end of file