From d99c77cba9aad6c8dee6286ae8084b66342ba78a Mon Sep 17 00:00:00 2001
From: Aevann1 <randomname42029@gmail.com>
Date: Sat, 6 Aug 2022 04:03:10 +0200
Subject: [PATCH] add confirmation dialog to buying awards

---
 files/assets/js/award_modal.js       | 32 ++++++++++++++++++++++------
 files/assets/js/bootstrap.js         | 18 ++++++++++------
 files/templates/award_modal.html     |  8 +++++--
 files/templates/shop.html            | 20 +++++++++++------
 files/templates/util/assetcache.html |  4 ++--
 5 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/files/assets/js/award_modal.js b/files/assets/js/award_modal.js
index 67615f80c..0f94c9930 100644
--- a/files/assets/js/award_modal.js
+++ b/files/assets/js/award_modal.js
@@ -104,12 +104,32 @@ function vote(type, id, dir, vid) {
 }
 
 function pick(kind, canbuy1, canbuy2) {
-	let buy1 = document.getElementById('buy1')
-	if (canbuy1 && kind != "grass") buy1.disabled=false;
-	else buy1.disabled=true;
-	let buy2 = document.getElementById('buy2')
-	if (canbuy2 && kind != "benefactor") buy2.disabled=false;
-	else buy2.disabled=true;
+	const buy1 = document.getElementById('buy1')
+	const buy1go = document.getElementById('buy1-go')
+	if (canbuy1 && kind != "grass")
+	{
+		buy1.disabled=false;
+		buy1go.disabled=false;
+	}
+	else
+	{
+		buy1.disabled=true;
+		buy1go.disabled=true;
+	}
+
+	const buy2 = document.getElementById('buy2')
+	const buy2go = document.getElementById('buy2-go')
+	if (canbuy2 && kind != "benefactor")
+	{
+		buy2.disabled=false;
+		buy2go.disabled=false;
+	}
+	else
+	{
+		buy2.disabled=true;
+		buy2go.disabled=true;
+	}
+
 	let ownednum = Number(document.getElementById(`${kind}-owned`).textContent);
 	document.getElementById('giveaward').disabled = (ownednum == 0);
 	document.getElementById('kind').value=kind;
diff --git a/files/assets/js/bootstrap.js b/files/assets/js/bootstrap.js
index fd1c5269f..32bd45875 100644
--- a/files/assets/js/bootstrap.js
+++ b/files/assets/js/bootstrap.js
@@ -178,8 +178,11 @@ if (document.readyState === "complete" ||
 }
 
 function post_toast(t, url, button1, button2, classname) {
-	t.disabled = true;
-	t.classList.add("disabled");
+	if (t.id != "buy1-go" && t.id != "buy2-go")
+	{
+		t.disabled = true;
+		t.classList.add("disabled");
+	}
 	const xhr = new XMLHttpRequest();
 	xhr.open("POST", url);
 	xhr.setRequestHeader('xhr', 'xhr');
@@ -209,10 +212,13 @@ function post_toast(t, url, button1, button2, classname) {
 			if (data && data["error"]) document.getElementById('toast-post-error-text').innerText = data["error"];
 			bootstrap.Toast.getOrCreateInstance(document.getElementById('toast-post-error')).show();
 		}
-		setTimeout(() => {
-			t.disabled = false;
-			t.classList.remove("disabled");
-		}, 2000);
+		if (t.id != "buy1-go" && t.id != "buy2-go")
+		{
+			setTimeout(() => {
+				t.disabled = false;
+				t.classList.remove("disabled");
+			}, 2000);
+		}
 	};
 
 	xhr.send(form);
diff --git a/files/templates/award_modal.html b/files/templates/award_modal.html
index 47854ce41..139c752ff 100644
--- a/files/templates/award_modal.html
+++ b/files/templates/award_modal.html
@@ -28,8 +28,12 @@
 					<input autocomplete="off" id="kind" name="kind" value="" hidden>
 					<textarea autocomplete="off" id="note" maxlength="200" name="note" class="form-control" placeholder="Note to include in award notification..."></textarea>
 					<input autocomplete="off" id="giveaward" class="awardbtn btn btn-primary mt-3" style="float:right" type="submit" onclick="disable(this)" value="Give Award" disabled>
-					<button id="buy1" class="awardbtn btn btn-primary mt-3 mx-3 {% if SITE_NAME == 'WPD' %}d-none{% endif %}" type="button" disabled style="float:right" onclick="buy(true)">Buy with marseybux</button>
-					<button id="buy2" class="awardbtn btn btn-primary mt-3" type="button" disabled style="float:right" onclick="buy()">Buy</button>
+
+					<button id="buy1" class="awardbtn btn btn-primary mt-3 mx-3 {% if SITE_NAME == 'WPD' %}d-none{% endif %}" type="button" disabled style="float:right" onclick="this.classList.add('d-none');document.getElementById('buy1-go').classList.remove('d-none')">Buy with marseybux</button>
+					<button id="buy1-go" class="awardbtn btn btn-primary mt-3 mx-3 d-none" type="button" disabled style="float:right" onclick="buy(true)">Are you sure?</button>
+
+					<button id="buy2" class="awardbtn btn btn-primary mt-3" type="button" disabled style="float:right" onclick="this.classList.add('d-none');document.getElementById('buy2-go').classList.remove('d-none')">Buy</button>
+					<button id="buy2-go" class="awardbtn btn btn-primary mt-3 d-none" type="button" disabled style="float:right" onclick="buy()">Are you sure?</button>
 					<pre>
 					</pre>
 				</form>
diff --git a/files/templates/shop.html b/files/templates/shop.html
index a85a69bda..405530575 100644
--- a/files/templates/shop.html
+++ b/files/templates/shop.html
@@ -6,10 +6,6 @@
 	}[SITE_NAME]
 -%}
 
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<img src='/i/chest.webp' width='20'>">
-	Tooltip with HTML
-  </button>
-
 {% block title %}
 <title>Shop</title>
 {% endblock %}
