packages/components/containers/account/sessionRecovery/statusCards/SessionRecoveryInProgressCard.tsx

   1 import { format } from 'date-fns';
   2 import { c, msgid } from 'ttag';
   3
   4 import { Button } from '@proton/atoms';
   5 import useModalState from '@proton/components/components/modalTwo/useModalState';
   6 import { dateLocale } from '@proton/shared/lib/i18n';
   7 import clsx from '@proton/utils/clsx';
   8
   9 import { useSessionRecoveryGracePeriodHoursRemaining, useUser } from '../../../../hooks';
  10 import ConfirmSessionRecoveryCancellationModal from '../ConfirmSessionRecoveryCancellationModal';
  11 import SessionRecoveryStatusTitle from './SessionRecoveryStatusTitle';
  12 import handWarningIcon from './hand-warning-icon.svg';
  13 import lockIcon from './lock-icon.svg';
  14
  15 interface Props {
  16     className?: string;
  17 }
  18
  19 const SessionRecoveryInProgressCard = ({ className }: Props) => {
  20     const [user] = useUser();
  21     const gracePeriodHoursRemaining = useSessionRecoveryGracePeriodHoursRemaining();
  22     const [confirmCancelModalProps, setConfirmCancelModalOpen, renderConfirmCancelModal] = useModalState();
  23
  24     if (!user.AccountRecovery || gracePeriodHoursRemaining === null) {
  25         return null;
  26     }
  27
  28     const endDate = new Date(user.AccountRecovery.EndTime * 1000);
  29     const formattedDate = format(endDate, 'PP', { locale: dateLocale });
  30
  31     const boldDate = (
  32         <b key="bold-date" data-testid="session_recovery:from_date">
  33             {formattedDate}
  34         </b>
  35     );
  36
  37     return (
  38         <>
  39             {renderConfirmCancelModal && <ConfirmSessionRecoveryCancellationModal {...confirmCancelModalProps} />}
  40             <div
  41                 className={clsx('max-w-custom rounded-lg border', className)}
  42                 style={{ '--max-w-custom': '46em' }}
  43                 data-testid="session_recovery:request_section"
  44             >
  45                 <div className="p-6 border-bottom border-weak">
  46                     <SessionRecoveryStatusTitle status="pending" />
  47                 </div>
  48                 <div className="p-6 border-bottom border-weak sm:flex items-start flex-nowrap">
  49                     <img className="mb-2 sm:mb-0 sm:mr-4 shrink-0" src={lockIcon} alt="" />
  50                     <div>
  51                         <h3 className="text-bold text-lg">
  52                             {c('session_recovery:in_progress:info').ngettext(
  53                                 msgid`You can change your password in ${gracePeriodHoursRemaining} hour`,
  54                                 `You can change your password in ${gracePeriodHoursRemaining} hours`,
  55                                 gracePeriodHoursRemaining
  56                             )}
  57                         </h3>
  58                         <div>
  59                             {c('session_recovery:in_progress:info')
  60                                 .jt`Password reset available from ${boldDate}. This gives you time to cancel any fraudulent requests.`}
  61                         </div>
  62                     </div>
  63                 </div>
  64                 <div className="p-6 sm:flex items-start flex-nowrap">
  65                     <img className="mb-2 sm:mb-0 sm:mr-4 shrink-0" src={handWarningIcon} alt="" />
  66                     <div>
  67                         <h3 className="text-bold text-lg">{c('session_recovery:in_progress:info')
  68                             .t`Didn’t make this request?`}</h3>
  69                         <div className="mb-4">
  70                             {c('session_recovery:in_progress:info')
  71                                 .t`If you didn’t ask to reset your password, cancel the request now.`}
  72                         </div>
  73                         <Button
  74                             className="w-full sm:w-auto"
  75                             onClick={() => setConfirmCancelModalOpen(true)}
  76                             color="danger"
  77                             shape="outline"
  78                         >
  79                             {c('session_recovery:in_progress:action').t`Cancel password reset`}
  80                         </Button>
  81                     </div>
  82                 </div>
  83             </div>
  84         </>
  85     );
  86 };
  87
  88 export default SessionRecoveryInProgressCard;