Add persistent storage ,login and dashboard

app/client.tsx

@@ -1,11 +1,14 @@
 "use client";
 import { Provider } from "react-redux";
-import store from "./redux/store";
+import store, { persistor } from "./redux/store";
+import { PersistGate } from "redux-persist/integration/react";
 
 export default function Client({ children }: { children: React.ReactNode }) {
   return (
     <Provider store={store}>
-      {children}
+      <PersistGate loading={null} persistor={persistor}>
+        {children}
+      </PersistGate>
     </Provider>
   );
 }

app/components/URL.tsx

@@ -0,0 +1 @@
+export const API_URL = "https://api.port0.iiitk.in";

app/dashboard/Details.tsx

@@ -1,25 +1,34 @@
 import DarkModeStatus from "../redux/status/darkModeStatus";
+import UserDataStatus from "../redux/status/userDataStatus";
 import DetailComponent from "./DetailComponent";
 
 const Details = () => {
   const dark = DarkModeStatus();
+  const vault: any = UserDataStatus();
+  const userDetails = vault.UserData.FormData;
   const detailArray = [
     "Name",
-    "Age",
     "Batch",
+    "Year",
     "Course",
     "Roll No",
     "Username",
     "Email",
+    "Phone",
+    "Personal Email",
+    "State",
   ];
   const detailValue = [
-    "John Doe",
-    "18",
-    "2023",
-    "CSE Core",
-    "2023 BCX 1234",
-    "JohnDoe",
-    "john23bcx1234@ iiitkottayam.ac.in",
+    `${userDetails.firstName} ${userDetails.lastName}`,
+    userDetails.batch,
+    userDetails.year,
+    userDetails.course,
+    userDetails.rollNumber,
+    userDetails.port0Username,
+    userDetails.collegeEmail,
+    userDetails.phone,
+    userDetails.personalEmail,
+    userDetails.state,
   ];
 
   return (

app/dashboard/HomePage.tsx

@@ -0,0 +1,49 @@
+"use client";
+import NavBar from "../components/NavBar";
+import DarkModeStatus from "../redux/status/darkModeStatus";
+import UserDataStatus from "../redux/status/userDataStatus";
+import Details from "./Details";
+
+const HomePage = () => {
+  const details: any = UserDataStatus();
+  const name = `${details.UserData.FormData.firstName} ${details.UserData.FormData.lastName}`;
+  const dark = DarkModeStatus();
+  return (
+    <div
+      className={
+        dark
+          ? "h-screen overflow-auto flex flex-col bg-gradient-to-b from-[#020024] to-[#020024] text-white transition-all duration-500 ease-in"
+          : "h-screen overflow-auto flex flex-col bg-gradient-to-b from-amber-100 to-white text-black transition-all duration-500 ease-in"
+      }
+    >
+      <NavBar />
+      <div>
+        <h1
+          className={
+            dark
+              ? "md:text-4xl text-4xl ml-5 my-10 font-extrabold"
+              : "md:text-4xl text-4xl ml-5 my-10 font-extrabold text-red-900"
+          }
+        >
+          Welcome, {name}
+        </h1>
+        <div>
+          <Details />
+          <div className="flex justify-center align-center mt-5">
+            <button
+              className={
+                dark
+                  ? "text-white text-xl bg-slate-800 border-0 p-2 rounded-lg flex align-center justify-center mb-10"
+                  : "text-xl  bg-red hover:bg-beige-800 border border-red-900 p-2 rounded-lg  flex align-center justify-center mb-10"
+              }
+            >
+              Edit Details
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;

app/dashboard/page.tsx

@@ -1,48 +1,24 @@
 "use client";
 import NavBar from "../components/NavBar";
 import DarkModeStatus from "../redux/status/darkModeStatus";
+import LoggedInStatus from "../redux/status/loggedInStatus";
+import UserDataStatus from "../redux/status/userDataStatus";
 import Details from "./Details";
+import HomePage from "./HomePage";
+import { useRouter } from "next/navigation";
 
 const Dashboard = () => {
-  const name = "John Doe";
-  const dark = DarkModeStatus();
-
-  return (
-    <div
-      className={
-        dark
-          ? "h-screen overflow-auto flex flex-col bg-gradient-to-b from-[#020024] to-[#020024] text-white transition-all duration-500 ease-in"
-          : "h-screen overflow-auto flex flex-col bg-gradient-to-b from-amber-100 to-white text-black transition-all duration-500 ease-in"
-      }
-    >
-      <NavBar />
-      <div>
-        <h1
-          className={
-            dark
-              ? "md:text-4xl text-4xl ml-5 my-10 font-extrabold"
-              : "md:text-4xl text-4xl ml-5 my-10 font-extrabold text-red-900"
-          }
-        >
-          Welcome, {name}
-        </h1>
-        <div>
-          <Details />
-          <div className="flex justify-center align-center mt-5">
-            <button
-              className={
-                dark
-                  ? "text-white text-xl bg-slate-800 border-0 p-2 rounded-lg flex align-center justify-center mb-10"
-                  : "text-xl  bg-red hover:bg-beige-800 border border-red-900 p-2 rounded-lg  flex align-center justify-center mb-10"
-              }
-            >
-              Edit Details
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+  const router = useRouter();
+  const logInStatus = LoggedInStatus();
+  if (logInStatus) {
+    return (
+      <>
+        <HomePage />;
+      </>
+    );
+  } else {
+    router.push("/login");
+  }
 };
 
 export default Dashboard;

app/login/components/Form.tsx

@@ -1,11 +1,74 @@
 import React, { useState } from "react";
 import Link from "next/link";
 import DarkModeStatus from "@/app/redux/status/darkModeStatus";
+import axios from "axios";
+import { emailRegex } from "../../register/components/Regex";
+import { createHash } from "crypto";
+import { useRouter } from "next/navigation";
+import decodeVault from "./decodeVault";
+import { useDispatch } from "react-redux";
+import { API_URL } from "@/app/components/URL";
 const Form = () => {
+  const dispatch = useDispatch();
+  const router = useRouter();
   const [password, setPassword] = useState("");
-  const handleSubmit = () => {
+  const [email, setEmail] = useState("");
+  let hashedPassword = "";
+  const url = API_URL;
+  const handleSubmit = async () => {
+    hashedPassword = await createHash("sha256").update(password).digest("hex");
     event?.preventDefault();
-    //will do this later
+    if (!emailRegex(email)) {
+      alert("Invalid Email");
+      return;
+    }
+    let token = "";
+    try {
+      await axios
+        .post(`${url}/auth/issueToken`, {
+          email: email,
+          password: password,
+        })
+        .then((res) => {
+          console.log(res);
+          token = res.data.token;
+        });
+    } catch (error) {
+      console.log(error);
+    }
+
+    const payload = {
+      token: token,
+      email: email,
+      password: hashedPassword,
+    };
+    try {
+      await axios.post(`${url}/auth/login`, payload).then((res) => {
+        console.log(res);
+        if (res.status === 200) {
+          alert("Login Successful");
+          const vault: object = {
+            aes256Bit: res.data.aes256Bit,
+            salt: res.data.salt,
+            password: password,
+          };
+          let decodedVault: any = decodeVault(vault);
+          dispatch({
+            type: "UPDATE_USER_DATA",
+            payload: decodedVault,
+          });
+          dispatch({
+            type: "CHANGE_LOG_STATUS",
+          });
+          router.push("/dashboard");
+        }
+      });
+    } catch (error: any) {
+      console.error("Error:", error);
+      if (error.response.status == 401) {
+        alert("Invalid Credentials");
+      }
+    }
   };
   const dark = DarkModeStatus();
   return (
@@ -21,10 +84,12 @@ const Form = () => {
         <div className="page1">
           <div>
             <label>
-              Email: <br />
+              College Email: <br />
               <input
                 type="email"
                 name="email"
+                value={email}
+                onChange={(evt) => setEmail(evt.target.value)}
                 className={
                   dark
                     ? "text-white bg-slate-800 border-gray-600 p-2 rounded-lg"
@@ -36,7 +101,7 @@ const Form = () => {
 
           <div>
             <label>
-              Password: <br />
+              Port0 Password: <br />
               <input
                 type="password"
                 name="password"
@@ -51,29 +116,9 @@ const Form = () => {
             </label>
           </div>
         </div>
-        <div className="page2">
-          <div>
-            <label>
-              Year: <br />
-              <select
-                name="year"
-                className={
-                  dark
-                    ? "text-white bg-slate-800 border-gray-600 p-2 rounded-lg mt-3 flex w-40 md:ml-4"
-                    : "bg-white p-2 rounded-lg mt-3 flex w-40 md:ml-4"
-                }
-              >
-                <option value="2021">2021</option>
-                <option value="2022">2022</option>
-                <option value="2023">2023</option>
-                <option value="2023">2024</option>
-              </select>
-            </label>
-          </div>
-        </div>
       </div>
       <div className="flex flex-col justify-center items-center">
-        <button>Login</button>
+        <button type="submit">Login</button>
         <div className="text-sm">
           <p>
             Don&apos;t have an account?{" "}

app/login/components/decodeVault.tsx

@@ -0,0 +1,6 @@
+const { convertFromAES } = require("@harshiyer/json-crypto");
+export default function decodeVault(vault: any) {
+  const { aes256Bit, salt, password } = vault;
+  const decryptedData: object = new convertFromAES(aes256Bit, password, salt);
+  return decryptedData;
+}

app/login/page.tsx

@@ -4,12 +4,19 @@ import Form from "./components/Form";
 import NavBar from "../components/NavBar";
 import DarkModeStatus from "../redux/status/darkModeStatus";
 import { Roboto_Mono } from "next/font/google";
+import LoggedInStatus from "../redux/status/loggedInStatus";
+import { useRouter } from "next/navigation";
 const roboto_mono = Roboto_Mono({
-  weight: '400',
-  subsets: ['latin'],
-})
+  weight: "400",
+  subsets: ["latin"],
+});
 export default function Registration() {
+  const router = useRouter();
   const dark = DarkModeStatus();
+  const loggedIn = LoggedInStatus();
+  if (loggedIn) {
+    router.push("/dashboard");
+  }
   return (
     <section
       className={
@@ -29,7 +36,8 @@ export default function Registration() {
                   : "text-3xl text-center p-3 text-red-900"
               }
             >
-              Login to the <span className={roboto_mono.className}>Port0</span> Authentication
+              Login to the <span className={roboto_mono.className}>Port0</span>{" "}
+              Authentication
             </h1>
           </div>
           <div className="mb-12 ">

app/redux/index.tsx

@@ -1,14 +1,16 @@
+import { combineReducers } from "redux";
 import darkModeReducer from "./darkMode/darkModeReducers";
 import emailReducer from "./email/emailReducers";
-import { combineReducers } from "redux";
 import formDataReducer from "./formData/formDataReducers";
 import userDataReducer from "./userData/userDataReducer";
+import logInReducer from "./loggedIn/loggedInActions";
 
 const allReducers = combineReducers({
   darkMode: darkModeReducer,
   email: emailReducer,
   formData: formDataReducer,
   userData: userDataReducer,
+  isLoggedIn: logInReducer,
 });
 
 export default allReducers;

app/redux/loggedIn/loggedInActions.tsx

@@ -0,0 +1,19 @@
+import { CHANGE_LOG_STATUS } from "./loggedInTypes";
+
+const initialState = {
+  isLoggedIn: false,
+};
+
+const logInReducer = (state = initialState, action: { type: any }) => {
+  switch (action.type) {
+    case CHANGE_LOG_STATUS:
+      return {
+        ...state,
+        isLoggedIn: !state.isLoggedIn,
+      };
+    default:
+      return state;
+  }
+};
+
+export default logInReducer;

app/redux/loggedIn/loggedInReducers.tsx

@@ -0,0 +1,7 @@
+import { CHANGE_LOG_STATUS } from "./loggedInTypes";
+
+export const updateData = (data: object) => {
+  return {
+    type: CHANGE_LOG_STATUS,
+  };
+};

app/redux/loggedIn/loggedInTypes.tsx

@@ -0,0 +1 @@
+export const CHANGE_LOG_STATUS = "CHANGE_LOG_STATUS";