Merge pull request #12 from theoleuthardt/feat/password-generator

feat: Password Generator finished and working

backend/server.ts

@@ -3,6 +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";
 
 const app = Fastify({ logger: true });
 
@@ -15,6 +16,7 @@ app.register(cors, {
 app.register(multipart);
 app.register(libreConvert);
 app.register(colorConvert);
+app.register(passwordGenerate);
 
 const PORT = process.env.PORT || 4000;
 app.listen({ port: Number(PORT), host: "0.0.0.0" }, () => {

backend/src/routes/colorconvert.route.ts

@@ -19,7 +19,7 @@ export async function colorConvert(app: FastifyInstance) {
           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();
-        reply.header("Content-Type", "application/json").send({ hex: hex });
+        reply.header("Content-Type", "text/plain").status(200).send(hex);
       } catch (error) {
         console.error("Convert error:", error);
         reply.status(500).send({ error: "Error while converting!" });

backend/src/routes/passwordgenerate.route.ts

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

frontend/src/app/password-generator/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: "Generator for secure strong passwords!",
+};
+
+export default function RootLayout({
+                                     children,
+                                   }: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+    <body className={`antialiased`}>{children}</body>
+    </html>
+  );
+}

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

@@ -0,0 +1,152 @@
+"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 [password, setPassword] = useState("");
+
+  const generatePassword = async () => {
+
+    setLoading(true);
+
+    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;
+
+    try {
+      const response = await fetch(
+        process.env.backend_url + "/api/password-generate",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({  length: length, numb: numb, lower: lower, upper: upper, special: special }),
+        },
+      );
+      if (!response.ok) {
+        return new Error(`Error: ${response.statusText}`);
+      }
+      const password: string = await response.text();
+      console.log(password);
+      setPassword(password);
+
+    } catch (error) {
+      console.error("Error while converting:", error);
+      alert("Error while converting");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearInAndOutput = () => {
+    setPassword("");
+    const length = document.getElementById("length") as HTMLInputElement;
+    const numb = document.getElementById("numb") as HTMLInputElement;
+    const lower = document.getElementById("lower") as HTMLInputElement;
+    const upper = document.getElementById("upper") as HTMLInputElement;
+    const special = document.getElementById("special") as HTMLInputElement;
+    length.value = "";
+    numb.checked = false;
+    lower.checked = false;
+    upper.checked = false;
+    special.checked = false;
+  };
+
+  const checkInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const length = (document.getElementById(event.target.id) as HTMLInputElement);
+    const lengthValue = +length.value;
+
+    if (lengthValue < 1 || lengthValue > 64 ) {
+      alert("Invalid input. Please enter a number between 1 and 64.");
+    }
+    if (lengthValue < 1) {
+      length.value = "1";
+    } 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>
+        <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>
+          </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}
+            />
+            <input
+            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
+              type="checkbox"
+              id="upper"
+              name="upper"
+              className="w-16 bg-black border-1 border-white text-center"
+          />
+          <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"}>
+          <Button
+            content={
+              loading ? (
+                <div className="h-10 w-10 border-8 border-blue-100 border-t-blue-500 rounded-full animate-spin" />
+              ) : (
+                "generate"
+              )
+            }
+            onClick={generatePassword}
+          />
+          <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>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}