overleaf/services/web/frontend/js/features/group-management/components/members-table/sso-status.tsx
Alexandre Bourdin c4bea21ee2 Merge pull request #15669 from overleaf/ab-fix-sso-linking-status
[web] Fix SSO status in group members table

GitOrigin-RevId: e54e7b0c9640f0b96d9692c0208357e3bac2de91
2023-11-10 09:04:15 +00:00

54 lines
1.3 KiB
TypeScript

import { useTranslation } from 'react-i18next'
import getMeta from '@/utils/meta'
import { User } from '../../../../../../types/group-management/user'
import MaterialIcon from '@/shared/components/material-icon'
type SSOStatusProps = {
user: User
}
export default function SSOStatus({ user }: SSOStatusProps) {
const groupId = getMeta('ol-groupId')
if (user.invite) {
return <PendingInvite />
}
const linkedSSO = user.enrollment?.sso?.some(sso => sso.groupId === groupId)
return linkedSSO ? <SSOLinked /> : <SSOUnlinked />
}
function PendingInvite() {
const { t } = useTranslation()
return (
<span className="security-state-invite-pending">
<MaterialIcon
type="schedule"
category="outlined"
accessibilityLabel={t('pending_invite')}
/>
&nbsp; {t('sso')}
</span>
)
}
function SSOLinked() {
const { t } = useTranslation()
return (
<span className="security-state-managed">
<MaterialIcon type="check" accessibilityLabel={t('sso_active')} />
&nbsp; {t('sso')}
</span>
)
}
function SSOUnlinked() {
const { t } = useTranslation()
return (
<span className="security-state-not-managed">
<MaterialIcon type="close" accessibilityLabel={t('sso_not_active')} />
&nbsp; {t('sso')}
</span>
)
}