Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

remote_billing: Fix strings and styling for remote login pages.

This commit is contained in:
Aman Agrawal 2023-12-12 03:28:28 +00:00 committed by Tim Abbott
parent 3bcfb9c005
commit 2da1bfcbd0
7 changed files with 68 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
corporate/tests/test_remote_billing.py
View File

@ -65,7 +65,7 @@ class RemoteBillingAuthenticationTest(BouncerTestCase):
# When logging in for the first time some extra steps are needed # When logging in for the first time some extra steps are needed
# to confirm and verify the email address. # to confirm and verify the email address.
self.assertEqual(result.status_code, 200) self.assertEqual(result.status_code, 200)
self.assert_in_success_response(["Enter your email address"], result) self.assert_in_success_response(["Enter log in email"], result)
self.assert_in_success_response([user.realm.host], result) self.assert_in_success_response([user.realm.host], result)
self.assert_in_success_response( self.assert_in_success_response(
[f'action="/remote-billing-login/{signed_access_token}/confirm/"'], result [f'action="/remote-billing-login/{signed_access_token}/confirm/"'], result
@ -79,7 +79,7 @@ class RemoteBillingAuthenticationTest(BouncerTestCase):
) )
self.assertEqual(result.status_code, 200) self.assertEqual(result.status_code, 200)
self.assert_in_success_response( self.assert_in_success_response(
["To complete the login process, check your email account", user.delivery_email], ["We have sent a log in link", "link will expire in", user.delivery_email],
result, result,
) )
confirmation_url = self.get_confirmation_url_from_outbox( confirmation_url = self.get_confirmation_url_from_outbox(
@ -475,7 +475,7 @@ class LegacyServerLoginTest(BouncerTestCase):
) )
self.assertEqual(result.status_code, 200) self.assertEqual(result.status_code, 200)
self.assert_in_success_response(["Enter your email address"], result) self.assert_in_success_response(["Enter log in email"], result)
if next_page is not None: if next_page is not None:
self.assert_in_success_response( self.assert_in_success_response(
[f'<input type="hidden" name="next_page" value="{next_page}" />'], result [f'<input type="hidden" name="next_page" value="{next_page}" />'], result
@ -506,7 +506,8 @@ class LegacyServerLoginTest(BouncerTestCase):
) )
self.assertEqual(result.status_code, 200) self.assertEqual(result.status_code, 200)
self.assert_in_success_response( self.assert_in_success_response(
["To complete the login process, check your email account", email], result ["We have sent a log in link", "link will expire in", email],
result,
) )
confirmation_url = self.get_confirmation_url_from_outbox( confirmation_url = self.get_confirmation_url_from_outbox(

20
templates/corporate/remote_billing_confirm_email_form.html
View File

@ -2,16 +2,14 @@
{% set entrypoint = "upgrade" %} {% set entrypoint = "upgrade" %}
{% block title %} {% block title %}
<title>{{ _("Login confirmation - email") }} | Zulip</title> <title>Enter log in email | Zulip</title>
{% endblock %} {% endblock %}
{% block portico_content %} {% block portico_content %}
<div class="register-account flex full-page"> <div class="register-account flex full-page" id="remote-billing-confirm-email">
<div class="center-block new-style"> <div class="center-block new-style">
<div class="pitch"> <div class="pitch">
<h1>Enter your email address</h1> <h1>Enter log in email</h1>
<p>Next, we will send a verification email to the address you provide.</p>
</div> </div>
<div class="white-box"> <div class="white-box">
<form id="remote-billing-confirm-email-form" method="post" action="{{ action_url }}"> <form id="remote-billing-confirm-email-form" method="post" action="{{ action_url }}">
@ -19,9 +17,19 @@
{% if next_page %} {% if next_page %}
<input type="hidden" name="next_page" value="{{ next_page }}" /> <input type="hidden" name="next_page" value="{{ next_page }}" />
{% endif %} {% endif %}
<div class="input-box server-login-form-field no-validation" id="remote-billing-confirm-email-intro">
<div class="not-editable-realm-field">
{% if remote_server_hostname %}
Enter the email address of the person who is logging in to manage plans and billing for this server (yourself or someone else). They will receive an email from Zulip with a log in link.
{% else %}
Enter the email address where you want to receive an email from Zulip with a log in link.
{% endif %}
</div>
</div>
<div class="input-box server-login-form-field"> <div class="input-box server-login-form-field">
<label for="email" class="inline-block label-title">Email</label> <label for="email" class="inline-block label-title">Email</label>
<input id="email" name="email" class="email required" type="email" {% if email %}value="{{ email }}"{% endif %} /> <input id="email" name="email" type="email" class="required" {% if email %}value="{{ email }}"{% endif %} />
<div id="server-login-form-email-error" class="alert alert-danger server-login-form-field-error email-error"></div>
</div> </div>
<div class="upgrade-button-container"> <div class="upgrade-button-container">
<button type="submit" id="remote-billing-confirm-email-button" class="stripe-button-el invoice-button"> <button type="submit" id="remote-billing-confirm-email-button" class="stripe-button-el invoice-button">

6
templates/corporate/remote_billing_email_confirmation_sent.html
View File

@ -2,7 +2,7 @@
{% set entrypoint = "upgrade" %} {% set entrypoint = "upgrade" %}
{% block title %} {% block title %}
<title>{{ _("Confirm your email address") }} | Zulip</title> <title>Log in link sent | Zulip</title>
{% endblock %} {% endblock %}
{% block portico_content %} {% block portico_content %}
@ -11,11 +11,11 @@
<div class="inline-block"> <div class="inline-block">
<div class="get-started"> <div class="get-started">
<h1>{{ _("Confirm your email address") }}</h1> <h1>Log in link sent</h1>
</div> </div>
<div class="white-box"> <div class="white-box">
<p>{% trans %}To complete the login process, check your email account (<span class="user_email semi-bold">{{ email }}</span>) for a confirmation email from Zulip.{% endtrans %}</p> <p>We have sent a log in link for Zulip plan management to <span class="user_email semi-bold">{{ email }}</span>. This link will expire in 2 hours.</p>
{% include 'zerver/dev_env_email_access_details.html' %} {% include 'zerver/dev_env_email_access_details.html' %}
</div> </div>

24
templates/corporate/remote_billing_finalize_login_confirmation.html
View File

@ -2,30 +2,38 @@
{% set entrypoint = "upgrade" %} {% set entrypoint = "upgrade" %}
{% block title %} {% block title %}
<title>{{ _("Zulip plan management login confirmation") }} | Zulip</title> <title>Log in to Zulip plan management for {{ host }} | Zulip</title>
{% endblock %} {% endblock %}
{% block portico_content %} {% block portico_content %}
<div id="remote-billing-confirm-login-page" class="register-account flex full-page"> <div id="remote-billing-confirm-login-page" class="register-account flex full-page">
<div class="center-block new-style"> <div class="center-block new-style">
<div class="pitch"> <div class="pitch">
<h1>Log in to Zulip plan management for {{ host }}</h1> <h1>Log in to Zulip plan management for<br/>{{ host }}</h1>
</div> </div>
<div class="white-box"> <div class="white-box">
<p>Click <b>Continue</b> to log in to the Zulip plan management system with the account below.</p>
Email: {{ user_email }}<br />
<form id="remote-billing-confirm-login-form" method="post" action="{{ action_url }}"> <form id="remote-billing-confirm-login-form" method="post" action="{{ action_url }}">
{{ csrf_input }} {{ csrf_input }}
<div class="input-box remote-billing-confirm-login-form-field"> <div class="input-box remote-billing-confirm-login-form-field">
<label for="full_name" class="inline-block label-title">Full name</label> <label for="full_name" class="inline-block label-title">Full name</label>
<input id="full_name" name="full_name" class="required" type="text" {% if user_full_name %}value="{{ user_full_name }}"{% endif %} /> <input id="full_name" name="full_name" class="required" type="text" {% if user_full_name %}value="{{ user_full_name }}"{% endif %} />
<div id="remote-billing-confirm-login-form-full_name-error" class="alert alert-danger remote-billing-confirm-login-form-field-error full_name-error"></div>
</div>
<div class="input-box remote-billing-confirm-login-form-field no-validation">
<label for="user-email" class="inline-block label-title">
Email
</label>
<div id="user-email" class="not-editable-realm-field">
{{ user_email }}
</div>
</div> </div>
{% if tos_consent_needed %} {% if tos_consent_needed %}
<div class="input-group terms-of-service"> <div class="input-group terms-of-service remote-billing-confirm-login-form-field" id="remote-billing-confirm-login-tos-wrapper">
<label for="id_terms" class="inline-block checkbox"> <label for="remote-billing-confirm-login-tos" class="inline-block checkbox">
<input id="id_terms" name="tos_consent" class="required" type="checkbox" value="true" /> <input id="remote-billing-confirm-login-tos" name="tos_consent" class="required" type="checkbox" value="true" />
<span></span> <span></span>
{% trans %}I agree to the <a href="{{ root_domain_url }}/policies/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a>.{% endtrans %} I agree to the <a href="{{ root_domain_url }}/policies/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a>.
<div id="remote-billing-confirm-login-form-tos_consent-error" class="alert alert-danger remote-billing-confirm-login-form-field-error tos_consent-error"></div>
</label> </label>
</div> </div>
{% endif %} {% endif %}

19
web/src/billing/remote_billing_auth.ts
View File

@ -19,19 +19,18 @@ export function initialize(): void {
form.submit(); form.submit();
}, },
invalidHandler() { invalidHandler() {
// this removes all previous errors that were put on screen $("*[class$='-error']").hide();
// by the server.
$("#server-login-form .alert.alert-error").remove();
$("#remote-billing-confirm-email-form .alert.alert-error").remove();
$("#remote-billing-confirm-login-form .alert.alert-error").remove();
}, },
showErrors(error_map) { showErrors(error_map) {
if (error_map.password) { $("*[class$='-error']").hide();
$("#server-login-form .alert.alert-error").remove(); for (const key in error_map) {
$("#remote-billing-confirm-email-form .alert.alert-error").remove(); if (Object.prototype.hasOwnProperty.call(error_map, key)) {
$("#remote-billing-confirm-login-form .alert.alert-error").remove(); const error = error_map[key];
const $error_element = $(`.${CSS.escape(key)}-error`);
$error_element.text(error);
$error_element.show();
}
} }
this.defaultShowErrors!();
}, },
}); });
} }

