Ghost/ghost/members-api/static/auth/components/Pages.js
Rish bc889ae9a0 Refactored members auth flow with dynamic settings
no issue

- Updated members auth flow UI
- Updated members settings and routing to be dynamic
2019-05-07 17:35:17 +02:00

65 lines
2.2 KiB
JavaScript

import { Component } from 'preact';
import { IconClose, GhostLogo } from './icons';
export default class Pages extends Component {
constructor(props) {
super(props);
this.state = this.getStateFromBrowser();
window.addEventListener("hashchange", () => this.onHashChange(), false);
this.handleChange = props.onChange || (() => { });
}
getStateFromBrowser() {
const [fullMatch, hash, query] = window.location.hash.match(/^#([^?]+)\??(.*)$/) || ['#', '', ''];
return {
hash,
query,
fullMatch
};
}
onHashChange() {
this.setState(this.getStateFromBrowser());
this.handleChange();
}
filterChildren(children, state) {
return children.filter((child) => {
return child.attributes.hash === state.hash;
}).map((child) => {
child.attributes.frameLocation = { ...this.state };
return child;
});
}
render({ children, className, onClick, stripeConfig, siteConfig }, state) {
let modalClassName = "gm-modal gm-auth-modal";
if (state.hash === 'signup' && stripeConfig) {
modalClassName += " gm-subscribe-modal"
}
let iconUrl = siteConfig && siteConfig.icon;
let title = (siteConfig && siteConfig.title) || "Ghost Publication";
let iconStyle = iconUrl ? {
backgroundImage: `url(${iconUrl})`,
backgroundSize: `38px`
} : {};
return (
<div className={className}>
<div className="gm-modal-header">
<div className="gm-logo" style={iconStyle}></div>
<h2>{title}</h2>
</div>
<div className="gm-modal-close" onClick={ onClick }>{IconClose}</div>
<div className="gm-modal-container">
<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>
</div>
);
}
}