TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-23 22:11:09 +03:00
Code Issues Projects Releases Wiki Activity

Added spinner on member signup pages

Browse Source 
no issue
This commit is contained in:
Rish 2019-04-16 23:22:15 +05:30 committed by Fabien O'Carroll
parent 0fbc808ff9
commit b00c82d3a6
3 changed files with 56 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
ghost/members-api/static/auth/components/Modal.js
View File

@ -18,6 +18,7 @@ export default class Modal extends Component {
this.state = {
error: null,
showLoggedIn: false,
showSpinner: false,
containerClass: 'gm-page-overlay'
}
}
@ -45,23 +46,27 @@ export default class Modal extends Component {
});
}
renderSignupPage({error, stripeConfig, members, signup, closeModal, siteConfig}) {
renderSignupPage({error, stripeConfig, members, signup, closeModal, siteConfig, showSpinner}) {
if (stripeConfig) {
const createAccountWithSubscription = (data) => members.signup(data).then((success) => {
members.createSubscription(data).then((success) => {
window.location.hash = 'signup-complete';
const createAccountWithSubscription = (data) => {
this.setState({showSpinner: true});
members.signup(data).then((success) => {
members.createSubscription(data).then((success) => {
this.setState({showSpinner: false});
window.location.hash = 'signup-complete';
}, (error) => {
this.setState({ error: "Unable to confirm payment", showSpinner: false });
});
}, (error) => {
this.setState({ error: "Unable to confirm payment" });
});
}, (error) => {
this.setState({ error: "Unable to signup" });
});
return <StripeSubscribePage stripeConfig={stripeConfig} error={error} hash="signup" handleSubmit={createAccountWithSubscription} handleClose={closeModal} siteConfig={siteConfig} />
this.setState({ error: "Unable to signup", showSpinner: false });
})
};
return <StripeSubscribePage stripeConfig={stripeConfig} error={error} hash="signup" handleSubmit={createAccountWithSubscription} handleClose={closeModal} siteConfig={siteConfig} showSpinner={showSpinner} />
}
return (
<SignupPage error={error} hash="signup" handleSubmit={signup} handleClose={closeModal} />
<SignupPage error={error} hash="signup" handleSubmit={signup} handleClose={closeModal} showSpinner={showSpinner} />
);
}
@ -78,17 +83,21 @@ export default class Modal extends Component {
}
render(props, state) {
const { containerClass, error, loadingConfig, paymentConfig, siteConfig, showLoggedIn } = state;
const { containerClass, error, loadingConfig, paymentConfig, siteConfig, showLoggedIn, showSpinner } = state;
const { members } = this.context;
const closeModal = () => this.close();
const clearError = () => this.setState({ error: null });
const signup = (data) => members.signup(data).then((success) => {
window.location.hash = 'signup-complete';
}, (error) => {
this.setState({ error });
});
const signup = (data) => {
this.setState({showSpinner: true});
members.signup(data).then((success) => {
this.setState({showSpinner: false});
window.location.hash = 'signup-complete';
}, (error) => {
this.setState({ error, showSpinner: false });
})
};
// const signin = (data) => this.handleAction(members.signin(data));
const signin = (data) => members.signin(data).then((success) => {
@ -122,7 +131,7 @@ export default class Modal extends Component {
<Pages className={containerClass} onChange={clearError} onClick={closeModal} stripeConfig={stripeConfig} siteConfig={siteConfig}>
<SigninPage error={error} hash="" handleSubmit={signup} showLoggedIn={showLoggedIn} />
<SigninPage error={error} hash="signin" handleSubmit={signin} showLoggedIn={showLoggedIn} />
{this.renderSignupPage({ error, stripeConfig, members, signup, closeModal, siteConfig})}
{this.renderSignupPage({ error, stripeConfig, members, signup, closeModal, siteConfig, showSpinner})}
{this.renderUpgradePage(props, state)}
<SignupCompletePage error={ error } hash="signup-complete" handleSubmit={ closeModal } siteConfig={ siteConfig } />
<RequestPasswordResetPage error={error} hash="request-password-reset" handleSubmit={requestReset} />

37
ghost/members-api/static/auth/pages/SignupPage.js
View File

@ -8,19 +8,24 @@ import EmailInput from '../components/EmailInput';
import PasswordInput from '../components/PasswordInput';
import { IconClose } from '../components/icons';
export default ({ error, handleClose, handleSubmit }) => (
<div className="gm-modal-form gm-signup-page">
<FormHeader title="" error={error} errorText="Email already registered">
<div className="flex justify-between items-baseline">
<h1>Sign up</h1>
<FormHeaderCTA title="Already a member?" label="Log in" hash="#signin" />
</div>
</FormHeader>
<Form onSubmit={handleSubmit}>
<NameInput bindTo="name" className="first" />
<EmailInput bindTo="email" />
<PasswordInput bindTo="password" className="last" />
<FormSubmit label="Sign up" />
</Form>
</div>
);
export default ({ error, handleClose, handleSubmit, showSpinner }) => {
let label = showSpinner ? (
<span><span class="gm-spinner"></span> Signing up... </span>
) : "Sign up";
return (
<div className="gm-modal-form gm-signup-page">
<FormHeader title="" error={error} errorText="Email already registered">
<div className="flex justify-between items-baseline">
<h1>Sign up</h1>
<FormHeaderCTA title="Already a member?" label="Log in" hash="#signin" />
</div>
</FormHeader>
<Form onSubmit={handleSubmit}>
<NameInput bindTo="name" className="first" />
<EmailInput bindTo="email" />
<PasswordInput bindTo="password" className="last" />
<FormSubmit label={label} />
</Form>
</div>
)
};

11
ghost/members-api/static/auth/pages/StripeSubscribePage.js
View File

@ -35,13 +35,18 @@ class PaymentForm extends Component {
}
render() {
let label = this.props.showSpinner ? (
(
<span><span class="gm-spinner"></span> Signing up... </span>
)
) : "Confirm payment";
return (
<Form bindTo="request-password-reset" onSubmit={(data) => this.handleSubmit(data)}>
<NameInput bindTo="name" className="first" />
<EmailInput bindTo="email" />
<PasswordInput bindTo="password" />
<CheckoutForm />
<FormSubmit label="Confirm payment" onClick={() => this.onClick()}/>
<FormSubmit label={label} onClick={() => this.onClick()}/>
</Form>
);
}
@ -104,7 +109,7 @@ export default class StripePaymentPage extends Component {
)
}
render({ error, handleSubmit, stripeConfig, siteConfig }) {
render({ error, handleSubmit, stripeConfig, siteConfig, showSpinner }) {
const publicKey = stripeConfig.config.publicKey || '';
let iconUrl = siteConfig && siteConfig.icon;
let title = (siteConfig && siteConfig.title) || "Ghost Publication";
@ -119,7 +124,7 @@ export default class StripePaymentPage extends Component {
<div className="gm-modal-form gm-subscribe-form">
<StripeProvider apiKey={publicKey}>
<Elements>
<PaymentFormWrapped handleSubmit={handleSubmit} publicKey={publicKey} selectedPlan={this.state.selectedPlan} />
<PaymentFormWrapped handleSubmit={handleSubmit} publicKey={publicKey} selectedPlan={this.state.selectedPlan} showSpinner={showSpinner} />
</Elements>
</StripeProvider>
<div className="flex justify-center mt4">