packages/pass/components/SecureLink/SecureLinkGenerate.tsx

   1 import { type FC, useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { ModalTwoContent, ModalTwoFooter } from '@proton/components';
   7 import { ExpirationTimeSelect, ExpireTime } from '@proton/pass/components/Form/Field/Custom/ExpirationTimeSelect';
   8 import { MaxReadsToggleInput } from '@proton/pass/components/Form/Field/Custom/MaxReadsToggleInput';
   9 import { useRequest } from '@proton/pass/hooks/useActionRequest';
  10 import { secureLinkCreate } from '@proton/pass/store/actions';
  11 import type { SecureLink, SecureLinkOptions, UniqueItem } from '@proton/pass/types';
  12
  13 type Props = UniqueItem & { onLinkGenerated: (data: SecureLink) => void };
  14
  15 export const SecureLinkGenerate: FC<Props> = ({ shareId, itemId, onLinkGenerated }) => {
  16     const [{ expirationTime, maxReadCount }, setOptions] = useState<SecureLinkOptions>({
  17         expirationTime: ExpireTime.OneWeek,
  18         maxReadCount: null,
  19     });
  20
  21     const { dispatch, loading } = useRequest(secureLinkCreate, {
  22         initial: { shareId, itemId },
  23         onSuccess: ({ data }) => onLinkGenerated(data),
  24     });
  25
  26     const generateSecureLink = () => dispatch({ itemId, shareId, expirationTime, maxReadCount });
  27
  28     return (
  29         <>
  30             <ModalTwoContent>
  31                 <ExpirationTimeSelect
  32                     onChange={(expirationTime) => setOptions((options) => ({ ...options, expirationTime }))}
  33                     disabled={loading}
  34                     value={expirationTime}
  35                 />
  36                 <hr className="mt-4" />
  37                 <MaxReadsToggleInput
  38                     disabled={loading}
  39                     value={maxReadCount}
  40                     onChange={(maxReadCount) => setOptions((options) => ({ ...options, maxReadCount }))}
  41                     onPressEnter={generateSecureLink}
  42                 />
  43             </ModalTwoContent>
  44
  45             <ModalTwoFooter className="flex flex-column items-stretch text-center">
  46                 <Button
  47                     className="max-w-full"
  48                     color="norm"
  49                     disabled={loading}
  50                     loading={loading}
  51                     pill
  52                     shape="solid"
  53                     size="large"
  54                     onClick={generateSecureLink}
  55                 >
  56                     <span className="text-ellipsis">
  57                         {loading ? c('Action').t`Generating secure link...` : c('Action').t`Generate secure link`}
  58                     </span>
  59                 </Button>
  60             </ModalTwoFooter>
  61         </>
  62     );
  63 };