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
# to confirm and verify the email address.
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(
[f'action="/remote-billing-login/{signed_access_token}/confirm/"'], result
@ -79,7 +79,7 @@ class RemoteBillingAuthenticationTest(BouncerTestCase):
)
self.assertEqual(result.status_code, 200)
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,
)
confirmation_url = self.get_confirmation_url_from_outbox(
@ -475,7 +475,7 @@ class LegacyServerLoginTest(BouncerTestCase):
)
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:
self.assert_in_success_response(
[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.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(

20
templates/corporate/remote_billing_confirm_email_form.html
View File

@ -2,16 +2,14 @@
{% set entrypoint = "upgrade" %}
{% block title %}
<title>{{ _("Login confirmation - email") }} | Zulip</title>
<title>Enter log in email | Zulip</title>
{% endblock %}
{% 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="pitch">
<h1>Enter your email address</h1>
<p>Next, we will send a verification email to the address you provide.</p>
<h1>Enter log in email</h1>
</div>
<div class="white-box">
<form id="remote-billing-confirm-email-form" method="post" action="{{ action_url }}">
@ -19,9 +17,19 @@
{% if next_page %}
<input type="hidden" name="next_page" value="{{ next_page }}" />
{% 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">
<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 class="upgrade-button-container">
<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" %}
{% block title %}
<title>{{ _("Confirm your email address") }} | Zulip</title>
<title>Log in link sent | Zulip</title>
{% endblock %}
{% block portico_content %}
@ -11,11 +11,11 @@
<div class="inline-block">
<div class="get-started">
<h1>{{ _("Confirm your email address") }}</h1>
<h1>Log in link sent</h1>
</div>
<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' %}
</div>

24
templates/corporate/remote_billing_finalize_login_confirmation.html
View File

@ -2,30 +2,38 @@
{% set entrypoint = "upgrade" %}
{% block title %}
<title>{{ _("Zulip plan management login confirmation") }} | Zulip</title>
<title>Log in to Zulip plan management for {{ host }} | Zulip</title>
{% endblock %}
{% block portico_content %}
<div id="remote-billing-confirm-login-page" class="register-account flex full-page">
<div class="center-block new-style">
<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 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 }}">
{{ csrf_input }}
<div class="input-box remote-billing-confirm-login-form-field">
<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 %} />
<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>
{% if tos_consent_needed %}
<div class="input-group terms-of-service">
<label for="id_terms" class="inline-block checkbox">
<input id="id_terms" name="tos_consent" class="required" type="checkbox" value="true" />
<div class="input-group terms-of-service remote-billing-confirm-login-form-field" id="remote-billing-confirm-login-tos-wrapper">
<label for="remote-billing-confirm-login-tos" class="inline-block checkbox">
<input id="remote-billing-confirm-login-tos" name="tos_consent" class="required" type="checkbox" value="true" />
<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>
</div>
{% endif %}

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

@ -19,19 +19,18 @@ export function initialize(): void {
form.submit();
},
invalidHandler() {
// this removes all previous errors that were put on screen
// 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();
$("*[class$='-error']").hide();
},
showErrors(error_map) {
if (error_map.password) {
$("#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();
$("*[class$='-error']").hide();
for (const key in error_map) {
if (Object.prototype.hasOwnProperty.call(error_map, key)) {
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%);
}
#remote-billing-confirm-login-page .white-box,
#remote-billing-confirm-email .white-box,
#server-login-page .white-box,
#upgrade-page .white-box,
#billing-page .white-box,
@ -435,6 +437,8 @@ input[name="licenses"] {
margin-bottom: 0;
}
.remote-billing-confirm-login-form-field-error,
.server-login-form-field-error,
.upgrade-page-error,
.sponsorship-field-error,
.billing-page-error,
@ -453,6 +457,7 @@ input[name="licenses"] {
text-align: left;
}
#remote-billing-confirm-login-page .pitch,
#server-login-page .pitch,
.sponsorship-page .pitch,
.sponsorship-status-page .pitch,
@ -523,6 +528,8 @@ input[name="licenses"] {
background-color: hsl(0deg 70% 40%);
}
#remote-billing-confirm-login-button,
#remote-billing-confirm-email-button,
#server-login-button,
#org-upgrade-button {
margin: 0;
@ -580,6 +587,7 @@ input[name="licenses"] {
margin-top: 10px;
}
#remote-billing-confirm-email-intro .not-editable-realm-field,
#billing-page-details .billing-frequency-message.not-editable-realm-field,
#free-trial-top-banner .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;
}
#remote-billing-confirm-login-button,
#remote-billing-confirm-email-button,
#billing-page-details #legacy-server-push-notification-notice-wrapper {
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,
#upgrade-page-details,
#billing-page-details,
@ -978,6 +980,7 @@ button#register_auth_button_gitlab {
}
}
&.remote-billing-confirm-login-form-field,
&.server-login-form-field,
&.upgrade-page-field,
&.billing-page-field,