packages/components/containers/organization/sso/RemoveSSOModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   5 import ModalTwo from '@proton/components/components/modalTwo/Modal';
   6 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
   7 import ModalTwoFooter from '@proton/components/components/modalTwo/ModalFooter';
   8 import ModalTwoHeader from '@proton/components/components/modalTwo/ModalHeader';
   9 import getBoldFormattedText from '@proton/components/helpers/getBoldFormattedText';
  10 import useApi from '@proton/components/hooks/useApi';
  11 import useEventManager from '@proton/components/hooks/useEventManager';
  12 import useNotifications from '@proton/components/hooks/useNotifications';
  13 import useLoading from '@proton/hooks/useLoading';
  14 import { removeSAMLConfig } from '@proton/shared/lib/api/samlSSO';
  15 import type { SSO } from '@proton/shared/lib/interfaces';
  16 import errorImg from '@proton/styles/assets/img/errors/error-generic-triangle.svg';
  17
  18 interface Props extends ModalProps {
  19     sso: SSO;
  20 }
  21
  22 const RemoveSSOModal = ({ sso, onClose, ...rest }: Props) => {
  23     const api = useApi();
  24     const { call } = useEventManager();
  25     const [loading, withLoading] = useLoading();
  26     const { createNotification } = useNotifications();
  27
  28     const removeSSO = async () => {
  29         await api(removeSAMLConfig(sso.ID));
  30         await call();
  31
  32         createNotification({
  33             text:
  34                 // translator: refers to removing the SSO configuration
  35                 c('sso').t`Single sign-on removed`,
  36         });
  37
  38         onClose?.();
  39     };
  40
  41     return (
  42         <ModalTwo onClose={onClose} size="small" {...rest}>
  43             <ModalTwoHeader title={c('sso').t`Remove single sign-on for your organization?`} />
  44             <ModalTwoContent>
  45                 <div className="text-center my-8">
  46                     <img className="m-auto w-custom" style={{ '--w-custom': '6rem' }} src={errorImg} alt="" />
  47                 </div>
  48                 <p className="m-0 text-bold">{c('sso')
  49                     .t`The credentials from your Identity Provider will be deleted.`}</p>
  50                 <p className="my-4">{c('sso').t`Once single sign-on is disabled for your organization:`}</p>
  51                 <ul className="mt-0">
  52                     <li>
  53                         {getBoldFormattedText(
  54                             c('sso')
  55                                 .t`**SSO users (provided by your Identity Provider) will be deleted** and you will have to create them manually to add them back to your organization.`
  56                         )}
  57                     </li>
  58                     <li>
  59                         {c('sso')
  60                             .t`Non-SSO users (created manually, not provided by your Identity Provider) can still log in to your organization.`}
  61                     </li>
  62                 </ul>
  63             </ModalTwoContent>
  64             <ModalTwoFooter>
  65                 <Button onClick={onClose}>{c('Action').t`Cancel`}</Button>
  66                 <Button color="danger" onClick={() => withLoading(removeSSO)} loading={loading}>
  67                     {c('sso').t`Remove single sign-on`}
  68                 </Button>
  69             </ModalTwoFooter>
  70         </ModalTwo>
  71     );
  72 };
  73
  74 export default RemoveSSOModal;