From c44241e27ddff2d53d9cda730c494019065f9e3c Mon Sep 17 00:00:00 2001
From: Rish <zrishabhgarg@gmail.com>
Date: Thu, 23 Apr 2020 21:18:34 +0530
Subject: [PATCH] Fixed signup with email not working on free plan

closes https://github.com/TryGhost/members.js/issues/16

This fix sends magic link to member when they choose free plan to signup using name and email.

Note: We are not storing `name` atm in magic link, so it gets ignored in actual member data on signup atm.
---
 .../portal/src/components/ParentContainer.js  | 12 +++++++++++
 .../portal/src/components/pages/SignupPage.js | 20 +++++++------------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/ghost/portal/src/components/ParentContainer.js b/ghost/portal/src/components/ParentContainer.js
index 9b5a374c85..b48be0fb0e 100644
--- a/ghost/portal/src/components/ParentContainer.js
+++ b/ghost/portal/src/components/ParentContainer.js
@@ -138,6 +138,18 @@ export default class ParentContainer extends React.Component {
                 });
             }
 
+            if (action === 'signup') {
+                await this.MembersAPI.member.sendMagicLink(data);
+                this.setState({
+                    action: {
+                        name: action,
+                        isRunning: false,
+                        isSuccess: true
+                    },
+                    page: 'magiclink'
+                });
+            }
+
             if (action === 'checkoutPlan') {
                 const checkoutSuccessUrl = (new URL('/account/?stripe=billing-update-success', window.location.href)).href;
                 const checkoutCancelUrl = (new URL('/account/?stripe=billing-update-cancel', window.location.href)).href;
diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js
index 0433c31c35..085c8c7f88 100644
--- a/ghost/portal/src/components/pages/SignupPage.js
+++ b/ghost/portal/src/components/pages/SignupPage.js
@@ -24,22 +24,12 @@ export default class SignupPage extends React.Component {
         };
     }
 
-    handleSignin(e) {
+    handleSignup(e) {
         e.preventDefault();
         const email = this.state.email;
         const name = this.state.name;
         const plan = this.state.plan;
         this.props.onAction('signup', {name, email, plan});
-        this.setState({
-            isLoading: true,
-            showSuccess: false
-        });
-        setTimeout(() => {
-            this.setState({
-                isLoading: false,
-                showSuccess: true
-            });
-        }, 3000);
     }
 
     handleInput(e, field) {
@@ -72,11 +62,15 @@ export default class SignupPage extends React.Component {
             width: '100%',
             marginBottom: '12px'
         };
+        const isRunning = this.props.action && this.props.action.name === 'signup' && this.props.action.isRunning;
         const label = this.state.isLoading ? 'Sending' : 'Continue';
-        const disabled = this.state.isLoading ? true : false;
+        const disabled = isRunning ? true : false;
+        if (disabled) {
+            buttonStyle.backgroundColor = 'grey';
+        }
         return (
             <button onClick={(e) => {
-                this.handleSignin(e);
+                this.handleSignup(e);
             }} style={buttonStyle} disabled={disabled}>
                 {label}
             </button>