Yavuzlar · mozlercelik · May 11, 2024 · May 9, 2024 · May 9, 2024 · May 9, 2024
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -38,7 +38,8 @@
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^13.5.0",
     "react-multi-carousel": "^2.8.4",
-    "react-redux": "^9.1.0"
+    "react-redux": "^9.1.0",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "locize-cli": "7.14.14"

diff --git a/frontend/src/configs/validation/changePassSchema.js b/frontend/src/configs/validation/changePassSchema.js
@@ -0,0 +1,17 @@
+import * as yup from "yup";
+import { validation } from "@/utils/validation";
+
+export const changePasswordValidation = async (values) => {
+    const schema = yup.object().shape({
+      currentPassword: yup.string().required("Current password is required"),
+      newPassword: yup.string()
+        .required("New password is required")
+        .min(8, "Password must be at least 8 characters"),
+      confirmPassword: yup.string().oneOf(
+        [yup.ref("newPassword"), null],
+        "Passwords must match"
+      ),
+    });
+
+    return await validation(schema, values);
+  };
diff --git a/frontend/src/configs/validation/loginSchema.js b/frontend/src/configs/validation/loginSchema.js
@@ -0,0 +1,11 @@
+import { validation } from "src/utils/validation";
+import * as yup from "yup";
+
+export const loginValidation = async (values) => {
+    const schema = yup.object().shape({
+      email: yup.string().email("Invalid email").required("Email is required"),
+      password: yup.string().required("Password is required"),
+    });
+
+    return await validation(schema, values);
+  };
diff --git a/frontend/src/configs/validation/registerSchema.js b/frontend/src/configs/validation/registerSchema.js
@@ -0,0 +1,15 @@
+import * as yup from "yup";
+import { validation } from "@/utils/validation";
+
+export const registerValidation = async (values) => {
+    const schema = yup.object().shape({
+      fullname: yup.string().required("Fullname is required"),
+      username: yup.string().required("Username is required"),
+      email: yup.string().email("Invalid email").required("Email is required"),
+      password: yup.string()
+        .required("Password is required")
+        .min(8, "Password must be at least 8 characters"),
+    });
+
+    return await validation(schema, values);
+  };
diff --git a/frontend/src/pages/login.js b/frontend/src/pages/login.js
@@ -1,7 +1,58 @@
+import { FormControl, Button, TextField } from "@mui/material";
+import { useState, useEffect } from "react";
+import { loginValidation } from "src/configs/validation/loginSchema";
+
 const { default: BlankLayout } = require("src/layout/BlankLayout");
 
 const Login = () => {
-  return <div>login</div>;
+  const [formData, setFormData] = useState(null);
+  const [errors, setErrors] = useState({});
+  const [formSubmit, setFormSubmit] = useState(false);
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async () => {
+    setFormSubmit(true);
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (formData && formSubmit) {
+        const errors = await loginValidation(formData);
+        setErrors(errors);
+      }
+    };
+    fetchData();
+  }, [formData, formSubmit]);
+
+  return (
+    <div>
+      <FormControl>
+        <TextField
+          name="email"
+          label="Email"
+          variant="outlined"
+          onChange={handleChange}
+          error={errors.email ? true : false}
+          helperText={errors.email}
+        />
+      </FormControl>
+      <FormControl>
+        <TextField
+          name="password"
+          label="Password"
+          variant="outlined"
+          type="password"
+          onChange={handleChange}
+          error={errors.password ? true : false}
+          helperText={errors.password}
+        />
+      </FormControl>
+      <Button onClick={handleSubmit}>Login</Button>
+    </div>
+  );
 };
 
 Login.guestGuard = true;

diff --git a/frontend/src/utils/validation.js b/frontend/src/utils/validation.js
@@ -1,19 +1,21 @@
+import { current } from "@reduxjs/toolkit";
 
 export const validation = async (schema, values) => {
-    let schemaErrors = null
+  let schemaErrors = null;
+
+  try {
+    const response = await schema.validate(values, { abortEarly: false });
+  } catch (err) {
+    let Errors = err.inner?.map((err) => {
+      return { [err.path]: err.message };
+    });
+
+    if (Errors) schemaErrors = Object.assign({}, ...Errors);
+    else schemaErrors = null;
+  }
+
+  return { ...schemaErrors };
+};
 
-    try {
-        const response = await schema.validate(values, { abortEarly: false })
-    } catch (err) {
-        let Errors = err.inner?.map(err => {
-            return { [err.path]: err.message }
-        })
 
-        if (Errors)
-            schemaErrors = Object.assign({}, ...Errors)
-        else
-            schemaErrors = null
-    }
 
-    return { ...schemaErrors }
-}