From 72dc9b61a4db806fc4742bf9ad83256d100169dc Mon Sep 17 00:00:00 2001
From: Kaja <kaja.osojnik@gmail.com>
Date: Tue, 7 Jan 2025 14:38:10 +0100
Subject: [PATCH] Style success and error messages

---
 faucet-frontend/src/main.js | 54 ++++++++++++++++++++++---------------
 1 file changed, 32 insertions(+), 22 deletions(-)

diff --git a/faucet-frontend/src/main.js b/faucet-frontend/src/main.js
index 63ac4f5..4bd7ddc 100644
--- a/faucet-frontend/src/main.js
+++ b/faucet-frontend/src/main.js
@@ -1,26 +1,33 @@
 // @ts-check
 
 function showResponseStatus(error, status, requestBody) {
-  document.querySelector('#request-form').style.display = 'none';
-  document.querySelector('#response-display').style.display = 'block';
+  document.querySelector("#request-form").style.display = "none";
+  document.querySelector("#response-display").style.display = "block";
+  document.querySelector("#response-display-text").style.textAlign = "center";
   if (error) {
-    document.querySelector('#response-display-text').textContent = error;
+    document.querySelector("#response-display-text").textContent = error;
+    document.querySelector("#response-display-text").style.color = "#d1001f";
   } else {
-    document.querySelector('#response-display-text').textContent = status;
-    if (requestBody.get('paratime') === 'emerald') {}
-    if (requestBody.get('paratime') === 'sapphire') {}
+    document.querySelector("#response-display-text").textContent = status;
+    document.querySelector("#response-display-text").style.color = "#4BB543";
+    if (requestBody.get("paratime") === "emerald") {
+    }
+    if (requestBody.get("paratime") === "sapphire") {
+    }
   }
 }
 function showLoading(bool) {
-  document.querySelector('#request-form-submit').disabled = bool;
+  document.querySelector("#request-form-submit").disabled = bool;
 }
 
 /** Support /?paratime=sapphire */
 function preselectParatimeFromURL() {
-  const paratimeInUrl = new URL(window.location.href).searchParams.get('paratime');
+  const paratimeInUrl = new URL(window.location.href).searchParams.get(
+    "paratime"
+  );
   const paratimeSelect =
-      /** @type {HTMLSelectElement} */
-      (document.querySelector('#paratime'));
+    /** @type {HTMLSelectElement} */
+    (document.querySelector("#paratime"));
 
   for (const option of paratimeSelect.options) {
     if (option.value === paratimeInUrl) {
@@ -29,7 +36,7 @@ function preselectParatimeFromURL() {
   }
 }
 
-document.querySelector('#request-form').addEventListener('submit', (event) => {
+document.querySelector("#request-form").addEventListener("submit", (event) => {
   try {
     showLoading(true);
 
@@ -37,23 +44,26 @@ document.querySelector('#request-form').addEventListener('submit', (event) => {
       /** @type {HTMLFormElement} */
       (event.currentTarget);
     const url = form.action;
-    const requestBody = new URLSearchParams(new FormData(form))
+    const requestBody = new URLSearchParams(new FormData(form));
 
     fetch(url, {
-      method: 'POST',
+      method: "POST",
       body: requestBody,
       headers: {
-        Accept: 'application/json',
+        Accept: "application/json",
       },
     })
-      .then(response => response.json())
-      .then((responseJson) => {
-        showLoading(false);
-        showResponseStatus(null, responseJson.result, requestBody);
-      }, (error) => {
-        showLoading(false);
-        showResponseStatus(error, null, requestBody);
-      });
+      .then((response) => response.json())
+      .then(
+        (responseJson) => {
+          showLoading(false);
+          showResponseStatus(null, responseJson.result, requestBody);
+        },
+        (error) => {
+          showLoading(false);
+          showResponseStatus(error, null, requestBody);
+        }
+      );
 
     // Only prevent native form POST if no errors were thrown until `fetch`
     event.preventDefault();