packages/account/sso/ConfirmRejectAuthDevice.tsx

   1 import { format } from 'date-fns';
   2 import { fromUnixTime } from 'date-fns';
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { Prompt, type PromptProps } from '@proton/components';
   7 import getBoldFormattedText from '@proton/components/helpers/getBoldFormattedText';
   8 import { BRAND_NAME } from '@proton/shared/lib/constants';
   9 import { dateLocale } from '@proton/shared/lib/i18n';
  10 import type { AuthDeviceOutput } from '@proton/shared/lib/keys/device';
  11
  12 interface Props extends Omit<PromptProps, 'title' | 'buttons' | 'children'> {
  13     onConfirm: () => void;
  14     pendingAuthDevice: AuthDeviceOutput;
  15 }
  16
  17 const ConfirmRejectAuthDevice = ({ onClose, onConfirm, pendingAuthDevice, ...rest }: Props) => {
  18     const name = pendingAuthDevice.Name;
  19     const date = format(fromUnixTime(pendingAuthDevice.CreateTime), 'PPp', { locale: dateLocale });
  20     return (
  21         <Prompt
  22             title={c('Title').t`Reject device?`}
  23             buttons={[
  24                 <Button
  25                     color="danger"
  26                     onClick={() => {
  27                         onConfirm();
  28                         onClose?.();
  29                     }}
  30                 >{c('Action').t`Reject`}</Button>,
  31                 <Button onClick={onClose}>{c('Action').t`Cancel`}</Button>,
  32             ]}
  33             onClose={onClose}
  34             {...rest}
  35         >
  36             <p className="text-break">
  37                 {getBoldFormattedText(
  38                     c('Info')
  39                         .t`This will reject the device **${name}** that tried signing into your ${BRAND_NAME} account on **${date}**.`
  40                 )}
  41             </p>
  42         </Prompt>
  43     );
  44 };
  45
  46 export default ConfirmRejectAuthDevice;