From 0ba9f944d96c318a89bd2d73751160172e6dc65d Mon Sep 17 00:00:00 2001
From: Susanna Kosic <susanna.kosic@gmail.com>
Date: Tue, 15 Aug 2023 21:05:04 +0200
Subject: [PATCH] :bug: fixed fields autocomplete not working in signin popup

closes https://github.com/TryGhost/Ghost/issues/16960
- replaced iframe by div for signin page
---
 apps/portal/src/components/Global.styles.js   |   7 +-
 apps/portal/src/components/PopupModal.js      |  69 +++++----
 apps/portal/src/tests/SigninFlow.test.js      | 134 ++++++++++--------
 apps/portal/src/tests/data-attributes.test.js |   4 +-
 apps/portal/src/tests/portal-links.test.js    |   4 +-
 5 files changed, 118 insertions(+), 100 deletions(-)

diff --git a/apps/portal/src/components/Global.styles.js b/apps/portal/src/components/Global.styles.js
index b9fddfc6afc5..3a185d198914 100644
--- a/apps/portal/src/components/Global.styles.js
+++ b/apps/portal/src/components/Global.styles.js
@@ -38,7 +38,7 @@ export const GlobalStyles = `
 
     body {
         margin: 0px;
-        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;
@@ -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;
@@ -97,9 +97,8 @@ export const GlobalStyles = `
     p {
         font-size: 15px;
         line-height: 1.5em;
-        margin-bottom: 24px;
     }
-
+    
     strong {
         font-weight: 600;
     }
diff --git a/apps/portal/src/components/PopupModal.js b/apps/portal/src/components/PopupModal.js
index 6a5af27651d8..6dd18e0d6fa8 100644
--- a/apps/portal/src/components/PopupModal.js
+++ b/apps/portal/src/components/PopupModal.js
@@ -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';
@@ -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;
 
@@ -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';
         }
@@ -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'>
-                    <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() {
diff --git a/apps/portal/src/tests/SigninFlow.test.js b/apps/portal/src/tests/SigninFlow.test.js
index 5186965b7810..b62de72ea4c6 100644
--- a/apps/portal/src/tests/SigninFlow.test.js
+++ b/apps/portal/src/tests/SigninFlow.test.js
@@ -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,
@@ -50,7 +54,8 @@ const setup = async ({site, member = null}) => {
         monthlyPlanTitle,
         yearlyPlanTitle,
         fullAccessTitle,
-        ...utils
+        ...utils,
+        getIframeDocument
     };
 };
 
@@ -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,
@@ -103,7 +114,8 @@ const multiTierSetup = async ({site, member = null}) => {
         yearlyPlanTitle,
         fullAccessTitle,
         freePlanDescription,
-        ...utils
+        ...utils,
+        getIframeDocument
     };
 };
 
@@ -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();
@@ -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();
@@ -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();
@@ -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();
         });
     });
@@ -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();
@@ -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();
@@ -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();
@@ -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();
         });
     });
diff --git a/apps/portal/src/tests/data-attributes.test.js b/apps/portal/src/tests/data-attributes.test.js
index c5f6d2c1f1c3..4b6f090169d9 100644
--- a/apps/portal/src/tests/data-attributes.test.js
+++ b/apps/portal/src/tests/data-attributes.test.js
@@ -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();
         });
     });
diff --git a/apps/portal/src/tests/portal-links.test.js b/apps/portal/src/tests/portal-links.test.js
index e307b198ed34..17d79cc29b6f 100644
--- a/apps/portal/src/tests/portal-links.test.js
+++ b/apps/portal/src/tests/portal-links.test.js
@@ -114,9 +114,9 @@ describe('Portal Data links:', () => {
                 showPopup: false
             });
             expect(triggerButtonFrame).toBeInTheDocument();
-            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();
         });
     });