fix: prettier formating

2026-06-13 09:37:53 +00:00 · 2025-02-20 20:49:24 +01:00 · 2025-02-20 20:49:24 +01:00 · 7b4ef9c70b
commit 7b4ef9c70b
parent 544ebaa7cf
13 changed files with 172 additions and 154 deletions
--- a/frontend/src/app/password-generator/layout.tsx
+++ b/frontend/src/app/password-generator/layout.tsx
@ -8,13 +8,13 @@ export const metadata: Metadata = {
 };

 export default function RootLayout({
-                                     children,
-                                   }: Readonly<{
+  children,
+}: Readonly<{
  children: React.ReactNode;
 }>) {
  return (
    <html lang="en">
-    <body className={`antialiased`}>{children}</body>
+      <body className={`antialiased`}>{children}</body>
    </html>
  );
 }
--- a/frontend/src/app/password-generator/page.tsx
+++ b/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 upper = (document.getElementById("upper") as HTMLInputElement).checked;
-    const special = (document.getElementById("special") as HTMLInputElement).checked;
+    const lower = (document.getElementById("lower") 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 text-white" htmlFor="numb">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>
+            <label className="mx-2" htmlFor="length">
+              length:
+            </label>
+            <label className="mx-2 text-white" htmlFor="numb">
+              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"
-                id="length"
-                name="length"
-                min="1"
-                max="64"
-                className="w-16 bg-black border-1 border-white text-center"
-                onInput={checkInput}
+              type="number"
+              id="length"
+              name="length"
+              min="1"
+              max="64"
+              className="w-16 bg-black border-1 border-white text-center"
+              onInput={checkInput}
            />
            <input
-            type="checkbox"
-            id="numb"
-            name="numb"
-            className="w-16 bg-black border-1 border-white text-center"
+              type="checkbox"
+              id="numb"
+              name="numb"
+              className="w-16 bg-black border-1 border-white text-center"
            />
-          <input
-            type="checkbox"
-            id="lower"
-            name="lower"
-            className="w-16 bg-black border-1 border-white text-center"
-          />
-          <input
+            <input
+              type="checkbox"
+              id="lower"
+              name="lower"
+              className="w-16 bg-black border-1 border-white text-center"
+            />
+            <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,19 +153,15 @@ export default function RgbToHex() {
            }
            onClick={generatePassword}
          />
-          <Button
-            content="clear"
-            onClick={clearInAndOutput}
-          />
-          </div>
+          <Button content="clear" onClick={clearInAndOutput} />
+        </div>
        <div className="p-3 rounded-xl text-center">
-          <output
-            id="password"
-            className="text-blue-400 text-3xl"
-          >{password}</output>
+          <output id="password" className="text-blue-400 text-3xl">
+            {password}
+          </output>
        </div>
      </div>
      <Footer />
    </div>
  );
-}
+}
--- 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 (
    <html lang="en">
-    <body className={`antialiased`}>{children}</body>
+      <body className={`antialiased`}>{children}</body>
    </html>
  );
 }
--- 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() {
        <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="regex"
-            name="regex"
-            className="field-sizing-content bg-black border-1 border-white text-center mb-3"
-          />
+            <label className="mr-2 m" htmlFor="regex">
+              regex:
+            </label>
+            <input
+              type="text"
+              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,19 +88,15 @@ export default function RgbToHex() {
            }
            onClick={testRegex}
          />
-          <Button
-            content="clear"
-            onClick={clearInAndOutput}
-          />
-          </div>
+          <Button content="clear" onClick={clearInAndOutput} />
+        </div>
        <div className="p-3 rounded-xl text-center">
-          <output
-            id="output"
-            className="text-blue-400 text-3xl"
-          >{output}</output>
+          <output id="output" className="text-blue-400 text-3xl">
+            {output}
+          </output>
        </div>
      </div>
      <Footer />
    </div>
  );
-}
+}
--- a/frontend/src/app/rgb-to-hex/layout.tsx
+++ b/frontend/src/app/rgb-to-hex/layout.tsx
@ -8,13 +8,13 @@ export const metadata: Metadata = {
 };

 export default function RootLayout({
-                                     children,
-                                   }: Readonly<{
+  children,
+}: Readonly<{
  children: React.ReactNode;
 }>) {
  return (
    <html lang="en">
-    <body className={`antialiased`}>{children}</body>
+      <body className={`antialiased`}>{children}</body>
    </html>
  );
-}
+}
--- a/frontend/src/app/rgb-to-hex/page.tsx
+++ b/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,19 +118,15 @@ export default function RgbToHex() {
            }
            onClick={convertToHex}
          />
-          <Button
-            content="clear"
-            onClick={clearInAndOutput}
-          />
-          </div>
+          <Button content="clear" onClick={clearInAndOutput} />
+        </div>
        <div className="p-3 rounded-xl text-center">
-          <output
-            id="hex"
-            className="text-blue-400 text-3xl"
-          >{hex}</output>
+          <output id="hex" className="text-blue-400 text-3xl">
+            {hex}
+          </output>
        </div>
      </div>
      <Footer />
    </div>
  );
-}
+}