Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Updated member signin page to show logged in status

Browse source 
no issue
This commit is contained in:
Rish 2019-04-16 22:39:26 +05:30
parent 1211c70eb3
commit 874fceb077
2 changed files with 41 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
core/server/lib/members/static/auth/components/Modal.js
View file

@ -17,6 +17,7 @@ export default class Modal extends Component {
super();
this.state = {
error: null,
showLoggedIn: false,
containerClass: 'gm-page-overlay'
}
}
@ -77,7 +78,7 @@ export default class Modal extends Component {
}
render(props, state) {
const { containerClass, error, loadingConfig, paymentConfig, siteConfig } = state;
const { containerClass, error, loadingConfig, paymentConfig, siteConfig, showLoggedIn } = state;
const { members } = this.context;
const closeModal = () => this.close();
@ -89,7 +90,18 @@ export default class Modal extends Component {
this.setState({ error });
});
const signin = (data) => this.handleAction(members.signin(data));
// 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';
@ -108,8 +120,8 @@ export default class Modal extends Component {
}
return (
<Pages className={containerClass} onChange={clearError} onClick={closeModal} stripeConfig={stripeConfig} siteConfig={siteConfig}>
<SigninPage error={error} hash="" handleSubmit={signup} />
<SigninPage error={error} hash="signin" handleSubmit={signin} />
<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.renderUpgradePage(props, state)}
<SignupCompletePage error={ error } hash="signup-complete" handleSubmit={ closeModal } siteConfig={ siteConfig } />

45
core/server/lib/members/static/auth/pages/SigninPage.js
View file

@ -7,24 +7,29 @@ import { IconRightArrow } from '../components/icons';
import EmailInput from '../components/EmailInput';
import PasswordInput from '../components/PasswordInput';
export default ({ error, handleSubmit }) => (
<div className="flex flex-column items-center">
<div className="gm-modal-form gm-signin-page">
<FormHeader title="" error={error} errorText="Wrong email or password">
<div className="flex justify-between items-baseline">
<h1>Log in</h1>
<FormHeaderCTA title="Not a member?" label="Sign up" icon={IconRightArrow} hash="#signup" />
</div>
</FormHeader>
<Form onSubmit={handleSubmit}>
<EmailInput bindTo="email" className="first" />
<PasswordInput bindTo="password" className="gm-forgot-input last">
<a href="#request-password-reset" className="gm-forgot-link">
Forgot
</a>
</PasswordInput>
<FormSubmit label="Log in" />
</Form>
export default ({ error, handleSubmit, showLoggedIn }) => {
let label = showLoggedIn ? (
<span><span class="gm-spinner"></span> Logged In </span>
) : "Log in";
return (
<div className="flex flex-column items-center">
<div className="gm-modal-form gm-signin-page">
<FormHeader title="" error={error} errorText="Wrong email or password">
<div className="flex justify-between items-baseline">
<h1>Log in</h1>
<FormHeaderCTA title="Not a member?" label="Sign up" icon={IconRightArrow} hash="#signup" />
</div>
</FormHeader>
<Form onSubmit={handleSubmit}>
<EmailInput bindTo="email" className="first" />
<PasswordInput bindTo="password" className="gm-forgot-input last">
<a href="#request-password-reset" className="gm-forgot-link">
Forgot
</a>
</PasswordInput>
<FormSubmit label={label} />
</Form>
</div>
</div>
</div>
);
)
};