From be7202986d52565aa0317a0bba07210888442fec Mon Sep 17 00:00:00 2001 From: heavyweight Date: Thu, 14 Mar 2024 14:01:52 +0100 Subject: [PATCH 1/8] SSO: Add sso disable modal --- .../jetpack/_inc/client/security/sso.jsx | 241 ++++++++++++------ .../jetpack/_inc/client/security/style.scss | 99 +++++++ 2 files changed, 264 insertions(+), 76 deletions(-) diff --git a/projects/plugins/jetpack/_inc/client/security/sso.jsx b/projects/plugins/jetpack/_inc/client/security/sso.jsx index bad59eb4413d0..791561d84be10 100644 --- a/projects/plugins/jetpack/_inc/client/security/sso.jsx +++ b/projects/plugins/jetpack/_inc/client/security/sso.jsx @@ -1,4 +1,5 @@ -import { getRedirectUrl, ToggleControl } from '@automattic/jetpack-components'; +import { getRedirectUrl, ToggleControl, Gridicon } from '@automattic/jetpack-components'; +import { Button } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import ConnectUserBar from 'components/connect-user-bar'; import { FormFieldset } from 'components/forms'; @@ -6,7 +7,84 @@ import { withModuleSettingsFormHelpers } from 'components/module-settings/with-m import { ModuleToggle } from 'components/module-toggle'; import SettingsCard from 'components/settings-card'; import SettingsGroup from 'components/settings-group'; -import React, { Component } from 'react'; +import cookie from 'cookie'; +import React, { useState, Component } from 'react'; +import ReactDOM from 'react-dom'; +import { connect } from 'react-redux'; +import { getUserId } from 'state/initial-state'; + +const SSOSurveyNotice = connect( state => { + return { + userId: getUserId( state ), + }; +} )( ( { userId } ) => { + const href = `https://wordpressdotcom.survey.fm/sso-disable-survey?initiated-from=jetpack&user-id=${ userId }`; + const [ hideNotice, setHideNotice ] = useState( + 'dismissed' === cookie.parse( document.cookie )?.sso_survey + ); + + const setSSOSurveyCookie = ( value, maxAge ) => { + document.cookie = cookie.serialize( 'sso_survey', value, { + path: '/', + maxAge, + } ); + }; + + const onClose = () => { + setSSOSurveyCookie( 'dismissed', 365 * 24 * 60 * 60 ); // 1 year + setHideNotice( true ); + }; + + if ( hideNotice ) { + return null; + } + + return ( +
+ { /* eslint-disable-next-line react/jsx-no-bind */ } + +
+
+
+ { __( 'Hi there!', 'jetpack' ) } +
+
+ { __( + " Spare a moment? We'd love to hear why you want to disable SSO in a quick survey.", + 'jetpack' + ) } +
+
+ + +
+
+ + + ); +} ); export const SSO = withModuleSettingsFormHelpers( class extends Component { @@ -26,6 +104,7 @@ export const SSO = withModuleSettingsFormHelpers( 'sso', false ), + showSSODisableModal: false, }; handleTwoStepToggleChange = () => { @@ -54,85 +133,95 @@ export const SSO = withModuleSettingsFormHelpers( const isSSOActive = this.props.getOptionValue( 'sso' ), unavailableInOfflineMode = this.props.isUnavailableInOfflineMode( 'sso' ); return ( - - + -

- { __( - 'Add an extra layer of security to your website by enabling WordPress.com login and secure authentication. If you have multiple sites with this option enabled, you will be able to log in to every one of them with the same credentials.', - 'jetpack' - ) } -

- - - { this.props.getModule( 'sso' ).description } - - - - - + { __( + 'Add an extra layer of security to your website by enabling WordPress.com login and secure authentication. If you have multiple sites with this option enabled, you will be able to log in to every one of them with the same credentials.', 'jetpack' ) } - /> - - +

+ { + if ( isSSOActive ) { + this.setState( { showSSODisableModal: true } ); + } + this.props.toggleModuleNow( name ); + } } + > + + { this.props.getModule( 'sso' ).description } + + + + + + + - { ! this.props.hasConnectedOwner && ! this.props.isOfflineMode && ( - - ) } - + { ! this.props.hasConnectedOwner && ! this.props.isOfflineMode && ( + + ) } + + { this.state.showSSODisableModal && + ReactDOM.createPortal( , document.body ) } + ); } } diff --git a/projects/plugins/jetpack/_inc/client/security/style.scss b/projects/plugins/jetpack/_inc/client/security/style.scss index b5a9a2d93dbcf..64cee053eed5b 100644 --- a/projects/plugins/jetpack/_inc/client/security/style.scss +++ b/projects/plugins/jetpack/_inc/client/security/style.scss @@ -101,3 +101,102 @@ white-space: nowrap; } } + + +.modal-survey-notice { + position: fixed; + left: 0; + top: 0; + height: 100%; + width: 100%; + z-index: 1000; + + .modal-survey-notice__backdrop { + background: var(--studio-black); + opacity: 0.2; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + cursor: default; + } + + + .modal-survey-notice__popup { + position: absolute; + right: 25px; + bottom: 25px; + width: 416px; + max-width: calc(100% - 50px); + z-index: 2; + border-radius: 2px; + box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.04), 0 3px 8px 0 rgba(0, 0, 0, 0.12); + overflow: hidden; + + .modal-survey-notice__popup-head { + background: #0675c4; + border-bottom: 1px solid #f6f7f7; + height: 56px; + padding: 0 14px 0 16px; + display: flex; + align-items: center; + justify-content: space-between; + + .modal-survey-notice__popup-head-title { + color: var(--studio-white); + font-size: rem(14px); + font-weight: 500; + line-height: 20px; + letter-spacing: -0.15px; + } + + .modal-survey-notice__popup-head-close svg { + fill: var(--studio-white); + } + } + + .modal-survey-notice__popup-content { + padding: 18px 24px 30px; + background: var(--studio-white); + + .modal-survey-notice__popup-content-title { + font-size: rem(16px); + font-weight: 500; + line-height: 24px; + letter-spacing: -0.32px; + padding-bottom: 8px; + } + + .modal-survey-notice__popup-content-description { + font-size: rem(14px); + line-height: 20px; + letter-spacing: -0.15px; + padding-bottom: 18px; + } + + .modal-survey-notice__popup-content-buttons { + display: flex; + justify-content: flex-end; + + .modal-survey-notice__popup-content-buttons-ok { + padding: 8px 14px; + background: var(--studio-blue-50); + color: var(--studio-white); + font-size: rem(14px); + line-height: 20px; + letter-spacing: -0.15px; + } + + .modal-survey-notice__popup-content-buttons-cancel { + padding: 8px 14px; + color: var(--studio-blue-50); + text-align: center; + font-size: rem(14px); + line-height: 20px; + letter-spacing: -0.15px; + } + } + } + } +} From 32b436897609ea37b82abac1a5735b8efb6fe075 Mon Sep 17 00:00:00 2001 From: heavyweight Date: Thu, 14 Mar 2024 14:02:57 +0100 Subject: [PATCH 2/8] changelog --- projects/plugins/jetpack/changelog/add-sso-disable-notice | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/plugins/jetpack/changelog/add-sso-disable-notice diff --git a/projects/plugins/jetpack/changelog/add-sso-disable-notice b/projects/plugins/jetpack/changelog/add-sso-disable-notice new file mode 100644 index 0000000000000..ddf8c748b3fba --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-sso-disable-notice @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Add sso survey modal for users that disable the module From 91d363ba2aafc53955fc4c5d6169780bf6c61316 Mon Sep 17 00:00:00 2001 From: Anthony Grullon Date: Tue, 19 Mar 2024 10:57:22 -0400 Subject: [PATCH 3/8] Update copies --- projects/plugins/jetpack/_inc/client/security/sso.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/plugins/jetpack/_inc/client/security/sso.jsx b/projects/plugins/jetpack/_inc/client/security/sso.jsx index 791561d84be10..72bc27ec416d3 100644 --- a/projects/plugins/jetpack/_inc/client/security/sso.jsx +++ b/projects/plugins/jetpack/_inc/client/security/sso.jsx @@ -59,7 +59,7 @@ const SSOSurveyNotice = connect( state => {
{ __( - " Spare a moment? We'd love to hear why you want to disable SSO in a quick survey.", + "Spare a moment? We'd love to hear why you want to disable SSO in a quick survey.", 'jetpack' ) }
@@ -68,7 +68,7 @@ const SSOSurveyNotice = connect( state => { className="dmodal-survey-notice__popup-content-buttons-cancel" onClick={ onClose } // eslint-disable-line react/jsx-no-bind > - { __( 'Maybe later', 'jetpack' ) } + { __( 'Remind later', 'jetpack' ) }