packages/components/containers/account/EditDisplayNameModal.tsx

   1 import type { FormEvent } from 'react';
   2 import { useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button } from '@proton/atoms';
   7 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   8 import Modal from '@proton/components/components/modalTwo/Modal';
   9 import ModalContent from '@proton/components/components/modalTwo/ModalContent';
  10 import ModalFooter from '@proton/components/components/modalTwo/ModalFooter';
  11 import ModalHeader from '@proton/components/components/modalTwo/ModalHeader';
  12 import InputFieldTwo from '@proton/components/components/v2/field/InputField';
  13 import useFormErrors from '@proton/components/components/v2/useFormErrors';
  14 import useApi from '@proton/components/hooks/useApi';
  15 import useEventManager from '@proton/components/hooks/useEventManager';
  16 import useNotifications from '@proton/components/hooks/useNotifications';
  17 import { useLoading } from '@proton/hooks';
  18 import { updateAddress } from '@proton/shared/lib/api/addresses';
  19 import type { Address } from '@proton/shared/lib/interfaces';
  20
  21 interface Props extends ModalProps<'form'> {
  22     address: Address;
  23 }
  24
  25 const EditDisplayNameModal = ({ address, ...rest }: Props) => {
  26     const [initialDisplayName] = useState(address.DisplayName);
  27     const [model, setModel] = useState('');
  28     const { createNotification } = useNotifications();
  29     const { onFormSubmit } = useFormErrors();
  30     const [submitting, withLoading] = useLoading();
  31     const api = useApi();
  32     const { call } = useEventManager();
  33
  34     const handleSubmit = async () => {
  35         await api(
  36             updateAddress(address.ID, {
  37                 DisplayName: model,
  38                 Signature: address.Signature,
  39             })
  40         );
  41         await call();
  42         createNotification({ text: c('Success').t`Display name updated` });
  43         rest.onClose?.();
  44     };
  45
  46     const handleClose = submitting ? undefined : rest.onClose;
  47
  48     return (
  49         <Modal
  50             as="form"
  51             size="small"
  52             {...rest}
  53             onSubmit={(event: FormEvent) => {
  54                 event.preventDefault();
  55                 event.stopPropagation();
  56                 if (!onFormSubmit()) {
  57                     return;
  58                 }
  59                 withLoading(handleSubmit());
  60             }}
  61             onClose={handleClose}
  62         >
  63             <ModalHeader title={c('Title').t`Edit display name`} />
  64             <ModalContent>
  65                 {initialDisplayName && (
  66                     <div className="mb-6">
  67                         <div className="text-semibold mb-1">{c('Label').t`Current display name`}</div>
  68                         <div className="text-ellipsis" title={initialDisplayName}>
  69                             {initialDisplayName}
  70                         </div>
  71                     </div>
  72                 )}
  73                 <InputFieldTwo
  74                     id="displayName"
  75                     autoFocus
  76                     value={model}
  77                     maxLength={255}
  78                     onValue={setModel}
  79                     label={c('Label').t`New display name`}
  80                 />
  81             </ModalContent>
  82             <ModalFooter>
  83                 <Button onClick={handleClose} disabled={submitting}>{c('Action').t`Cancel`}</Button>
  84                 <Button color="norm" type="submit" loading={submitting}>{c('Action').t`Save`}</Button>
  85             </ModalFooter>
  86         </Modal>
  87     );
  88 };
  89
  90 export default EditDisplayNameModal;