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

Fixed path handling for direct page links

Browse source 
no issue

- Updates handling for direct links to open specific pages
- Added guard for member not logged in for account pages
This commit is contained in:
Rish 2020-07-08 10:05:21 +05:30
parent 439761e992
commit 2ed7ebb03d
4 changed files with 105 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
ghost/portal/src/App.js
View file

@ -85,7 +85,7 @@ export default class App extends React.Component {
...this.state.site,
...(previewSite || {})
},
member: this.getPreviewMember(),
member: this.state.member || this.getPreviewMember(),
...restPreview
});
}
@ -95,49 +95,73 @@ export default class App extends React.Component {
return (path === '/portal' && qs);
}
getStateFromQueryString(qs = '') {
const previewState = {
site: {}
};
const allowedPlans = [];
const qsParams = new URLSearchParams(qs);
// Handle the key/value pairs
for (let pair of qsParams.entries()) {
const key = pair[0];
const value = decodeURIComponent(pair[1]);
if (key === 'button') {
previewState.site.portal_button = JSON.parse(value);
} else if (key === 'name') {
previewState.site.portal_name = JSON.parse(value);
} else if (key === 'isFree' && JSON.parse(value)) {
allowedPlans.push('free');
} else if (key === 'isMonthly' && JSON.parse(value)) {
allowedPlans.push('monthly');
} else if (key === 'isYearly' && JSON.parse(value)) {
allowedPlans.push('yearly');
} else if (key === 'page') {
previewState.page = value;
} else if (key === 'accentColor') {
previewState.site.accent_color = value;
} else if (key === 'buttonIcon') {
previewState.site.portal_button_icon = value;
} else if (key === 'signupButtonText') {
previewState.site.portal_button_signup_text = value;
} else if (key === 'buttonStyle') {
previewState.site.portal_button_style = value;
}
}
previewState.site.portal_plans = allowedPlans;
previewState.showPopup = true;
return previewState;
}
getPreviewState() {
const [path, qs] = window.location.hash.substr(1).split('?');
if (path === '/portal' && qs) {
const previewSettings = {
site: {}
};
const allowedPlans = [];
const qsParams = new URLSearchParams(qs);
// Display the key/value pairs
for (let pair of qsParams.entries()) {
const key = pair[0];
const value = decodeURIComponent(pair[1]);
if (key === 'button') {
previewSettings.site.portal_button = JSON.parse(value);
} else if (key === 'name') {
previewSettings.site.portal_name = JSON.parse(value);
} else if (key === 'isFree' && JSON.parse(value)) {
allowedPlans.push('free');
} else if (key === 'isMonthly' && JSON.parse(value)) {
allowedPlans.push('monthly');
} else if (key === 'isYearly' && JSON.parse(value)) {
allowedPlans.push('yearly');
} else if (key === 'page') {
previewSettings.page = value;
} else if (key === 'accentColor') {
previewSettings.site.accent_color = value;
} else if (key === 'buttonIcon') {
previewSettings.site.portal_button_icon = value;
} else if (key === 'signupButtonText') {
previewSettings.site.portal_button_signup_text = value;
} else if (key === 'buttonStyle') {
previewSettings.site.portal_button_style = value;
}
const previewState = {
site: {}
};
if (path.startsWith('/portal')) {
previewState.showPopup = true;
if (qs) {
return this.getStateFromQueryString(qs);
}
if (path === '/portal/signup') {
previewState.page = 'signup';
} else if (path === '/portal/signin') {
previewState.page = 'signin';
} else if (path === '/portal/account') {
previewState.page = 'accountHome';
} else if (path === '/portal/account/plans') {
previewState.page = 'accountPlan';
} else if (path === '/portal/account/profile') {
previewState.page = 'accountProfile';
}
previewSettings.site.portal_plans = allowedPlans;
previewSettings.showPopup = true;
return previewSettings;
}
return {};
return previewState;
}
getPreviewMember() {
if (this.isPreviewMode()) {
const [path, qs] = window.location.hash.substr(1).split('?');
if (path === '/portal' && qs) {
const {site: previewSite, ...restPreview} = this.getPreviewState();
if (restPreview.page.includes('account')) {
return Fixtures.member.free;

23
ghost/portal/src/components/pages/AccountHomePage.js
View file

@ -259,16 +259,27 @@ class PaidAccountHomePage extends React.Component {
export default class AccountHomePage extends React.Component {
static contextType = AppContext;
componentDidMount() {
const {member} = this.context;
if (!member) {
this.context.onAction('switchPage', {
page: 'signup'
});
}
}
render() {
const {member} = this.context;
if (member.paid) {
if (member) {
if (member.paid) {
return (
<PaidAccountHomePage />
);
}
return (
<PaidAccountHomePage />
<FreeAccountHomePage />
);
}
return (
<FreeAccountHomePage />
);
return null;
}
}

13
ghost/portal/src/components/pages/AccountPlanPage.js
View file

@ -16,6 +16,15 @@ export default class AccountPlanPage extends React.Component {
};
}
componentDidMount() {
const {member} = this.context;
if (!member) {
this.context.onAction('switchPage', {
page: 'signup'
});
}
}
handleSignout(e) {
e.preventDefault();
this.context.onAction('signout');
@ -110,6 +119,10 @@ export default class AccountPlanPage extends React.Component {
}
render() {
const {member} = this.context;
if (!member) {
return null;
}
return (
<div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
{this.renderHeader()}

15
ghost/portal/src/components/pages/AccountProfilePage.js
View file

@ -11,13 +11,22 @@ export default class AccountProfilePage extends React.Component {
constructor(props, context) {
super(props, context);
const {name = '', email = ''} = context.member;
const {name = '', email = ''} = context.member || {};
this.state = {
name,
email
};
}
componentDidMount() {
const {member} = this.context;
if (!member) {
this.context.onAction('switchPage', {
page: 'signup'
});
}
}
handleSignout(e) {
e.preventDefault();
this.context.onAction('signout');
@ -181,6 +190,10 @@ export default class AccountProfilePage extends React.Component {
}
render() {
const {member} = this.context;
if (!member) {
return null;
}
return (
<div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
{this.renderHeader()}