From 25beccf339b7846ea4d852321fc30048efe3a62c Mon Sep 17 00:00:00 2001
From: aa243527 <abdelmounaim.ammari@etu.univ-lehavre.fr>
Date: Sat, 8 Mar 2025 09:00:20 +0100
Subject: [PATCH] feat: adding UI interfaces and consuming apis

---
 frontend/index.html | 132 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 132 insertions(+)
 create mode 100644 frontend/index.html
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..1b6556e
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test Backend - MD5 Bruteforce</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            background-color: #f4f4f4;
+        }
+        h1 {
+            text-align: center;
+        }
+        .container {
+            max-width: 600px;
+            margin: auto;
+            padding: 20px;
+            background: white;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+            border-radius: 5px;
+        }
+        label, select, input, button {
+            display: block;
+            width: 100%;
+            margin-bottom: 10px;
+            padding: 10px;
+        }
+        button {
+            background-color: #28a745;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #218838;
+        }
+        .output {
+            background: #eee;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+            font-family: monospace;
+            white-space: pre-wrap;
+        }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <h1>MD5 Bruteforce Test</h1>
+
+    <!-- Sélection du nombre de requêtes -->
+    <label for="numRequests">Nombre de requêtes à envoyer :</label>
+    <select id="numRequests">
+        <option value="1">1</option>
+        <option value="50">50</option>
+        <option value="500">500</option>
+    </select>
+    <button onclick="sendRequests()">Envoyer</button>
+
+    <!-- Saisie d'un hash -->
+    <label for="hashInput">Entrer un hash MD5 :</label>
+    <input type="text" id="hashInput" placeholder="Ex: 098f6bcd4621d373cade4e832627b4f6">
+    <button onclick="bruteforce()">Bruteforce</button>
+
+    <!-- Affichage des informations -->
+    <h3>Statistiques en temps réel :</h3>
+    <div class="output" id="replicasOutput">🔄 Chargement des réplicas...</div>
+    <div class="output" id="cpuOutput">🔥 Chargement de l'utilisation CPU...</div>
+
+    <!-- Nettoyage du cache -->
+    <button onclick="clearCache()" style="background-color: red;">🗑️ Nettoyer le cache</button>
+
+    <!-- Résultat bruteforce -->
+    <h3>Résultat Bruteforce :</h3>
+    <div class="output" id="bruteforceOutput">🔎 Aucune requête encore.</div>
+</div>
+
+<script>
+    const API_BASE = "http://localhost:5000";  // Modifier si nécessaire
+
+    async function sendRequests() {
+        let numRequests = document.getElementById("numRequests").value;
+        for (let i = 0; i < numRequests; i++) {
+            fetch(`${API_BASE}/request_count`).catch(err => console.error(err));
+        }
+        alert(`${numRequests} requêtes envoyées !`);
+    }
+
+    async function bruteforce() {
+        let hash = document.getElementById("hashInput").value;
+        if (!hash) {
+            alert("Veuillez entrer un hash !");
+            return;
+        }
+        
+        let response = await fetch(`${API_BASE}/bruteforce`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ "hash": hash })
+        });
+
+        let data = await response.json();
+        document.getElementById("bruteforceOutput").innerText = data.status === "success"
+            ? `✅ Trouvé : ${data.data.original}`
+            : `❌ Erreur : ${data.errors.message}`;
+    }
+
+    async function updateStats() {
+        let replicasResp = await fetch(`${API_BASE}/replicas`);
+        let replicasData = await replicasResp.json();
+        document.getElementById("replicasOutput").innerText = `🔢 Réplicas : ${replicasData.data.replicas}`;
+
+        let cpuResp = await fetch(`${API_BASE}/cpu_usage`);
+        let cpuData = await cpuResp.json();
+        document.getElementById("cpuOutput").innerText = `⚡ CPU : ${cpuData.data.cpu_usage}%`;
+
+        setTimeout(updateStats, 5000); // Mise à jour toutes les 5 secondes
+    }
+
+    async function clearCache() {
+        await fetch(`${API_BASE}/clear_cache`, { method: "DELETE" });
+        alert("Cache nettoyé !");
+    }
+
+    updateStats();  // Lancer la mise à jour en temps réel au chargement de la page
+</script>
+
+</body>
+</html>
-- 
GitLab

