packages/components/containers/security/ExternalPGPSettingsSection.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import Info from '@proton/components/components/link/Info';
   5 import useModalState from '@proton/components/components/modalTwo/useModalState';
   6 import type { PromptProps } from '@proton/components/components/prompt/Prompt';
   7 import Prompt from '@proton/components/components/prompt/Prompt';
   8 import Toggle from '@proton/components/components/toggle/Toggle';
   9 import SettingsLayout from '@proton/components/containers/account/SettingsLayout';
  10 import SettingsLayoutLeft from '@proton/components/containers/account/SettingsLayoutLeft';
  11 import SettingsLayoutRight from '@proton/components/containers/account/SettingsLayoutRight';
  12 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
  13 import SettingsSection from '@proton/components/containers/account/SettingsSection';
  14 import useApi from '@proton/components/hooks/useApi';
  15 import useEventManager from '@proton/components/hooks/useEventManager';
  16 import useNotifications from '@proton/components/hooks/useNotifications';
  17 import { useLoading } from '@proton/hooks';
  18 import { useMailSettings } from '@proton/mail/mailSettings/hooks';
  19 import { updateAttachPublicKey, updatePGPScheme, updateSign } from '@proton/shared/lib/api/mailSettings';
  20 import { BRAND_NAME } from '@proton/shared/lib/constants';
  21 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  22 import { ATTACH_PUBLIC_KEY, DEFAULT_MAILSETTINGS, SIGN } from '@proton/shared/lib/mail/mailSettings';
  23
  24 import { PGPSchemeSelect } from './PGPSchemeSelect';
  25
  26 interface AutomaticallySignModalProps extends Omit<PromptProps, 'title' | 'buttons' | 'children'> {
  27     onConfirm: (value: boolean) => void;
  28 }
  29
  30 const AutomaticallySignModal = ({ onConfirm, ...rest }: AutomaticallySignModalProps) => {
  31     return (
  32         <Prompt
  33             title={c('Title').t`Automatically sign outgoing messages?`}
  34             buttons={[
  35                 <Button
  36                     color="norm"
  37                     onClick={() => {
  38                         onConfirm(true);
  39                         rest.onClose?.();
  40                     }}
  41                     data-testid="automatically-sign-modal:confirm"
  42                 >{c('Action').t`Yes`}</Button>,
  43                 <Button
  44                     onClick={() => {
  45                         onConfirm(false);
  46                         rest.onClose?.();
  47                     }}
  48                 >{c('Action').t`No`}</Button>,
  49             ]}
  50             {...rest}
  51         >
  52             {c('Info')
  53                 .t`PGP clients are more likely to automatically detect your PGP keys if outgoing messages are signed.`}
  54         </Prompt>
  55     );
  56 };
  57
  58 export const ExternalPGPSettingsSection = () => {
  59     const [{ Sign, AttachPublicKey, PGPScheme } = DEFAULT_MAILSETTINGS] = useMailSettings();
  60     const { call } = useEventManager();
  61     const { createNotification } = useNotifications();
  62     const api = useApi();
  63     const [loadingSign, withLoadingSign] = useLoading();
  64     const [loadingAttach, withLoadingAttach] = useLoading();
  65     const [loadingScheme, withLoadingScheme] = useLoading();
  66
  67     const [automaticallySignModalProps, setAutomaticallySignModalOpen, renderAutomaticallySign] = useModalState();
  68
  69     const handleChangeSign = async (value: number) => {
  70         await api(updateSign(value));
  71         await call();
  72         createNotification({ text: c('Info').t`Encryption setting updated` });
  73     };
  74
  75     const handleAttachPublicKey = async (value: number) => {
  76         await api(updateAttachPublicKey(value));
  77         await call();
  78         createNotification({ text: c('Info').t`Encryption setting updated` });
  79     };
  80
  81     const handleChangeScheme = async (value: number) => {
  82         await api(updatePGPScheme(value));
  83         await call();
  84         createNotification({ text: c('Info').t`Encryption setting updated` });
  85     };
  86
  87     const handleAutomaticallySign = async (shouldSign: boolean) => {
  88         await Promise.all([
  89             shouldSign ? api(updateSign(SIGN.ENABLED)) : undefined,
  90             api(updateAttachPublicKey(ATTACH_PUBLIC_KEY.ENABLED)),
  91         ]);
  92         await call();
  93         createNotification({ text: c('Info').t`Encryption setting updated` });
  94     };
  95
  96     return (
  97         <SettingsSection>
  98             {renderAutomaticallySign && (
  99                 <AutomaticallySignModal
 100                     onConfirm={(shouldSign) => {
 101                         const promise = handleAutomaticallySign(shouldSign);
 102                         if (shouldSign) {
 103                             withLoadingSign(promise);
 104                         }
 105                         withLoadingAttach(promise);
 106                     }}
 107                     {...automaticallySignModalProps}
 108                 />
 109             )}
 110             <SettingsParagraph learnMoreUrl={getKnowledgeBaseUrl('/how-to-use-pgp')}>
 111                 {c('Info').t`Only change these settings if you are using PGP with non-${BRAND_NAME} recipients.`}
 112             </SettingsParagraph>
 113
 114             <SettingsLayout>
 115                 <SettingsLayoutLeft>
 116                     <label htmlFor="signToggle" className="text-semibold">
 117                         <span className="mr-2">{c('Label').t`Sign external messages`}</span>
 118                         <Info
 119                             url={getKnowledgeBaseUrl('/what-is-a-digital-signature')}
 120                             title={c('Tooltip sign external messages')
 121                                 .t`Automatically sign all your outgoing messages so users can verify the authenticity of your messages. This is done in combination with the default PGP settings which can be configured below.`}
 122                         />
 123                     </label>
 124                 </SettingsLayoutLeft>
 125                 <SettingsLayoutRight isToggleContainer>
 126                     <Toggle
 127                         id="signToggle"
 128                         checked={!!Sign}
 129                         onChange={(e) => {
 130                             withLoadingSign(handleChangeSign(+e.target.checked));
 131                         }}
 132                         loading={loadingSign}
 133                     />
 134                 </SettingsLayoutRight>
 135             </SettingsLayout>
 136             <SettingsLayout>
 137                 <SettingsLayoutLeft>
 138                     <label htmlFor="attachPublicKeyToggle" className="text-semibold">
 139                         <span className="mr-2">{c('Label').t`Attach public key`}</span>
 140                         <Info
 141                             url={getKnowledgeBaseUrl('/how-to-use-pgp')}
 142                             title={c('Tooltip automatically attach public key')
 143                                 .t`This automatically adds your public key to each message you send. Recipients can use this to verify the authenticity of your messages and send encrypted messages to you.`}
 144                         />
 145                     </label>
 146                 </SettingsLayoutLeft>
 147                 <SettingsLayoutRight isToggleContainer>
 148                     <Toggle
 149                         id="attachPublicKeyToggle"
 150                         checked={!!AttachPublicKey}
 151                         onChange={(e) => {
 152                             const newValue = +e.target.checked;
 153                             if (newValue && !Sign) {
 154                                 setAutomaticallySignModalOpen(true);
 155                             } else {
 156                                 withLoadingAttach(handleAttachPublicKey(newValue));
 157                             }
 158                         }}
 159                         loading={loadingAttach}
 160                     />
 161                 </SettingsLayoutRight>
 162             </SettingsLayout>
 163             <SettingsLayout>
 164                 <SettingsLayoutLeft>
 165                     <label htmlFor="PGPSchemeSelect" className="text-semibold">
 166                         <span className="mr-2">{c('Label').t`Default PGP scheme`}</span>
 167                         <Info
 168                             url={getKnowledgeBaseUrl('/pgp-mime-pgp-inline')}
 169                             title={c('Tooltip default pgp scheme')
 170                                 .t`Select the default PGP settings used to sign or encrypt messages with non-${BRAND_NAME} PGP users. Note that Inline PGP forces plain text messages.`}
 171                         />
 172                     </label>
 173                 </SettingsLayoutLeft>
 174                 <SettingsLayoutRight>
 175                     <PGPSchemeSelect
 176                         id="PGPSchemeSelect"
 177                         pgpScheme={PGPScheme}
 178                         onChange={(e) => {
 179                             withLoadingScheme(handleChangeScheme(+e.target.value));
 180                         }}
 181                         disabled={loadingScheme}
 182                     />
 183                 </SettingsLayoutRight>
 184             </SettingsLayout>
 185         </SettingsSection>
 186     );
 187 };