added security step before account deletion

[nmro184]

resolving #1699

[RodriSanchez1]

@nmro184 good work! I will leave some comments:

This needs to be our dialog when it opens. The <TextField> should be displayed directly, eliminating the intermediate step of clicking the "Delete Account" button to reveal the text field.

Additionally, create a constant const DELETE_ACCOUNT='delete-account' and use it to compare the entered text and also to display it as a part of the label message. This approach allows you to remove both useEffect hooks.

To use a constant in the Formated Message:

DeleteConfirmationDialog.js 

          <TextField
            autoFocus={true}
            label={
              <FormattedMessage
                {...messages.deleteAccountFinal}
                values={{ deleteAccount: 'delete-account' }}
              />
            }
           ......../>

People.messages.js

 deleteAccountFinal: {
    id: 'cboard.components.Settings.People.deleteAccountFinal',
    defaultMessage: 'To confirm, type "{deleteAccount}".',
  },

One more thing, ensure the confirmationText value is cleared when the dialog is closed.

[RodriSanchez1]

This component needs to be inside the <DialogContent>

[nmro184]

here I had a problem when I put the text field element inside DialogContent it shrinks and sticks to the left , also if its inside DialogActions , or outside of DialogContent in general it sticks to both sides of the dialog which doesn't look good , I know using inline css is not a best practice but I didn't know whether to create a new css file and if so where should I put it .

[nmro184]

also made sense to me to put it inside DialogActions because its kinda serves a role of a button , you know what I mean ? anyway its ok Im here to learn :)

[RodriSanchez1]

I see!! Take a look on material ui documentation under form dialog here. The text field it's inside the dialog content. Use that as a reference. Also you can take a look on the text field props.
You can add the fullWidth prop to deal with your problem!

The css file is not needed

[nmro184]

oh got it , I have committed the changes @RodriSanchez1