fix: prettier formating

README.md

@@ -30,6 +30,7 @@ files, generate content, or using other handy digital utilities. This page is ma
 To install and run the project locally, follow these steps:
 
 1. **Clone the repository**:
+
    ```bash
    git clone https://github.com/theoleuthardt/werkzeugkiste.git
    cd werkzeugkiste

backend/server.ts

@@ -3,7 +3,7 @@ import cors from "@fastify/cors";
 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 { passwordGenerate } from "./src/routes/passwordgenerate.route";
 import { regexTest } from "./src/routes/regextest.route";
 
 const app = Fastify({ logger: true });

backend/src/routes/colorconvert.route.ts

@@ -18,7 +18,8 @@ export async function colorConvert(app: FastifyInstance) {
         if (!data) {
           return reply.status(400).send({ error: "No RGB declared!" });
         }
-        const hex = (`#${(+data.red).toString(16).padStart(2, "0")}${(+data.green).toString(16).padStart(2, "0")}${(+data.blue).toString(16).padStart(2, "0")}`).toUpperCase();
+        const hex =
+          `#${(+data.red).toString(16).padStart(2, "0")}${(+data.green).toString(16).padStart(2, "0")}${(+data.blue).toString(16).padStart(2, "0")}`.toUpperCase();
         reply.header("Content-Type", "text/plain").status(200).send(hex);
       } catch (error) {
         console.error("Convert error:", error);

backend/src/routes/passwordgenerate.route.ts

@@ -1,60 +1,62 @@
 import { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
 
 interface RequestBody {
-    length: string;
+  length: string;
-    numb: boolean;
+  numb: boolean;
-    lower: boolean;
+  lower: boolean;
-    upper: boolean;
+  upper: boolean;
-    special: boolean;
+  special: boolean;
 }
 
 export async function passwordGenerate(app: FastifyInstance) {
-    app.post(
+  app.post(
-        "/api/password-generate",
+    "/api/password-generate",
-        async (
+    async (
-            request: FastifyRequest<{ Body: RequestBody }>,
+      request: FastifyRequest<{ Body: RequestBody }>,
-            reply: FastifyReply,
+      reply: FastifyReply,
-        ) => {
+    ) => {
-            try {
+      try {
-                const data = request.body;
+        const data = request.body;
-                if (!data) {
+        if (!data) {
-                    return reply.status(400).send({ error: "No length or type declared!" });
+          return reply
-                }
+            .status(400)
-                let numArray: string[] = "0123456789".split("");
+            .send({ error: "No length or type declared!" });
-                let lowerArray: string[] = "abcdefghijklmnopqrstuvwxyz".split("");
+        }
-                let upperArray: string[] = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+        let numArray: string[] = "0123456789".split("");
-                let specialArray: string[] = "!@#$%^&*()_+[]{}|;:,.<>?".split("");
+        let lowerArray: string[] = "abcdefghijklmnopqrstuvwxyz".split("");
-                let passwordArray: string[] = [];
+        let upperArray: string[] = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+        let specialArray: string[] = "!@#$%^&*()_+[]{}|;:,.<>?".split("");
+        let passwordArray: string[] = [];
 
-                if(data.numb){
+        if (data.numb) {
-                    passwordArray = passwordArray.concat(numArray);
+          passwordArray = passwordArray.concat(numArray);
-                }
+        }
 
-                if(data.lower){
+        if (data.lower) {
-                    passwordArray = passwordArray.concat(lowerArray);
+          passwordArray = passwordArray.concat(lowerArray);
-                }
+        }
 
-                if(data.upper){
+        if (data.upper) {
-                    passwordArray = passwordArray.concat(upperArray);
+          passwordArray = passwordArray.concat(upperArray);
-                }
+        }
 
-                if(data.special){
+        if (data.special) {
-                    passwordArray = passwordArray.concat(specialArray);
+          passwordArray = passwordArray.concat(specialArray);
-                }
+        }
 
-                let password = "";
+        let password = "";
 
-                for (let i = 0; i < +data.length; i++) {
+        for (let i = 0; i < +data.length; i++) {
-                    const ind: number = Math.floor(Math.random() * passwordArray.length);
+          const ind: number = Math.floor(Math.random() * passwordArray.length);
-                    const randomElement: string = passwordArray[ind];
+          const randomElement: string = passwordArray[ind];
-                    password = password.concat(randomElement);
+          password = password.concat(randomElement);
-                }
+        }
 
-                reply.header("Content-Type", "text/plain").status(200).send(password);
+        reply.header("Content-Type", "text/plain").status(200).send(password);
-            } catch (error) {
+      } catch (error) {
-                console.error("Convert error:", error);
+        console.error("Convert error:", error);
-                reply.status(500).send({ error: "Error while converting!" });
+        reply.status(500).send({ error: "Error while converting!" });
-            }
+      }
-        },
+    },
-    );
+  );
 }

backend/src/routes/regextest.route.ts

@@ -20,7 +20,9 @@ export async function regexTest(app: FastifyInstance) {
 
         // Ü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!" });
+          return reply
+            .status(400)
+            .send({ error: "Regex or test string missing!" });
         }
 
         // Versuche, den regulären Ausdruck zu erstellen
@@ -28,7 +30,9 @@ export async function regexTest(app: FastifyInstance) {
         try {
           regexPattern = new RegExp(data.regex);
         } catch (e) {
-          return reply.status(400).send({ error: "Invalid regular expression!" });
+          return reply
+            .status(400)
+            .send({ error: "Invalid regular expression!" });
         }
 
         // Teste den Eingabestring gegen das Regex

frontend/src/app/password-generator/layout.tsx

@@ -8,13 +8,13 @@ export const metadata: Metadata = {
 };
 
 export default function RootLayout({
-                                     children,
+  children,
-                                   }: Readonly<{
+}: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
-    <body className={`antialiased`}>{children}</body>
+      <body className={`antialiased`}>{children}</body>
     </html>
   );
 }

frontend/src/app/password-generator/page.tsx

@@ -6,19 +6,21 @@ import Footer from "../../components/Footer";
 import Button from "../../components/Button";
 
 export default function RgbToHex() {
-
   const [loading, setLoading] = useState(false);
   const [password, setPassword] = useState("");
 
   const generatePassword = async () => {
-
     setLoading(true);
 
-    const length = (document.getElementById("length") as HTMLInputElement).value;
+    const length = (document.getElementById("length") as HTMLInputElement)
+      .value;
     const numb = (document.getElementById("numb") as HTMLInputElement).checked;
-    const lower = (document.getElementById("lower") as HTMLInputElement).checked;
+    const lower = (document.getElementById("lower") as HTMLInputElement)
-    const upper = (document.getElementById("upper") as HTMLInputElement).checked;
+      .checked;
-    const special = (document.getElementById("special") as HTMLInputElement).checked;
+    const upper = (document.getElementById("upper") as HTMLInputElement)
+      .checked;
+    const special = (document.getElementById("special") as HTMLInputElement)
+      .checked;
 
     try {
       const response = await fetch(
@@ -28,7 +30,13 @@ export default function RgbToHex() {
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({  length: length, numb: numb, lower: lower, upper: upper, special: special }),
+          body: JSON.stringify({
+            length: length,
+            numb: numb,
+            lower: lower,
+            upper: upper,
+            special: special,
+          }),
         },
       );
       if (!response.ok) {
@@ -37,7 +45,6 @@ export default function RgbToHex() {
       const password: string = await response.text();
       console.log(password);
       setPassword(password);
-
     } catch (error) {
       console.error("Error while converting:", error);
       alert("Error while converting");
@@ -61,10 +68,10 @@ export default function RgbToHex() {
   };
 
   const checkInput = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const length = (document.getElementById(event.target.id) as HTMLInputElement);
+    const length = document.getElementById(event.target.id) as HTMLInputElement;
     const lengthValue = +length.value;
 
-    if (lengthValue < 1 || lengthValue > 64 ) {
+    if (lengthValue < 1 || lengthValue > 64) {
       alert("Invalid input. Please enter a number between 1 and 64.");
     }
     if (lengthValue < 1) {
@@ -72,55 +79,67 @@ export default function RgbToHex() {
     } else if (lengthValue > 64) {
       length.value = "64";
     }
-  }
+  };
 
   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>
+        <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">
           <div className="flex flex-col items-start">
-            <label className="mx-2" htmlFor="length">length:</label>
+            <label className="mx-2" htmlFor="length">
-            <label className="mx-2 text-white" htmlFor="numb">numbers</label>
+              length:
-            <label className="mx-2" htmlFor="lower">lower case characters</label>
+            </label>
-            <label className="mx-2" htmlFor="upper">upper case characters</label>
+            <label className="mx-2 text-white" htmlFor="numb">
-            <label className="mx-2" htmlFor="special">special characters</label>
+              numbers
+            </label>
+            <label className="mx-2" htmlFor="lower">
+              lower case characters
+            </label>
+            <label className="mx-2" htmlFor="upper">
+              upper case characters
+            </label>
+            <label className="mx-2" htmlFor="special">
+              special characters
+            </label>
           </div>
           <div className="flex flex-col items-end justify-evenly gap-2">
             <input
-                type="number"
+              type="number"
-                id="length"
+              id="length"
-                name="length"
+              name="length"
-                min="1"
+              min="1"
-                max="64"
+              max="64"
-                className="w-16 bg-black border-1 border-white text-center"
+              className="w-16 bg-black border-1 border-white text-center"
-                onInput={checkInput}
+              onInput={checkInput}
             />
             <input
-            type="checkbox"
+              type="checkbox"
-            id="numb"
+              id="numb"
-            name="numb"
+              name="numb"
-            className="w-16 bg-black border-1 border-white text-center"
+              className="w-16 bg-black border-1 border-white text-center"
             />
-          <input
+            <input
-            type="checkbox"
+              type="checkbox"
-            id="lower"
+              id="lower"
-            name="lower"
+              name="lower"
-            className="w-16 bg-black border-1 border-white text-center"
+              className="w-16 bg-black border-1 border-white text-center"
-          />
+            />
-          <input
+            <input
               type="checkbox"
               id="upper"
               name="upper"
               className="w-16 bg-black border-1 border-white text-center"
-          />
+            />
-          <input
+            <input
               type="checkbox"
               id="special"
               name="special"
               className="w-16 bg-black border-1 border-white text-center"
-          />
+            />
           </div>
         </div>
         <div className={"flex flex-row items-center gap-4 mt-4 mb-16"}>
@@ -134,16 +153,12 @@ export default function RgbToHex() {
             }
             onClick={generatePassword}
           />
-          <Button
+          <Button content="clear" onClick={clearInAndOutput} />
-            content="clear"
+        </div>
-            onClick={clearInAndOutput}
-          />
-          </div>
         <div className="p-3 rounded-xl text-center">
-          <output
+          <output id="password" className="text-blue-400 text-3xl">
-            id="password"
+            {password}
-            className="text-blue-400 text-3xl"
+          </output>
-          >{password}</output>
         </div>
       </div>
       <Footer />

frontend/src/app/regex-tester/layout.tsx

@@ -8,13 +8,13 @@ export const metadata: Metadata = {
 };
 
 export default function RootLayout({
-                                     children,
+  children,
-                                   }: Readonly<{
+}: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
-    <body className={`antialiased`}>{children}</body>
+      <body className={`antialiased`}>{children}</body>
     </html>
   );
 }

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() {
         <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>
+            <label className="mr-2 m" htmlFor="regex">
-          <input
+              regex:
-            type="text"
+            </label>
-            id="regex"
+            <input
-            name="regex"
+              type="text"
-            className="field-sizing-content bg-black border-1 border-white text-center mb-3"
+              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>
+            <label className="mr-2" htmlFor="test">
+              test string:
+            </label>
             <input
               type="text"
               id="test"
@@ -87,16 +88,12 @@ export default function RgbToHex() {
             }
             onClick={testRegex}
           />
-          <Button
+          <Button content="clear" onClick={clearInAndOutput} />
-            content="clear"
+        </div>
-            onClick={clearInAndOutput}
-          />
-          </div>
         <div className="p-3 rounded-xl text-center">
-          <output
+          <output id="output" className="text-blue-400 text-3xl">
-            id="output"
+            {output}
-            className="text-blue-400 text-3xl"
+          </output>
-          >{output}</output>
         </div>
       </div>
       <Footer />

frontend/src/app/rgb-to-hex/layout.tsx

@@ -8,13 +8,13 @@ export const metadata: Metadata = {
 };
 
 export default function RootLayout({
-                                     children,
+  children,
-                                   }: Readonly<{
+}: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
-    <body className={`antialiased`}>{children}</body>
+      <body className={`antialiased`}>{children}</body>
     </html>
   );
 }

frontend/src/app/rgb-to-hex/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 [hex, setHex] = useState("");
 
   const convertToHex = async () => {
-
     setLoading(true);
 
     const red = (document.getElementById("red") as HTMLInputElement).value;
@@ -26,7 +24,7 @@ export default function RgbToHex() {
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({  red: red, green: green, blue: blue }),
+          body: JSON.stringify({ red: red, green: green, blue: blue }),
         },
       );
       if (!response.ok) {
@@ -34,7 +32,6 @@ export default function RgbToHex() {
       }
       const hex: string = await response.text();
       setHex(hex);
-
     } catch (error) {
       console.error("Error while converting:", error);
       alert("Error while converting");
@@ -54,10 +51,10 @@ export default function RgbToHex() {
   };
 
   const checkInput = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const color = (document.getElementById(event.target.id) as HTMLInputElement);
+    const color = document.getElementById(event.target.id) as HTMLInputElement;
     const colorValue = +color.value;
 
-    if (colorValue < 0 || colorValue > 255 ) {
+    if (colorValue < 0 || colorValue > 255) {
       alert("Invalid input. Please enter a number between 0 and 255.");
     }
     if (colorValue < 0) {
@@ -65,7 +62,7 @@ export default function RgbToHex() {
     } else if (colorValue > 255) {
       color.value = "255";
     }
-  }
+  };
 
   return (
     <div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
@@ -73,7 +70,9 @@ export default function RgbToHex() {
       <div className="w-screen h-screen flex flex-col items-center justify-center">
         <h2 className="text-5xl font-bold text-white mb-16">rgb-to-hex</h2>
         <div className="border-2 border-white p-3 rounded-xl text-center text-white">
-          <label className="mr-2" htmlFor="red">Red:</label>
+          <label className="mr-2" htmlFor="red">
+            Red:
+          </label>
           <input
             type="number"
             id="red"
@@ -83,7 +82,9 @@ export default function RgbToHex() {
             className="w-16 bg-black border-1 border-white text-center"
             onInput={checkInput}
           />
-          <label className="mx-2 text-white" htmlFor="green">Green:</label>
+          <label className="mx-2 text-white" htmlFor="green">
+            Green:
+          </label>
           <input
             type="number"
             id="green"
@@ -93,7 +94,9 @@ export default function RgbToHex() {
             className="w-16 bg-black border-1 border-white text-center"
             onChange={checkInput}
           />
-          <label className="mx-2" htmlFor="blue">Blue:</label>
+          <label className="mx-2" htmlFor="blue">
+            Blue:
+          </label>
           <input
             type="number"
             id="blue"
@@ -115,16 +118,12 @@ export default function RgbToHex() {
             }
             onClick={convertToHex}
           />
-          <Button
+          <Button content="clear" onClick={clearInAndOutput} />
-            content="clear"
+        </div>
-            onClick={clearInAndOutput}
-          />
-          </div>
         <div className="p-3 rounded-xl text-center">
-          <output
+          <output id="hex" className="text-blue-400 text-3xl">
-            id="hex"
+            {hex}
-            className="text-blue-400 text-3xl"
+          </output>
-          >{hex}</output>
         </div>
       </div>
       <Footer />

frontend/tsconfig.json

@@ -22,7 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": [
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-    "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }