Repository: zulip/zulip

Issue:
Long email spills out on email change confirmation page
<img width="970" alt="Screen Shot 2022-11-22 at 4 37 11 PM" src="https://user-images.githubusercontent.com/2090066/203448558-bd7a4c3a-ccdc-4f5d-81b8-3093ba52a8d3.png">

We would ideally break up the email to multiple lines, but abbreviating would also be better than the current situation.


Discussion:
@amanagr FYI, in case this is a quick one for you to fix.
Hello @zulip/server-misc members, this issue was labeled with the "area: misc" label, so you may want to check it out!

<!-- areaLabelAddition -->

@zulipbot claim
Welcome to Zulip, @cloudier1337! We just sent you an invite to collaborate on this repository at https://github.com/zulip/zulip/invitations. Please accept this invite in order to claim this issue and begin a fun, rewarding experience contributing to Zulip!

Here's some tips to get you off to a good start:

- Join me on the [Zulip developers' server](https://chat.zulip.org), to get help, chat about this issue, and meet the other developers.
- [Unwatch this repository](https://help.github.com/articles/unwatching-repositories/), so that you don't get 100 emails a day.

As you work on this issue, you'll also want to refer to the [Zulip code contribution guide](https://zulip.readthedocs.io/en/latest/contributing/index.html), as well as the rest of the developer documentation on that site.

See you on the other side (that is, the pull request side)!

hey @alya I'm on this but unfortunately I can not reproduce this behaviour - I understand it happened on Edit Profile -> Change Email, but as I do it on dev environment, I get no such notice - only to check my mail and confirm.
You get the notice after you click on `confirm` button.
@cloudier1337  please take a look at the [Zulip contributor guide](https://zulip.readthedocs.io/en/latest/overview/contributing.html), and keep in mind the following guideline:

> Before you claim an issue, you should be confident that you will be able to tackle it effectively.

I will go ahead and unassign this issue, and you should feel free to re-claim it once you have figured out how to reproduce (following @amanagr's advice above) and how to approach making a fix.

Thanks!
@zulipbot claim
Hello @Ujjawal3, it looks like you've currently claimed 1 issue in this repository. We encourage new contributors to focus their efforts on at most 1 issue at a time, so please complete your work on your other claimed issues before trying to claim this issue again.

We look forward to your valuable contributions!

@zulipbot claim
> @cloudier1337 please take a look at the [Zulip contributor guide](https://zulip.readthedocs.io/en/latest/overview/contributing.html), and keep in mind the following guideline:
> 
> > Before you claim an issue, you should be confident that you will be able to tackle it effectively.
> 
> I will go ahead and unassign this issue, and you should feel free to re-claim it once you have figured out how to reproduce (following @amanagr's advice above) and how to approach making a fix.
> 
> Thanks!

Thanks for your answer, I am confident I can solve it (I just did not think I would have trouble reproducing it). My bad. Will find another one, now that this one has been claimed.

Resolving patch:
diff --git a/zerver/views/user_settings.py b/zerver/views/user_settings.py
--- 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)


Test patch:
diff --git a/zerver/tests/test_email_change.py b/zerver/tests/test_email_change.py
--- 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 @@ def test_confirm_email_change(self) -> None:
         )
 
         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 @@ def test_confirm_email_change(self) -> None:
 
         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))