Merge pull request #5 from devinbaeten/cf-turnstile

Add Turnstile
devinbaeten · Mar 9, 2023 · 929f594 · 929f594
2 parents 5b19ac4 + d506972
commit 929f594
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 39 deletions.
diff --git a/docs/assets/index-534402ff.js → docs/assets/index-cb6c0f1b.js b/docs/assets/index-534402ff.js → docs/assets/index-cb6c0f1b.js
diff --git a/docs/index.html b/docs/index.html
@@ -18,7 +18,8 @@
 
 	  gtag('config', 'G-9ZECMCE1K5');
 	</script>
-  <script type="module" crossorigin src="/assets/index-534402ff.js"></script>
+	<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+  <script type="module" crossorigin src="/assets/index-cb6c0f1b.js"></script>
   <link rel="stylesheet" href="/assets/index-d1d1ec34.css">
 </head>
 <body>
@@ -38,6 +39,13 @@
 			</div>
 		</nav>
 		<div class="container mt-3 mb-5">
+			<div class="alert bg-warning" id="turnstileClearance">
+				<h2 class="mt-1">
+					One Moment...
+				</h2>
+				<span class="">In an effort to deter bots, we now require automatic validation of your browser when visiting this site. You may be required to complete a challenge as part of this process.</span>
+				<div class="cf-turnstile mt-3" data-sitekey="0x4AAAAAAADDviGXS3cvoFLE" data-callback="tsComplete"></div>
+			</div>
 			<div class="alert alert-danger d-none">
 				<span>
 					<b>Warning:</b>
@@ -61,7 +69,7 @@
 				</div>
 			</nav>
 			<div class="tab-content" id="nav-tabContent">
-				<div id="dashboard" class="tab-pane fade show active" role="tabpanel" aria-labelledby="nav-dashboard-tab" tabindex="0">
+				<div id="dashboard" class="tab-pane fade show active opacity-25" role="tabpanel" aria-labelledby="nav-dashboard-tab" tabindex="0">
 					<div class="card mb-3">
 						<div class="card-body">
 							<div class="hstack justify-content-between">
@@ -119,10 +127,10 @@ <h3 class="mb-0">Americas</h3>
 									<div class="card p-2">
 										<div class="vstack text-center">
 											<span class="font-monospace fs-3" id="us_central_live_latest_ts">
-											00:00:00 XM
+											--:--:-- --
 											</span>
 											<span class="text-secondary small" id="us_central_live_latest_rel">
-											2m ago
+											-- ago
 											</span>
 										</div>
 									</div>
@@ -168,10 +176,10 @@ <h3 class="mb-0">Europe</h3>
 									<div class="card p-2">
 										<div class="vstack text-center">
 											<span class="font-monospace fs-3" id="europe_west_live_latest_ts">
-											00:00:00 XM
+											--:--:-- --
 											</span>
 											<span class="text-secondary small" id="europe_west_live_latest_rel">
-											2m ago
+											-- ago
 											</span>
 										</div>
 									</div>
@@ -217,10 +225,10 @@ <h3 class="mb-0">East Asia</h3>
 									<div class="card p-2">
 										<div class="vstack text-center">
 											<span class="font-monospace fs-3" id="asia_east_live_latest_ts">
-											00:00:00 XM
+											--:--:-- --
 											</span>
 											<span class="text-secondary small" id="asia_east_live_latest_rel">
-											2m ago
+											-- ago
 											</span>
 										</div>
 									</div>
@@ -266,10 +274,10 @@ <h3 class="mb-0">West Asia</h3>
 									<div class="card p-2">
 										<div class="vstack text-center">
 											<span class="font-monospace fs-3" id="asia_west_live_latest_ts">
-											00:00:00 XM
+											--:--:-- --
 											</span>
 											<span class="text-secondary small" id="asia_west_live_latest_rel">
-											2m ago
+											-- ago
 											</span>
 										</div>
 									</div>
@@ -736,5 +744,10 @@ <h2>Contact The Developer</h2>
 		</footer>
 	</div>
 
+	<script>
+		function tsComplete() {
+			setToken(turnstile.getResponse());
+		}
+	</script>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bereal-time-history",
   "private": true,
-  "version": "2.0.3",
+  "version": "2.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/index.html b/src/index.html
@@ -18,6 +18,7 @@
 
 	  gtag('config', 'G-9ZECMCE1K5');
 	</script>
+	<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
 </head>
 <body>
 	<main>
@@ -36,6 +37,13 @@
 			</div>
 		</nav>
 		<div class="container mt-3 mb-5">
