Fixed Portal honeypot field (#20825)

ref INC-97
ref https://github.com/TryGhost/Ghost/issues/20767
- finishes wiring up the honeypot fied
- updates state handing to properly set the value
- maintains honeypot field across page changes within portal

There isn't a single previous commit to point to here since they didn't
get squashed. We added a honeypot field to help mitigate bot signup
activity. It's hidden, and if filled out, we can anticipate it's a bot.
Right now this just logs to Ghost while we collect data.

apps/portal/src/components/pages/NewsletterSelectionPage.js

@@ -109,8 +109,8 @@ export default function NewsletterSelectionPage({pageData, onBack}) {
                                         id: d.id
                                     };
                                 });
-                                const {name, email, plan, offerId} = pageData;
-                                onAction('signup', {name, email, plan, newsletters, offerId});
+                                const {name, email, plan, phonenumber, offerId} = pageData;
+                                onAction('signup', {name, email, plan, phonenumber, newsletters, offerId});
                             }}
                             brandColor={brandColor}
                             label={label}

apps/portal/src/components/pages/OfferPage.js

@@ -282,12 +282,15 @@ export default class OfferPage extends React.Component {
             };
         }, () => {
             const {onAction} = this.context;
-            const {name, email, errors} = this.state;
+            const {name, email, phonenumber, errors} = this.state;
             const hasFormErrors = (errors && Object.values(errors).filter(d => !!d).length > 0);
             if (!hasFormErrors) {
                 const signupData = {
-                    name, email, plan: price?.id,
-                    offerId: offer?.id
+                    name,
+                    email,
+                    plan: price?.id,
+                    offerId: offer?.id,
+                    phonenumber
                 };
                 if (hasMultipleNewsletters({site})) {
                     this.setState({

apps/portal/src/components/pages/SigninPage.js

@@ -34,11 +34,11 @@ export default class SigninPage extends React.Component {
                 errors: ValidateInputForm({fields: this.getInputFields({state})})
             };
         }, async () => {
-            const {email, honeypot, errors} = this.state;
+            const {email, phonenumber, errors} = this.state;
             const {redirect} = this.context.pageData ?? {};
             const hasFormErrors = (errors && Object.values(errors).filter(d => !!d).length > 0);
             if (!hasFormErrors) {
-                this.context.onAction('signin', {email, honeypot, redirect});
+                this.context.onAction('signin', {email, phonenumber, redirect});
             }
         });
     }
@@ -74,7 +74,7 @@ export default class SigninPage extends React.Component {
             },
             {
                 type: 'text',
-                value: state.honeypot,
+                value: state.phonenumber,
                 placeholder: '+1 (123) 456-7890',
                 // Doesn't need translation, hidden field
                 label: 'Phone number',

apps/portal/src/components/pages/SignupPage.js

@@ -397,20 +397,20 @@ class SignupPage extends React.Component {
             };
         }, () => {
             const {site, onAction} = this.context;
-            const {name, email, plan, honeypot, errors} = this.state;
+            const {name, email, plan, phonenumber, errors} = this.state;
             const hasFormErrors = (errors && Object.values(errors).filter(d => !!d).length > 0);
             if (!hasFormErrors) {
                 if (hasMultipleNewsletters({site})) {
                     this.setState({
                         showNewsletterSelection: true,
-                        pageData: {name, email, plan},
+                        pageData: {name, email, plan, phonenumber},
                         errors: {}
                     });
                 } else {
                     this.setState({
                         errors: {}
                     });
-                    onAction('signup', {name, email, honeypot, plan});
+                    onAction('signup', {name, email, phonenumber, plan});
                 }
             }
         });
@@ -487,7 +487,7 @@ class SignupPage extends React.Component {
             },
             {
                 type: 'text',
-                value: state.honeypot,
+                value: state.phonenumber,
                 placeholder: '+1 (123) 456-7890',
                 // Doesn't need translation, hidden field
                 label: 'Phone number',

apps/portal/src/utils/api.js

@@ -258,7 +258,7 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
             }
         },
 
-        async sendMagicLink({email, emailType, labels, name, oldEmail, newsletters, redirect, integrityToken, customUrlHistory, autoRedirect = true}) {
+        async sendMagicLink({email, emailType, labels, name, oldEmail, newsletters, redirect, integrityToken, phonenumber, customUrlHistory, autoRedirect = true}) {
             const url = endpointFor({type: 'members', resource: 'send-magic-link'});
             const body = {
                 name,
@@ -270,6 +270,7 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
                 requestSrc: 'portal',
                 redirect,
                 integrityToken,
+                honeypot: phonenumber, // we don't actually use a phone #, this is from a hidden field to prevent bot activity
                 autoRedirect
             };
             const urlHistory = customUrlHistory ?? getUrlHistory();