diff --git a/src/App.jsx b/src/App.jsx
index d77753d..70fadf8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,27 +2,29 @@ import { useState, useEffect } from 'react';
import { AlertCircle } from 'lucide-react';
import { GradesTable } from './components/GradesTable';
import { LoadingSpinner } from './components/LoadingSpinner';
+import { AuthPage } from './components/AuthPage';
+import { useAuth } from './contexts/AuthContext';
import { api } from './services/api';
import './App.css';
function App() {
+ const { user, loading: authLoading, logout } = useAuth();
const [data, setData] = useState(null);
- const [loading, setLoading] = useState(true);
+ const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
- const [username] = useState(
- import.meta.env.VITE_DEFAULT_USERNAME || 'keshav.anand.1'
- );
useEffect(() => {
- fetchGrades();
+ if (user) {
+ fetchGrades();
+ }
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [username]);
+ }, [user]);
const fetchGrades = async () => {
setLoading(true);
setError(null);
try {
- const result = await api.getGrades(username);
+ const result = await api.getGrades(user.username);
setData(result.user);
} catch (err) {
setError(err.message);
@@ -31,10 +33,22 @@ function App() {
}
};
+ // Show loading spinner while checking auth
+ if (authLoading) {
+ return ;
+ }
+
+ // Show auth page if not logged in
+ if (!user) {
+ return ;
+ }
+
+ // Show loading spinner while fetching grades
if (loading) {
return ;
}
+ // Show error state
if (error) {
return (
@@ -55,12 +69,17 @@ function App() {
STUDENT GRADES
- Logged in as: {username}
+ Logged in as: {user.username}
-
+
+
+
+
+
+
+
STUDENT GRADES
+
+ {isLogin ? 'Sign in to your account' : 'Create a new account'}
+
+
+
+ {error && (
+
+ )}
+
+
+
+
+
+
+
+ {!isLogin && (
+
+
+ Note: Your Skyward credentials will be verified during registration.
+ Make sure to use your actual Skyward username and password.
+
+
+ )}
+
+
diff --git a/src/contexts/AuthContext.jsx b/src/contexts/AuthContext.jsx
new file mode 100644
index 0000000..964f7f0
--- /dev/null
+++ b/src/contexts/AuthContext.jsx
@@ -0,0 +1,91 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+
+const AuthContext = createContext(null);
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useAuth = () => {
+ const context = useContext(AuthContext);
+ if (!context) {
+ throw new Error('useAuth must be used within AuthProvider');
+ }
+ return context;
+};
+
+export const AuthProvider = ({ children }) => {
+ const [user, setUser] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ checkAuth();
+ }, []);
+
+ const checkAuth = async () => {
+ try {
+ const response = await fetch('http://localhost:4000/api/auth/me', {
+ credentials: 'include'
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ setUser(data.user);
+ }
+ } catch (error) {
+ console.error('Auth check failed:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const login = async (username, password) => {
+ const response = await fetch('http://localhost:4000/api/auth/login', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ credentials: 'include',
+ body: JSON.stringify({ username, password })
+ });
+
+ if (!response.ok) {
+ const data = await response.json();
+ throw new Error(data.error || 'Login failed');
+ }
+
+ const data = await response.json();
+ setUser(data.user);
+ return data;
+ };
+
+ const register = async (username, password) => {
+ const response = await fetch('http://localhost:4000/api/auth/register', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ credentials: 'include',
+ body: JSON.stringify({ username, password })
+ });
+
+ if (!response.ok) {
+ const data = await response.json();
+ throw new Error(data.error || 'Registration failed');
+ }
+
+ const data = await response.json();
+ setUser(data.user);
+ return data;
+ };
+
+ const logout = async () => {
+ try {
+ await fetch('http://localhost:4000/api/auth/logout', {
+ method: 'POST',
+ credentials: 'include'
+ });
+ } finally {
+ setUser(null);
+ }
+ };
+
+ return (
+
+ {children}
+
+ );
+};
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 0844130..c3030a2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,7 +16,7 @@ body {
}
#root {
- min-height: 100vh;
+ min-height: 10a0vh;
}
/* Custom scrollbar */
diff --git a/src/main.jsx b/src/main.jsx
index ecf2cca..97b9728 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,13 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
+import { AuthProvider } from './contexts/AuthContext'; // ADD THIS
import './index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
-
+
+
+
,
);
\ No newline at end of file
diff --git a/src/services/api.js b/src/services/api.js
index 48822ef..8166914 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -2,7 +2,9 @@ const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4000
export const api = {
async getGrades(username) {
- const response = await fetch(`${API_BASE_URL}/users/${username}/grades`);
+ const response = await fetch(`${API_BASE_URL}/users/${username}/grades`, {
+ credentials: 'include' // ADD THIS
+ });
if (!response.ok) {
throw new Error('Failed to fetch grades');
}
@@ -10,7 +12,9 @@ export const api = {
},
async getClasses(username) {
- const response = await fetch(`${API_BASE_URL}/users/${username}/classes`);
+ const response = await fetch(`${API_BASE_URL}/users/${username}/classes`, {
+ credentials: 'include' // ADD THIS
+ });
if (!response.ok) {
throw new Error('Failed to fetch classes');
}
@@ -18,7 +22,9 @@ export const api = {
},
async getFinalGrades(username) {
- const response = await fetch(`${API_BASE_URL}/users/${username}/final-grades`);
+ const response = await fetch(`${API_BASE_URL}/users/${username}/final-grades`, {
+ credentials: 'include' // ADD THIS
+ });
if (!response.ok) {
throw new Error('Failed to fetch final grades');
}
@@ -26,7 +32,9 @@ export const api = {
},
async getStats(username) {
- const response = await fetch(`${API_BASE_URL}/stats/users/${username}`);
+ const response = await fetch(`${API_BASE_URL}/stats/users/${username}`, {
+ credentials: 'include' // ADD THIS
+ });
if (!response.ok) {
throw new Error('Failed to fetch stats');
}
|