packages/components/containers/organization/OrganizationPasswordSection.tsx

   1 import type { MutableRefObject } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { useAddresses } from '@proton/account/addresses/hooks';
   6 import { useOrganizationKey } from '@proton/account/organizationKey/hooks';
   7 import { Button } from '@proton/atoms';
   8 import Alert from '@proton/components/components/alert/Alert';
   9 import Loader from '@proton/components/components/loader/Loader';
  10 import Table from '@proton/components/components/table/Table';
  11 import TableBody from '@proton/components/components/table/TableBody';
  12 import TableHeader from '@proton/components/components/table/TableHeader';
  13 import TableRow from '@proton/components/components/table/TableRow';
  14 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
  15 import SettingsSection from '@proton/components/containers/account/SettingsSection';
  16 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  17 import type { Organization } from '@proton/shared/lib/interfaces';
  18 import {
  19     OrganizationKeyMode,
  20     OrganizationKeyState,
  21     getOrganizationKeyInfo,
  22 } from '@proton/shared/lib/organization/helper';
  23
  24 import useDisplayOrganizationKey from './useDisplayOrganizationKey';
  25 import useOrganizationModals from './useOrganizationModals';
  26
  27 interface Props {
  28     organization?: Organization;
  29     onceRef: MutableRefObject<boolean>;
  30 }
  31
  32 const OrganizationPasswordSection = ({ organization, onceRef }: Props) => {
  33     const [organizationKey, loadingOrganizationKey] = useOrganizationKey();
  34     const [addresses] = useAddresses();
  35     const organizationKeyInfo = getOrganizationKeyInfo(organization, organizationKey, addresses);
  36     const displayOrganizationKey = useDisplayOrganizationKey(organizationKey);
  37     const { modals, info, handleChangeOrganizationPassword, handleChangeOrganizationKeys } =
  38         useOrganizationModals(onceRef);
  39
  40     const tableHeaders = [c('Header').t`Organization key fingerprint`, c('Header').t`Key type`];
  41
  42     const loading = !organization || loadingOrganizationKey;
  43
  44     return (
  45         <>
  46             {modals}
  47             {(() => {
  48                 if (loading) {
  49                     return <Loader />;
  50                 }
  51
  52                 // Organization is not setup.
  53                 if (!organization?.HasKeys) {
  54                     return (
  55                         <Alert className="mb-4" type="warning">{c('Info').t`Multi-user support not enabled.`}</Alert>
  56                     );
  57                 }
  58
  59                 return (
  60                     <SettingsSection>
  61                         <SettingsParagraph learnMoreUrl={getKnowledgeBaseUrl('/organization-key')}>
  62                             {c('Info')
  63                                 .t`Your organization's emails are protected with end-to-end encryption using the organization key. This fingerprint can be used to verify that all administrators in your account have the same key.`}
  64                         </SettingsParagraph>
  65                         <div className="mb-4">
  66                             {organizationKeyInfo.state === OrganizationKeyState.Active && (
  67                                 <>
  68                                     {organizationKeyInfo.mode !== OrganizationKeyMode.Passwordless && (
  69                                         <Button
  70                                             color="norm"
  71                                             onClick={handleChangeOrganizationPassword}
  72                                             className="mr-4 mb-2"
  73                                         >
  74                                             {c('Action').t`Change password`}
  75                                         </Button>
  76                                     )}
  77                                     <Button className="mb-2" onClick={() => handleChangeOrganizationKeys()}>
  78                                         {c('passwordless').t`Change organization key`}
  79                                     </Button>
  80                                 </>
  81                             )}
  82                             {info}
  83                         </div>
  84                         {displayOrganizationKey.fingerprint && (
  85                             <Table responsive="cards">
  86                                 <TableHeader cells={tableHeaders} />
  87                                 <TableBody colSpan={2}>
  88                                     <TableRow
  89                                         labels={tableHeaders}
  90                                         cells={[
  91                                             <code key={1} className="max-w-full block text-ellipsis">
  92                                                 {displayOrganizationKey.fingerprint}
  93                                             </code>,
  94                                             displayOrganizationKey.algorithm,
  95                                         ]}
  96                                     />
  97                                 </TableBody>
  98                             </Table>
  99                         )}
 100                     </SettingsSection>
 101                 );
 102             })()}
 103         </>
 104     );
 105 };
 106
 107 export default OrganizationPasswordSection;