packages/components/containers/recovery/AccountRecoverySection.tsx

   1 import { c } from 'ttag';
   2
   3 import { useUserSettings } from '@proton/account/userSettings/hooks';
   4 import Loader from '@proton/components/components/loader/Loader';
   5 import { useModalTwoPromise } from '@proton/components/components/modalTwo/useModalTwo';
   6 import Toggle from '@proton/components/components/toggle/Toggle';
   7 import SettingsLayout from '@proton/components/containers/account/SettingsLayout';
   8 import SettingsLayoutLeft from '@proton/components/containers/account/SettingsLayoutLeft';
   9 import SettingsLayoutRight from '@proton/components/containers/account/SettingsLayoutRight';
  10 import SettingsSection from '@proton/components/containers/account/SettingsSection';
  11 import AuthModal from '@proton/components/containers/password/AuthModal';
  12 import type { AuthModalResult } from '@proton/components/containers/password/interface';
  13 import useEventManager from '@proton/components/hooks/useEventManager';
  14 import useMyCountry from '@proton/components/hooks/useMyCountry';
  15 import useNotifications from '@proton/components/hooks/useNotifications';
  16 import { useLoading } from '@proton/hooks';
  17 import { updateResetEmail, updateResetPhone } from '@proton/shared/lib/api/settings';
  18 import noop from '@proton/utils/noop';
  19
  20 import RecoveryEmail from './email/RecoveryEmail';
  21 import RecoveryPhone from './phone/RecoveryPhone';
  22
  23 export const AccountRecoverySection = ({ divider = true }: { divider?: boolean }) => {
  24     const [userSettings, loadingUserSettings] = useUserSettings();
  25     const [loadingEmailReset, withLoadingEmailReset] = useLoading();
  26     const [loadingPhoneReset, withLoadingPhoneReset] = useLoading();
  27     const { createNotification } = useNotifications();
  28     const { call } = useEventManager();
  29     const defaultCountry = useMyCountry();
  30     const [authModal, showAuthModal] = useModalTwoPromise<{ config: any }, AuthModalResult>();
  31
  32     if (loadingUserSettings || !userSettings) {
  33         return <Loader />;
  34     }
  35
  36     const handleChangePasswordEmailToggle = async (value: number) => {
  37         if (value && !userSettings.Email.Value) {
  38             return createNotification({
  39                 type: 'error',
  40                 text: c('Error').t`Please set a recovery email first`,
  41             });
  42         }
  43         await showAuthModal({ config: updateResetEmail({ Reset: value }) });
  44         await call();
  45     };
  46
  47     const handleChangePasswordPhoneToggle = async (value: number) => {
  48         if (value && !userSettings.Phone.Value) {
  49             return createNotification({ type: 'error', text: c('Error').t`Please set a recovery phone number first` });
  50         }
  51         await showAuthModal({ config: updateResetPhone({ Reset: value }) });
  52         await call();
  53     };
  54
  55     return (
  56         <>
  57             {authModal((props) => {
  58                 return (
  59                     <AuthModal
  60                         {...props}
  61                         scope="password"
  62                         config={props.config}
  63                         onCancel={props.onReject}
  64                         onSuccess={props.onResolve}
  65                     />
  66                 );
  67             })}
  68             <SettingsSection>
  69                 <SettingsLayout>
  70                     <SettingsLayoutLeft>
  71                         <label className="pt-0 mb-2 md:mb-0 text-semibold" htmlFor="recovery-email-input">
  72                             {c('Label').t`Recovery email address`}
  73                         </label>
  74                     </SettingsLayoutLeft>
  75                     <SettingsLayoutRight className="flex-1">
  76                         <RecoveryEmail
  77                             className="mb-4 md:mb-0"
  78                             email={userSettings.Email}
  79                             hasReset={!!userSettings.Email.Reset}
  80                             hasNotify={!!userSettings.Email.Notify}
  81                         />
  82                         <div className="flex items-center">
  83                             <Toggle
  84                                 className="mr-2"
  85                                 loading={loadingEmailReset}
  86                                 checked={!!userSettings.Email.Reset && !!userSettings.Email.Value}
  87                                 id="passwordEmailResetToggle"
  88                                 onChange={({ target: { checked } }) =>
  89                                     withLoadingEmailReset(handleChangePasswordEmailToggle(+checked).catch(noop))
  90                                 }
  91                             />
  92                             <label htmlFor="passwordEmailResetToggle" className="flex-1">
  93                                 {c('Label').t`Allow recovery by email`}
  94                             </label>
  95                         </div>
  96                     </SettingsLayoutRight>
  97                 </SettingsLayout>
  98
  99                 {divider && <hr className="my-8" />}
 100
 101                 <SettingsLayout>
 102                     <SettingsLayoutLeft>
 103                         <label className="pt-0 mb-2 md:mb-0 text-semibold" htmlFor="phoneInput">
 104                             {c('label').t`Recovery phone number`}
 105                         </label>
 106                     </SettingsLayoutLeft>
 107                     <SettingsLayoutRight className="flex-1">
 108                         <RecoveryPhone
 109                             className="mb-4 md:mb-0"
 110                             defaultCountry={defaultCountry}
 111                             phone={userSettings.Phone}
 112                             hasReset={!!userSettings.Phone.Reset}
 113                         />
 114                         <div className="flex items-center">
 115                             <Toggle
 116                                 className="mr-2"
 117                                 loading={loadingPhoneReset}
 118                                 checked={!!userSettings.Phone.Reset && !!userSettings.Phone.Value}
 119                                 id="passwordPhoneResetToggle"
 120                                 onChange={({ target: { checked } }) =>
 121                                     withLoadingPhoneReset(handleChangePasswordPhoneToggle(+checked).catch(noop))
 122                                 }
 123                             />
 124                             <label htmlFor="passwordPhoneResetToggle" className="flex-1">
 125                                 {c('Label').t`Allow recovery by phone`}
 126                             </label>
 127                         </div>
 128                     </SettingsLayoutRight>
 129                 </SettingsLayout>
 130             </SettingsSection>
 131         </>
 132     );
 133 };