fix(ui): confirmation safeguard danger zone (freeCodeCamp#55724)

Co-authored-by: Tom <[email protected]>

Author: gagan-bhullar-tech

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.",

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 = '[email protected]';
   const { t } = useTranslation();
+  const [verifyText, setVerifyText] = useState('');
+
+  const handleVerifyTextChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setVerifyText(event.target.value);
+  };
+
   return (
     <Modal onClose={onHide} open={show} variant='danger' size='large'>
       <Modal.Header showCloseButton={true} closeButtonClassNames='close'>
@@ -41,11 +55,26 @@ function DeleteModal(props: DeleteModalProps): JSX.Element {
           {t('settings.danger.nevermind')}
         </Button>
         <Spacer size='small' />
+        <FormGroup controlId='verify-delete'>
+          <ControlLabel htmlFor='verify-delete-input'>
+            {t('settings.danger.verify-text', {
+              verifyText: t('settings.danger.verify-delete-text')
+            })}
+          </ControlLabel>
+          <Spacer size='small' />
+          <FormControl
+            onChange={handleVerifyTextChange}
+            value={verifyText}
+            id='verify-delete-input'
+          />
+        </FormGroup>
+        <Spacer size='small' />
         <Button
           block={true}
           size='large'
           variant='danger'
           onClick={props.delete}
+          disabled={verifyText !== t('settings.danger.verify-delete-text')}
           type='button'
         >
           {t('settings.danger.certain')}

client/src/components/settings/reset-modal.tsx

@@ -1,6 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Modal } from '@freecodecamp/ui';
+import {
+  Button,
+  ControlLabel,
+  FormControl,
+  FormGroup,
+  Modal
+} from '@freecodecamp/ui';
 
 import { Spacer } from '../helpers';
 
@@ -13,6 +19,13 @@ type ResetModalProps = {
 function ResetModal(props: ResetModalProps): JSX.Element {
   const { t } = useTranslation();
   const { show, onHide } = props;
+  const [verifyText, setVerifyText] = useState('');
+
+  const handleVerifyTextChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setVerifyText(event.target.value);
+  };
 
   return (
     <Modal size='large' onClose={onHide} variant='danger' open={show}>
@@ -40,10 +53,25 @@ function ResetModal(props: ResetModalProps): JSX.Element {
           {t('settings.danger.nevermind-2')}
         </Button>
         <Spacer size='small' />
+        <FormGroup controlId='verify-reset'>
+          <ControlLabel htmlFor='verify-reset-input'>
+            {t('settings.danger.verify-text', {
+              verifyText: t('settings.danger.verify-reset-text')
+            })}
+          </ControlLabel>
+          <Spacer size='small' />
+          <FormControl
+            onChange={handleVerifyTextChange}
+            value={verifyText}
+            id='verify-reset-input'
+          />
+        </FormGroup>
+        <Spacer size='small' />
         <Button
           block={true}
           size='large'
           variant='danger'
+          disabled={verifyText !== t('settings.danger.verify-reset-text')}
           onClick={props.reset}
           type='button'
         >

e2e/delete-modal.spec.ts

@@ -59,6 +59,10 @@ test.describe('Delete Modal component', () => {
       page.getByRole('button', { name: translations.settings.danger.certain })
     ).toBeVisible();
 
+    await expect(
+      page.getByRole('button', { name: translations.settings.danger.certain })
+    ).toBeDisabled();
+
     await expect(
       page.getByRole('button', { name: translations.buttons.close })
     ).toBeVisible();
@@ -88,7 +92,32 @@ test.describe('Delete Modal component', () => {
     ).not.toBeVisible();
   });
 
-  test('should close the modal and redirect to /learn after the user clicks delete', async ({
+  test('Delele button should be disabled if user incorrectly fills verify input text', async ({
+    page
+  }) => {
+    await page
+      .getByRole('button', { name: translations.settings.danger.delete })
+      .click();
+
+    await expect(
+      page.getByRole('dialog', {
+        name: translations.settings.danger['delete-title']
+      })
+    ).toBeVisible();
+
+    const verifyDeleteInput = page.getByRole('textbox', {
+      exact: true
+    });
+    await verifyDeleteInput.fill('incorrect text');
+
+    await expect(
+      page.getByRole('button', {
+        name: translations.settings.danger.certain
+      })
+    ).toBeDisabled();
+  });
+
+  test('should close the modal and redirect to /learn after the user fills the verify input text and clicks delete', async ({
     page
   }) => {
     await page
@@ -101,6 +130,13 @@ test.describe('Delete Modal component', () => {
       })
     ).toBeVisible();
 
+    const verifyDeleteText = translations.settings.danger['verify-delete-text'];
+
+    const verifyDeleteInput = page.getByRole('textbox', {
+      exact: true
+    });
+    await verifyDeleteInput.fill(verifyDeleteText);
+
     await page
       .getByRole('button', { name: translations.settings.danger.certain })
       .click();

e2e/progress-reset-modal.spec.ts

@@ -1,6 +1,7 @@
 import { exec } from 'child_process';
 import { promisify } from 'util';
 import { test, expect } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
 
 const execP = promisify(exec);
 
@@ -69,6 +70,12 @@ test.describe('Progress reset modal', () => {
         name: 'Reset everything. I want to start from the beginning'
       })
     ).toBeVisible();
+
+    await expect(
+      page.getByRole('button', {
+        name: 'Reset everything. I want to start from the beginning'
+      })
+    ).toBeDisabled();
   });
 
   test('should close the dialog if the user clicks the cancel button', async ({
@@ -93,7 +100,30 @@ test.describe('Progress reset modal', () => {
     ).toBeHidden();
   });
 
-  test('should reset the progress if the user clicks the reset button', async ({
+  test('Reset progress button should be disabled if user incorrectly fills verify input text', async ({
+    page
+  }) => {
+    await page
+      .getByRole('button', { name: 'Reset all of my progress' })
+      .click();
+
+    await expect(
+      page.getByRole('dialog', { name: 'Reset My Progress' })
+    ).toBeVisible();
+
+    const verifyResetInput = page.getByRole('textbox', {
+      exact: true
+    });
+    await verifyResetInput.fill('incorrect text');
+
+    await expect(
+      page.getByRole('button', {
+        name: 'Reset everything. I want to start from the beginning'
+      })
+    ).toBeDisabled();
+  });
+
+  test('should reset the progress if the user fills the verify input text and clicks the reset button', async ({
     page
   }) => {
     await page
@@ -104,6 +134,13 @@ test.describe('Progress reset modal', () => {
       page.getByRole('dialog', { name: 'Reset My Progress' })
     ).toBeVisible();
 
+    const verifyResetText = translations.settings.danger['verify-reset-text'];
+
+    const verifyResetInput = page.getByRole('textbox', {
+      exact: true
+    });
+    await verifyResetInput.fill(verifyResetText);
+
     await page
       .getByRole('button', {
         name: 'Reset everything. I want to start from the beginning'