packages/account/sso/AuthDevicesModal.tsx

   1 import type { Action, ThunkDispatch } from '@reduxjs/toolkit';
   2 import { c } from 'ttag';
   3
   4 import { useErrorHandler, useNotifications } from '@proton/components';
   5 import { useLoading } from '@proton/hooks';
   6 import { baseUseDispatch } from '@proton/react-redux-store';
   7 import type { ProtonThunkArguments } from '@proton/redux-shared-store-types';
   8 import noop from '@proton/utils/noop';
   9
  10 import {
  11     AbstractAuthDevicesModal,
  12     type AbstractAuthDevicesModalProps,
  13     type BaseAbstractAuthDevicesModalProps,
  14 } from './AbstractAuthDeviceModal';
  15 import { confirmPendingAuthDevice, rejectAuthDevice } from './authDeviceActions';
  16 import type { AuthDevicesState } from './authDevices';
  17
  18 export const AuthDevicesModal = (props: BaseAbstractAuthDevicesModalProps) => {
  19     const [loading, withLoading] = useLoading();
  20     const dispatch = baseUseDispatch<ThunkDispatch<AuthDevicesState, ProtonThunkArguments, Action>>();
  21     const { createNotification } = useNotifications();
  22     const errorHandler = useErrorHandler();
  23
  24     const handleConfirm: AbstractAuthDevicesModalProps['onConfirm'] = async ({
  25         pendingAuthDevice,
  26         confirmationCode,
  27     }) => {
  28         if (loading) {
  29             return;
  30         }
  31         try {
  32             await dispatch(
  33                 confirmPendingAuthDevice({
  34                     pendingAuthDevice,
  35                     confirmationCode,
  36                 })
  37             );
  38             createNotification({ text: c('sso').t`Sign-in confirmed` });
  39             props.onClose?.();
  40         } catch (e) {
  41             errorHandler(e);
  42         }
  43     };
  44
  45     const handleReject: AbstractAuthDevicesModalProps['onReject'] = async (pendingAuthDevice) => {
  46         dispatch(rejectAuthDevice({ pendingAuthDevice, type: 'reject' })).catch(noop);
  47         createNotification({ text: c('sso').t`Sign-in rejected` });
  48         props.onClose?.();
  49     };
  50
  51     return (
  52         <AbstractAuthDevicesModal
  53             {...props}
  54             loading={loading}
  55             onReject={handleReject}
  56             onConfirm={(data) => withLoading(handleConfirm(data))}
  57         />
  58     );
  59 };