@@ -31,6 +27,12 @@
 {% endblock %}
 
 {% block content %}
+	<style>
+		#buy1, #buy1-go, #buy2, #buy2-go {
+			display: flex;
+		}
+	</style>
+
 	{% if error %}
 	<div class="alert alert-danger alert-dismissible fade show my-3" role="alert">
 		<i class="fas fa-exclamation-circle my-auto"></i>
@@ -83,9 +85,15 @@
 				<td class="shop-table-owned">{{a['owned']}}</td>
 				{% set kind = a['kind'] %}
 				<td class="shop-table-actions">
-					{% if a['kind'] != "benefactor" %}<a class="d-flex btn btn-success {% if v.coins < a['price'] %}disabled{% endif %}" role="button" onclick="post_toast(this,'/buy/{{kind}}')"><span class="m-auto">Buy</span></a>{% endif %}
+					{% if a['kind'] != "benefactor" %}
+						<a id="buy1" class="btn btn-success {% if v.coins < a['price'] %}disabled{% endif %}" role="button" onclick="this.classList.add('d-none');document.getElementById('buy1-go').classList.remove('d-none')"><span class="m-auto">Buy</span></a>
+						<a id="buy1-go" class="d-none btn btn-success {% if v.coins < a['price'] %}disabled{% endif %}" role="button" onclick="post_toast(this,'/buy/{{kind}}')"><span class="m-auto">Are you sure?</span></a>
+					{% endif %}
 					{% if FEATURES['PROCOINS'] %}
-						{% if a['kind'] != "grass" %}<a class="d-flex marseybux btn btn-success {% if v.procoins < a['price'] %}disabled{% endif %}" role="button" onclick="post_toast(this,'/buy/{{kind}}?mb=true')"><span class="m-auto">Buy with MBux</span></a>{% endif %}
+						{% if a['kind'] != "grass" %}
+							<a id="buy2" class="marseybux btn btn-success {% if v.procoins < a['price'] %}disabled{% endif %}" role="button" onclick="this.classList.add('d-none');document.getElementById('buy2-go').classList.remove('d-none')""><span class="m-auto">Buy with MBux</span></a>
+							<a id="buy2-go" class="d-none marseybux btn btn-success {% if v.procoins < a['price'] %}disabled{% endif %}" role="button" onclick="post_toast(this,'/buy/{{kind}}?mb=true')"><span class="m-auto">Are you sure?</span></a>
+						{% endif %}
 					{% endif %}
 				</td>
 				<td class="shop-table-description">{{a['description']}}</td>
diff --git a/files/templates/util/assetcache.html b/files/templates/util/assetcache.html
index 67f83f084..d470c1843 100644
--- a/files/templates/util/assetcache.html
+++ b/files/templates/util/assetcache.html
@@ -16,8 +16,8 @@ set CACHE_VER = {
 	'css/tron.css': 61,
 	'css/win98.css': 63,
 
-	'js/award_modal.js': 253,
-	'js/bootstrap.js': 275,
+	'js/award_modal.js': 254,
+	'js/bootstrap.js': 276,
 	'js/comments+submission_listing.js': 265,
 	'js/submission_listing.js': 261,
 	'js/emoji_modal.js': 312,