Merge pull request #4560 from coralproject/feat/CORL-3104-areyousure-…

…domainban [CORL-3104]: Email domain ban confirmation
coralproject · Mar 14, 2024 · 048748f · 048748f
2 parents 1733f4f + 0082e84
commit 048748f
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 10 deletions.
diff --git a/client/src/core/client/admin/components/BanModal.css b/client/src/core/client/admin/components/BanModal.css
@@ -48,3 +48,22 @@ $ban-modal-text: var(--palette-text-500);
 .rejectExistingReason {
   background-color: var(--palette-grey-100);
 }
+
+.domainBanCallOut {
+  padding: var(--spacing-1);
+  margin-bottom: var(--spacing-2);
+}
+
+.alertIcon {
+  margin-right: var(--spacing-1);
+}
+
+.domainBanConfirmationInput {
+  font-family: var(--font-family-primary);
+  line-height: 2.25;
+  padding-left: var(--spacing-2);
+}
+
+.domainBanConfirmationLabel {
+  margin-bottom: var(--spacing-1);
+}
diff --git a/client/src/core/client/admin/components/BanModal.spec.tsx b/client/src/core/client/admin/components/BanModal.spec.tsx
@@ -136,11 +136,21 @@ it("creates domain ban for unmoderated domain while updating user ban status", a
   const modal = getBanModal(container, user);
 
   const banDomainButton = within(modal).getByLabelText(
-    `Ban all new commenter accounts from test.com`
+    `Ban all commenter accounts from test.com`
   );
   userEvent.click(banDomainButton);
-  screen.debug(banDomainButton);
-  userEvent.click(within(modal).getByRole("button", { name: "Ban" }));
+
+  const banSaveButton = within(modal).getByRole("button", { name: "Ban" });
+
+  expect(banSaveButton).toBeDisabled();
+
+  const domainBanConfirmation = within(modal).getByTestId(
+    "domainBanConfirmation"
+  );
+  userEvent.type(domainBanConfirmation, "ban");
+
+  expect(banSaveButton).toBeEnabled();
+  userEvent.click(banSaveButton);
 
   await waitFor(() =>
     expect(resolvers.Mutation!.createEmailDomain!.called).toBeTruthy()
@@ -172,7 +182,7 @@ test.each(gteOrgMods)(
     const modal = getBanModal(container, commenterUser);
 
     const banDomainButton = within(modal).getByLabelText(
-      `Ban all new commenter accounts from test.com`
+      `Ban all commenter accounts from test.com`
     );
 
     expect(banDomainButton).toBeInTheDocument();
@@ -198,7 +208,7 @@ test.each(siteMods)(
     const modal = getBanModal(container, commenterUser);
 
     const banDomainButton = within(modal).queryByText(
-      `Ban all new commenter accounts from test.com`
+      `Ban all commenter accounts from test.com`
     );
 
     expect(banDomainButton).toBeNull();
@@ -233,7 +243,7 @@ it("does not display ban domain option for moderated domain", async () => {
   const modal = getBanModal(container, user);
 
   const banDomainButton = within(modal).queryByText(
-    `Ban all new commenter accounts from test.com`
+    `Ban all commenter accounts from test.com`
   );
 
   expect(banDomainButton).not.toBeInTheDocument();
@@ -279,7 +289,7 @@ it("does not display ban domain option for protected domain", async () => {
   const modal = getBanModal(container, user);
 
   const banDomainButton = within(modal).queryByText(
-    `Ban all new commenter accounts from test.com`
+    `Ban all commenter accounts from test.com`
   );
 
   expect(banDomainButton).not.toBeInTheDocument();

diff --git a/client/src/core/client/admin/components/BanModal.tsx b/client/src/core/client/admin/components/BanModal.tsx
@@ -21,9 +21,11 @@ import { useGetMessage } from "coral-framework/lib/i18n";
 import { useLocal, useMutation } from "coral-framework/lib/relay";
 import { GQLREJECTION_REASON_CODE, GQLUSER_ROLE } from "coral-framework/schema";
 import {
+  AlertTriangleIcon,
   ArrowsDownIcon,
   ArrowsUpIcon,
   ButtonSvgIcon,
+  SvgIcon,
 } from "coral-ui/components/icons";
 import {
   Button,
@@ -328,6 +330,17 @@ const BanModal: FunctionComponent<Props> = ({
     rejectExistingCommentsMessage,
   } = getTextForUpdateType(updateType);
 
+  const domainBanConfirmationText = "ban";
+  const [domainBanConfirmationTextInput, setDomainBanConfirmationTextInput] =
+    useState("");
+
+  const onDomainBanConfirmationTextInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setDomainBanConfirmationTextInput(e.target.value);
+    },
+    [setDomainBanConfirmationTextInput]
+  );
+
   const pendingSiteBanUpdates = banSiteIDs.length + unbanSiteIDs.length > 0;
   const requiresSiteBanUpdates =
     updateType === UpdateType.SPECIFIC_SITES ||
@@ -340,7 +353,13 @@ const BanModal: FunctionComponent<Props> = ({
 
   const disableForm =
     (requiresSiteBanUpdates && !pendingSiteBanUpdates) ||
-    requiresRejectionReasonForDSA;
+    requiresRejectionReasonForDSA ||
+    (!!canBanDomain &&
+      banDomain &&
+      !(
+        domainBanConfirmationTextInput.toLowerCase() ===
+        domainBanConfirmationText
+      ));
 
   return (
     <ChangeStatusModal
@@ -519,13 +538,49 @@ const BanModal: FunctionComponent<Props> = ({
                               setBanDomain(target.checked);
                             }}
                           >
-                            Ban all new commenter accounts from{" "}
+                            Ban all commenter accounts from{" "}
                             <strong>{emailDomain}</strong>
                           </CheckBox>
                         </Localized>
                       </HorizontalGutter>
                     </Flex>
                   )}
+                  {canBanDomain && banDomain && (
+                    <Flex direction="column">
+                      <CallOut
+                        className={styles.domainBanCallOut}
+                        color="warning"
+                      >
+                        <SvgIcon
+                          size="xs"
+                          className={styles.alertIcon}
+                          Icon={AlertTriangleIcon}
+                        />
+                        <Localized id="community-banModal-banEmailDomain-callOut">
+                          <span>
+                            This will prevent any commenter from using this
+                            email domain.
+                          </span>
+                        </Localized>
+                      </CallOut>
+
+                      <Localized
+                        id="community-banModal-banEmailDomain-confirmationText"
+                        vars={{ text: domainBanConfirmationText }}
+                      >
+                        <div className={styles.domainBanConfirmationLabel}>
+                          Type in "{domainBanConfirmationText}" to confirm
+                        </div>
+                      </Localized>
+                      <input
+                        data-testid="domainBanConfirmation"
+                        className={styles.domainBanConfirmationInput}
+                        type="text"
+                        placeholder=""
+                        onChange={onDomainBanConfirmationTextInputChange}
+                      />
+                    </Flex>
+                  )}
                   {/* customize message button*/}
                   {updateType !== UpdateType.NO_SITES && (
                     <Button

diff --git a/locales/en-US/admin.ftl b/locales/en-US/admin.ftl
@@ -1429,7 +1429,9 @@ community-userStatus-removePremod = Remove pre-moderate
 
 community-banModal-allSites-title = Are you sure you want to ban <username></username>?
 community-banModal-banEmailDomain-title = Email domain ban
-community-banModal-banEmailDomain = Ban all new commenter accounts from { $domain }
+community-banModal-banEmailDomain = Ban all commenter accounts from { $domain }
+community-banModal-banEmailDomain-callOut = This will prevent any commenter from using this email domain.
+community-banModal-banEmailDomain-confirmationText = Type in "{ $text }" to confirm
 community-banModal-specificSites-title = Are you sure you want to manage the ban status of <username></username>?
 community-banModal-noSites-title = Are you sure you want to unban <username></username>?
 community-banModal-allSites-consequence =