Ghost/ghost/members-auth-pages/components/Modal.js

160 lines
6.3 KiB
JavaScript
Raw Normal View History

import { Component } from 'preact';
import Pages from './Pages';
import SigninPage from '../pages/SigninPage';
import SignupPage from '../pages/SignupPage';
import SignupCompletePage from '../pages/SignupCompletePage';
import RequestPasswordResetPage from '../pages/RequestPasswordResetPage';
import PasswordResetSentPage from '../pages/PasswordResetSentPage';
import ResetPasswordPage from '../pages/ResetPasswordPage';
import StripeSubscribePage from '../pages/StripeSubscribePage';
import { IconClose } from '../components/icons';
import StripeUpgradePage from '../pages/StripeUpgradePage';
export default class Modal extends Component {
constructor(props, context) {
super();
this.state = {
error: null,
showLoggedIn: false,
showSpinner: false,
containerClass: 'gm-page-overlay'
}
}
loadConfig() {
if (this.state.loadingConfig) {
return;
}
this.context.members.getConfig().then(({paymentConfig, siteConfig}) => {
this.setState({ paymentConfig, siteConfig, loadingConfig: false });
}).catch((error) => {
this.setState({ error, loadingConfig: false });
});
}
componentWillMount() {
this.loadConfig();
}
handleAction(promise) {
promise.then((success) => {
this.close(success);
}, (error) => {
this.setState({ error });
});
}
renderSignupPage({error, stripeConfig, members, signup, closeModal, siteConfig, showSpinner}) {
if (stripeConfig) {
const createAccountWithSubscription = (data) => {
this.setState({showSpinner: true});
return members.signup(data).then((success) => {
return 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 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} showSpinner={showSpinner} />
);
}
renderUpgradePage(props, state) {
const { error, paymentConfig } = state;
const { members } = this.context;
const closeModal = () => this.close();
const createSubscription = (data) => this.handleAction(
members.createSubscription(data)
);
const stripeConfig = paymentConfig && paymentConfig.find(({adapter}) => adapter === 'stripe');
return <StripeUpgradePage stripeConfig={stripeConfig} error={error} hash="upgrade" handleSubmit={createSubscription} handleClose={closeModal}/>
}
render(props, 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) => {
this.setState({showSpinner: true});
return 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) => {
const clearShowLoggedIn = () => {
this.setState({showLoggedIn: false});
this.close();
}
this.setState({showLoggedIn: true}, () => {
window.setTimeout(clearShowLoggedIn, 5000)
});
}, (error) => {
this.setState({ error });
});
const requestReset = (data) => members.requestPasswordReset(data).then((success) => {
window.location.hash = 'password-reset-sent';
}, (error) => {
this.setState({ error });
});
const resetPassword = (data) => this.handleAction(members.resetPassword(data));
const stripeConfig = paymentConfig && paymentConfig.find(({ adapter }) => adapter === 'stripe');
if (loadingConfig) {
return (
<Pages className={containerClass} onChange={clearError} onClick={closeModal}>
Loading...
</Pages>
);
}
return (
<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, showSpinner})}
{this.renderUpgradePage(props, state)}
<SignupCompletePage error={ error } hash="signup-complete" handleSubmit={ closeModal } siteConfig={ siteConfig } />
<RequestPasswordResetPage error={error} hash="request-password-reset" handleSubmit={requestReset} />
<PasswordResetSentPage error={ error } hash="password-reset-sent" handleSubmit={closeModal} />
<ResetPasswordPage error={error} hash="reset-password" handleSubmit={resetPassword} />
</Pages>
);
}
close(success) {
this.setState({
containerClass: 'gm-page-overlay close'
});
window.setTimeout(() => {
this.setState({
containerClass: 'gm-page-overlay'
});
window.parent.postMessage({
msg: 'pls-close-auth-popup',
success
}, '*');
}, 700);
}
}