added function to the login

code/backend/package.json

@@ -4,10 +4,6 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "@prisma/client": "^6.9.0",
-    "@types/bcryptjs": "^3.0.0",
-    "@types/multer": "^1.4.12",
-    "@types/readline-sync": "^1.4.8",
     "bcryptjs": "^3.0.2",
     "cors": "^2.8.5",
     "dotenv": "^16.5.0",
@@ -23,9 +19,14 @@
     "zod": "^3.24.4"
   },
   "devDependencies": {
+    "@prisma/client": "^6.9.0",
+    "@types/bcryptjs": "^3.0.0",
+    "@types/cors": "^2.8.19",
     "@types/express": "^5.0.1",
     "@types/jsonwebtoken": "^9.0.9",
+    "@types/multer": "^1.4.12",
     "@types/node": "^22.15.2",
+    "@types/readline-sync": "^1.4.8",
     "@types/swagger-jsdoc": "^6.0.4",
     "@types/swagger-ui-express": "^4.1.8",
     "nodemon": "^3.1.10",

code/backend/src/middleware/validationMiddleware.ts

@@ -11,8 +11,10 @@ export function validateData(schema: z.ZodObject<any, any>) {
     } catch (error) {
       if (error instanceof ZodError) {
         const errorMessages = error.errors.map((issue: any) => ({
-          message: `${issue.path.join(".")} is ${issue.message}`,
+  path: issue.path.join("."),
+  message: issue.message,
 }));
+
         res
           .status(StatusCodes.BAD_REQUEST)
           .json({ error: "Invalid data", details: errorMessages });

code/backend/src/server.ts

@@ -5,12 +5,21 @@ import userRouter from "./routes/userRoutes";
 import postRouter from "./routes/postRoutes";
 import { authenticateToken } from "./middleware/authenticateToken";
 import bodyParser from "body-parser";
-
+import cors from "cors";
 dotenv.config();
 
 const app = express();
-const port = 3000;
+const port = 3001;
-
+app.use(
+  cors({
+    origin: "http://localhost:3000",
+    credentials: true,
+  })
+);
+app.use((req, res, next) => {
+  res.header("Access-Control-Expose-Headers", "Authorization");
+  next();
+});
 // minIO config
 export const minioClient = new Client({
   endPoint: "localhost", // Replace with your MinIO server URL
@@ -34,7 +43,7 @@ const options = {
     },
     servers: [
       {
-        url: "http://localhost:3000",
+        url: `http://localhost:${port}`,
       },
     ],
     components: {
@@ -56,7 +65,6 @@ const options = {
 };
 const specs = swaggerJSDoc(options);
 app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(specs));
-
 app.use(bodyParser.json());
 app.use("/api/user", userRouter);
 app.use("/api/posts", authenticateToken(), postRouter);

code/backend/yarn.lock

@@ -159,6 +159,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/cors@^2.8.19":
+  version "2.8.19"
+  resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.19.tgz#d93ea2673fd8c9f697367f5eeefc2bbfa94f0342"
+  integrity sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==
+  dependencies:
+    "@types/node" "*"
+
 "@types/express-serve-static-core@^5.0.0":
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-5.0.6.tgz#41fec4ea20e9c7b22f024ab88a95c6bb288f51b8"

code/frontend/package.json

@@ -11,6 +11,7 @@
     "@types/node": "^16.7.13",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "axios": "^1.10.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",

code/frontend/src/pages/LoginAndSignUpPage.tsx

@@ -1,23 +1,73 @@
 import "./loginAndSignUpPage.css";
 import { useState } from "react";
+import axios from "axios";
+
+type FormData = {
+  username: string;
+  email: string;
+  password: string;
+};
 
 function LoginAndSignUpPage() {
   const toggleLogin = (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault();
+    setErrorMessages(undefined);
     setSignup(!signup);
   };
-  const [signup, setSignup] = useState(false);
+  const [signup, setSignup] = useState<boolean>(false);
+  const [errorMessages, setErrorMessages] = useState<{
+    error: String;
+    details: { message: string }[];
+  }>();
+  const [formData, setFormData] = useState<FormData>({
+    username: "",
+    email: "",
+    password: "",
+  });
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setErrorMessages(undefined);
+    try {
+      const response = signup
+        ? await axios.post("http://localhost:3001/api/user/register", {
+            email: formData.email,
+            username: formData.username,
+            password: formData.password,
+          })
+        : await axios.post("http://localhost:3001/api/user/login", {
+            username: formData.username,
+            password: formData.password,
+          });
+      const authHeader = response.headers["authorization"];
+      if (authHeader && authHeader.startsWith("Bearer ")) {
+        const token = authHeader.substring(7);
+        console.log(token, "Hello");
+        localStorage.setItem("token", token);
+      }
+    } catch (err: any) {
+      setErrorMessages(err.response.data);
+      console.error("error:", err.response.data);
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
   return (
     <div className="background">
       <div className="login-login">
         <div className="login-part">
           <div className={signup ? "signup-image" : "login-image"}></div>
         </div>
-        <div className="login-part">
+        <form onSubmit={onSubmit} className="login-part">
           <div className="login-text small-title">
             {signup ? "Sign Up" : "Login"}
           </div>
-
           <div className="input-fields">
             <div className="login-div-input">
               <img
@@ -28,8 +78,12 @@ function LoginAndSignUpPage() {
               <input
                 type="text"
                 className="login-input"
+                name="username"
                 placeholder="Username"
-              ></input>
+                value={formData.username}
+                onChange={handleChange}
+                required
+              />
             </div>
             {signup ? (
               <div className="login-div-input">
@@ -41,8 +95,12 @@ function LoginAndSignUpPage() {
                 <input
                   type="email"
                   className="login-input"
+                  name="email"
                   placeholder="Email"
-                ></input>
+                  value={formData.email}
+                  onChange={handleChange}
+                  required
+                />
               </div>
             ) : (
               ""
@@ -57,22 +115,35 @@ function LoginAndSignUpPage() {
               <input
                 type="password"
                 className="login-input"
+                name="password"
                 placeholder="Password"
-              ></input>
+                value={formData.password}
+                onChange={handleChange}
+                required
+                minLength={signup ? 8 : undefined}
+              />
             </div>
+            {errorMessages && (
+              <div className="error-messages">
+                {errorMessages.details.map((detial, index) => (
+                  <p key={index}>{detial.message}</p>
+                ))}
+              </div>
+            )}
           </div>
-
           <input
-            type="button"
+            type="submit"
             className="login-button body-m"
             value={signup ? "Sign up" : "Login"}
           ></input>
           <div className="login-signup body-m" onClick={toggleLogin}>
-            {signup ? "Already have an account?" : "Don't have an account yet?"}{" "}
+            {signup
-            Click <span className="login-here body-m">here</span>{" "}
+              ? "Already have an account? "
+              : "Don't have an account yet? "}
+            Click <span className="login-here">here</span>
             {signup ? " to login." : " to sign up."}
           </div>
-        </div>
+        </form>
       </div>
     </div>
   );

code/frontend/src/pages/loginAndSignUpPage.css

@@ -58,7 +58,7 @@
   flex-direction: row;
   border-radius: 4px;
   border: 3px solid var(--Rotkehlchen-brown-dark);
-    background: #FFF;
+  background: #fff;
   width: 100%;
   height: 44px;
   align-items: center;
@@ -70,7 +70,7 @@
 }
 
 .login-div-input:focus-within {
-    border: 3px solid var(--Rotkehlchen-orange-default)
+  border: 3px solid var(--Rotkehlchen-orange-default);
 }
 
 .login-input {
@@ -79,7 +79,6 @@
   border: none;
   color: var(--Rotkehlchen-brown-middle);
   outline: 0 !important;
-
 }
 .login-here {
   color: var(--Rotkehlchen-orange-default);
@@ -90,7 +89,7 @@
 }
 
 .login-signup {
-    color: #FFF;
+  color: #fff;
   text-align: center;
   cursor: pointer;
 }
@@ -130,6 +129,7 @@
     height: 60vh;
     min-height: 400px;
     min-width: 500px;
+    backdrop-filter: blur(8px);
   }
 
   .login-image {
@@ -183,3 +183,6 @@
     gap: 16px;
   }
 }
+.error-messages {
+  color: red;
+}

code/frontend/yarn.lock

@@ -2751,6 +2751,15 @@ axe-core@^4.10.0:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.3.tgz#04145965ac7894faddbac30861e5d8f11bfd14fc"
   integrity sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==
 
+axios@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.10.0.tgz#af320aee8632eaf2a400b6a1979fa75856f38d54"
+  integrity sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
@@ -4655,7 +4664,7 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358"
   integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.15.6:
   version "1.15.9"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
   integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
@@ -4704,6 +4713,17 @@ form-data@^3.0.0:
     es-set-tostringtag "^2.1.0"
     mime-types "^2.1.35"
 
+form-data@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.3.tgz#608b1b3f3e28be0fccf5901fc85fb3641e5cf0ae"
+  integrity sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    es-set-tostringtag "^2.1.0"
+    hasown "^2.0.2"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -6499,7 +6519,7 @@ mime-db@1.52.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.54.0.tgz#cddb3ee4f9c64530dff640236661d42cb6a314f5"
   integrity sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==
 
-mime-types@^2.1.27, mime-types@^2.1.31, mime-types@^2.1.35, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@^2.1.35, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -7677,6 +7697,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 psl@^1.1.33:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.15.0.tgz#bdace31896f1d97cec6a79e8224898ce93d974c6"