Updated members modal UI structure

no issue

ghost/members-api/static/auth/components/Modal.js

@@ -8,6 +8,7 @@ import RequestPasswordResetPage from '../pages/RequestPasswordResetPage';
 import PasswordResetSentPage from '../pages/PasswordResetSentPage';
 import ResetPasswordPage from '../pages/ResetPasswordPage';
 import StripePaymentPage from '../pages/StripePaymentPage';
+import { IconClose } from '../components/icons';
 
 export default class Modal extends Component {
     constructor(props, context) {
@@ -23,9 +24,9 @@ export default class Modal extends Component {
             return;
         }
         this.context.members.getConfig().then(paymentConfig => {
-            this.setState({paymentConfig, loadingConfig: false});
+            this.setState({ paymentConfig, loadingConfig: false });
         }).catch((error) => {
-            this.setState({error, loadingConfig: false});
+            this.setState({ error, loadingConfig: false });
         });
     }
 
@@ -37,42 +38,38 @@ export default class Modal extends Component {
         promise.then((success) => {
             this.close(success);
         }, (error) => {
-            this.setState({error});
+            this.setState({ error });
         });
     }
 
-    renderSignupPage(state) {
-        const { error, paymentConfig } = state;
-        const { members } = this.context;
-        const signup = (data) => this.handleAction(members.signup(data));
-        const closeModal = () => this.close();
-        const createAccountWithSubscription = (data) => this.handleAction(
-            members.signup(data).then(() => {
-                members.createSubscription(data);
-            })
-        );
-        const stripeConfig = paymentConfig && paymentConfig.find(({adapter}) => adapter === 'stripe');
+    renderSignupPage({error, stripeConfig, members, signup, closeModal}) {
+
         if (stripeConfig) {
-            return <StripePaymentPage stripeConfig={stripeConfig} error={error} hash="signup" handleSubmit={createAccountWithSubscription} handleClose={closeModal}/>
+            const createAccountWithSubscription = (data) => this.handleAction(
+                members.signup(data).then(() => {
+                    members.createSubscription(data);
+                })
+            );
+            return <StripePaymentPage stripeConfig={stripeConfig} error={error} hash="signup" handleSubmit={createAccountWithSubscription} handleClose={closeModal} />
 
         }
         return (
-            <SignupPage error={error} hash="signup" handleSubmit={signup} handleClose={closeModal}/>
+            <SignupPage error={error} hash="signup" handleSubmit={signup} handleClose={closeModal} />
         )
     }
 
     render(props, state) {
-        const { queryToken } = props;
         const { containerClass, error, loadingConfig, paymentConfig } = state;
         const { members } = this.context;
 
         const closeModal = () => this.close();
-        const clearError = () => this.setState({error: null});
+        const clearError = () => this.setState({ error: null });
 
         const signin = (data) => this.handleAction(members.signin(data));
         const signup = (data) => this.handleAction(members.signup(data));
         const requestReset = (data) => this.handleAction(members.requestPasswordReset(data));
         const resetPassword = (data) => this.handleAction(members.resetPassword(data));
+        const stripeConfig = paymentConfig && paymentConfig.find(({ adapter }) => adapter === 'stripe');
 
         if (loadingConfig) {
             return (
@@ -82,13 +79,13 @@ export default class Modal extends Component {
             );
         }
         return (
-            <Pages className={containerClass} onChange={clearError} onClick={closeModal}>
-                <SigninPage error={error} hash="" handleSubmit={signup} handleClose={closeModal}/>
-                <SigninPage error={error} hash="signin" handleSubmit={signin} handleClose={closeModal}/>
-                {this.renderSignupPage(state)}
-                <RequestPasswordResetPage error={error} hash="request-password-reset" handleSubmit={requestReset} handleClose={closeModal}/>
-                <PasswordResetSentPage error={error} hash="password-reset-sent" handleSubmit={requestReset} handleClose={closeModal}/>
-                <ResetPasswordPage error={error} hash="reset-password" handleSubmit={resetPassword} handleClose={closeModal}/>
+            <Pages className={containerClass} onChange={clearError} onClick={closeModal} stripeConfig={stripeConfig}>
+                <SigninPage error={error} hash="" handleSubmit={signup} />
+                <SigninPage error={error} hash="signin" handleSubmit={signin} />
+                {this.renderSignupPage({error, stripeConfig, members, signup, closeModal})}
+                <RequestPasswordResetPage error={error} hash="request-password-reset" handleSubmit={requestReset} />
+                <PasswordResetSentPage error={error} hash="password-reset-sent" handleSubmit={requestReset} />
+                <ResetPasswordPage error={error} hash="reset-password" handleSubmit={resetPassword} />
             </Pages>
         );
     }

ghost/members-api/static/auth/components/Pages.js

@@ -5,7 +5,7 @@ export default class Pages extends Component {
         super(props);
         this.state = this.getStateFromBrowser();
         window.addEventListener("hashchange", () => this.onHashChange(), false);
-        this.handleChange = props.onChange || (() => {});
+        this.handleChange = props.onChange || (() => { });
     }
 
     getStateFromBrowser() {
@@ -31,10 +31,18 @@ export default class Pages extends Component {
         });
     }
 
-    render({children, className, onClick}, state) {
+    render({ children, className, onClick, stripeConfig }, state) {
+        let modalClassName = "gm-modal gm-auth-modal";
+        if (state.hash === 'signup' && stripeConfig) {
+            modalClassName += " gm-subscribe-modal"
+        }
         return (
             <div className={className} onClick={onClick}>
-                { this.filterChildren(children, state) }
+                <div className="gm-modal-container">
+                    <div className={modalClassName} onClick={(e) => e.stopPropagation()}>
+                        {this.filterChildren(children, state)}
+                    </div>
+                </div>
             </div>
         );
     }

ghost/members-api/static/auth/pages/PasswordResetSentPage.js

@@ -1,18 +1,14 @@
 import FormHeader from '../components/FormHeader';
 import FormSubmit from '../components/FormSubmit';
-import { IconClose } from '../components/icons';
 
-export default ({error, handleClose, handleSubmit}) => (
-    <div className="gm-modal-container">
-        <div className="gm-modal gm-auth-modal" onClick={(e) => e.stopPropagation()}>
-            <a className="gm-modal-close" onClick={handleClose}>{ IconClose }</a>
-            <FormHeader title="Sign up" error={error} errorText="Unable to send email"/>
-            <Form bindTo="request-password-reset" onSubmit={handleSubmit}>
-                <div className="gm-reset-sent">
-                    <p>We’ve sent a recovery email to your inbox. Follow the link in the email to reset your password.</p>
-                </div>
-                <FormSubmit label="Resend instructions" />
-            </Form>
-        </div>
+export default ({ error, handleSubmit }) => (
+    <div>
+        <FormHeader title="Sign up" error={error} errorText="Unable to send email" />
+        <Form bindTo="request-password-reset" onSubmit={handleSubmit}>
+            <div className="gm-reset-sent">
+                <p>We’ve sent a recovery email to your inbox. Follow the link in the email to reset your password.</p>
+            </div>
+            <FormSubmit label="Resend instructions" />
+        </Form>
     </div>
 );

ghost/members-api/static/auth/pages/RequestPasswordResetPage.js

@@ -1,19 +1,15 @@
 import FormHeader from '../components/FormHeader';
 import EmailInput from '../components/EmailInput';
 import FormSubmit from '../components/FormSubmit';
-import { IconClose } from '../components/icons';
 
 import Form from '../components/Form';
 
-export default ({error, handleClose, handleSubmit}) => (
-    <div className="gm-modal-container">
-        <div className="gm-modal gm-auth-modal" onClick={(e) => e.stopPropagation()}>
-            <a className="gm-modal-close" onClick={handleClose}>{ IconClose }</a>
-            <FormHeader title="Reset password" error={error} errorText="Unable to send email"/>
-            <Form bindTo="request-password-reset" onSubmit={handleSubmit}>
-                <EmailInput bindTo="email"/>
-                <FormSubmit label="Send reset password instructions"/>
-            </Form>
-        </div>
+export default ({ error, handleClose, handleSubmit }) => (
+    <div>
+        <FormHeader title="Reset password" error={error} errorText="Unable to send email" />
+        <Form bindTo="request-password-reset" onSubmit={handleSubmit}>
+            <EmailInput bindTo="email" />
+            <FormSubmit label="Send reset password instructions" />
+        </Form>
     </div>
 );

ghost/members-api/static/auth/pages/ResetPasswordPage.js

@@ -2,7 +2,6 @@ import FormHeader from '../components/FormHeader';
 import PasswordInput from '../components/PasswordInput';
 import FormSubmit from '../components/FormSubmit';
 import Form from '../components/Form';
-import { IconClose } from '../components/icons';
 
 const getTokenData = frameLocation => {
     const params = new URLSearchParams(frameLocation.query);
@@ -11,15 +10,12 @@ const getTokenData = frameLocation => {
 
 };
 
-export default ({error, frameLocation, handleClose, handleSubmit}) => (
-    <div className="gm-modal-container">
-        <div className="gm-modal gm-auth-modal" onClick={(e) => e.stopPropagation()}>
-            <a className="gm-modal-close" onClick={handleClose}>{ IconClose }</a>
-            <FormHeader title="Reset password" error={error} errorText="Unable to reset password"/>
-            <Form includeData={getTokenData(frameLocation)} onSubmit={handleSubmit}>
-                <PasswordInput bindTo="password" />
-                <FormSubmit label="Set password" />
-            </Form>
-        </div>
+export default ({ error, frameLocation, handleSubmit }) => (
+    <div>
+        <FormHeader title="Reset password" error={error} errorText="Unable to reset password" />
+        <Form includeData={getTokenData(frameLocation)} onSubmit={handleSubmit}>
+            <PasswordInput bindTo="password" />
+            <FormSubmit label="Set password" />
+        </Form>
     </div>
 );

ghost/members-api/static/auth/pages/SigninPage.js

@@ -6,24 +6,19 @@ import FormSubmit from '../components/FormSubmit';
 import EmailInput from '../components/EmailInput';
 import PasswordInput from '../components/PasswordInput';
 
-import { IconClose } from '../components/icons';
-
-export default ({error, handleClose, handleSubmit}) => (
-    <div className="gm-modal-container">
-        <div className="gm-modal gm-auth-modal" onClick={(e) => e.stopPropagation()}>
-            <a className="gm-modal-close" onClick={handleClose}>{ IconClose }</a>
-            <FormHeader title="Log in" error={error} errorText="Wrong email or password">
-                <FormHeaderCTA title="Not a member?" label="Sign up" hash="#signup" />
-            </FormHeader>
-            <Form onSubmit={handleSubmit}>
-                <EmailInput bindTo="email"/>
-                <PasswordInput bindTo="password" className="gm-forgot-input">
-                    <a href="#request-password-reset" className="gm-forgot-link">
-                        Forgot
+export default ({ error, handleSubmit }) => (
+    <div>
+        <FormHeader title="Log in" error={error} errorText="Wrong email or password">
+            <FormHeaderCTA title="Not a member?" label="Sign up" hash="#signup" />
+        </FormHeader>
+        <Form onSubmit={handleSubmit}>
+            <EmailInput bindTo="email" />
+            <PasswordInput bindTo="password" className="gm-forgot-input">
+                <a href="#request-password-reset" className="gm-forgot-link">
+                    Forgot
                     </a>
-                </PasswordInput>
-                <FormSubmit label="Log in"/>
-            </Form>
-        </div>
+            </PasswordInput>
+            <FormSubmit label="Log in" />
+        </Form>
     </div>
 );

ghost/members-api/static/auth/pages/SignupPage.js

@@ -8,19 +8,16 @@ import EmailInput from '../components/EmailInput';
 import PasswordInput from '../components/PasswordInput';
 import { IconClose } from '../components/icons';
 
-export default ({error, handleClose, handleSubmit}) => (
-    <div className="gm-modal-container">
-        <div className="gm-modal gm-auth-modal" onClick={(e) => e.stopPropagation()}>
-            <a className="gm-modal-close" onClick={handleClose}>{ IconClose }</a>
-            <FormHeader title="Sign up" error={error} errorText="Email already registered">
-                <FormHeaderCTA title="Already a member?" label="Log in" hash="#signin" />
-            </FormHeader>
-            <Form onSubmit={handleSubmit}>
-                <NameInput bindTo="name" />
-                <EmailInput bindTo="email" />
-                <PasswordInput bindTo="password" />
-                <FormSubmit label="Sign up" />
-            </Form>
-        </div>
+export default ({ error, handleClose, handleSubmit }) => (
+    <div>
+        <FormHeader title="Sign up" error={error} errorText="Email already registered">
+            <FormHeaderCTA title="Already a member?" label="Log in" hash="#signin" />
+        </FormHeader>
+        <Form onSubmit={handleSubmit}>
+            <NameInput bindTo="name" />
+            <EmailInput bindTo="email" />
+            <PasswordInput bindTo="password" />
+            <FormSubmit label="Sign up" />
+        </Form>
     </div>
 );

ghost/members-api/static/auth/pages/StripePaymentPage.js

@@ -3,7 +3,6 @@ import { Component } from 'react';
 import FormHeader from '../components/FormHeader';
 import FormSubmit from '../components/FormSubmit';
 import FormHeaderCTA from '../components/FormHeaderCTA';
-import { IconClose } from '../components/icons';
 import NameInput from '../components/NameInput';
 import EmailInput from '../components/EmailInput';
 import PasswordInput from '../components/PasswordInput';
@@ -72,9 +71,9 @@ export default class StripePaymentPage extends Component {
             <div style={planStyle}>
                 <input type="radio" id={id} name="radio-group" value={id} defaultChecked={id === selectedPlanId} />
                 <label for={id}>
-                    <span style={{fontSize: "24px", marginLeft: "9px"}}> {`$${amount}`}</span>
-                    <span style={{padding: "0px 1px", color: "#77919c"}}> / </span>
-                    <span style={{color: "#77919c"}}> {`${interval}`}</span>
+                    <span style={{ fontSize: "24px", marginLeft: "9px" }}> {`$${amount}`}</span>
+                    <span style={{ padding: "0px 1px", color: "#77919c" }}> / </span>
+                    <span style={{ color: "#77919c" }}> {`${interval}`}</span>
                 </label>
             </div>
         )
@@ -106,11 +105,11 @@ export default class StripePaymentPage extends Component {
         }
         return (
             <div style={{ padding: "20px", width: "295px", display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column", background: "#fcfdfd" }}>
-                <div style={{display: "flex", alignItems: "center"}}>
+                <div style={{ display: "flex", alignItems: "center" }}>
                     <div className="gm-logo"></div>
-                    <div style={{display: "flex", flexDirection: "column", paddingLeft: "12px"}}>
-                        <span style={{fontSize: "16px", fontWeight: "bold"}}> The Blueprint</span>
-                        <span style={{fontSize: "14px", color: "#9cb2bc", marginTop: "3px"}}> Subscription</span>
+                    <div style={{ display: "flex", flexDirection: "column", paddingLeft: "12px" }}>
+                        <span style={{ fontSize: "16px", fontWeight: "bold" }}> The Blueprint</span>
+                        <span style={{ fontSize: "14px", color: "#9cb2bc", marginTop: "3px" }}> Subscription</span>
                     </div>
                 </div>
                 <div className="separator" style={separatorStyle}> </div>
@@ -119,27 +118,22 @@ export default class StripePaymentPage extends Component {
         )
     }
 
-    render({ error, handleClose, handleSubmit, stripeConfig }) {
+    render({ error, handleSubmit, stripeConfig }) {
         const publicKey = stripeConfig.config.publicKey || '';
         return (
-            <div className="gm-modal-container">
-                <div className="gm-modal gm-auth-modal gm-subscribe-modal" onClick={(e) => e.stopPropagation()}>
-                    <a className="gm-modal-close" onClick={handleClose}>{IconClose}</a>
-                    <div style={{ display: "flex" }}>
-                        <div style={{ width: "300px", padding: "20px" }}>
-                            <FormHeader title="Subscribe" error={error} errorText="Unable to confirm payment">
-                                <FormHeaderCTA title="Already a member?" label="Log in" hash="#signin" />
-                            </FormHeader>
-                            <StripeProvider apiKey={publicKey}>
-                                <Elements>
-                                    <PaymentFormWrapped handleSubmit={handleSubmit} publicKey={publicKey} selectedPlan={this.state.selectedPlan} />
-                                </Elements>
-                            </StripeProvider>
-                        </div>
-                        <div style={{ border: "1px solid black" }}></div>
-                        {this.renderPlansSection()}
-                    </div>
+            <div style={{ display: "flex" }}>
+                <div style={{ width: "300px", padding: "20px" }}>
+                    <FormHeader title="Subscribe" error={error} errorText="Unable to confirm payment">
+                        <FormHeaderCTA title="Already a member?" label="Log in" hash="#signin" />
+                    </FormHeader>
+                    <StripeProvider apiKey={publicKey}>
+                        <Elements>
+                            <PaymentFormWrapped handleSubmit={handleSubmit} publicKey={publicKey} selectedPlan={this.state.selectedPlan} />
+                        </Elements>
+                    </StripeProvider>
                 </div>
+                <div style={{ border: "1px solid black" }}></div>
+                {this.renderPlansSection()}
             </div>
         )
     }