packages/components/containers/vpn/OpenVPNCredentialsSection.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button, Href } from '@proton/atoms';
   6 import Copy from '@proton/components/components/button/Copy';
   7 import PrimaryButton from '@proton/components/components/button/PrimaryButton';
   8 import Icon from '@proton/components/components/icon/Icon';
   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 SettingsSectionWide from '@proton/components/containers/account/SettingsSectionWide';
  14 import useApi from '@proton/components/hooks/useApi';
  15 import useNotifications from '@proton/components/hooks/useNotifications';
  16 import useUserVPN from '@proton/components/hooks/useUserVPN';
  17 import { useLoading } from '@proton/hooks';
  18 import { resetVPNSettings } from '@proton/shared/lib/api/vpn';
  19 import { VPN_APP_NAME } from '@proton/shared/lib/constants';
  20
  21 interface Props {
  22     app?: string;
  23 }
  24
  25 const OpenVPNCredentialsSection = (props: Props) => {
  26     const [updating, withUpdating] = useLoading();
  27     const { result = {}, fetch: fetchUserVPN } = useUserVPN();
  28     const { VPN = {} } = result as any;
  29     const { Name = '', Password = '' } = VPN;
  30     const [show, setShow] = useState(false);
  31     const api = useApi();
  32     const { createNotification } = useNotifications();
  33     const { app } = props;
  34
  35     const handleResetCredentials = async () => {
  36         await api(resetVPNSettings());
  37         await fetchUserVPN();
  38
  39         createNotification({ text: c('Notification').t`OpenVPN / IKEv2 credentials regenerated` });
  40     };
  41
  42     const learnMore = (
  43         <Href key="learn-more" href="https://protonvpn.com/support/vpn-login/">{c('Link').t`Learn more`}</Href>
  44     );
  45
  46     return (
  47         <SettingsSectionWide>
  48             {app ? (
  49                 <>
  50                     <SettingsParagraph>
  51                         {c('Info')
  52                             .t`You can use the following credentials to connect to a ${VPN_APP_NAME} server using a third-party, open source VPN app, like Tunnelblick for macOS or OpenVPN for GNU/Linux.`}
  53                     </SettingsParagraph>
  54                     <SettingsParagraph>
  55                         {c('Info').t`Learn how to sign in to ${VPN_APP_NAME} with third-party VPN applications.`}
  56                     </SettingsParagraph>
  57                     <SettingsParagraph>
  58                         {c('Info').t`We advise you to use official ${VPN_APP_NAME} applications when possible.`}
  59                     </SettingsParagraph>
  60                     <SettingsParagraph>
  61                         {c('Info')
  62                             .jt`These credentials cannot be used to sign in to our official ${VPN_APP_NAME} apps. ${learnMore}`}
  63                     </SettingsParagraph>
  64                 </>
  65             ) : (
  66                 <>
  67                     <SettingsParagraph>
  68                         {c('Info')
  69                             .t`Use the following credentials when connecting to ${VPN_APP_NAME} servers without application. Example use cases include: Tunnelblick on macOS, OpenVPN on GNU/Linux.`}
  70                     </SettingsParagraph>
  71                     <SettingsParagraph>
  72                         {c('Info')
  73                             .jt`These credentials cannot be used to sign in to our official ${VPN_APP_NAME} apps. ${learnMore}`}
  74                     </SettingsParagraph>
  75                 </>
  76             )}
  77
  78             <SettingsLayout>
  79                 <SettingsLayoutLeft>
  80                     <span className="label pt-0">{c('Label').t`OpenVPN / IKEv2 username`}</span>
  81                 </SettingsLayoutLeft>
  82                 <SettingsLayoutRight className="flex items-center">
  83                     <div className="text-ellipsis max-w-full mr-0 md:mr-4">
  84                         <code title={Name}>{Name}</code>
  85                     </div>
  86                     <div className="flex shrink-0 mt-2 md:mt-0">
  87                         <Copy
  88                             value={Name}
  89                             onCopy={() => {
  90                                 createNotification({
  91                                     text: c('Success').t`Username copied to clipboard`,
  92                                 });
  93                             }}
  94                         />
  95                     </div>
  96                 </SettingsLayoutRight>
  97             </SettingsLayout>
  98             <SettingsLayout>
  99                 <SettingsLayoutLeft>
 100                     <span className="label pt-0">{c('Label').t`OpenVPN / IKEv2 password`}</span>
 101                 </SettingsLayoutLeft>
 102                 <SettingsLayoutRight className="flex items-center">
 103                     <div className="text-ellipsis max-w-full mr-0 md:mr-4">
 104                         <code>{show ? Password : '••••••••••••••••'}</code>
 105                     </div>
 106                     <div className="flex shrink-0 mt-2 md:mt-0">
 107                         <Copy
 108                             className="mr-4"
 109                             value={Password}
 110                             onCopy={() => {
 111                                 createNotification({
 112                                     text: c('Success').t`Password copied to clipboard`,
 113                                 });
 114                             }}
 115                         />
 116                         <Button
 117                             icon
 118                             onClick={() => setShow(!show)}
 119                             title={show ? c('Action').t`Hide` : c('Action').t`Show`}
 120                         >
 121                             <Icon
 122                                 name={show ? 'eye-slash' : 'eye'}
 123                                 alt={show ? c('Action').t`Hide` : c('Action').t`Show`}
 124                             />
 125                         </Button>
 126                     </div>
 127                 </SettingsLayoutRight>
 128             </SettingsLayout>
 129             <PrimaryButton
 130                 disabled={!Name || !Password}
 131                 loading={updating}
 132                 onClick={() => withUpdating(handleResetCredentials())}
 133             >{c('Action').t`Reset credentials`}</PrimaryButton>
 134         </SettingsSectionWide>
 135     );
 136 };
 137
 138 export default OpenVPNCredentialsSection;