From 544ebaa7cf43aee14140997c5b88ecb30ee5223d Mon Sep 17 00:00:00 2001
From: Domenik <domenik@ronaldwilhelm.de>
Date: Thu, 20 Feb 2025 20:18:56 +0100
Subject: [PATCH] regex-tester fully implemented

---
 backend/src/routes/regextest.route.ts         | 22 +++++++-----
 .../src/app/password-generator/layout.tsx     |  2 +-
 frontend/src/app/regex-tester/layout.tsx      |  2 +-
 frontend/src/app/regex-tester/page.tsx        | 34 +++++++++++++------
 4 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/backend/src/routes/regextest.route.ts b/backend/src/routes/regextest.route.ts
index 0d1bf4f..ef2f9a5 100644
--- a/backend/src/routes/regextest.route.ts
+++ b/backend/src/routes/regextest.route.ts
@@ -1,7 +1,8 @@
 import { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
 
 interface RequestBody {
-  input: string;
+  regex: string;
+  test: string;
 }
 
 export async function regexTest(app: FastifyInstance) {
@@ -16,22 +17,25 @@ export async function regexTest(app: FastifyInstance) {
         if (!data) {
           return reply.status(400).send({ error: "No Regex declared!" });
         }
-        const regexPattern = data.input;
 
-        // Überprüfe, ob der Regex-Pattern korrekt ist
-        let regex: RegExp;
+        // Überprüfe, ob die Felder regex und test vorhanden sind
+        if (!data.regex || !data.test) {
+          return reply.status(400).send({ error: "Regex or test string missing!" });
+        }
+
+        // Versuche, den regulären Ausdruck zu erstellen
+        let regexPattern;
         try {
-          regex = new RegExp(regexPattern);
+          regexPattern = new RegExp(data.regex);
         } catch (e) {
           return reply.status(400).send({ error: "Invalid regular expression!" });
         }
 
-        // Teste den Regex
-        const result = regex.test(data.input);
+        // Teste den Eingabestring gegen das Regex
+        const result = regexPattern.test(data.test);
 
-        // Erstelle eine Ausgabe basierend auf dem Test-Ergebnis
+        // Erstelle die Antwort basierend auf dem Testergebnis
         let output = "";
-
         if (result) {
           output = `The input matches the regular expression!`;
         } else {
diff --git a/frontend/src/app/password-generator/layout.tsx b/frontend/src/app/password-generator/layout.tsx
index 848613f..629d241 100644
--- a/frontend/src/app/password-generator/layout.tsx
+++ b/frontend/src/app/password-generator/layout.tsx
@@ -3,7 +3,7 @@ import type { Metadata } from "next";
 import { toolLinks } from "@/constants";
 
 export const metadata: Metadata = {
-  title: toolLinks[2].title,
+  title: toolLinks[5].title,
   description: "Generator for secure strong passwords!",
 };
 
diff --git a/frontend/src/app/regex-tester/layout.tsx b/frontend/src/app/regex-tester/layout.tsx
index 935382f..29f1848 100644
--- a/frontend/src/app/regex-tester/layout.tsx
+++ b/frontend/src/app/regex-tester/layout.tsx
@@ -3,7 +3,7 @@ import type { Metadata } from "next";
 import { toolLinks } from "@/constants";
 
 export const metadata: Metadata = {
-  title: toolLinks[2].title,
+  title: toolLinks[3].title,
   description: "Tester for regular expressions!",
 };
 
diff --git a/frontend/src/app/regex-tester/page.tsx b/frontend/src/app/regex-tester/page.tsx
index 85bc4e1..c6b47df 100644
--- a/frontend/src/app/regex-tester/page.tsx
+++ b/frontend/src/app/regex-tester/page.tsx
@@ -14,7 +14,8 @@ export default function RgbToHex() {
 
     setLoading(true);
 
-    const input = (document.getElementById("input") as HTMLInputElement).value;
+    const regex = (document.getElementById("regex") as HTMLInputElement).value;
+    const test = (document.getElementById("test") as HTMLInputElement).value;
 
     try {
       const response = await fetch(
@@ -24,7 +25,7 @@ export default function RgbToHex() {
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({  input: input}),
+          body: JSON.stringify({  regex: regex, test: test}),
         },
       );
       if (!response.ok) {
@@ -44,23 +45,36 @@ export default function RgbToHex() {
 
   const clearInAndOutput = () => {
     setOutput("");
-    const input = document.getElementById("input") as HTMLInputElement;
-    input.value = "";
+    const regex = document.getElementById("regex") as HTMLInputElement;
+    const test = document.getElementById("test") as HTMLInputElement;
+    test.value = "";
+    regex.value = "";
   };
 
   return (
     <div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
       <Navbar renderHomeLink={true} />
       <div className="w-screen h-screen flex flex-col items-center justify-center">
-        <h2 className="text-5xl font-bold text-white mb-16">password-generator</h2>
-        <div className="border-2 border-white p-3 rounded-xl text-center text-white flex flex-row justify-between">
-          <label className="mr-2" htmlFor="input">input:</label>
+        <h2 className="text-5xl font-bold text-white mb-16">regex-tester</h2>
+        <div className="border-2 border-white p-3 rounded-xl text-center text-white flex flex-col justify-between">
+          <div>
+          <label className="mr-2 m" htmlFor="regex">regex:</label>
           <input
             type="text"
-            id="input"
-            name="input"
-            className="field-sizing-content bg-black border-1 border-white text-center"
+            id="regex"
+            name="regex"
+            className="field-sizing-content bg-black border-1 border-white text-center mb-3"
           />
+          </div>
+          <div>
+          <label className="mr-2" htmlFor="test">test string:</label>
+            <input
+              type="text"
+              id="test"
+              name="test"
+              className="field-sizing-content bg-black border-1 border-white text-center"
+            />
+          </div>
         </div>
         <div className={"flex flex-row items-center gap-4 mt-4 mb-16"}>
           <Button