From 8a282012e3ee9e48c4e93ae64295d37e3b5f29de Mon Sep 17 00:00:00 2001
From: Charles Le Maux <charles.le-maux@epitech.eu>
Date: Tue, 10 Sep 2024 01:05:36 +0200
Subject: [PATCH] [+] Updated testing page

---
 api_sender.html | 156 ++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 138 insertions(+), 18 deletions(-)
diff --git a/api_sender.html b/api_sender.html
index bc6255c..8a02693 100644
--- a/api_sender.html
+++ b/api_sender.html
@@ -2,17 +2,76 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>API Interaction Form</title>
+    <title>File Upload and API Interaction Form</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f0f0f0;
+        }
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            background-color: #ffffff;
+            padding: 20px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+        }
+        input[type="file"], input[type="text"], input[type="number"] {
+            padding: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+        button {
+            padding: 12px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        button:hover {
+            background-color: #0056b3;
+        }
+        .message {
+            margin-top: 10px;
+            padding: 12px;
+            border-radius: 4px;
+        }
+        .success {
+            background-color: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
+        }
+        .error {
+            background-color: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+    </style>
 </head>
 <body>
 
-<h2>Generic Calls</h2>
+<h2>File Upload Form</h2>
+<form id="uploadForm">
+    <input type="file" id="files" accept=".zip,.jar,.txt" multiple required>
+    <button type="submit">Upload File</button>
+</form>
+
+<div id="message" class="message"></div>
+
+<h2>API Interaction Form</h2>
 <form id="genericForm">
-    Email: <label for="accountEmail"></label><input type="text" id="accountEmail"><br>
-    Port: <label for="accountPort"></label><input type="number" id="accountPort"><br>
-    Name: <label for="serverName"></label><input type="text" id="serverName"><br>
-    Version: <label for="serverVersion"></label><input type="text" id="serverVersion"><br>
-    Framework: <label for="serverFramework"></label><input type="text" id="serverFramework"><br>
+    Email: <input type="text" id="accountEmail"><br>
+    Port: <input type="number" id="accountPort"><br>
+    Name: <input type="text" id="serverName"><br>
+    Version: <input type="text" id="serverVersion"><br>
+    Framework: <input type="text" id="serverFramework"><br>
     <button type="button" class="actionButton" data-action="AccountCreate">Create Account</button>
     <button type="button" class="actionButton" data-action="AccountDelete">Delete Account</button>
     <button type="button" class="actionButton" data-action="ServerCreate">Create Server</button>
@@ -22,34 +81,84 @@
     <button type="button" class="actionButton" data-action="FetchServers">Fetch Servers</button>
     <button type="button" class="actionButton" data-action="FetchLogs">Fetch Logs</button>
     <button type="button" class="actionButton" data-action="FetchPlayersStatus">Fetch Players Status</button>
-
 </form>
 
 <h2>Update Property</h2>
 <form id="updatePropertyForm">
-    Property: <label for="update_property"></label><input type="text" id="update_property"><br>
-    Value: <label for="update_value"></label><input type="text" id="update_value"><br>
+    Property: <input type="text" id="update_property"><br>
+    Value: <input type="text" id="update_value"><br>
     <button type="button" class="actionButton" data-action="UpdateProperties">Update Property</button>
 </form>
 
 <h2>Send Command</h2>
 <form id="sendCommandForm">
-    Command: <label for="command"></label><input type="text" id="command"><br>
+    Command: <input type="text" id="command"><br>
     <button type="button" class="actionButton" data-action="Command">Send command</button>
 </form>
 
 <h2>Set Subdomain</h2>
-<form id="sendCommandForm">
-    Command: <label for="subdomain"></label><input type="text" id="subdomain"><br>
-    <button type="button" class="actionButton" data-action="SetSubdomain">Send command</button>
+<form id="setSubdomainForm">
+    Subdomain: <input type="text" id="subdomain"><br>
+    <button type="button" class="actionButton" data-action="SetSubdomain">Set Subdomain</button>
 </form>
 
 <script>
 document.addEventListener('DOMContentLoaded', () => {
+    const uploadForm = document.getElementById('uploadForm');
+    const genericForm = document.getElementById('genericForm');
+    const updatePropertyForm = document.getElementById('updatePropertyForm');
+    const sendCommandForm = document.getElementById('sendCommandForm');
+    const setSubdomainForm = document.getElementById('setSubdomainForm');
+    const messageDiv = document.getElementById('message');
+
+    // File Upload functionality
+    uploadForm.addEventListener('submit', async event => {
+        event.preventDefault();
+        const fileInput = document.getElementById('files');
+        const filesLength = fileInput.files.length;
+
+        if (filesLength === 0) {
+            showMessage('Please select at least one file.', 'error');
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append('name', 'local');
+        formData.append('token', 'MpkbDMOO8PQddQgB5VgBQdTMWF53');
+        for (let i = 0; i < filesLength; i++) {
+            formData.append(`${i}`, fileInput.files[i]);
+        }
+
+        try {
+            const response = await fetch('http://localhost:3000/Upload', {
+                method: 'POST',
+                body: formData
+            });
+
+            if (!response.ok) {
+                const errorMessage = await response.text();
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(errorMessage, 'text/html');
+                const title = doc.querySelector('title')?.textContent || 'Unknown Error';
+                const description = doc.querySelector('p')?.textContent || 'Unable to determine error description.';
+
+                showMessage(`${title}: ${description}`, 'error');
+            } else {
+                const result = await response.json();
+                showMessage(`File uploaded successfully. Filename: ${result.filename}`, 'success');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            showMessage('An error occurred. Please try again.', 'error');
+        }
+    });
+
+    // API Interaction functionality
     const buttons = document.querySelectorAll('.actionButton');
 
     buttons.forEach(button => {
         button.addEventListener('click', async event => {
+            event.preventDefault();
             const action = button.dataset.action;
             const token = "MpkbDMOO8PQddQgB5VgBQdTMWF53";
             const framework = document.getElementById('serverFramework').value;
@@ -63,6 +172,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const command = document.getElementById('command').value;
             const props = [[prop, value], ["max-players", "666"]];
             let data = {};
+
             switch(action) {
                 case 'FetchServers':
                     data = {token};
@@ -98,13 +208,14 @@ document.addEventListener('DOMContentLoaded', () => {
                     data = {port, name, command, token};
                     break;
                 case 'SetSubdomain':
-                    data = {token, subdomain}
+                    data = {token, subdomain};
                     break;
             }
+
             sendRequest(action, data)
-                .then(response => response.text())
-                .then(data => alert(`Response: ${data}`))
-                .catch(error => console.error('Error:', error));          
+               .then(response => response.text())
+               .then(data => alert(`Response: ${data}`))
+               .catch(error => console.error('Error:', error));
         });
     });
 
@@ -117,6 +228,15 @@ document.addEventListener('DOMContentLoaded', () => {
             body: JSON.stringify(payload)
         });
     }
+
+    function showMessage(message, type) {
+        messageDiv.textContent = message;
+        messageDiv.className = `message ${type}`;
+        setTimeout(() => {
+            messageDiv.textContent = '';
+            messageDiv.className ='message';
+        }, 5000);
+    }
 });
 </script>
 
