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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSO: Add sso disable modal #36387

Merged
merged 13 commits into from
Mar 21, 2024
Merged

SSO: Add sso disable modal #36387

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
be72029
SSO: Add sso disable modal
heavyweight Mar 14, 2024
32b4368
changelog
heavyweight Mar 14, 2024
d7f38a4
Merge branch 'trunk' into add/sso-disable-notice
heavyweight Mar 19, 2024
91d363b
Update copies
agrullon95 Mar 19, 2024
086dd1c
Update sso disable cookie name
agrullon95 Mar 19, 2024
771345a
update sso disable survey link
agrullon95 Mar 19, 2024
3b426b0
Merge branch 'trunk' into add/sso-disable-notice
agrullon95 Mar 19, 2024
3eecbdf
Retrieve correct userId
agrullon95 Mar 19, 2024
0dd529f
Merge branch 'trunk' into add/sso-disable-notice
agrullon95 Mar 19, 2024
279769d
Fix classname
agrullon95 Mar 19, 2024
210bfd4
Update styling
agrullon95 Mar 19, 2024
2132a36
Merge branch 'trunk' into add/sso-disable-notice
agrullon95 Mar 21, 2024
4490c82
Merge branch 'trunk' into add/sso-disable-notice
agrullon95 Mar 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
238 changes: 162 additions & 76 deletions projects/plugins/jetpack/_inc/client/security/sso.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,87 @@
import { getRedirectUrl, ToggleControl } from '@automattic/jetpack-components';
import { getRedirectUrl, ToggleControl, Gridicon } from '@automattic/jetpack-components';
import { useConnection } from '@automattic/jetpack-connection';
import { Button } from '@wordpress/components';
import { __, _x } from '@wordpress/i18n';
import ConnectUserBar from 'components/connect-user-bar';
import { FormFieldset } from 'components/forms';
import { withModuleSettingsFormHelpers } from 'components/module-settings/with-module-settings-form-helpers';
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 { useState, Component } from 'react';
import ReactDOM from 'react-dom';

const SSOSurveyNotice = () => {
const { userConnectionData } = useConnection();
const userId = userConnectionData?.currentUser?.wpcomUser?.ID;
const href = `https://wordpressdotcom.survey.fm/disable-sso-survey?initiated-from=jetpack&user-id=${ userId }`;
const [ hideNotice, setHideNotice ] = useState(
'dismissed' === cookie.parse( document.cookie )?.sso_disable
);

const setSSOSurveyCookie = ( value, maxAge ) => {
document.cookie = cookie.serialize( 'sso_disable', value, {
path: '/',
maxAge,
} );
};

const onClose = () => {
setSSOSurveyCookie( 'dismissed', 365 * 24 * 60 * 60 ); // 1 year
setHideNotice( true );
};

if ( hideNotice ) {
return null;
}

return (
<div className="modal-survey-notice">
{ /* eslint-disable-next-line react/jsx-no-bind */ }
<Button className="modal-survey-notice__backdrop" onClick={ onClose } />
<div className="modal-survey-notice__popup">
<div className="modal-survey-notice__popup-head">
<div className="modal-survey-notice__popup-head-title">
{ __( 'SSO Survey', 'jetpack' ) }
</div>
{ /* eslint-disable-next-line react/jsx-no-bind */ }
<Button onClick={ onClose } className="modal-survey-notice__popup-head-close">
<Gridicon icon="cross" size={ 16 } />
</Button>
</div>
<div className="modal-survey-notice__popup-content">
<div className="modal-survey-notice__popup-content-title">
{ __( 'Hi there!', 'jetpack' ) }
</div>
<div className="modal-survey-notice__popup-content-description">
{ __(
"Spare a moment? We'd love to hear why you want to disable SSO in a quick survey.",
'jetpack'
) }
</div>
<div className="modal-survey-notice__popup-content-buttons">
<Button
className="modal-survey-notice__popup-content-buttons-cancel"
onClick={ onClose } // eslint-disable-line react/jsx-no-bind
>
{ __( 'Remind later', 'jetpack' ) }
</Button>
<Button
className="modal-survey-notice__popup-content-buttons-ok"
href={ href }
target="_blank"
rel="noopener noreferrer"
onClick={ onClose } // eslint-disable-line react/jsx-no-bind
>
{ __( 'Take survey', 'jetpack' ) }
</Button>
</div>
</div>
</div>
</div>
);
};

