From 35f05631dd088be44f0e949860ec2b523bbd997b Mon Sep 17 00:00:00 2001
From: Ujjawal Modi <umodi2003@gmail.com>
Date: Mon, 28 Nov 2022 03:39:11 +0530
Subject: [PATCH] css: Fix spilling out of long email on email change
 confirmation.

In the email change confirmation page, now long emails break to
multiple lines instead of spilling out.

Fixes #23654.
---
 static/styles/portico/portico_signin.css |  1 +
 zerver/tests/test_email_change.py        | 11 +++++++++--
 zerver/views/user_settings.py            |  8 +++++---
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/static/styles/portico/portico_signin.css b/static/styles/portico/portico_signin.css
index d525fd6ea2..0f2bd1cb59 100644
--- a/static/styles/portico/portico_signin.css
+++ b/static/styles/portico/portico_signin.css
@@ -737,6 +737,7 @@ html {
 
 .confirm-email-change-page .white-box {
     max-width: 500px;
+    word-break: break-word;
 }
 
 .anonymous_access_form {
diff --git a/zerver/tests/test_email_change.py b/zerver/tests/test_email_change.py
index 8ddd62c15d..4d4a165b8d 100644
--- a/zerver/tests/test_email_change.py
+++ b/zerver/tests/test_email_change.py
@@ -1,8 +1,10 @@
 import datetime
+from email.headerregistry import Address
 from unittest import mock
 
 from django.conf import settings
 from django.core import mail
+from django.utils.html import escape
 from django.utils.timezone import now
 
 from confirmation.models import (
@@ -95,7 +97,8 @@ class EmailChangeTestCase(ZulipTestCase):
         )
 
         old_email = user_profile.delivery_email
-        new_email = "hamlet-new@zulip.com"
+        new_email = '"<li>hamlet-new<li>"@zulip.com'
+        new_email_address = Address(addr_spec=new_email)
         new_realm = get_realm("zulip")
         self.login("hamlet")
         obj = EmailChangeStatus.objects.create(
@@ -109,7 +112,11 @@ class EmailChangeTestCase(ZulipTestCase):
 
         self.assertEqual(response.status_code, 200)
         self.assert_in_success_response(
-            ["This confirms that the email address for your Zulip"], response
+            [
+                "This confirms that the email address for your Zulip",
+                f'<a href="mailto:{escape(new_email)}">{escape(new_email_address.username)}@<wbr>{escape(new_email_address.domain)}</wbr></a>',
+            ],
+            response,
         )
         user_profile = get_user_by_delivery_email(new_email, new_realm)
         self.assertTrue(bool(user_profile))
diff --git a/zerver/views/user_settings.py b/zerver/views/user_settings.py
index 0ecc0d8d62..c903205750 100644
--- a/zerver/views/user_settings.py
+++ b/zerver/views/user_settings.py
@@ -1,3 +1,4 @@
+from email.headerregistry import Address
 from typing import Any, Dict, Optional
 
 from django.conf import settings
@@ -96,13 +97,14 @@ def confirm_email_change(request: HttpRequest, confirmation_key: str) -> HttpRes
         context=context,
         realm=user_profile.realm,
     )
-
+    old_email_address = Address(addr_spec=old_email)
+    new_email_address = Address(addr_spec=new_email)
     ctx = {
         "new_email_html_tag": SafeString(
-            f'<a href="mailto:{escape(new_email)}">{escape(new_email)}</a>'
+            f'<a href="mailto:{escape(new_email)}">{escape(new_email_address.username)}@<wbr>{escape(new_email_address.domain)}</wbr></a>'
         ),
         "old_email_html_tag": SafeString(
-            f'<a href="mailto:{escape(old_email)}">{escape(old_email)}</a>'
+            f'<a href="mailto:{escape(old_email)}">{escape(old_email_address.username)}@<wbr>{escape(old_email_address.domain)}</wbr></a>'
         ),
     }
     return render(request, "confirmation/confirm_email_change.html", context=ctx)