From 188b2610006e444326b91837d649c83e509f20d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Wed, 11 Jan 2023 14:50:01 +0200
Subject: [PATCH] Improve the "Send test message!" button
---
static/css/bootstrap-colors.css | 7 +++++++
static/css/signal_form.css | 11 +++++++++++
static/js/signal_form.js | 10 ++++++----
templates/accounts/add_credential.html | 8 ++------
templates/base.html | 1 +
templates/integrations/signal_form.html | 8 ++++++--
6 files changed, 33 insertions(+), 12 deletions(-)
create mode 100644 static/css/signal_form.css
diff --git a/static/css/bootstrap-colors.css b/static/css/bootstrap-colors.css
index 148a71e6..890a96ba 100644
--- a/static/css/bootstrap-colors.css
+++ b/static/css/bootstrap-colors.css
@@ -16,6 +16,13 @@
border-color: var(--btn-active-border);
}
+.btn-default:disabled,
+.btn-default:disabled:hover,
+.btn-default:disabled:focus {
+ border-color: var(--btn-default-border);
+ background-color: var(--btn-default-bg);
+}
+
.open > .dropdown-toggle.btn-default,
.open > .dropdown-toggle.btn-default:active,
.open > .dropdown-toggle.btn-default:hover,
diff --git a/static/css/signal_form.css b/static/css/signal_form.css
new file mode 100644
index 00000000..6d7964ee
--- /dev/null
+++ b/static/css/signal_form.css
@@ -0,0 +1,11 @@
+#signal-verify-btn:disabled span {
+ opacity: 0;
+}
+
+#signal-verify-btn:disabled .spinner {
+ position: absolute;
+ top: 50%;
+ margin-top: -2px;
+ left: 50%;
+ display: block;
+}
\ No newline at end of file
diff --git a/static/js/signal_form.js b/static/js/signal_form.js
index 87971ede..f2b6e783 100644
--- a/static/js/signal_form.js
+++ b/static/js/signal_form.js
@@ -3,8 +3,11 @@ $(function() {
$("#submit-btn").attr("disabled", true);
});
- $("#verify-btn").click(function() {
- $("#verify-btn").attr("disabled", true);
+ // Show a tooltip on the submit button only if it is disabled
+ $("body").tooltip({selector: "#submit-btn:disabled"});
+
+ $("#signal-verify-btn").click(function() {
+ $("#signal-verify-btn").attr("disabled", true);
var url = this.dataset.verifyUrl;
var token = $('input[name=csrfmiddlewaretoken]').val();
@@ -16,9 +19,8 @@ $(function() {
success: function(data) {
$("#verify-result").html(data);
$("#submit-btn").attr("disabled", data.indexOf("alert-success") == -1);
- $("#verify-btn").attr("disabled", false);
+ $("#signal-verify-btn").attr("disabled", false);
}
});
-
});
})
\ No newline at end of file
diff --git a/templates/accounts/add_credential.html b/templates/accounts/add_credential.html
index 5e2fd107..dc562fa4 100644
--- a/templates/accounts/add_credential.html
+++ b/templates/accounts/add_credential.html
@@ -38,15 +38,11 @@
<div id="waiting" class="hide">
<h2>Waiting for security key</h2>
<p>
- Follow your browser's steps to register your security key
+ Follow your browser's instructions to register your security key
with {% site_name %}.
</p>
- <div class="spinner started">
- <div class="d1"></div>
- <div class="d2"></div>
- <div class="d3"></div>
- </div>
+ <div class="spinner started"></div>
</div>
<div id="error" class="alert alert-danger hide">
diff --git a/templates/base.html b/templates/base.html
index 0a9410b0..e713599f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -57,6 +57,7 @@
<link rel="stylesheet" href="{% static 'css/snippet-copy.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/syntax.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/set_password.css' %}" type="text/css">
+ <link rel="stylesheet" href="{% static 'css/signal_form.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/project.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/signup.css' %}" type="text/css">
{% endcompress %}
diff --git a/templates/integrations/signal_form.html b/templates/integrations/signal_form.html
index ef950e2e..1600a190 100644
--- a/templates/integrations/signal_form.html
+++ b/templates/integrations/signal_form.html
@@ -59,10 +59,13 @@ Signal Settings - {% site_name %}
<span class="input-group-btn">
<button
- id="verify-btn"
+ id="signal-verify-btn"
type="button"
class="btn btn-default"
- data-verify-url="{% url 'hc-signal-verify' %}">Send Test Message!</button>
+ data-verify-url="{% url 'hc-signal-verify' %}">
+ <span>Send Test Message!</span>
+ <div class="spinner"></div>
+ </button>
</span>
</div>
@@ -116,6 +119,7 @@ Signal Settings - {% site_name %}
id="submit-btn"
type="submit"
class="btn btn-primary"
+ title="Please verify the number by sending a test message first."
disabled>Save Integration</button>
</div>
</div>