TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-05 09:50:34 +03:00
Code Issues Projects Releases Wiki Activity

Updated members modal UI structure

Browse Source 
no issue
This commit is contained in:
Rish 2019-02-15 14:05:03 +05:30
parent 76c6f96aed
commit b84881e842
8 changed files with 100 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
core/server/lib/members/static/auth/components/Modal.js
View File

@ -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) {
@ -41,18 +42,14 @@ export default class Modal extends Component {
});
}
renderSignupPage(state) {
const { error, paymentConfig } = state;
const { members } = this.context;
const signup = (data) => this.handleAction(members.signup(data));
const closeModal = () => this.close();
renderSignupPage({error, stripeConfig, members, signup, closeModal}) {
if (stripeConfig) {
const createAccountWithSubscription = (data) => this.handleAction(
members.signup(data).then(() => {
members.createSubscription(data);
})
);
const stripeConfig = paymentConfig && paymentConfig.find(({adapter}) => adapter === 'stripe');
if (stripeConfig) {
return <StripePaymentPage stripeConfig={stripeConfig} error={error} hash="signup" handleSubmit={createAccountWithSubscription} handleClose={closeModal} />
}
@ -62,7 +59,6 @@ export default class Modal extends Component {
}
render(props, state) {
const { queryToken } = props;
const { containerClass, error, loadingConfig, paymentConfig } = state;
const { members } = this.context;
@ -73,6 +69,7 @@ export default class Modal extends Component {
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>
);
}

10
core/server/lib/members/static/auth/components/Pages.js
View File

@ -31,11 +31,19 @@ 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}>
<div className="gm-modal-container">
<div className={modalClassName} onClick={(e) => e.stopPropagation()}>
{this.filterChildren(children, state)}
</div>
</div>
</div>
);
}
}

8
core/server/lib/members/static/auth/pages/PasswordResetSentPage.js
View File

@ -1,11 +1,8 @@
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>
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">
@ -14,5 +11,4 @@ export default ({error, handleClose, handleSubmit}) => (
<FormSubmit label="Resend instructions" />
</Form>
</div>
</div>
);

6
core/server/lib/members/static/auth/pages/RequestPasswordResetPage.js
View File

@ -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>
<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>
</div>
);

8
core/server/lib/members/static/auth/pages/ResetPasswordPage.js
View File

@ -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>
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>
</div>
);

9
core/server/lib/members/static/auth/pages/SigninPage.js
View File

@ -6,12 +6,8 @@ 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>
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>
@ -25,5 +21,4 @@ export default ({error, handleClose, handleSubmit}) => (
<FormSubmit label="Log in" />
</Form>
</div>
</div>
);

5
core/server/lib/members/static/auth/pages/SignupPage.js
View File

@ -9,9 +9,7 @@ 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>
<div>
<FormHeader title="Sign up" error={error} errorText="Email already registered">
<FormHeaderCTA title="Already a member?" label="Log in" hash="#signin" />
</FormHeader>
@ -22,5 +20,4 @@ export default ({error, handleClose, handleSubmit}) => (
<FormSubmit label="Sign up" />
</Form>
</div>
</div>
);

8
core/server/lib/members/static/auth/pages/StripePaymentPage.js
View File

@ -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';
@ -119,12 +118,9 @@ 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">
@ -139,8 +135,6 @@ export default class StripePaymentPage extends Component {
<div style={{ border: "1px solid black" }}></div>
{this.renderPlansSection()}
</div>
</div>
</div>
)
}
};