export const SSO = withModuleSettingsFormHelpers(
class extends Component {
Expand All @@ -26,6 +101,7 @@ export const SSO = withModuleSettingsFormHelpers(
'sso',
false
),
showSSODisableModal: false,
};

handleTwoStepToggleChange = () => {
Expand Down Expand Up @@ -54,85 +130,95 @@ export const SSO = withModuleSettingsFormHelpers(
const isSSOActive = this.props.getOptionValue( 'sso' ),
unavailableInOfflineMode = this.props.isUnavailableInOfflineMode( 'sso' );
return (
<SettingsCard
{ ...this.props }
hideButton
module="sso"
header={ _x( 'WordPress.com login', 'Settings header, noun.', 'jetpack' ) }
>
<SettingsGroup
hasChild
disableInOfflineMode
disableInSiteConnectionMode
module={ this.props.getModule( 'sso' ) }
support={ {
text: __(
'Allows registered users to log in to your site with their WordPress.com accounts.',
'jetpack'
),
link: getRedirectUrl( 'jetpack-support-sso' ),
} }
<>
<SettingsCard
{ ...this.props }
hideButton
module="sso"
header={ _x( 'WordPress.com login', 'Settings header, noun.', 'jetpack' ) }
>
<p>
{ __(
'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'
) }
</p>
<ModuleToggle
slug="sso"
disabled={ unavailableInOfflineMode || ! this.props.hasConnectedOwner }
activated={ isSSOActive }
toggling={ this.props.isSavingAnyOption( 'sso' ) }
toggleModule={ this.props.toggleModuleNow }
<SettingsGroup
hasChild
disableInOfflineMode
disableInSiteConnectionMode
module={ this.props.getModule( 'sso' ) }
support={ {
text: __(
'Allows registered users to log in to your site with their WordPress.com accounts.',
'jetpack'
),
link: getRedirectUrl( 'jetpack-support-sso' ),
} }
>
<span className="jp-form-toggle-explanation">
{ this.props.getModule( 'sso' ).description }
</span>
</ModuleToggle>
<FormFieldset>
<ToggleControl
checked={
isSSOActive &&
this.props.getOptionValue( 'jetpack_sso_match_by_email', 'sso', false )
}
disabled={
! isSSOActive ||
unavailableInOfflineMode ||
this.props.isSavingAnyOption( [ 'sso' ] )
}
toggling={ this.props.isSavingAnyOption( [ 'jetpack_sso_match_by_email' ] ) }
onChange={ this.handleMatchByEmailToggleChange }
label={ __( 'Match accounts using email addresses', 'jetpack' ) }
/>
<ToggleControl
checked={
isSSOActive &&
this.props.getOptionValue( 'jetpack_sso_require_two_step', 'sso', false )
}
disabled={
! isSSOActive ||
unavailableInOfflineMode ||
this.props.isSavingAnyOption( [ 'sso' ] )
}
toggling={ this.props.isSavingAnyOption( [ 'jetpack_sso_require_two_step' ] ) }
onChange={ this.handleTwoStepToggleChange }
label={ __(
'Require accounts to use WordPress.com Two-Step Authentication',
<p>
{ __(
'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'
) }
/>
</FormFieldset>
</SettingsGroup>
</p>
<ModuleToggle
slug="sso"
disabled={ unavailableInOfflineMode || ! this.props.hasConnectedOwner }
activated={ isSSOActive }
toggling={ this.props.isSavingAnyOption( 'sso' ) }
// eslint-disable-next-line react/jsx-no-bind
toggleModule={ name => {
if ( isSSOActive ) {
this.setState( { showSSODisableModal: true } );
}
this.props.toggleModuleNow( name );
} }
>
<span className="jp-form-toggle-explanation">
{ this.props.getModule( 'sso' ).description }
</span>
</ModuleToggle>
<FormFieldset>
<ToggleControl
checked={
isSSOActive &&
this.props.getOptionValue( 'jetpack_sso_match_by_email', 'sso', false )
}
disabled={
! isSSOActive ||
unavailableInOfflineMode ||
this.props.isSavingAnyOption( [ 'sso' ] )
}
toggling={ this.props.isSavingAnyOption( [ 'jetpack_sso_match_by_email' ] ) }
onChange={ this.handleMatchByEmailToggleChange }
label={ __( 'Match accounts using email addresses', 'jetpack' ) }
/>
<ToggleControl
checked={
isSSOActive &&
this.props.getOptionValue( 'jetpack_sso_require_two_step', 'sso', false )
}
disabled={
! isSSOActive ||
unavailableInOfflineMode ||
this.props.isSavingAnyOption( [ 'sso' ] )
}
toggling={ this.props.isSavingAnyOption( [ 'jetpack_sso_require_two_step' ] ) }
onChange={ this.handleTwoStepToggleChange }
label={ __(
'Require accounts to use WordPress.com Two-Step Authentication',
'jetpack'
) }
/>
</FormFieldset>
</SettingsGroup>

{ ! this.props.hasConnectedOwner && ! this.props.isOfflineMode && (
<ConnectUserBar
feature="sso"
featureLabel={ __( 'Secure Sign-On', 'jetpack' ) }
text={ __( 'Connect to enable WordPress.com Secure Sign-On.', 'jetpack' ) }
/>
) }
</SettingsCard>
{ ! this.props.hasConnectedOwner && ! this.props.isOfflineMode && (
<ConnectUserBar
feature="sso"
featureLabel={ __( 'Secure Sign-On', 'jetpack' ) }
text={ __( 'Connect to enable WordPress.com Secure Sign-On.', 'jetpack' ) }
/>
) }
</SettingsCard>
{ this.state.showSSODisableModal &&
ReactDOM.createPortal( <SSOSurveyNotice />, document.body ) }
</>
);
}
}
Expand Down
99 changes: 99 additions & 0 deletions projects/plugins/jetpack/_inc/client/security/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 1rem;
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;
}
}
}
}
}
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/add-sso-disable-notice
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: other

Add sso survey modal for users that disable the module
Loading