matarial-init 1.0.0

package/src/pages/Signin.jsx

@@ -0,0 +1,73 @@
+import { useState } from "react";
+import Button from "../components/Button";
+import Input from "../components/Input";
+import { useFormik } from "formik";
+import { signInSchema } from "../validation/Validation";
+import { STORAGE_KEYS } from "../constants/storageKeys";
+import { findData, setData } from "../uttils/persistence";
+import { toast } from "react-toastify";
+import { useNavigate } from "react-router-dom";
+
+const fields = [
+    {
+        name: "email",
+        type: "email",
+        placeholder: "Email"
+    },
+    {
+        name: "password",
+        type: "password",
+        placeholder: "Password"
+    },
+]
+
+const SignIn = () => {
+    const navigate = useNavigate()
+    const handleSignIn = (values) => {
+        const { email, password } = values;
+        const user = findData(STORAGE_KEYS.USERS, (user) => user.email === email && user.password === password);
+        if (!user) {
+            toast.error("Invalid email or password.");
+            return;
+        }
+        setData(STORAGE_KEYS.CURRENT_USER, user);
+        toast.success("Sign In successful!");
+        navigate("/dashboard");
+    }
+    const formik = useFormik({
+        initialValues: {
+            email: "",
+            password: "",
+        },
+        validationSchema: signInSchema,
+        onSubmit: handleSignIn
+    })
+
+    return (
+        <div className="flex flex-col gap-4 items-center justify-center h-screen">
+            <form onSubmit={formik.handleSubmit} className="w-[20%] flex flex-col gap-4 border p-4 rounded-md shadow-md">
+                <h1 className="border-b-1 p-2 font-bold">Please Sign In</h1>
+                {fields.map((field, index) =>
+                    <div key={field.name}>
+                        <Input
+                            type={field.type}
+                            name={field.name}
+                            value={formik.values[field.name]}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            placeholder={field.placeholder}
+                        />
+                        {formik.touched[field.name] && formik.errors[field.name] && (
+                            <div>
+                                <p className="text-red-400">{formik.errors[field.name]}</p>
+                            </div>
+                        )}
+                    </div>
+                )}
+                <Button text="Sign In" type="submit" />
+            </form>
+        </div>
+    )
+}
+
+export default SignIn 

package/src/routes/ProtectedRoute.jsx

@@ -0,0 +1,11 @@
+import { Navigate } from "react-router-dom";
+import { STORAGE_KEYS } from "../constants/storageKeys";
+import { getData } from "../uttils/persistence";
+
+export const ProtectedRoute = ({children}) => {
+    const currentUser = getData(STORAGE_KEYS.CURRENT_USER)
+    if(!currentUser){
+        return <Navigate to="/signin" replace />
+    }
+    return children;
+}

package/src/routes/PublicRoute.jsx

@@ -0,0 +1,11 @@
+import { Navigate } from "react-router-dom";
+import { STORAGE_KEYS } from "../constants/storageKeys";
+import { getData } from "../uttils/persistence";
+
+export const PublicRoute = ({children}) => {
+    const currentUser = getData(STORAGE_KEYS.CURRENT_USER)
+    if(currentUser){
+        return <Navigate to="/dashboard" replace />
+    }
+    return children;
+}

package/src/uttils/persistence.js

@@ -0,0 +1,49 @@
+export const getData = (key) => {
+    const data = localStorage.getItem(key)
+    return data ? JSON.parse(data) : null
+}
+
+export const getCollection = (key) => {
+    return getData(key) || []
+}
+
+export const setData = (key, data) => {
+    localStorage.setItem(key, JSON.stringify(data))
+}
+
+export const addData = (key, data) => {
+    const existingData = getCollection(key)
+    existingData.push(data)
+    setData(key, existingData)
+}
+
+export const findData = (key, callback) => {
+    const existingData = getCollection(key)
+    return existingData.find(callback)
+
+}
+
+export const filterData = (key, callback) => {
+    const existingData = getCollection(key)
+    return existingData.filter(callback)
+}
+
+export const updateData = (key, callback) => {
+    const existingData = getCollection(key)
+    const updatedData = existingData.map(callback)
+    setData(key, updatedData)
+}
+
+export const deleteData = (key, callback) => {
+    const existingData = getCollection(key)
+    const updatedData = existingData.filter(callback)
+    setData(key, updatedData)
+}
+
+export const clearData = (key) => {
+    localStorage.removeItem(key)
+}
+
+export const existData = (key) => {
+    return localStorage.getItem(key) !== null
+}

package/src/validation/Validation.jsx

@@ -0,0 +1,41 @@
+import * as yup from "yup";
+
+export const signUpSchema = yup.object({
+    username: yup.string().required("Username is required").min(3, "Username must be atleast 3 characters long").max(20, "Username must be less than 20 characters long"),
+    email: yup.string().email("Invalid email address").required("Email is required"),
+    password: yup.string().required("Password is required").min(8, "Password must be at least 8 characters long"),
+    confirmPassword: yup.string().oneOf([yup.ref("password"), null], "Passwords must match")
+})
+
+export const signInSchema = yup.object({
+    email: yup.string().email("Invalid email address").required("Email is required"),
+    password: yup.string().required("Password is required").min(8, "Password must be at least 8 characters long"),
+})
+
+export const addMemberSchema = yup.object({
+    username: yup.string().required("Username is required").min(3, "Username must be atleast 3 characters long").max(20, "Username must be less than 20 characters long"),
+    email: yup.string().email("Invalid email address").required("Email is required"),
+    password: yup.string().required("Password is required").min(8, "Password must be at least 8 characters long"),
+    confirmPassword: yup.string().oneOf([yup.ref("password"), null], "Passwords must match")
+})
+
+export const addBookSchema = yup.object({
+    title: yup.string().required("title is required").min(3, "title must be atleast 3 characters long").max(25, "title must be less than 20 characters long"),
+    author: yup.string().required("author is required").min(3, "author must be atleast 3 characters long").max(20, "author must be less than 20 characters long"),
+    isbn: yup.string().required("isbn is required").min(3, "isbn must be atleast 3 characters long").max(10, "isbn must be less than 20 characters long"),
+    category: yup.string().required("category is required").min(3, "category must be atleast 3 characters long").max(10, "category must be less than 20 characters long"),
+    quantity: yup.number().required("Books quantity is required").min(1, "quantity must be atleast 1").max(100, "quantity must  less than 100")
+})
+
+export const myBookSchema = (borrowDate) => {
+    const maxDate = new Date(borrowDate);
+    maxDate.setDate(maxDate.getDate() + 7);
+    return yup.object({
+        return_date: yup
+            .date()
+            .required("Return date is required")
+            .min(borrowDate,"Return date cannot be before today")
+            .max(maxDate,"Return date cannot be more than 7 days")
+    });
+
+};