agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-15 06:33:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #17315 from overleaf/ab-accounts-settings-sso-status

Browse Source 
[web] Show Group SSO linking status on the account settings page

GitOrigin-RevId: ae45e1bd7a90a672c5fb023e7f3e603a00e364e5
This commit is contained in:
Jessica Lawshe
2024-03-12 09:03:43 +00:00
committed by Copybot
parent 814ee0ac62
commit d65bba566c
11 changed files with 446 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/extracted-translations.json
+6
View File
@@ -29,6 +29,7 @@
"account_settings": "",
"acct_linked_to_institution_acct_2": "",
"actions": "",
"active": "",
"add": "",
"add_additional_certificate": "",
"add_affiliation": "",
@@ -975,6 +976,7 @@
"read_write_token": "",
"ready_to_join_x": "",
"ready_to_join_x_in_group_y": "",
"ready_to_set_up": "",
"realtime_track_changes": "",
"reasons_for_compile_timeouts": "",
"reauthorize_github_account": "",
@@ -1217,6 +1219,10 @@
"sso_test_interstitial_info_2": "",
"sso_test_interstitial_title": "",
"sso_test_result_error_message": "",
"sso_user_explanation_enabled_with_admin_email": "",
"sso_user_explanation_enabled_with_group_name": "",
"sso_user_explanation_ready_with_admin_email": "",
"sso_user_explanation_ready_with_group_name": "",
"start_a_free_trial": "",
"start_by_adding_your_email": "",
"start_free_trial": "",
services/web/frontend/js/features/settings/components/root.tsx
+2
View File
@@ -1,3 +1,4 @@
import SecuritySection from '@/features/settings/components/security-section'
import { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import getMeta from '../../../utils/meta'
@@ -64,6 +65,7 @@ function SettingsPageContent() {
</div>
</div>
<hr />
<SecuritySection />
<SplitTestProvider>
<SSOProvider>
<LinkingSection />
services/web/frontend/js/features/settings/components/security-section.tsx
+105
View File
@@ -0,0 +1,105 @@
import MaterialIcon from '@/shared/components/material-icon'
import { Trans, useTranslation } from 'react-i18next'
import { GroupSSOLinkingStatus } from '../../../../../types/subscription/sso'
import getMeta from '../../../utils/meta'
function SecuritySection() {
const { t } = useTranslation()
const memberOfSSOEnabledGroups = getMeta(
'ol-memberOfSSOEnabledGroups',
[]
) as GroupSSOLinkingStatus[]
return (
<>
{memberOfSSOEnabledGroups?.length > 0 ? (
<>
<h3>{t('security')}</h3>
{memberOfSSOEnabledGroups.map(
({
groupId,
linked,
groupName,
adminEmail,
}: GroupSSOLinkingStatus) => (
<div key={groupId} className="security-row">
<span className="icon">
<MaterialIcon type="key" />
</span>
<div className="text">
<span className="line-header">
<b>{t('single_sign_on_sso')}</b>{' '}
{linked ? (
<span className="status-label status-label-configured">
{t('active')}
</span>
) : (
<span className="status-label status-label-ready">
{t('ready_to_set_up')}
</span>
)}
</span>
<div>
{linked ? (
groupName ? (
<Trans
i18nKey="sso_user_explanation_enabled_with_group_name"
// eslint-disable-next-line react/jsx-key
components={[<b />]}
values={{ groupName }}
shouldUnescape
tOptions={{ interpolation: { escapeValue: true } }}
/>
) : (
<Trans
i18nKey="sso_user_explanation_enabled_with_admin_email"
// eslint-disable-next-line react/jsx-key
components={[<b />]}
values={{ adminEmail }}
shouldUnescape
tOptions={{ interpolation: { escapeValue: true } }}
/>
)
) : groupName ? (
<Trans
i18nKey="sso_user_explanation_ready_with_group_name"
// eslint-disable-next-line react/jsx-key
components={[<b />, <b />]}
values={{ groupName, buttonText: t('set_up_sso') }}
shouldUnescape
tOptions={{ interpolation: { escapeValue: true } }}
/>
) : (
<Trans
i18nKey="sso_user_explanation_ready_with_admin_email"
// eslint-disable-next-line react/jsx-key
components={[<b />, <b />]}
values={{ adminEmail, buttonText: t('set_up_sso') }}
shouldUnescape
tOptions={{ interpolation: { escapeValue: true } }}
/>
)}
</div>
</div>
{linked ? null : (
<div className="button-column">
<a
className="btn btn-primary"
href={`/subscription/${groupId}/sso_enrollment`}
>
{t('set_up_sso')}
</a>
</div>
)}
</div>
)
)}
<hr />
</>
) : null}
</>
)
}
export default SecuritySection
services/web/frontend/stylesheets/app/account-settings.less
+51
View File
@@ -252,3 +252,54 @@ tbody > tr.affiliations-table-warning-row > td {
text-decoration: underline;
}
}
.security-row {
.line-header > b {
color: @ol-blue-gray-6;
}
line-height: 24px;
color: @ol-blue-gray-4;
display: flex;
flex-direction: row;
padding: 6px 0;
.icon {
color: @ol-blue-gray-6;
display: flex;
flex: 1 1 7%;
padding: 0 16px;
margin-top: 16px;
}
.text {
flex: 1 1 93%;
display: flex;
flex-direction: column;
margin-right: 16px;
}
.button-column {
display: flex;
align-items: center;
}
.status-label {
font-size: @font-size-small;
border-radius: 4px;
padding: 2px 4px;
margin-top: 4px;
margin-left: 8px;
flex-shrink: 0;
&.status-label-configured {
background-color: @ol-green;
color: @neutral-10;
}
&.status-label-ready {
background-color: @neutral-20;
color: @neutral-90;
}
}
}