Refactored user components.

components/pages/settings/users/UserDeleteForm.js

@@ -1,18 +1,19 @@
 import { useMutation } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
-import {
-  Button,
-  Form,
-  FormRow,
-  FormButtons,
-  FormInput,
-  SubmitButton,
-  TextField,
-} from 'react-basics';
+import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
+import { defineMessages, useIntl } from 'react-intl';
+import { labels } from 'components/messages';
 
-const CONFIRM_VALUE = 'DELETE';
+const messages = defineMessages({
+  confirm: { id: 'label.confirm', defaultMessage: 'Confirm' },
+  warning: {
+    id: 'message.confirm-delete-user',
+    defaultMessage: 'Are you sure you want to delete this user?',
+  },
+});
 
 export default function UserDeleteForm({ userId, onSave, onClose }) {
+  const { formatMessage } = useIntl();
   const { del } = useApi();
   const { mutate, error, isLoading } = useMutation(data => del(`/users/${userId}`, data));
 
@@ -26,20 +27,13 @@ export default function UserDeleteForm({ userId, onSave, onClose }) {
 
   return (
     <Form onSubmit={handleSubmit} error={error}>
-      <p>
-        To delete this user, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
-      </p>
-      <FormRow label="Confirm">
-        <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
-          <TextField autoComplete="off" />
-        </FormInput>
-      </FormRow>
+      <p>{formatMessage(messages.warning)}</p>
       <FormButtons flex>
         <SubmitButton variant="primary" disabled={isLoading}>
-          Save
+          {formatMessage(labels.save)}
         </SubmitButton>
         <Button disabled={isLoading} onClick={onClose}>
-          Cancel
+          {formatMessage(labels.cancel)}
         </Button>
       </FormButtons>
     </Form>