diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json index cd5a07ee246..e4568923ca9 100644 --- a/client/i18n/locales/english/translations.json +++ b/client/i18n/locales/english/translations.json @@ -275,7 +275,10 @@ "reset-p2": "You will effectively be set back to the very first day you signed up.", "reset-p3": "We won't be able to recover any of it for you later, even if you change your mind.", "nevermind-2": "Nevermind, I don't want to delete all of my progress", - "reset-confirm": "Reset everything. I want to start from the beginning" + "reset-confirm": "Reset everything. I want to start from the beginning", + "verify-text": "To verify, type \"{{ verifyText }}\" below:", + "verify-reset-text": "I agree that all progress will be lost", + "verify-delete-text": "I agree to delete my account" }, "email": { "missing": "You do not have an email associated with this account.", diff --git a/client/src/components/settings/delete-modal.tsx b/client/src/components/settings/delete-modal.tsx index f5372cb1425..b1d83abeb27 100644 --- a/client/src/components/settings/delete-modal.tsx +++ b/client/src/components/settings/delete-modal.tsx @@ -1,6 +1,12 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; -import { Button, Modal } from '@freecodecamp/ui'; +import { + Button, + ControlLabel, + FormControl, + FormGroup, + Modal +} from '@freecodecamp/ui'; import { Spacer } from '../helpers'; @@ -14,6 +20,14 @@ function DeleteModal(props: DeleteModalProps): JSX.Element { const { show, onHide } = props; const email = 'support@freecodecamp.org'; const { t } = useTranslation(); + const [verifyText, setVerifyText] = useState(''); + + const handleVerifyTextChange = ( + event: React.ChangeEvent + ) => { + setVerifyText(event.target.value); + }; + return ( @@ -41,11 +55,26 @@ function DeleteModal(props: DeleteModalProps): JSX.Element { {t('settings.danger.nevermind')} + + + {t('settings.danger.verify-text', { + verifyText: t('settings.danger.verify-delete-text') + })} + + + + + + + + {t('settings.danger.verify-text', { + verifyText: t('settings.danger.verify-reset-text') + })} + + + + +