From 8787ee5c2b3a7c1d90a0c780f9e27699587583db Mon Sep 17 00:00:00 2001 From: Domenik Date: Thu, 20 Feb 2025 11:29:17 +0100 Subject: [PATCH 1/4] regex-tester first version implemented --- backend/server.ts | 2 + backend/src/routes/regextest.route.ts | 48 +++++++++++++ frontend/src/app/regex-tester/layout.tsx | 20 ++++++ frontend/src/app/regex-tester/page.tsx | 91 ++++++++++++++++++++++++ frontend/src/constants/index.ts | 4 +- 5 files changed, 163 insertions(+), 2 deletions(-) create mode 100644 backend/src/routes/regextest.route.ts create mode 100644 frontend/src/app/regex-tester/layout.tsx create mode 100644 frontend/src/app/regex-tester/page.tsx diff --git a/backend/server.ts b/backend/server.ts index 96db10e..608a095 100644 --- a/backend/server.ts +++ b/backend/server.ts @@ -4,6 +4,7 @@ import multipart from "@fastify/multipart"; import { libreConvert } from "./src/routes/libreconvert.route"; import { colorConvert } from "./src/routes/colorconvert.route"; import {passwordGenerate} from "./src/routes/passwordgenerate.route"; +import { regexTest } from "./src/routes/regextest.route"; const app = Fastify({ logger: true }); @@ -17,6 +18,7 @@ app.register(multipart); app.register(libreConvert); app.register(colorConvert); app.register(passwordGenerate); +app.register(regexTest); const PORT = process.env.PORT || 4000; app.listen({ port: Number(PORT), host: "0.0.0.0" }, () => { diff --git a/backend/src/routes/regextest.route.ts b/backend/src/routes/regextest.route.ts new file mode 100644 index 0000000..0d1bf4f --- /dev/null +++ b/backend/src/routes/regextest.route.ts @@ -0,0 +1,48 @@ +import { FastifyInstance, FastifyReply, FastifyRequest } from "fastify"; + +interface RequestBody { + input: string; +} + +export async function regexTest(app: FastifyInstance) { + app.post( + "/api/regex-test", + async ( + request: FastifyRequest<{ Body: RequestBody }>, + reply: FastifyReply, + ) => { + try { + const data = request.body; + 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; + try { + regex = new RegExp(regexPattern); + } catch (e) { + return reply.status(400).send({ error: "Invalid regular expression!" }); + } + + // Teste den Regex + const result = regex.test(data.input); + + // Erstelle eine Ausgabe basierend auf dem Test-Ergebnis + let output = ""; + + if (result) { + output = `The input matches the regular expression!`; + } else { + output = `The input does not match the regular expression.`; + } + + reply.header("Content-Type", "text/plain").status(200).send(output); + } catch (error) { + console.error("Convert error:", error); + reply.status(500).send({ error: "Error while converting!" }); + } + }, + ); +} diff --git a/frontend/src/app/regex-tester/layout.tsx b/frontend/src/app/regex-tester/layout.tsx new file mode 100644 index 0000000..935382f --- /dev/null +++ b/frontend/src/app/regex-tester/layout.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import type { Metadata } from "next"; +import { toolLinks } from "@/constants"; + +export const metadata: Metadata = { + title: toolLinks[2].title, + description: "Tester for regular expressions!", +}; + +export default function RootLayout({ + children, + }: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + {children} + + ); +} diff --git a/frontend/src/app/regex-tester/page.tsx b/frontend/src/app/regex-tester/page.tsx new file mode 100644 index 0000000..85bc4e1 --- /dev/null +++ b/frontend/src/app/regex-tester/page.tsx @@ -0,0 +1,91 @@ +"use client"; + +import React, { useState } from "react"; +import Navbar from "../../components/Navbar"; +import Footer from "../../components/Footer"; +import Button from "../../components/Button"; + +export default function RgbToHex() { + + const [loading, setLoading] = useState(false); + const [output, setOutput] = useState(""); + + const testRegex = async () => { + + setLoading(true); + + const input = (document.getElementById("input") as HTMLInputElement).value; + + try { + const response = await fetch( + process.env.backend_url + "/api/regex-test", + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ input: input}), + }, + ); + if (!response.ok) { + return new Error(`Error: ${response.statusText}`); + } + const output: string = await response.text(); + console.log(output); + setOutput(output); + + } catch (error) { + console.error("Error while converting:", error); + alert("Error while converting"); + } finally { + setLoading(false); + } + }; + + const clearInAndOutput = () => { + setOutput(""); + const input = document.getElementById("input") as HTMLInputElement; + input.value = ""; + }; + + return ( +
+ +
+

password-generator

+
+ + +
+
+
+
+ {output} +
+
+
+
+ ); +} \ No newline at end of file diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts index 344ac59..f1b1eba 100644 --- a/frontend/src/constants/index.ts +++ b/frontend/src/constants/index.ts @@ -12,8 +12,8 @@ export const toolLinks = [ link: "/rgb-to-hex", }, { - title: "data-visualizer", - link: "/data-visualizer", + title: "regex-tester", + link: "/regex-tester", }, { title: "qr-code-generator", From 544ebaa7cf43aee14140997c5b88ecb30ee5223d Mon Sep 17 00:00:00 2001 From: Domenik Date: Thu, 20 Feb 2025 20:18:56 +0100 Subject: [PATCH 2/4] 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 (
-

password-generator

-
- +

regex-tester

+
+
+ +
+
+ + +
+
- {password} + + {password} +
); -} \ No newline at end of file +} diff --git a/frontend/src/app/regex-tester/layout.tsx b/frontend/src/app/regex-tester/layout.tsx index 29f1848..e948187 100644 --- a/frontend/src/app/regex-tester/layout.tsx +++ b/frontend/src/app/regex-tester/layout.tsx @@ -8,13 +8,13 @@ export const metadata: Metadata = { }; export default function RootLayout({ - children, - }: Readonly<{ + children, +}: Readonly<{ children: React.ReactNode; }>) { return ( - {children} + {children} ); } diff --git a/frontend/src/app/regex-tester/page.tsx b/frontend/src/app/regex-tester/page.tsx index c6b47df..a29cf2a 100644 --- a/frontend/src/app/regex-tester/page.tsx +++ b/frontend/src/app/regex-tester/page.tsx @@ -6,12 +6,10 @@ import Footer from "../../components/Footer"; import Button from "../../components/Button"; export default function RgbToHex() { - const [loading, setLoading] = useState(false); const [output, setOutput] = useState(""); const testRegex = async () => { - setLoading(true); const regex = (document.getElementById("regex") as HTMLInputElement).value; @@ -25,7 +23,7 @@ export default function RgbToHex() { headers: { "Content-Type": "application/json", }, - body: JSON.stringify({ regex: regex, test: test}), + body: JSON.stringify({ regex: regex, test: test }), }, ); if (!response.ok) { @@ -34,7 +32,6 @@ export default function RgbToHex() { const output: string = await response.text(); console.log(output); setOutput(output); - } catch (error) { console.error("Error while converting:", error); alert("Error while converting"); @@ -58,16 +55,20 @@ export default function RgbToHex() {

regex-tester

- - + +
- + -
+
- {output} + + {output} +