applications/drive/src/app/components/modals/SignatureIssueModal.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import type { ModalStateProps } from '@proton/components';
   7 import {
   8     Checkbox,
   9     Form,
  10     ModalTwo,
  11     ModalTwoContent,
  12     ModalTwoFooter,
  13     ModalTwoHeader,
  14     Radio,
  15     Row,
  16     useModalTwoStatic,
  17 } from '@proton/components';
  18
  19 import { TransferSignatureIssueStrategy } from '../../store/_downloads/interface';
  20 import type { SignatureIssues } from '../../store/_links/interface';
  21 import { SignatureAlertBody } from '../SignatureAlert';
  22
  23 interface ConflictModalProps {
  24     isFile: boolean;
  25     name: string;
  26     downloadName: string;
  27     signatureAddress?: string;
  28     signatureIssues: SignatureIssues;
  29     apply: (strategy: TransferSignatureIssueStrategy, all: boolean) => void;
  30     cancelAll: () => void;
  31 }
  32
  33 export default function SignatureIssueModal({
  34     isFile,
  35     name,
  36     downloadName,
  37     signatureAddress,
  38     signatureIssues,
  39     apply,
  40     cancelAll,
  41     onClose,
  42     ...modalProps
  43 }: ConflictModalProps & ModalStateProps) {
  44     const [strategy, setStrategy] = useState(TransferSignatureIssueStrategy.Abort);
  45     const [applyAll, setApplyAll] = useState(false);
  46
  47     const handleClose = () => {
  48         cancelAll();
  49         onClose();
  50     };
  51
  52     const downloadFileName = (
  53         <strong className="text-break" key="downloadFileName">
  54             {downloadName}
  55         </strong>
  56     );
  57
  58     return (
  59         <ModalTwo
  60             as={Form}
  61             onClose={handleClose}
  62             onSubmit={() => {
  63                 apply(strategy, applyAll);
  64                 onClose();
  65             }}
  66             size="small"
  67             {...modalProps}
  68         >
  69             <ModalTwoHeader
  70                 title={isFile ? c('Title').t`Download unverified file?` : c('Title').t`Download unverified folder?`}
  71             />
  72             <ModalTwoContent>
  73                 <p>
  74                     <SignatureAlertBody
  75                         signatureIssues={signatureIssues}
  76                         signatureAddress={signatureAddress}
  77                         isFile={isFile}
  78                         name={name}
  79                     />
  80                 </p>
  81                 <p>{c('Info').t`What do you want to do?`}</p>
  82                 <Row>
  83                     <Radio
  84                         id={TransferSignatureIssueStrategy.Abort}
  85                         checked={strategy === TransferSignatureIssueStrategy.Abort}
  86                         onChange={() => setStrategy(TransferSignatureIssueStrategy.Abort)}
  87                         name="strategy"
  88                         className="inline-flex flex-nowrap"
  89                     >
  90                         <div>
  91                             <strong>{c('Label').t`Cancel download`}</strong>
  92                             <br />
  93                             <span className="color-weak">
  94                                 {c('Info').jt`Download of ${downloadFileName} will be aborted`}
  95                             </span>
  96                         </div>
  97                     </Radio>
  98                 </Row>
  99                 <Row>
 100                     <Radio
 101                         id={TransferSignatureIssueStrategy.Continue}
 102                         checked={strategy === TransferSignatureIssueStrategy.Continue}
 103                         onChange={() => setStrategy(TransferSignatureIssueStrategy.Continue)}
 104                         name="strategy"
 105                         className="inline-flex flex-nowrap"
 106                     >
 107                         <div>
 108                             <strong>{c('Label').t`Download anyway`}</strong>
 109                             <br />
 110                             <span className="color-weak">{c('Info').t`Signature check will be ignored`}</span>
 111                         </div>
 112                     </Radio>
 113                 </Row>
 114                 <hr />
 115                 <Row>
 116                     <Checkbox onChange={() => setApplyAll((value) => !value)}>
 117                         {c('Label').t`Apply to all unverified items`}
 118                     </Checkbox>
 119                 </Row>
 120             </ModalTwoContent>
 121             <ModalTwoFooter>
 122                 <Button onClick={handleClose}>{c('Action').t`Cancel all downloads`}</Button>
 123                 <Button type="submit" color="norm">
 124                     {c('Action').t`Continue`}
 125                 </Button>
 126             </ModalTwoFooter>
 127         </ModalTwo>
 128     );
 129 }
 130
 131 export const useSignatureIssueModal = () => {
 132     return useModalTwoStatic(SignatureIssueModal);
 133 };