overleaf/services/web/frontend/js/features/settings/components/root.tsx

64 lines
2 KiB
TypeScript
Raw Normal View History

import { useEffect } from 'react'
import { Alert } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import getMeta from '../../../utils/meta'
import EmailsSection from './emails-section'
import AccountInfoSection from './account-info-section'
import PasswordSection from './password-section'
import LinkingSection from './linking-section'
import MiscSection from './misc-section'
import LeaveSection from './leave-section'
import * as eventTracking from '../../../infrastructure/event-tracking'
import { UserProvider } from '../../../shared/context/user-context'
import { SSOProvider } from '../context/sso-context'
function SettingsPageRoot() {
const { t } = useTranslation()
const ssoError = getMeta('ol-ssoError') as string
useEffect(() => {
eventTracking.sendMB('settings-view')
}, [])
return (
<UserProvider>
<div className="container">
<div className="row">
<div className="col-md-12 col-lg-10 col-lg-offset-1">
{ssoError ? (
<Alert bsStyle="danger">
{t('sso_link_error')}: {t(ssoError)}
</Alert>
) : null}
<div className="card">
<div className="page-header">
<h1>{t('account_settings')}</h1>
</div>
<div>
<EmailsSection />
<div className="row">
<div className="col-md-5">
<AccountInfoSection />
</div>
<div className="col-md-5 col-md-offset-1">
<PasswordSection />
</div>
</div>
<hr />
<SSOProvider>
<LinkingSection />
</SSOProvider>
<MiscSection />
<hr />
<LeaveSection />
</div>
</div>
</div>
</div>
</div>
</UserProvider>
)
}
export default SettingsPageRoot