mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-23 22:11:09 +03:00
Members refinements (#10689)
* Updated close animation speed for members pages * Updated responsive styles for members mobile screens * Adding spinner CSS to members pages * Adding members signup complete page
This commit is contained in:
Peter Zimon
Fabien O'Carroll
parent
19f243aed1
commit
09fde87ad9
@ -4,6 +4,7 @@ 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';
|
||||
@ -48,7 +49,7 @@ export default class Modal extends Component {
|
||||
if (stripeConfig) {
|
||||
const createAccountWithSubscription = (data) => members.signup(data).then((success) => {
|
||||
members.createSubscription(data).then((success) => {
|
||||
this.close();
|
||||
window.location.hash = 'signup-complete';
|
||||
}, (error) => {
|
||||
this.setState({ error: "Unable to confirm payment" });
|
||||
});
|
||||
@ -82,8 +83,14 @@ export default class Modal extends Component {
|
||||
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 signin = (data) => this.handleAction(members.signin(data));
|
||||
const signup = (data) => this.handleAction(members.signup(data));
|
||||
|
||||
const requestReset = (data) => members.requestPasswordReset(data).then((success) => {
|
||||
window.location.hash = 'password-reset-sent';
|
||||
}, (error) => {
|
||||
@ -103,8 +110,9 @@ export default class Modal extends Component {
|
||||
<Pages className={containerClass} onChange={clearError} onClick={closeModal} stripeConfig={stripeConfig} siteConfig={siteConfig}>
|
||||
<SigninPage error={error} hash="" handleSubmit={signup} />
|
||||
<SigninPage error={error} hash="signin" handleSubmit={signin} />
|
||||
{this.renderSignupPage({error, stripeConfig, members, signup, closeModal, siteConfig})}
|
||||
{this.renderSignupPage({ error, stripeConfig, members, signup, closeModal, siteConfig})}
|
||||
{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} />
|
||||
|
||||
@ -54,9 +54,9 @@ export default class Pages extends Component {
|
||||
<div className={modalClassName} onClick={(e) => e.stopPropagation()}>
|
||||
{this.filterChildren(children, state)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="gm-powered-by">
|
||||
<a href="https://ghost.org" target="_blank"><span>Powered by</span> {GhostLogo}</a>
|
||||
<div className="gm-powered-by">
|
||||
<a href="https://ghost.org" target="_blank"><span>Powered by</span> { GhostLogo }</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -25,4 +25,8 @@ export const IconRightArrow = (
|
||||
|
||||
export const GhostLogo = (
|
||||
<svg width="493" height="161" viewBox="0 0 493 161" xmlns="http://www.w3.org/2000/svg"><title>ghost-logo</title><g fill="#FFF" fill-rule="nonzero"><path d="M328.52 37.36c-27.017 0-40.97 19.323-40.97 43.16 0 23.837 13.61 43.162 40.97 43.162s40.968-19.325 40.968-43.163c0-23.84-13.954-43.16-40.97-43.16l.002.001zm20.438 43.237c-.02 15.328-5.126 27.743-20.44 27.743-15.312 0-20.42-12.414-20.435-27.743v-.078c.016-15.33 5.124-27.74 20.437-27.74 15.312 0 20.42 12.41 20.438 27.74V80.597zM207.553 5.19c0-1.103.885-2.124 1.984-2.282 0 0 13.577-1.95 14.784-2.115 1.37-.187 3.19.798 3.19 2.744v44.236c3.23-3.105 6.79-5.608 10.66-7.515 3.88-1.906 8.43-2.86 13.66-2.86 4.53 0 8.53.776 12.03 2.33 3.5 1.55 6.43 3.73 8.77 6.533 2.34 2.81 4.12 6.16 5.33 10.05 1.21 3.9 1.82 8.19 1.82 12.87v51.35c0 1.1-.89 2-2 2h-15.95c-1.1 0-2-.9-2-1.99V69.18c0-5.118-1.17-9.08-3.51-11.888-2.35-2.804-5.86-4.207-10.544-4.207-3.45 0-6.677.79-9.69 2.37-3.02 1.58-5.87 3.73-8.564 6.46v58.617c0 1.102-.894 2-2.002 2h-15.94c-1.11 0-2.005-.895-2.005-2V5.188l-.023.002zm244.007 95.327v-43.68h-13.482c-1.1 0-1.742-.87-1.443-1.916l3-10.49c.262-.9.942-1.87 2.308-2.07l9.597-1.35 3.508-23.49c.163-1.09 1.18-2.1 2.274-2.26 0 0 9.192-1.31 10.963-1.58 1.673-.25 3.19.97 3.19 2.81v24.52h17.565c1.106 0 2.002.9 2.002 2.01v11.82c0 1.11-.89 2.01-2.002 2.01h-17.566v43.08c0 6.02 3.623 8.32 7.095 8.32 2.12 0 5.02-1.14 7.19-2.16 1.34-.62 3.41-.16 3.95 1.73l2.45 8.65c.3 1.07-.25 2.37-1.23 2.86 0 0-7.29 4.37-17.06 4.37-13.73 0-22.33-8.08-22.33-23.16l.021-.024zm-44.584-47.74c-7.084 0-12.657 2.476-12.657 8.433 0 7.44 12.01 9.606 20.23 12.64 5.49 2.027 20.24 5.98 20.24 22.016 0 19.48-16 27.807-33.06 27.807-17.06 0-25.4-5.465-25.4-5.465-.96-.527-1.5-1.822-1.2-2.89 0 0 2.1-7.52 2.64-9.386.48-1.68 2.41-2.27 3.64-1.792 4.39 1.712 12.32 4.092 21.28 4.092 9.07 0 13.46-2.803 13.46-8.777 0-7.95-12.26-10.38-20.36-12.967-5.59-1.78-20.36-5.93-20.36-23.566 0-17.373 15.08-25.524 31.2-25.524 13.64 0 23.5 4.69 23.5 4.69 1.01.427 1.58 1.635 1.28 2.698l-2.658 9.357c-.488 1.74-1.898 2.537-3.666 1.957-3.89-1.277-11.2-3.322-18.15-3.322l.041-.001zm-210.313-15.28c-6.695.775-11.472 3.962-14.562 6.93-6.06-4.81-14.49-7.106-23.94-7.106-18.95 0-33.76 9.26-33.76 29.43 0 11.58 4.88 19.56 12.62 24.26-5.75 2.75-9.57 8.59-9.57 14.34 0 9.61 7.5 12.61 7.5 12.61s-13.11 6.44-13.11 19.32c0 16.49 15.01 23.16 33.34 23.16 26.43 0 44.61-11.04 44.61-31.31 0-12.47-9.44-19.36-30.01-20.18-12.2-.48-20.11-.93-22.07-1.58-2.59-.87-3.86-2.96-3.86-5.28 0-2.55 2.08-4.98 5.35-6.65 2.86.516 5.87.768 8.99.768 18.97 0 33.76-9.223 33.76-29.425 0-4.897-.87-9.15-2.46-12.78 2.79-1.506 8.34-2.25 8.34-2.25 1.09-.17 1.975-1.21 1.974-2.31V40.3c0-1.88-1.59-2.955-3.1-2.78l-.042-.023zm-49.13 85.132s9.954.38 19.9.84c11.172.52 14.654 2.96 14.654 8.81 0 7.15-9.71 14.1-23.28 14.1-12.88 0-19.314-4.54-19.314-12.08 0-4.33 2.26-9.18 8.04-11.69v.02zm10.66-40.54c-8.978 0-15.983-4.83-15.983-15.35 0-10.53 7.01-15.35 15.983-15.35 8.974 0 15.984 4.81 15.984 15.34 0 10.53-7.002 15.34-15.984 15.34v.02z" /><g opacity=".6" transform="translate(0 36)"><rect x=".209" y="69.017" width="33.643" height="17.014" rx="4" /><rect x="50.672" y="69.017" width="33.622" height="17.014" rx="4" /><rect x=".184" y="34.99" width="84.121" height="17.014" rx="4" /><rect x=".209" y=".964" width="50.469" height="17.013" rx="4" /><rect x="67.494" y=".964" width="16.821" height="17.013" rx="4" /></g></g></svg>
|
||||
);
|
||||
|
||||
export const IconSignupComplete = (
|
||||
<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><title>SignupComplete</title><g stroke="#FFF" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M58.75 43.75c0 4.142-1.464 7.678-4.393 10.607-2.93 2.929-6.465 4.393-10.607 4.393-4.142 0-7.678-1.464-10.607-4.393-2.929-2.93-4.393-6.465-4.393-10.607 0-4.142 1.464-7.678 4.393-10.607 2.93-2.929 6.465-4.393 10.607-4.393 4.142 0 7.678 1.464 10.607 4.393 2.929 2.93 4.393 6.465 4.393 10.607z" /><path d="M50.435 39.39l-7.263 9.682c-.342.456-.798.704-1.367.745-.569.04-1.056-.14-1.46-.542l-3.75-3.75M29.375 11.875c0 2.934-1.037 5.438-3.112 7.513S21.684 22.5 18.75 22.5s-5.438-1.037-7.513-3.112-3.112-4.579-3.112-7.513 1.037-5.438 3.112-7.513S15.816 1.25 18.75 1.25s5.438 1.037 7.513 3.112 3.112 4.579 3.112 7.513zM21.25 43.75h-20c0-6.921 3.037-12.04 9.11-15.359 6.075-3.318 12.024-3.106 17.848.634" /></g></svg>
|
||||
);
|
||||
17
ghost/members-auth-pages/pages/SignupCompletePage.js
Normal file
17
ghost/members-auth-pages/pages/SignupCompletePage.js
Normal file
@ -0,0 +1,17 @@
|
||||
import FormHeader from '../components/FormHeader';
|
||||
import FormSubmit from '../components/FormSubmit';
|
||||
import { IconSignupComplete } from '../components/icons';
|
||||
import Form from '../components/Form';
|
||||
|
||||
export default ({ error, handleSubmit, siteConfig }) => (
|
||||
<div className="gm-modal-form">
|
||||
<Form bindTo="signup" onSubmit={ handleSubmit }>
|
||||
<div class="flex flex-column items-center">
|
||||
<span>{ IconSignupComplete }</span>
|
||||
<h1 className="mt4">Sign up complete</h1>
|
||||
<p className="gm-thank-you">Thank you for signing up for { siteConfig.title }! Now you have access to the full content of the site.</p>
|
||||
</div>
|
||||
<FormSubmit label="Enjoy!" />
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
@ -114,9 +114,9 @@ export default class StripePaymentPage extends Component {
|
||||
} : {};
|
||||
return (
|
||||
<div class="gm-subscribe-page">
|
||||
<FormHeader title="Subscribe" error={ error } errorText={ error } />
|
||||
<div className="gm-subscribe-form-wrapper">
|
||||
<div className="gm-modal-form gm-subscribe-form">
|
||||
<FormHeader title="Subscribe" error={ error } errorText={ error } />
|
||||
<StripeProvider apiKey={publicKey}>
|
||||
<Elements>
|
||||
<PaymentFormWrapped handleSubmit={handleSubmit} publicKey={publicKey} selectedPlan={this.state.selectedPlan} />
|
||||
|
||||
@ -17,17 +17,20 @@
|
||||
}
|
||||
|
||||
.gm-page-overlay.close {
|
||||
animation: fadeOutOverlay 0.2s ease 0.5s 1 forwards;
|
||||
animation: fadeOutOverlay 0.3s ease 1 forwards;
|
||||
}
|
||||
|
||||
.gm-page-overlay.close .gm-modal {
|
||||
animation: closeModal 0.4s ease-in-out 1 forwards;
|
||||
animation: closeModal 0.3s ease-in-out 1 forwards;
|
||||
}
|
||||
|
||||
.gm-modal-container {
|
||||
position: relative;
|
||||
top: 25vh;
|
||||
display: flex;
|
||||
min-height: 75vh;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gm-modal {
|
||||
@ -104,7 +107,7 @@
|
||||
|
||||
.gm-modal {
|
||||
width: calc(100% - 48px);
|
||||
height: calc(100vh - 48px);
|
||||
min-height: calc(100vh - 90px);
|
||||
padding: 24px;
|
||||
border-radius: 0;
|
||||
}
|
||||
@ -145,6 +148,8 @@
|
||||
/* Buttons */
|
||||
/* ------------------------------------------------------------ */
|
||||
button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--grey);
|
||||
@ -196,6 +201,22 @@ button:hover {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes spinner {
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
.gm-btn-blue .gm-spinner {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: -3px 8px -3px 0;
|
||||
border-radius: 50%;
|
||||
border-top: 2px solid #fff;
|
||||
border-right: 2px solid transparent;
|
||||
animation: spinner .6s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
/* Forms inputs */
|
||||
/* ------------------------------------------------------------ */
|
||||
|
||||
@ -180,7 +180,6 @@ a:hover {
|
||||
@media (max-width: 440px) {
|
||||
.gm-modal-form {
|
||||
width: 100%;
|
||||
/* margin-top: 60px; */
|
||||
}
|
||||
|
||||
h4 {
|
||||
@ -301,7 +300,7 @@ a:hover {
|
||||
|
||||
.gm-plans {
|
||||
width: 270px;
|
||||
margin: 70px 0 0;
|
||||
margin: 30px 0 0;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -270px;
|
||||
@ -356,6 +355,12 @@ a:hover {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gm-thank-you {
|
||||
margin-top: 20px;
|
||||
line-height: 1.65em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 440px) {
|
||||
.gm-subscribe-form-wrapper {
|
||||
flex-direction: column;
|
||||
@ -375,6 +380,7 @@ a:hover {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
animation: none;
|
||||
margin-bottom: -24px;
|
||||
}
|
||||
|
||||
.gm-plans {
|
||||
@ -395,10 +401,11 @@ a:hover {
|
||||
}
|
||||
|
||||
.gm-powered-by {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 32px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.gm-powered-by a {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user