| 36 | * MfaBadge is a static element that is used to display user's Multi Factor Authentication (MFA) state. It communicates whether MFA is enabled or disabled. The state is reflected by the component's icon and by its tooltip. |
| 37 | */ |
| 38 | export const MfaBadge = ({ enabled }: Props) => { |
| 39 | const { t } = useTranslate(); |
| 40 | |
| 41 | return ( |
| 42 | <Tooltip |
| 43 | title={ |
| 44 | enabled ? t('tooltip_user_mfa_enabled') : t('tooltip_user_mfa_disabled') |
| 45 | } |
| 46 | data-cy="mfa-badge" |
| 47 | > |
| 48 | <StyledTextWrapper> |
| 49 | {enabled ? ( |
| 50 | <StyledShieldTick aria-hidden="true" focusable="false" /> |
| 51 | ) : ( |
| 52 | <StyledShieldOff aria-hidden="true" focusable="false" /> |
| 53 | )} |
| 54 | <StyledText>{t('user_mfa')}</StyledText> |
| 55 | </StyledTextWrapper> |
| 56 | </Tooltip> |
| 57 | ); |
| 58 | }; |