+			<div class="alert bg-warning" id="turnstileClearance">
+				<h2 class="mt-1">
+					One Moment...
+				</h2>
+				<span class="">In an effort to deter bots, we now require automatic validation of your browser when visiting this site. You may be required to complete a challenge as part of this process.</span>
+				<div class="cf-turnstile mt-3" data-sitekey="0x4AAAAAAADDviGXS3cvoFLE" data-callback="tsComplete"></div>
+			</div>
 			<div class="alert alert-danger d-none">
 				<span>
 					<b>Warning:</b>
@@ -59,7 +67,7 @@
 				</div>
 			</nav>
 			<div class="tab-content" id="nav-tabContent">
-				<div id="dashboard" class="tab-pane fade show active" role="tabpanel" aria-labelledby="nav-dashboard-tab" tabindex="0">
+				<div id="dashboard" class="tab-pane fade show active opacity-25" role="tabpanel" aria-labelledby="nav-dashboard-tab" tabindex="0">
 					<div class="card mb-3">
 						<div class="card-body">
 							<div class="hstack justify-content-between">
@@ -117,10 +125,10 @@ <h3 class="mb-0">Americas</h3>
 									<div class="card p-2">
 										<div class="vstack text-center">
 											<span class="font-monospace fs-3" id="us_central_live_latest_ts">
-											00:00:00 XM
+											--:--:-- --
 											</span>
 											<span class="text-secondary small" id="us_central_live_latest_rel">
-											2m ago
+											-- ago
 											</span>
 										</div>
 									</div>
@@ -166,10 +174,10 @@ <h3 class="mb-0">Europe</h3>
 									<div class="card p-2">
 										<div class="vstack text-center">
 											<span class="font-monospace fs-3" id="europe_west_live_latest_ts">
-											00:00:00 XM
+											--:--:-- --
 											</span>
 											<span class="text-secondary small" id="europe_west_live_latest_rel">
-											2m ago
+											-- ago
 											</span>
 										</div>
 									</div>
@@ -215,10 +223,10 @@ <h3 class="mb-0">East Asia</h3>
 									<div class="card p-2">
 										<div class="vstack text-center">
 											<span class="font-monospace fs-3" id="asia_east_live_latest_ts">
-											00:00:00 XM
+											--:--:-- --
 											</span>
 											<span class="text-secondary small" id="asia_east_live_latest_rel">
-											2m ago
+											-- ago
 											</span>
 										</div>
 									</div>
@@ -264,10 +272,10 @@ <h3 class="mb-0">West Asia</h3>
 									<div class="card p-2">
 										<div class="vstack text-center">
 											<span class="font-monospace fs-3" id="asia_west_live_latest_ts">
-											00:00:00 XM
+											--:--:-- --
 											</span>
 											<span class="text-secondary small" id="asia_west_live_latest_rel">
-											2m ago
+											-- ago
 											</span>
 										</div>
 									</div>
@@ -734,5 +742,10 @@ <h2>Contact The Developer</h2>
 		</footer>
 	</div>
 	<script type="module" src="./js/main.js"></script>
+	<script>
+		function tsComplete() {
+			setToken(turnstile.getResponse());
+		}
+	</script>
 </body>
 </html>
diff --git a/src/js/app.js b/src/js/app.js
@@ -13,10 +13,17 @@ import Chart from 'chart.js/auto';
 
 var cftsr = "NONE";
 
-window.setAuth = function(string) {
-	cftsr = string;
+function setToken(token) {
+	$("#dashboard").removeClass("opacity-25");
+	setTimeout(function() {
+		$("#turnstileClearance").addClass("d-none");
+	}, 1000);
+	cftsr = token;
 }
 
+// Attach the function to the window object
+window.setToken = setToken;
+
 // Charts
 
 // US-CENTRAL
@@ -292,7 +299,7 @@ function refresh() {
 		    crossDomain: true,
 		    jsonpCallback: "callback",
 		    headers: {
-			"brth-client-auth": cftsr
+				"brth-client-auth": cftsr
 		    },
 		    success: callback,
 		    error: failed
@@ -560,7 +567,9 @@ function refresh() {
 	}
 
 	function failed(xhr, ajaxOptions, thrownError) {
-		showError('bg-danger', 'Connection failed (Error ' + xhr.status + ')');
+		if (cftsr !== "NONE") {
+			showError('bg-danger', 'Connection failed (Error ' + xhr.status + ')');
+		}
 	}
 
 }