packages/components/containers/vpn/ProtonVPNCredentialsSection/ProtonVPNCredentialsSection.js

   1 import { c } from 'ttag';
   2
   3 import { useUser } from '@proton/account/user/hooks';
   4 import { Href } from '@proton/atoms';
   5 import Alert from '@proton/components/components/alert/Alert';
   6 import Field from '@proton/components/components/container/Field';
   7 import Row from '@proton/components/components/container/Row';
   8 import Label from '@proton/components/components/label/Label';
   9 import { BRAND_NAME, MAIL_APP_NAME, VPN_APP_NAME } from '@proton/shared/lib/constants';
  10
  11 const ProtonVPNCredentialsSection = () => {
  12     const [user] = useUser();
  13
  14     const username = user.isMember ? user.Email : user.Name;
  15
  16     const downloadLink = (
  17         <Href key="link" className="mr-2" href="https://protonvpn.com/download">{c('Link')
  18             .t`${VPN_APP_NAME} native clients`}</Href>
  19     );
  20
  21     return (
  22         <>
  23             <Alert className="mb-4">{c('Info')
  24                 .jt`Use the following credentials to log into the ${downloadLink}.`}</Alert>
  25             <Row>
  26                 <Label>{c('Label').t`${BRAND_NAME} username`}</Label>
  27                 <Field className="mt-2">
  28                     <strong>{username}</strong>
  29                 </Field>
  30             </Row>
  31             <Row>
  32                 <Label>{c('Label').t`Password`}</Label>
  33                 <Field className="mt-2">
  34                     <strong>{c('Info').t`Same as ${MAIL_APP_NAME} login password`}</strong>
  35                 </Field>
  36             </Row>
  37         </>
  38     );
  39 };
  40
  41 export default ProtonVPNCredentialsSection;