From a22168d8b3017f5fea25e0ecae2e1d153ffcb0da Mon Sep 17 00:00:00 2001
From: Lauryn Menard <lauryn@zulip.com>
Date: Wed, 19 Apr 2023 16:24:22 +0200
Subject: [PATCH] templates: Add CSS formatting to invalid email redirect page.

Adds CSS formatting for `invalid_email.html`.

Uses the `white-box` style because this page is a redirect when
there is an error with the email the user provided during
registration.

Also, updates the text of this page for some grammar errors and
to clarify the language between an invalid email and an email that
is not allowed by the Zulip organization in question.

Finally, makes any references to the `realm_name` also link to
the Zulip organization with the `realm_uri`.
---
 templates/zerver/invalid_email.html | 76 +++++++++++++----------------
 zerver/tests/test_invite.py         | 10 ++--
 2 files changed, 39 insertions(+), 47 deletions(-)

diff --git a/templates/zerver/invalid_email.html b/templates/zerver/invalid_email.html
index d84bde29c1..78e6aacecd 100644
--- a/templates/zerver/invalid_email.html
+++ b/templates/zerver/invalid_email.html
@@ -5,46 +5,38 @@
 {% endblock %}
 
 {% block portico_content %}
-
-    <h3>{{ _('Invalid email') }}</h3>
-
-    <p>{{ _('Hi there! Thank you for your interest in Zulip.') }}</p>
-
-    {% if invalid_email %}
-    <p>
-        {% trans %}
-        The email address you are trying to sign up with is not valid.
-        Please sign up using a valid email address.
-        {% endtrans %}
-    </p>
-    {% endif %}
-
-    {% if closed_domain %}
-    <p>
-        {% trans %}
-        The organization you are trying to join, {{ realm_name }},
-        only allows users with email addresses within the
-        organization. Please sign up using appropriate email address.
-        {% endtrans %}
-    </p>
-    {% endif %}
-
-    {% if disposable_emails_not_allowed %}
-    <p>
-        {% trans %}The organization you are trying to join,
-        {{realm_name}}, does not allow signups using disposable email
-        addresses. Please sign up using a real email address.
-        {% endtrans %}
-    </p>
-    {% endif %}
-
-    {% if email_contains_plus %}
-    <p>
-        {% trans %}The organization you are trying to join,
-        {{realm_name}}, does not allow signups using emails
-        that contains +. Please sign up using appropriate email address.
-        {% endtrans %}
-    </p>
-    {% endif %}
-
+<div class="app portico-page">
+    <div class="app-main portico-page-container center-block flex full-page account-creation new-style">
+        <div class="inline-block">
+            <div class="get-started">
+                {% if invalid_email %}
+                <h1>{{ _("Invalid email") }}</h1>
+                {% else %}
+                <h1>{{ _("Email not allowed") }}</h1>
+                {% endif %}
+            </div>
+            <div class="white-box">
+                <p>
+                    {% if invalid_email %}
+                        {{ _("The email address you are trying to sign up with is not valid.") }}
+                    {% endif %}
+                    {% if closed_domain %}
+                        {% trans %}The organization you are trying to join, <a href="{{ realm_uri }}">{{ realm_name }}</a>, does not allow signups using emails with your email domain.{% endtrans %}
+                    {% endif %}
+                    {% if disposable_emails_not_allowed %}
+                        {% trans %}The organization you are trying to join, <a href="{{ realm_uri }}">{{ realm_name }}</a>, does not allow signups using disposable email addresses.{% endtrans %}
+                    {% endif %}
+                    {% if email_contains_plus %}
+                        {% trans %}The organization you are trying to join, <a href="{{ realm_uri }}">{{ realm_name }}</a>, does not allow signups using emails that contain "+".{% endtrans %}
+                    {% endif %}
+                    {% if invalid_email %}
+                    {{ _("Please sign up using a valid email address.") }}
+                    {% else %}
+                    {{ _("Please sign up using an allowed email address.") }}
+                    {% endif %}
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}
diff --git a/zerver/tests/test_invite.py b/zerver/tests/test_invite.py
index b3ec2f722f..50ef91eb4d 100644
--- a/zerver/tests/test_invite.py
+++ b/zerver/tests/test_invite.py
@@ -1094,7 +1094,9 @@ so we didn't send them an invitation. We did send invitations to everyone else!"
 
         result = self.submit_reg_form_for_user("foo@example.com", "password")
         self.assertEqual(result.status_code, 200)
-        self.assert_in_response("only allows users with email addresses", result)
+        self.assert_in_response(
+            "does not allow signups using emails with your email domain", result
+        )
 
     def test_disposable_emails_before_closing(self) -> None:
         """
@@ -1119,7 +1121,7 @@ so we didn't send them an invitation. We did send invitations to everyone else!"
 
         result = self.submit_reg_form_for_user("foo@mailnator.com", "password")
         self.assertEqual(result.status_code, 200)
-        self.assert_in_response("Please sign up using a real email address.", result)
+        self.assert_in_response("does not allow signups using disposable email addresses.", result)
 
     def test_invite_with_email_containing_plus_before_closing(self) -> None:
         """
@@ -1145,9 +1147,7 @@ so we didn't send them an invitation. We did send invitations to everyone else!"
 
         result = self.submit_reg_form_for_user(external_address, "password")
         self.assertEqual(result.status_code, 200)
-        self.assert_in_response(
-            "Zulip Dev, does not allow signups using emails\n        that contains +", result
-        )
+        self.assert_in_response('does not allow signups using emails that contain "+".', result)
 
     def test_invalid_email_check_after_confirming_email(self) -> None:
         self.login("hamlet")