mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-28 05:14:12 +03:00
bc889ae9a0
no issue - Updated members auth flow UI - Updated members settings and routing to be dynamic
65 lines
2.2 KiB
JavaScript
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>
|
|
);
|
|
}
|
|
}
|