packages/components/containers/account/ChangeBackupPasswordModal.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { changeSSOUserBackupPassword } from '@proton/account/sso/passwordActions';
   6 import { Button } from '@proton/atoms';
   7 import type { ModalProps } from '@proton/components';
   8 import {
   9     Form,
  10     InputFieldTwo,
  11     ModalTwo,
  12     ModalTwoContent,
  13     ModalTwoFooter,
  14     ModalTwoHeader,
  15     PasswordInputTwo,
  16     useErrorHandler,
  17 } from '@proton/components';
  18 import useFormErrors from '@proton/components/components/v2/useFormErrors';
  19 import useLoading from '@proton/hooks/useLoading';
  20 import { useDispatch } from '@proton/redux-shared-store';
  21 import { BRAND_NAME } from '@proton/shared/lib/constants';
  22 import {
  23     confirmPasswordValidator,
  24     passwordLengthValidator,
  25     requiredValidator,
  26 } from '@proton/shared/lib/helpers/formValidators';
  27 import { AuthDeviceNonExistingError } from '@proton/shared/lib/keys/device';
  28
  29 import useNotifications from '../../hooks/useNotifications';
  30
  31 interface Props extends ModalProps {}
  32
  33 const ChangeBackupPasswordModal = ({ ...rest }: Props) => {
  34     const dispatch = useDispatch();
  35     const { validator, onFormSubmit } = useFormErrors();
  36     const [loading, withLoading] = useLoading();
  37     const [newBackupPassword, setNewPassword] = useState('');
  38     const [confirmBackupPassword, setConfirmBackupPassword] = useState('');
  39     const handleError = useErrorHandler();
  40     const { createNotification } = useNotifications();
  41
  42     return (
  43         <ModalTwo
  44             as={Form}
  45             onClose={rest.onClose}
  46             {...rest}
  47             onSubmit={() => {
  48                 if (!onFormSubmit()) {
  49                     return;
  50                 }
  51                 withLoading(
  52                     dispatch(changeSSOUserBackupPassword({ newBackupPassword }))
  53                         .then(() => {
  54                             createNotification({ text: c('Success').t`Backup password updated` });
  55                             rest.onClose?.();
  56                         })
  57                         .catch((e) => {
  58                             if (e instanceof AuthDeviceNonExistingError) {
  59                                 createNotification({
  60                                     text: c('sso').t`Sign out and in again to change your backup password`,
  61                                     type: 'error',
  62                                 });
  63                                 return;
  64                             }
  65                             handleError(e);
  66                         })
  67                 );
  68             }}
  69         >
  70             <ModalTwoHeader title={c('sso').t`Change backup password`} />
  71             <ModalTwoContent>
  72                 <div className="mb-6">
  73                     {c('Info')
  74                         .t`${BRAND_NAME}'s encryption technology means that nobody can access your password - not even us.`}
  75                     <br /> <br />
  76                     {c('sso')
  77                         .t`Make sure you save it somewhere safe so that you can get back into your account if you lose access to your Identity Provider credentials.`}
  78                 </div>
  79                 <InputFieldTwo
  80                     id="newPassword"
  81                     label={c('sso').t`New backup password`}
  82                     error={validator([
  83                         requiredValidator(newBackupPassword),
  84                         passwordLengthValidator(newBackupPassword),
  85                     ])}
  86                     as={PasswordInputTwo}
  87                     autoFocus
  88                     autoComplete="new-password"
  89                     value={newBackupPassword}
  90                     onValue={setNewPassword}
  91                     disabled={loading}
  92                 />
  93
  94                 <InputFieldTwo
  95                     id="confirmPassword"
  96                     label={c('sso').t`Confirm backup password`}
  97                     error={validator([
  98                         requiredValidator(confirmBackupPassword),
  99                         passwordLengthValidator(confirmBackupPassword),
 100                         confirmPasswordValidator(newBackupPassword, confirmBackupPassword),
 101                     ])}
 102                     as={PasswordInputTwo}
 103                     autoComplete="new-password"
 104                     value={confirmBackupPassword}
 105                     onValue={setConfirmBackupPassword}
 106                     disabled={loading}
 107                 />
 108             </ModalTwoContent>
 109             <ModalTwoFooter>
 110                 <Button onClick={rest.onClose}>{c('Action').t`Cancel`}</Button>
 111                 <Button loading={loading} type="submit" color="norm">
 112                     {c('Action').t`Save`}
 113                 </Button>
 114             </ModalTwoFooter>
 115         </ModalTwo>
 116     );
 117 };
 118
 119 export default ChangeBackupPasswordModal;