feat: registration email confirmation dialog (#18349)

* feat: registration email confirmation dialog

During registration, users will be prompted to confirm their email
address visually prior to proceeding.

By presenting the user with the dialog, they have a chance to review the
submitted email address one last time, hopefully preventing them from
getting into a registration "stuck" loop as a result of a typo.

Signed-off-by: Mike Fiedler <[email protected]>

* make translations

Signed-off-by: Mike Fiedler <[email protected]>

---------

Signed-off-by: Mike Fiedler <[email protected]>

Author: miketheman

tests/frontend/email-confirmation_controller_test.js

@@ -0,0 +1,108 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+
+/* global expect, beforeEach, describe, it, jest */
+
+import { Application } from "@hotwired/stimulus";
+import EmailConfirmationController from "../../warehouse/static/js/warehouse/controllers/email-confirmation_controller";
+import { fireEvent } from "@testing-library/dom";
+
+describe("Email confirmation controller", () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div data-controller="email-confirmation">
+        <dialog data-email-confirmation-target="dialog">
+          <p>Please confirm that your email address is <strong data-email-confirmation-target="email"></strong>.</p>
+          <button data-action="click->email-confirmation#confirm">Confirm</button>
+          <button data-action="click->email-confirmation#close">Cancel</button>
+        </dialog>
+        <form data-email-confirmation-target="form">
+          <input type="email" value="[email protected]">
+          <input type="submit">
+        </form>
+      </div>
+    `;
+
+    const application = Application.start();
+    application.register("email-confirmation", EmailConfirmationController);
+  });
+
+  it("shows the dialog on form submit", () => {
+    const dialog = document.querySelector("dialog");
+    const form = document.querySelector("form");
+    const email = document.querySelector("strong");
+
+    // The dialog is not visible by default
+    expect(dialog.open).toBe(false);
+
+    // The `showModal` method is mocked, so we can check if it was called
+    dialog.showModal = jest.fn();
+
+    // When the form is submitted
+    fireEvent.submit(form);
+
+    // The dialog should be visible and the email should be displayed
+    expect(dialog.showModal).toHaveBeenCalled();
+    expect(email.textContent).toBe("[email protected]");
+  });
+
+  it("submits the form when confirmed", () => {
+    const dialog = document.querySelector("dialog");
+    const form = document.querySelector("form");
+    const confirmButton = document.querySelector("[data-action='click->email-confirmation#confirm']");
+
+    // The `showModal` and `requestSubmit` methods are mocked, so we can check if they were called
+    dialog.showModal = jest.fn();
+    form.requestSubmit = jest.fn();
+
+    // When the form is submitted and the dialog is confirmed
+    fireEvent.submit(form);
+    fireEvent.click(confirmButton);
+
+    // The form should be submitted
+    expect(form.requestSubmit).toHaveBeenCalled();
+  });
+
+  it("closes the dialog when canceled", () => {
+    const dialog = document.querySelector("dialog");
+    const form = document.querySelector("form");
+    const cancelButton = document.querySelector("[data-action='click->email-confirmation#close']");
+
+    // The dialog is not visible by default
+    expect(dialog.open).toBe(false);
+
+    // The `showModal` and `close` methods are mocked, so we can check if they were called
+    dialog.showModal = jest.fn();
+    dialog.close = jest.fn();
+
+    // When the form is submitted and the dialog is canceled
+    fireEvent.submit(form);
+    fireEvent.click(cancelButton);
+
+    // The dialog should be visible and then closed
+    expect(dialog.showModal).toHaveBeenCalled();
+    expect(dialog.close).toHaveBeenCalled();
+  });
+
+  it("does not show the dialog if already confirmed", () => {
+    // this shouldn't happen in practice
+    const dialog = document.querySelector("dialog");
+    const form = document.querySelector("form");
+    const confirmButton = document.querySelector("[data-action='click->email-confirmation#confirm']");
+
+    dialog.showModal = jest.fn();
+    form.requestSubmit = jest.fn();
+
+    // Confirm once
+    fireEvent.submit(form);
+    fireEvent.click(confirmButton);
+
+    // Reset mock
+    dialog.showModal.mockClear();
+
+    // Submit again
+    fireEvent.submit(form);
+
+    // The dialog should not be visible
+    expect(dialog.showModal).not.toHaveBeenCalled();
+  });
+});

warehouse/locale/messages.pot

@@ -1491,8 +1491,8 @@ msgstr ""
 msgid "Error processing form"
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:166
-#: warehouse/templates/accounts/register.html:171
+#: warehouse/templates/accounts/register.html:178
+#: warehouse/templates/accounts/register.html:183
 #: warehouse/templates/accounts/reset-password.html:62
 #: warehouse/templates/accounts/reset-password.html:67
 #: warehouse/templates/manage/account.html:453
@@ -1505,7 +1505,7 @@ msgid "Confirm password to continue"
 msgstr ""
 
 #: warehouse/templates/accounts/login.html:56
-#: warehouse/templates/accounts/register.html:130
+#: warehouse/templates/accounts/register.html:142
 #: warehouse/templates/accounts/reset-password.html:28
 #: warehouse/templates/manage/manage_base.html:451
 #: warehouse/templates/re-auth.html:49
@@ -1515,11 +1515,11 @@ msgstr ""
 #: warehouse/templates/accounts/login.html:34
 #: warehouse/templates/accounts/login.html:58
 #: warehouse/templates/accounts/recovery-code.html:28
-#: warehouse/templates/accounts/register.html:57
-#: warehouse/templates/accounts/register.html:79
-#: warehouse/templates/accounts/register.html:107
-#: warehouse/templates/accounts/register.html:132
-#: warehouse/templates/accounts/register.html:168
+#: warehouse/templates/accounts/register.html:69
+#: warehouse/templates/accounts/register.html:91
+#: warehouse/templates/accounts/register.html:119
+#: warehouse/templates/accounts/register.html:144
+#: warehouse/templates/accounts/register.html:180
 #: warehouse/templates/accounts/request-password-reset.html:28
 #: warehouse/templates/accounts/reset-password.html:30
 #: warehouse/templates/accounts/reset-password.html:64
@@ -1684,7 +1684,7 @@ msgstr ""
 
 #: warehouse/templates/accounts/login.html:32
 #: warehouse/templates/accounts/profile.html:25
-#: warehouse/templates/accounts/register.html:105
+#: warehouse/templates/accounts/register.html:117
 #: warehouse/templates/email/organization-member-added/body.html:14
 #: warehouse/templates/email/organization-member-invited/body.html:14
 #: warehouse/templates/email/organization-member-removed/body.html:14
@@ -1847,57 +1847,74 @@ msgstr ""
 msgid "Create an account"
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:18
+#: warehouse/templates/accounts/register.html:19
 #, python-format
 msgid "Create an account on %(title)s"
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:21
+#: warehouse/templates/accounts/register.html:22
 #, python-format
 msgid ""
 "Before creating an account on %(title)s, familiarize yourself with the "
 "following guidelines:"
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:24
+#: warehouse/templates/accounts/register.html:25
 #, python-format
 msgid "Do not use %(title)s for any illegal or harmful activities."
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:25
+#: warehouse/templates/accounts/register.html:26
 msgid ""
 "Do not impersonate others or post private information without their "
 "consent."
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:26
+#: warehouse/templates/accounts/register.html:27
 msgid "Be respectful of other users and avoid abusive or discriminatory language."
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:27
+#: warehouse/templates/accounts/register.html:28
 msgid "Do not post spam or distribute malware."
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:28
+#: warehouse/templates/accounts/register.html:29
 #, python-format
 msgid "Do not use %(title)s to conduct security research."
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:31
+#: warehouse/templates/accounts/register.html:32
 #, python-format
 msgid ""
 "For more information, please read the full <a href=\"%(aup)s\" "
 "rel=\"noopener\">Acceptable Use Policy</a>."
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:36
+#: warehouse/templates/accounts/register.html:37
 #, python-format
 msgid ""
 "By registering, you agree to the <a href=\"%(tos)s\">PyPI Terms of "
 "Service</a>."
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:55
+#: warehouse/templates/accounts/register.html:47
+msgid ""
+"Please confirm that your email address is <strong data-email-"
+"confirmation-target=\"email\"></strong>."
+msgstr ""
+
+#: warehouse/templates/accounts/register.html:50
+msgid "Confirm"
+msgstr ""
+
+#: warehouse/templates/accounts/register.html:51
+#: warehouse/templates/manage/manage_base.html:398
+#: warehouse/templates/manage/manage_base.html:473
+#: warehouse/templates/manage/organization/activate_subscription.html:41
+msgid "Cancel"
+msgstr ""
+
+#: warehouse/templates/accounts/register.html:67
 #: warehouse/templates/manage/account.html:149
 #: warehouse/templates/manage/account.html:491
 #: warehouse/templates/manage/project/history.html:284
@@ -1911,47 +1928,47 @@ msgstr ""
 msgid "Name"
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:60
+#: warehouse/templates/accounts/register.html:72
 msgid "Your name"
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:77
+#: warehouse/templates/accounts/register.html:89
 #: warehouse/templates/manage/account.html:350
 #: warehouse/templates/manage/unverified-account.html:225
 msgid "Email address"
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:82
+#: warehouse/templates/accounts/register.html:94
 #: warehouse/templates/manage/account.html:370
 msgid "Your email address"
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:99
+#: warehouse/templates/accounts/register.html:111
 msgid "Confirm form"
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:110
+#: warehouse/templates/accounts/register.html:122
 msgid "Select a username"
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:140
+#: warehouse/templates/accounts/register.html:152
 #: warehouse/templates/accounts/reset-password.html:39
 #: warehouse/templates/manage/account.html:409
 msgid "Show passwords"
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:143
+#: warehouse/templates/accounts/register.html:155
 msgid "Select a password"
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:195
+#: warehouse/templates/accounts/register.html:207
 msgid ""
 "This password appears in a security breach or has been compromised and "
 "cannot be used. Please refer to the <a href=\"/help/#compromised-"
 "password\">FAQ</a> for more information."
 msgstr ""
 
-#: warehouse/templates/accounts/register.html:202
+#: warehouse/templates/accounts/register.html:214
 msgid "Create account"
 msgstr ""
 
@@ -4237,12 +4254,6 @@ msgstr ""
 msgid "Confirm the %(item)s to continue."
 msgstr ""
 
-#: warehouse/templates/manage/manage_base.html:398
-#: warehouse/templates/manage/manage_base.html:473
-#: warehouse/templates/manage/organization/activate_subscription.html:41
-msgid "Cancel"
-msgstr ""
-
 #: warehouse/templates/manage/manage_base.html:428
 msgid "close"
 msgstr ""

warehouse/static/js/warehouse/controllers/email-confirmation_controller.js

@@ -0,0 +1,46 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+
+/**
+ * This controller handles the confirmation dialog that appears
+ * when a user submits their email address during registration.
+ * It ensures that the user confirms their email
+ * before proceeding with the form submission.
+ */
+
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["dialog", "email", "form"];
+
+  connect() {
+    this.formTarget.addEventListener("submit", this.check.bind(this));
+  }
+
+  disconnect() {
+    this.formTarget.removeEventListener("submit", this.check.bind(this));
+  }
+
+  check(event) {
+    if (this.data.get("confirmed") === "true") {
+      return;
+    }
+
+    event.preventDefault();
+    this.emailTarget.textContent = this.emailValue;
+    this.dialogTarget.showModal();
+  }
+
+  close() {
+    this.dialogTarget.close();
+  }
+
+  confirm(event) {
+    event.preventDefault();
+    this.data.set("confirmed", "true");
+    this.formTarget.requestSubmit();
+  }
+
+  get emailValue() {
+    return this.formTarget.querySelector("input[type='email']").value;
+  }
+}

warehouse/templates/accounts/register.html

@@ -14,7 +14,8 @@
     {% set title = "PyPI" %}
   {% endif %}
   <div class="horizontal-section">
-    <div class="site-container">
+    <div class="site-container"
+         data-controller="password password-match password-strength-gauge password-breach email-confirmation">
       <h1 class="page-title">{% trans title=title %}Create an account on {{ title }}{% endtrans %}</h1>
       <aside>
         <p>
@@ -39,9 +40,20 @@ <h1 class="page-title">{% trans title=title %}Create an account on {{ title }}{%
     </p>
   </aside>
   <hr>
+  <dialog data-action="cancel->email-confirmation#close"
+          data-email-confirmation-target="dialog">
+    <form method="dialog">
+      <p>
+        {% trans %}Please confirm that your email address is <strong data-email-confirmation-target="email"></strong>.{% endtrans %}
+      </p>
+      <button class="button button--primary"
+              data-action="click->email-confirmation#confirm">{% trans %}Confirm{% endtrans %}</button>
+      <button class="button" formmethod="dialog" value="cancel">{% trans %}Cancel{% endtrans %}</button>
+    </form>
+  </dialog>
   <form method="post"
         action="{{ request.current_route_path() }}"
-        data-controller="password password-match password-strength-gauge password-breach">
+        data-email-confirmation-target="form">
     <input name="csrf_token"
            type="hidden"
            value="{{ request.session.get_csrf_token() }}">