18
web/styles/portico/billing.css
View File

@ -354,6 +354,8 @@ input[name="licenses"] {
background-color: hsl(240deg 96% 68%); background-color: hsl(240deg 96% 68%);
} }
#remote-billing-confirm-login-page .white-box,
#remote-billing-confirm-email .white-box,
#server-login-page .white-box, #server-login-page .white-box,
#upgrade-page .white-box, #upgrade-page .white-box,
#billing-page .white-box, #billing-page .white-box,
@ -435,6 +437,8 @@ input[name="licenses"] {
margin-bottom: 0; margin-bottom: 0;
} }
.remote-billing-confirm-login-form-field-error,
.server-login-form-field-error,
.upgrade-page-error, .upgrade-page-error,
.sponsorship-field-error, .sponsorship-field-error,
.billing-page-error, .billing-page-error,
@ -453,6 +457,7 @@ input[name="licenses"] {
text-align: left; text-align: left;
} }
#remote-billing-confirm-login-page .pitch,
#server-login-page .pitch, #server-login-page .pitch,
.sponsorship-page .pitch, .sponsorship-page .pitch,
.sponsorship-status-page .pitch, .sponsorship-status-page .pitch,
@ -523,6 +528,8 @@ input[name="licenses"] {
background-color: hsl(0deg 70% 40%); background-color: hsl(0deg 70% 40%);
} }
#remote-billing-confirm-login-button,
#remote-billing-confirm-email-button,
#server-login-button, #server-login-button,
#org-upgrade-button { #org-upgrade-button {
margin: 0; margin: 0;
@ -580,6 +587,7 @@ input[name="licenses"] {
margin-top: 10px; margin-top: 10px;
} }
#remote-billing-confirm-email-intro .not-editable-realm-field,
#billing-page-details .billing-frequency-message.not-editable-realm-field, #billing-page-details .billing-frequency-message.not-editable-realm-field,
#free-trial-top-banner .not-editable-realm-field, #free-trial-top-banner .not-editable-realm-field,
#upgrade-page-details .license-management-section .not-editable-realm-field { #upgrade-page-details .license-management-section .not-editable-realm-field {
@ -694,6 +702,16 @@ input[name="licenses"] {
margin: 30px auto 0; margin: 30px auto 0;
} }
#remote-billing-confirm-login-button,
#remote-billing-confirm-email-button,
#billing-page-details #legacy-server-push-notification-notice-wrapper { #billing-page-details #legacy-server-push-notification-notice-wrapper {
margin-top: 10px; margin-top: 10px;
} }
#remote-billing-confirm-email-form #remote-billing-confirm-email-intro {
margin-top: -10px;
}
#remote-billing-confirm-login-form #remote-billing-confirm-login-tos-wrapper {
margin: 25px auto 10px;
}

3
web/styles/portico/portico_signin.css
View File

@ -924,6 +924,8 @@ button#register_auth_button_gitlab {
} }
} }
#remote-billing-confirm-login-form,
#remote-billing-confirm-email-form,
#server-login-page-details, #server-login-page-details,
#upgrade-page-details, #upgrade-page-details,
#billing-page-details, #billing-page-details,
@ -978,6 +980,7 @@ button#register_auth_button_gitlab {
} }
} }
&.remote-billing-confirm-login-form-field,
&.server-login-form-field, &.server-login-form-field,
&.upgrade-page-field, &.upgrade-page-field,
&.billing-page-field, &.billing-page-field,