toggle error fixed

This commit is contained in:
Harshitha Shetty
2025-04-22 12:00:59 +05:30
parent 7aad05fb7a
commit 1427b6a642
11 changed files with 123 additions and 126 deletions

View File

@@ -18,12 +18,14 @@ import DepartmentConsolidated from "./Pages/DepartmentConsolidated";
import PanelConsolidated from "./Pages/PanelConsolidated"; import PanelConsolidated from "./Pages/PanelConsolidated";
import { AdminFacultyPage } from "./Pages/AdminFacultyPage"; import { AdminFacultyPage } from "./Pages/AdminFacultyPage";
import AdminCoursePage from "./Pages/AdminCoursePage"; import AdminCoursePage from "./Pages/AdminCoursePage";
import { ToastContainer } from "react-toastify";
function App() { function App() {
return ( return (
<> <>
<TokenRefresher /> <TokenRefresher />
<ToastContainer/>
<Routes> <Routes>
<Route path="/" element={<AuthPage />}></Route> <Route path="/" element={<AuthPage />}></Route>
<Route path="/course-form/:id" element={<PrivateRoute element={<CourseForm />} />} /> <Route path="/course-form/:id" element={<PrivateRoute element={<CourseForm />} />} />

View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Container, Col, Row, Button, Spinner } from "react-bootstrap"; import { Container, Col, Row, Button, Spinner } from "react-bootstrap";
import axios from "axios"; import axios from "axios";
import { ToastContainer, toast } from "react-toastify"; import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
import Navbar from "./Navbar"; import Navbar from "./Navbar";
import Footer from "./Footer"; import Footer from "./Footer";
@@ -9,7 +9,7 @@ import Footer from "./Footer";
function HomePage(props) { function HomePage(props) {
const notifyLoading = () => { const notifyLoading = () => {
toast.info("Logging Out Successfull.."); toast.info("Logging Out Successfully..");
}; };
const [user, setUser] = useState(null); const [user, setUser] = useState(null);
@@ -61,7 +61,6 @@ function HomePage(props) {
return ( return (
<> <>
<Navbar /> <Navbar />
<ToastContainer />
<div className="LoginPage"> <div className="LoginPage">
<Container className="HomePageContainer ProfileContainer"> <Container className="HomePageContainer ProfileContainer">
{loading ? ( {loading ? (

View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import Navbar from './Navbar'; import Navbar from './Navbar';
import { toast, ToastContainer } from "react-toastify"; import { toast} from "react-toastify";
import 'react-toastify/dist/ReactToastify.css'; import 'react-toastify/dist/ReactToastify.css';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import Footer from './Footer'; import Footer from './Footer';
@@ -149,7 +149,6 @@ export const AdminCoursePage = () => {
return ( return (
<> <>
<Navbar /> <Navbar />
<ToastContainer />
<div style={{ fontFamily: 'Arial, sans-serif', backgroundColor: '#f4f6f9', padding: '20px' }}> <div style={{ fontFamily: 'Arial, sans-serif', backgroundColor: '#f4f6f9', padding: '20px' }}>
<h2 style={{ textAlign: 'center', color: '#333', marginBottom: '20px' }}>Course Management</h2> <h2 style={{ textAlign: 'center', color: '#333', marginBottom: '20px' }}>Course Management</h2>

View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import Navbar from './Navbar'; import Navbar from './Navbar';
import { toast, ToastContainer } from "react-toastify"; import { toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css'; import 'react-toastify/dist/ReactToastify.css';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import Footer from './Footer'; import Footer from './Footer';
@@ -28,18 +28,18 @@ export const AdminFacultyPage = () => {
useEffect(() => { useEffect(() => {
const checkAdmin = async () => { const checkAdmin = async () => {
try { try {
const res = await axios.get("http://localhost:8080/api/me", { withCredentials: true }); const res = await axios.get("http://localhost:8080/api/me", { withCredentials: true });
console.log(res.data); console.log(res.data);
if (!res.data.isAdmin) { if (!res.data.isAdmin) {
handleUnauthorizedAccess();
} else {
setIsLoading(false);
}
} catch (error) {
console.error("Unauthorized access:", error);
handleUnauthorizedAccess(); handleUnauthorizedAccess();
} else {
setIsLoading(false);
}
} catch (error) {
console.error("Unauthorized access:", error);
handleUnauthorizedAccess();
} }
}; };
fetchFaculties(); fetchFaculties();
fetchCourses(); fetchCourses();
checkAdmin(); checkAdmin();
@@ -47,19 +47,19 @@ export const AdminFacultyPage = () => {
const handleUnauthorizedAccess = async () => { const handleUnauthorizedAccess = async () => {
try { try {
toast.warning("Unauthorized access. Logging out...", { position: "top-center" }); toast.warning("Unauthorized access. Logging out...", { position: "top-center" });
// Attempt to log out // Attempt to log out
await axios.get("http://localhost:8080/auth/logout", { withCredentials: true }); await axios.get("http://localhost:8080/auth/logout", { withCredentials: true });
// Delay redirection to show the toast message // Delay redirection to show the toast message
setTimeout(() => { setTimeout(() => {
navigate("/"); // Redirect to login navigate("/"); // Redirect to login
}, 1500); }, 1500);
} catch (error) { } catch (error) {
console.error("Error during unauthorized access handling:", error); console.error("Error during unauthorized access handling:", error);
} }
}; };
useEffect(() => { useEffect(() => {
if (!isLoading) { if (!isLoading) {
@@ -207,102 +207,102 @@ export const AdminFacultyPage = () => {
</div> </div>
{showForm && ( {showForm && (
<div style={{ <div style={{
position: 'fixed', position: 'fixed',
top: 0, top: 0,
left: 0, left: 0,
width: '100vw', width: '100vw',
height: '100vh', height: '100vh',
backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
zIndex: 1000, // Ensures it stays above other content zIndex: 1000, // Ensures it stays above other content
padding: '10px', // Prevents content from hitting screen edges padding: '10px', // Prevents content from hitting screen edges
}}> }}>
<div style={{ <div style={{
backgroundColor: '#fff', backgroundColor: '#fff',
borderRadius: '10px', borderRadius: '10px',
padding: '20px', padding: '20px',
boxShadow: '0 5px 20px rgba(0,0,0,0.2)', boxShadow: '0 5px 20px rgba(0,0,0,0.2)',
maxWidth: '90vw', // Ensures it doesnt exceed the viewport width maxWidth: '90vw', // Ensures it doesnt exceed the viewport width
maxHeight: '80vh', // Ensures it doesnt exceed the viewport height maxHeight: '80vh', // Ensures it doesnt exceed the viewport height
overflowY: 'auto', // Enables scrolling if content overflows overflowY: 'auto', // Enables scrolling if content overflows
display: 'flex', display: 'flex',
flexDirection: 'column', // Ensures elements stack properly flexDirection: 'column', // Ensures elements stack properly
}}> }}>
<h3>{isEditMode ? 'Edit Faculty' : 'Add New Faculty'}</h3> <h3>{isEditMode ? 'Edit Faculty' : 'Add New Faculty'}</h3>
<form onSubmit={handleAddOrUpdateFaculty} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<div style={inputContainer}>
<input
placeholder="Faculty ID"
value={currentFaculty.facultyId}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, facultyId: e.target.value })}
style={inputStyle}
/>
<input
placeholder="Name"
value={currentFaculty.name}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, name: e.target.value })}
style={inputStyle}
/>
</div>
<div style={inputContainer}> <form onSubmit={handleAddOrUpdateFaculty} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<input <div style={inputContainer}>
placeholder="Email" <input
value={currentFaculty.email} placeholder="Faculty ID"
onChange={(e) => setCurrentFaculty({ ...currentFaculty, email: e.target.value })} value={currentFaculty.facultyId}
style={inputStyle} onChange={(e) => setCurrentFaculty({ ...currentFaculty, facultyId: e.target.value })}
/> style={inputStyle}
<input />
placeholder="Department" <input
value={currentFaculty.department} placeholder="Name"
onChange={(e) => setCurrentFaculty({ ...currentFaculty, department: e.target.value })} value={currentFaculty.name}
style={inputStyle} onChange={(e) => setCurrentFaculty({ ...currentFaculty, name: e.target.value })}
/> style={inputStyle}
</div> />
</div>
<div style={inputContainer}> <div style={inputContainer}>
<input <input
placeholder="Program" placeholder="Email"
value={currentFaculty.program} value={currentFaculty.email}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, program: e.target.value })} onChange={(e) => setCurrentFaculty({ ...currentFaculty, email: e.target.value })}
style={inputStyle} style={inputStyle}
/> />
</div> <input
placeholder="Department"
value={currentFaculty.department}
onChange={(e) => setCurrentFaculty({ ...currentFaculty, department: e.target.value })}
style={inputStyle}
/>
</div>
{currentFaculty.courses.map((course, index) => ( <div style={inputContainer}>
<div key={index} style={{ display: 'flex', gap: '10px', alignItems: 'center' }}> <input
<select placeholder="Program"
value={course} value={currentFaculty.program}
onChange={(e) => handleCourseChange(index, e.target.value)} onChange={(e) => setCurrentFaculty({ ...currentFaculty, program: e.target.value })}
style={{ ...inputStyle, flex: 1 }} style={inputStyle}
> />
<option value="">Select Course</option> </div>
{Object.entries(courses).map(([courseId, courseName]) => (
<option key={courseId} value={courseId}> {currentFaculty.courses.map((course, index) => (
{courseName} <div key={index} style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
</option> <select
value={course}
onChange={(e) => handleCourseChange(index, e.target.value)}
style={{ ...inputStyle, flex: 1 }}
>
<option value="">Select Course</option>
{Object.entries(courses).map(([courseId, courseName]) => (
<option key={courseId} value={courseId}>
{courseName}
</option>
))}
</select>
<button type="button" onClick={() => handleRemoveCourse(index)} style={removeButtonStyle}></button>
</div>
))} ))}
</select>
<button type="button" onClick={() => handleRemoveCourse(index)} style={removeButtonStyle}></button> <button type="button" onClick={handleAddCourse} style={addCourseButtonStyle}>+ Add Course</button>
<div style={formButtonContainer}>
<button type="submit" style={submitButtonStyle}>
{isEditMode ? 'Update Faculty' : 'Add Faculty'}
</button>
<button type="button" onClick={() => setShowForm(false)} style={cancelButtonStyle}>Cancel</button>
</div>
</form>
</div> </div>
))}
<button type="button" onClick={handleAddCourse} style={addCourseButtonStyle}>+ Add Course</button>
<div style={formButtonContainer}>
<button type="submit" style={submitButtonStyle}>
{isEditMode ? 'Update Faculty' : 'Add Faculty'}
</button>
<button type="button" onClick={() => setShowForm(false)} style={cancelButtonStyle}>Cancel</button>
</div> </div>
</form> )}
</div>
</div>
)}
@@ -378,7 +378,7 @@ export const AdminFacultyPage = () => {
)} )}
</tbody> </tbody>
</table > </table >
<Footer/> <Footer />
</> </>
); );
}; };

View File

@@ -3,7 +3,7 @@ import axios from "axios";
import * as XLSX from "xlsx-js-style"; import * as XLSX from "xlsx-js-style";
import { sendEmail, createExcelBook } from "../api"; import { sendEmail, createExcelBook } from "../api";
import Navbar from "./Navbar"; import Navbar from "./Navbar";
import { toast, ToastContainer } from "react-toastify"; import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
import Footer from "./Footer"; import Footer from "./Footer";
@@ -223,7 +223,6 @@ const ConsolidatedTable = () => {
minHeight: "100vh" minHeight: "100vh"
}}> }}>
<Navbar /> <Navbar />
<ToastContainer />
<div style={styles.main}> <div style={styles.main}>
<h1 style={styles.header}>Faculty Tables with Download Options</h1> <h1 style={styles.header}>Faculty Tables with Download Options</h1>

View File

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
import "./FilterPage.css"; import "./FilterPage.css";
import { fetchCourses } from "../api"; import { fetchCourses } from "../api";
import Navbar from "./Navbar"; import Navbar from "./Navbar";
import { toast, ToastContainer } from "react-toastify"; import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
const FilterPage = () => { const FilterPage = () => {
@@ -90,7 +90,6 @@ const FilterPage = () => {
return ( return (
<> <>
<Navbar /> <Navbar />
<ToastContainer />
<div className="filter-container"> <div className="filter-container">
<div className="filter-form"> <div className="filter-form">
<select <select

View File

@@ -57,7 +57,7 @@ function ForgetPwPage() {
return ( return (
<> <>
<ToastContainer /> {/* <ToastContainer /> */}
<div className="LoginPage"> <div className="LoginPage">
<Container className="LoginPageContainer"> <Container className="LoginPageContainer">
<Row className="PwPageContainer"> <Row className="PwPageContainer">

View File

@@ -87,7 +87,7 @@ function AuthPage() {
return ( return (
<> <>
<ToastContainer /> {/* <ToastContainer /> */}
<div className="LoginPage"> <div className="LoginPage">
<Container className={`LoginPageContainer ${signin ? "active" : ""}`}> <Container className={`LoginPageContainer ${signin ? "active" : ""}`}>
<Row> <Row>

View File

@@ -60,7 +60,7 @@ const Navbar = () => {
width: "95%", width: "95%",
margin: "0 auto" margin: "0 auto"
}}> }}>
<ToastContainer /> {/* <ToastContainer /> */}
<NavLink to="/Welcome"> <NavLink to="/Welcome">
<img src="logo_.png" alt="Logo" style={{ <img src="logo_.png" alt="Logo" style={{

View File

@@ -51,7 +51,7 @@ function ResetPwPage() {
return ( return (
<> <>
<ToastContainer /> {/* <ToastContainer /> */}
<div className="LoginPage"> <div className="LoginPage">
<Container className="LoginPageContainer"> <Container className="LoginPageContainer">
<Row className="PwPageContainer"> <Row className="PwPageContainer">

View File

@@ -3,7 +3,7 @@ import axios from "axios";
import { jsPDF } from "jspdf"; import { jsPDF } from "jspdf";
import autoTable from "jspdf-autotable"; import autoTable from "jspdf-autotable";
import Navbar from "./Navbar"; import Navbar from "./Navbar";
import { toast, ToastContainer } from "react-toastify"; import { toast } from "react-toastify";
import { sendEmail } from "../api"; import { sendEmail } from "../api";
import Footer from "./Footer"; import Footer from "./Footer";
@@ -457,7 +457,6 @@ const CourseConsolidated = () => {
minHeight: "100vh" minHeight: "100vh"
}}> }}>
<Navbar /> <Navbar />
<ToastContainer />
<div style={{flexGrow:1}}> <div style={{flexGrow:1}}>
<h1 <h1
style={{ style={{