Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

馃悰 fixed fields autocomplete not working in popup #17701

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

馃悰 fixed fields autocomplete not working in popup #17701

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 3 additions & 4 deletions apps/portal/src/components/Global.styles.js
View file
Open in desktop
Expand Up @@ -38,7 +38,7 @@ export const GlobalStyles = `

body {
margin: 0px;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note for whoever will review this PR.
When testing signin popup, I noticed some font and paragraph changes on the page: headings font looked smaller, and there was a bigger separation between paragraphs (only when popup is open). This was caused by styles injected in the popup which were previously isolated in the iframe and now are embed in the body. I fixed the visual glitch by adding Inter font and removing parragraph bottom margin from global styles, although I am not 100% sure this was the correct approach.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1.6rem;
height: 100%;
line-height: 1.6em;
Expand All @@ -48,7 +48,7 @@ export const GlobalStyles = `
box-sizing: border-box;
overflow: hidden;
}

button,
button span {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
Expand Down Expand Up @@ -97,9 +97,8 @@ export const GlobalStyles = `
p {
font-size: 15px;
line-height: 1.5em;
margin-bottom: 24px;
}

strong {
font-weight: 600;
}
Expand Down
69 changes: 34 additions & 35 deletions apps/portal/src/components/PopupModal.js
View file
Open in desktop
@@ -1,4 +1,4 @@
import React from 'react';
import React, {useContext} from 'react';
import Frame from './Frame';
import {hasMode} from '../utils/check-mode';
import AppContext from '../AppContext';
Expand Down Expand Up @@ -224,6 +224,33 @@ class PopupContent extends React.Component {
}
}

const PopupContainer = ({useOverlay, children}) => {
const {member, site, brandColor} = useContext(AppContext);
const containerStyles = StylesWrapper({member});

if (hasMode(['preview'])) {
containerStyles.modalContainer.zIndex = '3999997';
}

const pageContentStyles = `
:root {
--brandcolor: ${brandColor}
}
` + getFrameStyles({site});

return (<div style={containerStyles.modalContainer}>
{useOverlay && <div style={containerStyles.frame.common} title="portal-overlay">
<style dangerouslySetInnerHTML={{__html: pageContentStyles}} />
{children}
</div>}
{!useOverlay && <Frame style={containerStyles.frame.common} title="portal-popup" head={(<>
<style dangerouslySetInnerHTML={{__html: pageContentStyles}} />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /></>)} dataTestId='portal-popup-frame'>
{children}
</Frame>}
</div>);
};

export default class PopupModal extends React.Component {
static contextType = AppContext;

Expand Down Expand Up @@ -253,36 +280,12 @@ export default class PopupModal extends React.Component {
}
}

renderFrameStyles() {
const {site} = this.context;
const FrameStyle = getFrameStyles({site});
const styles = `
:root {
--brandcolor: ${this.context.brandColor}
}
` + FrameStyle;
return (
<>
<style dangerouslySetInnerHTML={{__html: styles}} />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</>
);
}

renderFrameContainer() {
const {member, site, customSiteUrl} = this.context;
const Styles = StylesWrapper({member});
const {site, customSiteUrl, page} = this.context;
const isMobile = window.innerWidth < 480;

const frameStyle = {
...Styles.frame.common
};

let className = 'gh-portal-popup-background';
if (hasMode(['preview'])) {
Styles.modalContainer.zIndex = '3999997';
}


if (hasMode(['preview'], {customSiteUrl}) && !site.disableBackground) {
className += ' preview';
}
Expand All @@ -291,14 +294,10 @@ export default class PopupModal extends React.Component {
className += ' dev';
}

return (
<div style={Styles.modalContainer}>
<Frame style={frameStyle} title="portal-popup" head={this.renderFrameStyles()} dataTestId='portal-popup-frame'>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think iframe is used here to have a style encapsulation. Putting content directly to document may cause some styling issues in some templates. There are many 3rd party templates using portals for signin and their global style definitions can reach this login popup.

<div className={className} onClick = {e => this.handlePopupClose(e)}></div>
<PopupContent isMobile={isMobile} />
</Frame>
</div>
);
return (<PopupContainer useOverlay={page === 'signin'}>
<div className={className} onClick={e => this.handlePopupClose(e)}></div>
<PopupContent isMobile={isMobile} />
</PopupContainer>);
}

render() {
Expand Down
134 changes: 77 additions & 57 deletions apps/portal/src/tests/SigninFlow.test.js
View file
Open in desktop
Expand Up @@ -23,23 +23,27 @@ const setup = async ({site, member = null}) => {
const utils = appRender(
<App api={ghostApi} />
);

const triggerButtonFrame = await utils.findByTitle(/portal-trigger/i);
const popupFrame = utils.queryByTitle(/portal-popup/i);
const popupIframeDocument = popupFrame.contentDocument;
const emailInput = within(popupIframeDocument).queryByLabelText(/email/i);
const nameInput = within(popupIframeDocument).queryByLabelText(/name/i);
const submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Continue'});
const signinButton = within(popupIframeDocument).queryByRole('button', {name: 'Sign in'});
const siteTitle = within(popupIframeDocument).queryByText(site.title);
const freePlanTitle = within(popupIframeDocument).queryByText('Free');
const monthlyPlanTitle = within(popupIframeDocument).queryByText('Monthly');
const yearlyPlanTitle = within(popupIframeDocument).queryByText('Yearly');
const fullAccessTitle = within(popupIframeDocument).queryByText('Full access');

const overlay = utils.queryByTitle(/portal-overlay/i);
const emailInput = within(overlay).queryByLabelText(/email/i);
const nameInput = within(overlay).queryByLabelText(/name/i);
const submitButton = within(overlay).queryByRole('button', {name: 'Continue'});
const signinButton = within(overlay).queryByRole('button', {name: 'Sign in'});
const siteTitle = within(overlay).queryByText(site.title);
const freePlanTitle = within(overlay).queryByText('Free');
const monthlyPlanTitle = within(overlay).queryByText('Monthly');
const yearlyPlanTitle = within(overlay).queryByText('Yearly');
const fullAccessTitle = within(overlay).queryByText('Full access');

const getIframeDocument = async () => {
const iframe = await within(utils.baseElement).findByTitle(/portal-popup/i);
return iframe.contentDocument;
};

return {
ghostApi,
popupIframeDocument,
popupFrame,
overlay,
triggerButtonFrame,
siteTitle,
emailInput,
Expand All @@ -50,7 +54,8 @@ const setup = async ({site, member = null}) => {
monthlyPlanTitle,
yearlyPlanTitle,
fullAccessTitle,
...utils
...utils,
getIframeDocument
};
};

Expand All @@ -76,22 +81,28 @@ const multiTierSetup = async ({site, member = null}) => {
);
const freeTierDescription = site.products?.find(p => p.type === 'free')?.description;
const triggerButtonFrame = await utils.findByTitle(/portal-trigger/i);
const popupFrame = utils.queryByTitle(/portal-popup/i);
const popupIframeDocument = popupFrame.contentDocument;
const emailInput = within(popupIframeDocument).queryByLabelText(/email/i);
const nameInput = within(popupIframeDocument).queryByLabelText(/name/i);
const submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Continue'});
const signinButton = within(popupIframeDocument).queryByRole('button', {name: 'Sign in'});
const siteTitle = within(popupIframeDocument).queryByText(site.title);
const freePlanTitle = within(popupIframeDocument).queryAllByText(/free$/i);
const freePlanDescription = within(popupIframeDocument).queryAllByText(freeTierDescription);
const monthlyPlanTitle = within(popupIframeDocument).queryByText('Monthly');
const yearlyPlanTitle = within(popupIframeDocument).queryByText('Yearly');
const fullAccessTitle = within(popupIframeDocument).queryByText('Full access');

const overlay = utils.queryByTitle(/portal-overlay/i);

const emailInput = within(overlay).queryByLabelText(/email/i);
const nameInput = within(overlay).queryByLabelText(/name/i);
const submitButton = within(overlay).queryByRole('button', {name: 'Continue'});
const signinButton = within(overlay).queryByRole('button', {name: 'Sign in'});
const siteTitle = within(overlay).queryByText(site.title);
const freePlanTitle = within(overlay).queryAllByText(/free$/i);
const freePlanDescription = within(overlay).queryAllByText(freeTierDescription);
const monthlyPlanTitle = within(overlay).queryByText('Monthly');
const yearlyPlanTitle = within(overlay).queryByText('Yearly');
const fullAccessTitle = within(overlay).queryByText('Full access');

const getIframeDocument = async () => {
const iframe = await within(utils.baseElement).findByTitle(/portal-popup/i);
return iframe.contentDocument;
};

return {
ghostApi,
popupIframeDocument,
popupFrame,
overlay,
triggerButtonFrame,
siteTitle,
emailInput,
Expand All @@ -103,7 +114,8 @@ const multiTierSetup = async ({site, member = null}) => {
yearlyPlanTitle,
fullAccessTitle,
freePlanDescription,
...utils
...utils,
getIframeDocument
};
};

Expand All @@ -123,12 +135,11 @@ describe('Signin', () => {
});
test('with default settings', async () => {
const {
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, submitButton,popupIframeDocument
ghostApi, overlay, triggerButtonFrame, emailInput, nameInput, submitButton, getIframeDocument
} = await setup({
site: FixtureSite.singleTier.basic
});

expect(popupFrame).toBeInTheDocument();
expect(overlay).toBeInTheDocument();
expect(triggerButtonFrame).toBeInTheDocument();
expect(emailInput).toBeInTheDocument();
expect(nameInput).not.toBeInTheDocument();
Expand All @@ -138,23 +149,24 @@ describe('Signin', () => {

expect(emailInput).toHaveValue('jamie@example.com');

fireEvent.click(submitButton);
fireEvent.click(submitButton);

expect(ghostApi.member.sendMagicLink).toHaveBeenLastCalledWith({
email: 'jamie@example.com',
emailType: 'signin'
});

const magicLink = await within(popupIframeDocument).findByText(/Now check your email/i);
expect(magicLink).toBeInTheDocument();

const iframeDocument = await getIframeDocument();
const magicLink = await within(iframeDocument).findByText(/Now check your email/i);
expect(magicLink).toBeInTheDocument();
});

test('without name field', async () => {
const {ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, submitButton,
popupIframeDocument} = await setup({
const {ghostApi, overlay, triggerButtonFrame, emailInput, nameInput, submitButton, getIframeDocument} = await setup({
site: FixtureSite.singleTier.withoutName
});

expect(popupFrame).toBeInTheDocument();
expect(overlay).toBeInTheDocument();
expect(triggerButtonFrame).toBeInTheDocument();
expect(emailInput).toBeInTheDocument();
expect(nameInput).not.toBeInTheDocument();
Expand All @@ -170,17 +182,18 @@ describe('Signin', () => {
emailType: 'signin'
});

const magicLink = await within(popupIframeDocument).findByText(/Now check your email/i);
const iframeDocument = await getIframeDocument();
const magicLink = await within(iframeDocument).findByText(/Now check your email/i);
expect(magicLink).toBeInTheDocument();
});

test('with only free plan', async () => {
let {ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, submitButton,
popupIframeDocument} = await setup({
let {ghostApi, overlay, triggerButtonFrame, emailInput, nameInput, submitButton,
getIframeDocument} = await setup({
site: FixtureSite.singleTier.onlyFreePlan
});

expect(popupFrame).toBeInTheDocument();
expect(overlay).toBeInTheDocument();
expect(triggerButtonFrame).toBeInTheDocument();
expect(emailInput).toBeInTheDocument();
expect(nameInput).not.toBeInTheDocument();
Expand All @@ -196,7 +209,8 @@ describe('Signin', () => {
emailType: 'signin'
});

const magicLink = await within(popupIframeDocument).findByText(/Now check your email/i);
const iframeDocument = await getIframeDocument();
const magicLink = await within(iframeDocument).findByText(/Now check your email/i);
expect(magicLink).toBeInTheDocument();
});
});
Expand All @@ -215,12 +229,12 @@ describe('Signin', () => {
window.location = realLocation;
});
test('with default settings', async () => {
const {ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, submitButton,
popupIframeDocument} = await multiTierSetup({
const {ghostApi, overlay, triggerButtonFrame, emailInput, nameInput, submitButton,
getIframeDocument} = await multiTierSetup({
site: FixtureSite.multipleTiers.basic
});

expect(popupFrame).toBeInTheDocument();
expect(overlay).toBeInTheDocument();
expect(triggerButtonFrame).toBeInTheDocument();
expect(emailInput).toBeInTheDocument();
expect(nameInput).not.toBeInTheDocument();
Expand All @@ -236,17 +250,19 @@ describe('Signin', () => {
emailType: 'signin'
});

const magicLink = await within(popupIframeDocument).findByText(/Now check your email/i);
const iframeDocument = await getIframeDocument();

const magicLink = await within(iframeDocument).findByText(/Now check your email/i);
expect(magicLink).toBeInTheDocument();
});

test('without name field', async () => {
const {ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, submitButton,
popupIframeDocument} = await multiTierSetup({
const {ghostApi, overlay, triggerButtonFrame, emailInput, nameInput, submitButton,
getIframeDocument} = await multiTierSetup({
site: FixtureSite.multipleTiers.withoutName
});

expect(popupFrame).toBeInTheDocument();
expect(overlay).toBeInTheDocument();
expect(triggerButtonFrame).toBeInTheDocument();
expect(emailInput).toBeInTheDocument();
expect(nameInput).not.toBeInTheDocument();
Expand All @@ -262,17 +278,19 @@ describe('Signin', () => {
emailType: 'signin'
});

const magicLink = await within(popupIframeDocument).findByText(/Now check your email/i);
const iframeDocument = await getIframeDocument();

const magicLink = await within(iframeDocument).findByText(/Now check your email/i);
expect(magicLink).toBeInTheDocument();
});

test('with only free plan available', async () => {
let {ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, submitButton,
popupIframeDocument} = await multiTierSetup({
let {ghostApi, overlay, triggerButtonFrame, emailInput, nameInput, submitButton,
getIframeDocument} = await multiTierSetup({
site: FixtureSite.multipleTiers.onlyFreePlan
});

expect(popupFrame).toBeInTheDocument();
expect(overlay).toBeInTheDocument();
expect(triggerButtonFrame).toBeInTheDocument();
expect(emailInput).toBeInTheDocument();
expect(nameInput).not.toBeInTheDocument();
Expand All @@ -288,7 +306,9 @@ describe('Signin', () => {
emailType: 'signin'
});

const magicLink = await within(popupIframeDocument).findByText(/Now check your email/i);
const iframeDocument = await getIframeDocument();

const magicLink = await within(iframeDocument).findByText(/Now check your email/i);
expect(magicLink).toBeInTheDocument();
});
});
Expand Down
4 changes: 2 additions & 2 deletions apps/portal/src/tests/data-attributes.test.js
View file
Open in desktop
Expand Up @@ -357,9 +357,9 @@ describe('Portal Data attributes:', () => {
expect(triggerButtonFrame).toBeInTheDocument();
const portalElement = document.querySelector('[data-portal]');
fireEvent.click(portalElement);
popupFrame = await utils.findByTitle(/portal-popup/i);
popupFrame = await utils.findByTitle(/portal-overlay/i);
expect(popupFrame).toBeInTheDocument();
const loginTitle = within(popupFrame.contentDocument).queryByText(/sign in/i);
const loginTitle = within(popupFrame).queryByText(/sign in/i);
expect(loginTitle).toBeInTheDocument();
});
});
Expand Down