packages/components/containers/security/AddressVerificationSection.tsx

   1 import { c } from 'ttag';
   2
   3 import BetaBadge from '@proton/components/components/badge/BetaBadge';
   4 import Info from '@proton/components/components/link/Info';
   5 import SettingsLayout from '@proton/components/containers/account/SettingsLayout';
   6 import SettingsLayoutLeft from '@proton/components/containers/account/SettingsLayoutLeft';
   7 import SettingsLayoutRight from '@proton/components/containers/account/SettingsLayoutRight';
   8 import SettingsSection from '@proton/components/containers/account/SettingsSection';
   9 import { MAIL_APP_NAME } from '@proton/shared/lib/constants';
  10 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  11 import { useFlag } from '@proton/unleash';
  12
  13 import KTToggle from './KTToggle';
  14 import PromptPinToggle from './PromptPinToggle';
  15
  16 export const AddressVerificationSection = () => {
  17     const showKTSetting = useFlag('KeyTransparencyShowUI');
  18     return (
  19         <SettingsSection>
  20             <SettingsLayout>
  21                 <SettingsLayoutLeft>
  22                     <label htmlFor="prompt-pin-toggle" className="text-semibold">
  23                         <span className="mr-2">{c('Label').t`Prompt to trust keys`}</span>
  24                         <Info
  25                             url={getKnowledgeBaseUrl('/address-verification')}
  26                             title={c('Tooltip prompt to trust keys')
  27                                 .t`When receiving an email from another ${MAIL_APP_NAME} user who does not have trusted keys in your contacts, a banner will ask if you want to enable trusted keys.`}
  28                         />
  29                     </label>
  30                 </SettingsLayoutLeft>
  31                 <SettingsLayoutRight isToggleContainer>
  32                     <PromptPinToggle id="prompt-pin-toggle" />
  33                 </SettingsLayoutRight>
  34             </SettingsLayout>
  35             {showKTSetting ? (
  36                 <SettingsLayout>
  37                     <SettingsLayoutLeft>
  38                         <label htmlFor="kt-toggle" className="text-semibold">
  39                             <span className="mr-2">{c('Label').t`Verify keys with Key Transparency`}</span>
  40                             <BetaBadge className="mr-2" />
  41                             <Info url={getKnowledgeBaseUrl('/key-transparency')} />
  42                         </label>
  43                     </SettingsLayoutLeft>
  44                     <SettingsLayoutRight isToggleContainer>
  45                         <KTToggle id="kt-toggle" />
  46                     </SettingsLayoutRight>
  47                 </SettingsLayout>
  48             ) : null}
  49         </SettingsSection>
  50     );
  51 };