From 7b75604826bc344502918dfcd643e1899356fdaf Mon Sep 17 00:00:00 2001
From: robbizbal <roberto.galvagno@baloise.com>
Date: Wed, 30 Oct 2024 10:03:35 +0100
Subject: [PATCH] Update Action name

---
 .github/workflows/docker-publish.yml |  2 +-
 src/templates/form.html              | 56 ++++++++++++++++++++++++----
 2 files changed, 49 insertions(+), 9 deletions(-)
diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
index 2c2f702..5b00dcc 100644
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -1,4 +1,4 @@
-name: Docker
+name: Docker build & push
 
 # This workflow uses actions that are not certified by GitHub.
 # They are provided by a third-party and are governed by
diff --git a/src/templates/form.html b/src/templates/form.html
index 9dac9e0..620cae8 100644
--- a/src/templates/form.html
+++ b/src/templates/form.html
@@ -1,14 +1,54 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>Simple Form</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YoYo MaskR</title>
 </head>
 <body>
-    <h1>upload text to mask</h1>
-    <form method="post"> 
-        <label for="name">Input:</label><br>
-        <input type="text" id="ipunt" name="input"><br><br>
-        <input type="submit" value="Submit"> 
+    <h3>Input:</h3>
+    <form id="inputForm">
+        <input type="text" id="inputData" placeholder="Enter text to anonymize" required>
+        <input type="submit" value="Submit">
     </form>
+
+    <h3>Response:</h3>
+    <textarea id="responseField" rows="10" cols="50" readonly></textarea>
+
+    <script>
+        document.getElementById('inputForm').addEventListener('submit', function(event) {
+            event.preventDefault(); // Prevent the default form submission
+
+            const inputData = document.getElementById('inputData').value;
+
+            // Use a relative URL for the API endpoint
+            const apiEndpoint = '/api/mask'; // Relative URL
+
+            // Send a POST request to the API
+            fetch(apiEndpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ text: inputData }), // Send the input data as JSON
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json(); // Parse the JSON response
+            })
+            .then(data => {
+                console.log('Success:', data); // Handle the success response
+                // Display the response in the textarea
+                document.getElementById('responseField').value = JSON.stringify(data, null, 2); // Format the JSON response
+            })
+            .catch((error) => {
+                console.error('Error:', error); // Handle any errors
+                // Optionally display the error in the textarea
+                document.getElementById('responseField').value = 'Error: ' + error.message;
+            });
+        });
+    </script>
 </body>
-</html>
\ No newline at end of file
+</html>
