add confirmation dialog to buying awards

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;

files/assets/js/bootstrap.js

@@ -178,8 +178,11 @@ if (document.readyState === "complete" ||
 }
 
 function post_toast(t, url, button1, button2, classname) {
+	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();
 		}
+		if (t.id != "buy1-go" && t.id != "buy2-go")
+		{
 			setTimeout(() => {
 				t.disabled = false;
 				t.classList.remove("disabled");
 			}, 2000);
+		}
 	};
 
 	xhr.send(form);

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>

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>

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,