import { useState } from 'react' import { Alert } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import importOverleafModules from '../../../../macros/import-overleaf-module.macro' import { useSSOContext, SSOSubscription } from '../context/sso-context' import { SSOLinkingWidget } from './linking/sso-widget' import getMeta from '../../../utils/meta' function LinkingSection() { const { t } = useTranslation() const { subscriptions } = useSSOContext() const ssoErrorMessage = getMeta('ol-ssoErrorMessage') as string const projectSyncSuccessMessage = getMeta( 'ol-projectSyncSuccessMessage' ) as string const [integrationLinkingWidgets] = useState( () => getMeta('integrationLinkingWidgets') || importOverleafModules('integrationLinkingWidgets') ) const [referenceLinkingWidgets] = useState( () => getMeta('referenceLinkingWidgets') || importOverleafModules('referenceLinkingWidgets') ) const hasIntegrationLinkingSection = integrationLinkingWidgets.length const hasReferencesLinkingSection = referenceLinkingWidgets.length const hasSSOLinkingSection = Object.keys(subscriptions).length > 0 if ( !hasIntegrationLinkingSection && !hasReferencesLinkingSection && !hasSSOLinkingSection ) { return null } return ( <>

{t('integrations')}

{t('linked_accounts_explained')}

{hasIntegrationLinkingSection ? ( <>

{t('project_synchronisation')}

{projectSyncSuccessMessage ? ( {projectSyncSuccessMessage} ) : null}
{integrationLinkingWidgets.map( ({ import: importObject, path }, widgetIndex) => ( ) )}
) : null} {hasReferencesLinkingSection ? ( <>

{t('reference_sync')}

{referenceLinkingWidgets.map( ({ import: importObject, path }, widgetIndex) => ( ) )}
) : null} {hasSSOLinkingSection ? ( <>

{t('linked_accounts')}

{ssoErrorMessage ? ( {t('sso_link_error')}: {ssoErrorMessage} ) : null}
{Object.values(subscriptions).map( (subscription, subscriptionIndex) => ( ) )}
) : null} {hasIntegrationLinkingSection || hasReferencesLinkingSection || hasSSOLinkingSection ? (
) : null} ) } type LinkingWidgetProps = { ModuleComponent: any isLast: boolean } function ModuleLinkingWidget({ ModuleComponent, isLast }: LinkingWidgetProps) { return ( <> {isLast ? null :
} ) } type SSOLinkingWidgetContainerProps = { subscription: SSOSubscription isLast: boolean } function SSOLinkingWidgetContainer({ subscription, isLast, }: SSOLinkingWidgetContainerProps) { const { t } = useTranslation() const { unlink } = useSSOContext() let description = null switch (subscription.providerId) { case 'collabratec': description = t('linked_collabratec_description') break case 'google': case 'twitter': description = t('login_with_service', { service: subscription.provider.name, }) break case 'orcid': description = t('oauth_orcid_description') break } return ( <> unlink(subscription.providerId)} /> {isLast ? null :
} ) } export default LinkingSection