diff --git a/projects/packages/jetpack-mu-wpcom/changelog/cm-841-surface-login-requirement b/projects/packages/jetpack-mu-wpcom/changelog/cm-841-surface-login-requirement new file mode 100644 index 000000000000..ab726c9841ed --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/cm-841-surface-login-requirement @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Verbum Comments: explain why commenting is unavailable when login is required but the login options cannot be shown, instead of offering a form that will be rejected. diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/class-verbum-comments.php b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/class-verbum-comments.php index 59a7025e7b0a..99e2ead82116 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/class-verbum-comments.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/class-verbum-comments.php @@ -237,6 +237,7 @@ public function enqueue_assets() { /* translators: %s is the name of the provider (WordPress, Facebook, Twitter) */ 'Logged in via %s' => __( 'Logged in via %s', 'jetpack-mu-wpcom' ), 'Log out' => __( 'Log out', 'jetpack-mu-wpcom' ), + 'Your browser is blocking the cookies needed to log in and comment here. Allow cookies in your privacy settings, then reload the page.' => __( 'Your browser is blocking the cookies needed to log in and comment here. Allow cookies in your privacy settings, then reload the page.', 'jetpack-mu-wpcom' ), 'Email' => __( 'Email', 'jetpack-mu-wpcom' ), '(Address never made public)' => __( '(Address never made public)', 'jetpack-mu-wpcom'), // phpcs:ignore PEAR.Functions.FunctionCallSignature.SpaceBeforeCloseBracket 'Instantly' => __( 'Instantly', 'jetpack-mu-wpcom' ), diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/logged-out.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/logged-out.tsx index 1b96b5824aad..46e08490fa2a 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/logged-out.tsx +++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/logged-out.tsx @@ -10,7 +10,6 @@ import type { SocialServiceName } from '../hooks/useSocialLogin'; const { mustLogIn, requireNameEmail, commentRegistration } = VerbumComments; interface LoggedOutProps { login: ( service: SocialServiceName ) => void; - canWeAccessCookies: boolean; loginWindow: Window | null; } @@ -40,7 +39,7 @@ const getLoginCommentText = ( commentParent: Signal ) => { return { defaultText }; }; -export const LoggedOut = ( { login, canWeAccessCookies, loginWindow }: LoggedOutProps ) => { +export const LoggedOut = ( { login, loginWindow }: LoggedOutProps ) => { const [ activeService, setActiveService ] = useState( '' ); const closeLoginPopupService = requireNameEmail && ! mustLogIn ? 'mail' : ''; @@ -82,72 +81,83 @@ export const LoggedOut = ( { login, canWeAccessCookies, loginWindow }: LoggedOut setActiveService( service ); }; - const { commentParent } = useContext( VerbumSignals ); + const { canAccessCookies, commentParent, isCommentBlocked } = useContext( VerbumSignals ); return (
- { canWeAccessCookies && ( - <> -
- { getLoginCommentText( commentParent ) } -
+ { ( canAccessCookies || mustLogIn ) && ( +
+ { getLoginCommentText( commentParent ) } +
+ ) } + { isCommentBlocked.value && ( +

+ { translate( + 'Your browser is blocking the cookies needed to log in and comment here. Allow cookies in your privacy settings, then reload the page.' + ) } +

+ ) } + { canAccessCookies && ( +
-
- { Object.entries( serviceData ).map( ( [ service, value ] ) => { - // Don't show mail login if "Users must be registered and logged in to comment" enabled. - if ( mustLogIn && service === 'mail' ) { - // eslint-disable-next-line array-callback-return - return; - } - - return ( - - ); - } ) } -
- { [ 'wordpress', 'facebook' ].includes( activeService ) && ( -
-

+ { Object.entries( serviceData ).map( ( [ service, value ] ) => { + // Don't show mail login if "Users must be registered and logged in to comment" enabled. + if ( mustLogIn && service === 'mail' ) { + // eslint-disable-next-line array-callback-return + return; + } + + return ( -
- ) } + ); + } ) }
- + { [ 'wordpress', 'facebook' ].includes( activeService ) && ( +
+

+ +
+ ) } +
) } - +
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/index.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/index.tsx index 02a37d8e6175..5c1fd42a33c8 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/index.tsx +++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/index.tsx @@ -12,12 +12,7 @@ import useFormMutations from './hooks/useFormMutations'; import useSocialLogin from './hooks/useSocialLogin'; import { translate } from './i18n'; import { createSignals, VerbumSignals } from './state'; -import { - canWeAccessCookies, - setUserInfoCookie, - addWordPressDomain, - hasSubscriptionOptionsVisible, -} from './utils'; +import { setUserInfoCookie, addWordPressDomain, hasSubscriptionOptionsVisible } from './utils'; import type { VerbumAppProps } from './types'; import './style.scss'; @@ -25,6 +20,7 @@ import './style.scss'; const Verbum = ( { siteId, parentForm }: VerbumAppProps ) => { const { hasOpenedTrayOnce, + isCommentBlocked, isEmptyComment, isSavingComment, isTrayOpen, @@ -160,6 +156,11 @@ const Verbum = ( { siteId, parentForm }: VerbumAppProps ) => { }; const handleCommentSubmit = async ( event: Event ) => { + if ( isCommentBlocked.value ) { + event.preventDefault(); + return; + } + window.removeEventListener( 'beforeunload', handleBeforeUnload ); if ( userInfo.value?.service === 'guest' ) { if ( shouldStoreEmailData.value ) { @@ -226,11 +227,7 @@ const Verbum = ( { siteId, parentForm }: VerbumAppProps ) => { { userLoggedIn.value ? ( ) : ( - + ) } diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/state.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/state.tsx index 88fa7047f019..c3db6b7a8c8e 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/state.tsx +++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/state.tsx @@ -10,6 +10,11 @@ import type { Signal } from '@preact/signals'; * @return An object containing all the signals used in the app. */ export function createSignals() { + /* + * Cookie access can't change without a page reload, so probe once and share the answer. + */ + const canAccessCookies = canWeAccessCookies(); + /* * In userInfo we store the user data for logged-in users. */ @@ -22,7 +27,7 @@ export function createSignals() { const userLoggedIn = computed( () => { return ( VerbumComments.isJetpackCommentsLoggedIn || - ( canWeAccessCookies() && + ( canAccessCookies && userInfo.value && userInfo.value?.service !== 'guest' && userInfo.value?.service !== 'jetpack' ) @@ -77,12 +82,22 @@ export function createSignals() { return ! mailLoginData.value.email || ! mailLoginData.value.author; } ); + /* + * Login is required but the login options can't render, so there is no way for this comment to + * be accepted. `mustLogIn` tracks the WordPress.com session, which is absent in the Jetpack + * iframe even for visitors logged in to the site itself, hence the userLoggedIn check. + */ + const isCommentBlocked = computed( () => { + return Boolean( VerbumComments.mustLogIn ) && ! userLoggedIn.value && ! canAccessCookies; + } ); + /* * Calculate if the reply button should be disabled. When we have no user data we check the shouldDisableReply value, * otherwise we check if the comment is empty or saving. */ const isReplyDisabled = computed( () => { return ( + isCommentBlocked.value || ( isAuthRequired() && ! userLoggedIn.value && ( isMailFormMissingInput.value || isMailFormInvalid.value ) ) || @@ -117,12 +132,14 @@ export function createSignals() { const subscribeModalStatus: Signal< string | undefined > = signal( undefined ); return { + canAccessCookies, userInfo, userLoggedIn, mailLoginData, isTrayOpen, hasOpenedTrayOnce, commentValue, + isCommentBlocked, isEmptyComment, isSavingComment, isMailFormInvalid, diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/style.scss index 7f88cd7861db..4929d022019e 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/style.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/style.scss @@ -332,6 +332,17 @@ padding-bottom: 16px; } + // Matches the accent-bar treatment of .verbum-message below. Colors are + // pinned rather than themed so the notice stays legible in every scheme. + .verbum-subscriptions__cookie-notice { + margin-block: 0 16px; + padding: 8px 12px; + border-inline-start: 4px solid #f0b849; + background-color: #fef8ee; + color: #3c434a; + font-size: 14px; + } + .verbum-logins { display: flex; align-items: center;