From d116849474673a90b416e3963e80b73d1450fe14 Mon Sep 17 00:00:00 2001
From: Fionera <fionera@fionera.de>
Date: Wed, 15 Nov 2023 03:15:51 +0100
Subject: [PATCH] thongs

---
 validator_fingerprint.go    | 12 ++++++++++--
 web/index.html              |  1 +
 web/src/challange/loader.js |  7 ++++++-
 web/src/main.js             | 16 +++++++++++-----
 web/src/style.scss          | 22 +++++++++++++---------
 5 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/validator_fingerprint.go b/validator_fingerprint.go
index 4ce04ab..0b85926 100644
--- a/validator_fingerprint.go
+++ b/validator_fingerprint.go
@@ -1,9 +1,17 @@
 package berghain
 
+import "net/http"
+
 const validatorFingerprintResponse = `{"t": 2}`
 
 func validatorFingerprint(b *Berghain, req *ValidatorRequest, resp *ValidatorResponse) error {
-	copy(resp.Body.WriteNBytes(len(validatorFingerprintResponse)), validatorFingerprintResponse)
+	switch req.Method {
+	case http.MethodGet:
+		copy(resp.Body.WriteNBytes(len(validatorFingerprintResponse)), validatorFingerprintResponse)
+		return nil
+	case http.MethodPost:
+		return req.Identifier.ToCookie(b, resp.Token)
+	}
 
-	return req.Identifier.ToCookie(b, resp.Token)
+	return nil
 }
diff --git a/web/index.html b/web/index.html
index a0625f8..e5a4891 100644
--- a/web/index.html
+++ b/web/index.html
@@ -42,5 +42,6 @@ <h3 class="heading">Request on Hold</h3>
       </g>
     </svg>
   </div>
+  <div class="error-container"></div>
 </div>
 </body>
diff --git a/web/src/challange/loader.js b/web/src/challange/loader.js
index fba586a..3907a41 100644
--- a/web/src/challange/loader.js
+++ b/web/src/challange/loader.js
@@ -7,7 +7,12 @@
  */
 export function start() {
     const loader = /** @type {HTMLDivElement} */ (document.querySelector(".circle-loader"));
-    loader.style.display = "inline-block";
+    loader.style.visibility = "visible";
+}
+
+export function showError(error) {
+    const errors = /** @type {HTMLDivElement} */ (document.querySelector(".error-container"));
+    errors.insertAdjacentHTML("beforeend", `<p>Error: ${error}</p>`)
 }
 
 /**
diff --git a/web/src/main.js b/web/src/main.js
index 49a9db1..c0d2ffe 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -11,11 +11,17 @@ import * as loader from "./challange/loader.js";
         }
 
         loader.start();
-        const result = await doChallenge()
-        loader.stop(!!result);
-
-        if (!result) {
-            setTimeout(() => {window.location.reload();}, 1000);
+        try {
+            const result = await doChallenge()
+            loader.stop(!!result);
+        } catch (e) {
+            loader.showError(e)
+            loader.stop(true);
+            return;
         }
+
+        setTimeout(() => {
+            window.location.reload();
+        }, 1000);
     });
 })();
diff --git a/web/src/style.scss b/web/src/style.scss
index c1042b8..815ef4e 100644
--- a/web/src/style.scss
+++ b/web/src/style.scss
@@ -20,7 +20,6 @@
         > .heading {
             font-size: 3em;
             font-weight: bold;
-            margin-bottom: 1.5em;
         }
     }
 }
@@ -42,19 +41,23 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
+    margin: .5em 0 .5em 0;
 }
 
+$circleSize: 3em;
+
 .circle-loader {
-    margin-bottom: 1.5em;
+    visibility: hidden;
+    margin-left: auto;
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-left-color: #000;
     animation: loader-spin 1.2s infinite linear;
     position: relative;
-    display: none;
+    display: inline-block;
     vertical-align: top;
     border-radius: 50%;
-    width: 7em;
-    height: 7em;
+    width: $circleSize;
+    height: $circleSize;
 
     &.load-complete {
         -webkit-animation: none;
@@ -88,6 +91,7 @@
     }
 }
 
+
 .cross {
     display: none;
     transform: rotate(45deg);
@@ -99,11 +103,11 @@
         content: '';
         position: absolute;
         width: 3px;
-        height: 5em;
+        height: $circleSize;
         background: #000;
         top: 50%;
         left: 50%;
-        margin-top: -2.5em;
+        margin-top: calc($circleSize / 2 * -1);
         margin-left: -1.5px;
     }
 
@@ -152,9 +156,9 @@
 
 @keyframes drawCross {
     0% {
-        height: 0;
+        scale: 0;
     }
     100% {
-        height: 5em;
+        scale: 1;
     }
 }