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

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

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,7 @@ 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
@@ -101,6 +105,38 @@ test.describe('Delete Modal component', () => {
       })
     ).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
+      .getByRole('button', { name: translations.settings.danger.delete })
+      .click();
+
+    await expect(
+      page.getByRole('dialog', {
+        name: translations.settings.danger['delete-title']
+      })
+    ).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,7 @@ 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
@@ -104,6 +111,36 @@ test.describe('Progress reset modal', () => {
       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
+      .getByRole('button', { name: 'Reset all of my progress' })
+      .click();
+
+    await expect(
+      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'