Battery
diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx
new file mode 100644
index 0000000..779d2b9
--- /dev/null
+++ b/src/context/AuthContext.jsx
@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+ const [user, setUser] = useState(null);
+
+ // Load user from localStorage (persist session)
+ useEffect(() => {
+ const savedUser = localStorage.getItem('user');
+ if (savedUser) setUser(JSON.parse(savedUser));
+ }, []);
+
+ // Save user to localStorage
+ useEffect(() => {
+ if (user) localStorage.setItem('user', JSON.stringify(user));
+ else localStorage.removeItem('user');
+ }, [user]);
+
+ const loginUser = (userData) => {
+ setUser(userData);
+ };
+
+ const logoutUser = () => {
+ setUser(null);
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useAuth = () => useContext(AuthContext);
diff --git a/src/context/SocketContext.jsx b/src/context/SocketContext.jsx
index f9cc225..45d38f5 100644
--- a/src/context/SocketContext.jsx
+++ b/src/context/SocketContext.jsx
@@ -2,6 +2,7 @@ import React, { createContext, useContext, useEffect, useState } from 'react';
import { io } from 'socket.io-client';
import { useApp } from './AppContext';
import { useNotification } from './NotificationContext';
+import { useAuth } from './AuthContext';
const SocketContext = createContext();
@@ -10,8 +11,20 @@ export function SocketProvider({ children }) {
const [isConnected, setIsConnected] = useState(false);
const { dispatch } = useApp();
const { addNotification } = useNotification();
+ const { user } = useAuth();
+ const isAuthenticated = !!user;
useEffect(() => {
+
+ if (!isAuthenticated) {
+ if (socket) {
+ socket.disconnect();
+ setSocket(null);
+ setIsConnected(false);
+ }
+ return;
+ }
+
// Connect to mock server - in production, replace with actual server URL
const newSocket = io('http://localhost:3001', {
transports: ['websocket'],
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
new file mode 100644
index 0000000..b3d331c
--- /dev/null
+++ b/src/pages/Login.jsx
@@ -0,0 +1,130 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { useApp } from "../context/AppContext";
+import { useAuth } from "../context/AuthContext"; // π import AuthContext hook
+
+const Login = () => {
+ const [credentials, setCredentials] = useState({ email: "", password: "" });
+ const [loading, setLoading] = useState(false);
+ const navigate = useNavigate();
+ const { state } = useApp();
+ const { loginUser } = useAuth(); // π get loginUser from context
+
+ const handleChange = (e) => {
+ setCredentials({ ...credentials, [e.target.name]: e.target.value });
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setLoading(true);
+ try {
+ const response = await fetch("http://localhost:3001/api/login", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ credentials: "include", // β
send/receive cookies
+ body: JSON.stringify(credentials),
+ });
+ console.log("click1")
+ const data = await response.json();
+ console.log("click1")
+ if (response.ok) {
+ // β
Save user data to AuthContext and localStorage
+ loginUser(data.user || { email: credentials.email });
+
+ toast.success("Login successful! π", { autoClose: 2000 });
+ console.log("click1")
+ // β
Redirect to dashboard
+ setTimeout(() => navigate("/dashboard"), 1000);
+ } else {
+ toast.error(data.message || "Invalid email or password.");
+ }
+ } catch (err) {
+ console.error("Login error:", err);
+ toast.error("Server not responding. Please try again.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ Smart Energy Tracker β‘
+
+
+ Monitor your inverter & energy usage with ease.
+
+
+
+
+
+ Donβt have an account?{" "}
+
+ Register
+
+
+
+
+ );
+};
+
+export default Login;
diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx
new file mode 100644
index 0000000..566b855
--- /dev/null
+++ b/src/pages/Register.jsx
@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { useApp } from "../context/AppContext";
+import { useAuth } from "../context/AuthContext";
+
+const Register = () => {
+ const [formData, setFormData] = useState({
+ fullname: "",
+ username: "",
+ email: "",
+ password: "",
+ });
+ const [loading, setLoading] = useState(false);
+ const navigate = useNavigate();
+ const { state } = useApp();
+ const { loginUser } = useAuth();
+
+ const handleChange = (e) => {
+ setFormData({ ...formData, [e.target.name]: e.target.value });
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setLoading(true);
+
+ try {
+ const response = await fetch("http://localhost:3001/api/register", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ credentials: "include", // β
to send & receive cookies
+ body: JSON.stringify(formData),
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ // β
Save user in AuthContext
+ loginUser(data.user || { email: formData.email });
+
+ toast.success("Account created successfully! β‘", { autoClose: 2000 });
+
+ // β
Redirect after successful register
+ setTimeout(() => navigate("/dashboard"), 1000);
+ } else {
+ toast.error(data.message || "Registration failed.");
+ }
+ } catch (err) {
+ console.error("Register Error:", err);
+ toast.error("Server not responding. Please try again.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ Create Account β‘
+
+
+ Join Smart Energy Tracker and monitor power like never before.
+
+
+
+
+
+ Already have an account?{" "}
+
+ Login
+
+
+
+
+ );
+};
+
+export default Register;