Skip to content

Commit

Permalink
Merge pull request #16 from nhattpn/nhat
Browse files Browse the repository at this point in the history
Fetch BE
  • Loading branch information
nhattpn authored Apr 27, 2024
2 parents 6619597 + 3b79294 commit c41968c
Show file tree
Hide file tree
Showing 59 changed files with 1,465 additions and 184 deletions.
19 changes: 2 additions & 17 deletions login-frontend/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,9 @@ import Course from './pages/coursePage/Course';
import Course1 from './pages/coursePage/Course1';
import CourseRegistration from './pages/coursePage/CourseRegistration';
import TeacherDashBoard from './pages/dashboardPage/TeacherDashBoard';
import AdminDashBoard from './pages/dashboardPage/TeacherDashBoard';

function App() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');

const handleLogin = async (e) => {
e.preventDefault();
const response = await fetch('http://localhost:5000/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password }),
});
const data = await response.text();
setMessage(data);
};
return (
<Router>
<Routes>
Expand All @@ -41,7 +26,7 @@ function App() {

<Route path='/teacher/dashboard' element={< TeacherDashBoard/>} />
<Route path='/student/dashboard' element={< StudentDashBoard/>} />
<Route path='/admin/dashboard' element={< StudentDashBoard/>} />
<Route path='/admin/dashboard' element={< AdminDashBoard/>} />
<Route path='/course' element={<Course />} />
<Route path='/course1' element={<Course1 />} />
<Route path='/courseRegistration' element={<CourseRegistration />} />
Expand Down
14 changes: 10 additions & 4 deletions login-frontend/src/components/auth/changePassword.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useAuth } from '../../hooks/useAuth'; // Assuming useAuth hook exists
import Alert from '@mui/material/Alert'
import { useNavigate } from 'react-router-dom';
function ChangePassword(props) {
const path = window.location.pathname.split('/');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [retypepass, setRetypepass] = useState('');
Expand All @@ -13,12 +14,17 @@ function ChangePassword(props) {
const handleLogin = async (event) => {
event.preventDefault();
try {
if(password !== retypepass){
setErrorMsg('Re-type password does not match your new password');
setSuccessMsg(null);
return;
}
const response = await auth.login(email, password);
console.log("response data: ", response);
if (response.message === "Login successful") {
if (response.message === "Password changed successfully.") {
setErrorMsg(null);
setSuccessMsg("Login successful!");
navigate('/student/dashboard');
setSuccessMsg("Password changed successfully.");
navigate('/' + path[1] + '/dashboard');
} else {
setErrorMsg(response.message);
setSuccessMsg(null);
Expand All @@ -27,7 +33,7 @@ function ChangePassword(props) {
setErrorMsg(error?.message || "Error");
console.error('Login error:', error.message);
}
};
};
return (
<div className='login' style={{marginTop: '5vh'}}>
{errorMsg && <Alert severity="error">{errorMsg}</Alert>}
Expand Down
9 changes: 7 additions & 2 deletions login-frontend/src/components/auth/login.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useAuth } from '../../hooks/useAuth'; // Assuming useAuth hook exists
import Alert from '@mui/material/Alert'
import { useNavigate } from 'react-router-dom';
function Login(props) {
const path = window.location.pathname.split('/');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errorMsg, setErrorMsg] = useState(null);
Expand All @@ -18,8 +19,12 @@ function Login(props) {
if (response.message === "Login successful") {
setErrorMsg(null);
setSuccessMsg("Login successful!");
navigate('/student/dashboard');
} else {
navigate('/' + path[1] + '/dashboard');
} else if(response.message === "Default password in use. Password change required."){
setErrorMsg(response.message);
setSuccessMsg(null);
navigate('/' + path[1] + '/changepassword');
} else{
setErrorMsg(response.message);
setSuccessMsg(null);
}
Expand Down
8 changes: 4 additions & 4 deletions login-frontend/src/components/dashboard/studentInfo.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React from 'react'; // Use React for functional components
import React from 'react';
import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
function StudentInfo(props) {
return (
<div className="student-info"> {/* Use a more specific class name */}
<div className="student-info">
<div className="smallbox">
<p>Personal Information</p>
</div>
<div className="data-container" style={{ display: 'flex' }}> {/* Combined styles */}
<div className="data-container" style={{ display: 'flex' }}>
<div className="data-box" style={{ marginLeft: '4vh' }}>
<div style={{ textAlign: 'center' }}>
<i class="fa-regular fa-id-badge fa-8x"></i>
<i className="fa-regular fa-id-badge fa-8x"></i>
</div>
<p style={{ fontWeight: 'bold' }}>
Last profile photo update time: ___
Expand Down
8 changes: 4 additions & 4 deletions login-frontend/src/components/dashboard/studentTraining.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React from 'react'; // Use React for functional components
import React from 'react';

function Training(props) {
return (
<div className="training-info"> {/* Use a more specific class name */}
<div className="training-info">
<div className="smallbox">
<p>Training Information</p>
</div>
<div className="data-container" style={{ display: 'flex' }}> {/* Combined styles */}
<div className="data-container" style={{ display: 'flex' }}>
<div className="data-box" style={{ marginLeft: '4vh' }}>
<div style={{ textAlign: 'center' }}>
<i class="fa-regular fa-id-badge fa-8x"></i>
<i className="fa-regular fa-id-badge fa-8x"></i>
</div>
<p style={{ fontWeight: 'bold' }}>
Last profile photo update time: ___
Expand Down
6 changes: 3 additions & 3 deletions login-frontend/src/components/dashboard/teacherInfo.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'; // Use React for functional components
import React from 'react';
import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
function StudentInfo(props) {
return (
Expand All @@ -16,10 +16,10 @@ function StudentInfo(props) {
<div className="smallbox">
<p>Personal Information</p>
</div>
<div className="data-container" style={{ display: 'flex' }}> {/* Combined styles */}
<div className="data-container" style={{ display: 'flex' }}>
<div className="data-box" style={{ marginLeft: '4vh' }}>
<div style={{ textAlign: 'center' }}>
<i class="fa-regular fa-id-badge fa-8x"></i>
<i className="fa-regular fa-id-badge fa-8x"></i>
</div>
<p style={{ fontWeight: 'bold' }}>
Last profile photo update time: ___
Expand Down
8 changes: 4 additions & 4 deletions login-frontend/src/components/header_footer/FirstFooter.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ function FirstFooter() {
<footer style={{ marginTop: '0%', height: '100%', backgroundColor: '#0b3942', display: 'flex', textAlign: 'center' }}>
<div style={{ marginLeft: '8%', width: '12%' }}>
<div style={{ marginTop: '30%', marginRight: '30%', marginLeft: '30%', width: '40%', height: '40%', backgroundColor: 'blueviolet', borderRadius: '50%' }}>
<i class="fas fa-solid fa-phone fa-2x" style={{ marginTop: '25%', color: 'white' }}></i>
<i className="fas fa-solid fa-phone fa-2x" style={{ marginTop: '25%', color: 'white' }}></i>
</div>
<div>
<p style={{ color: 'white ', marginTop: '1rem' }}>
Expand All @@ -19,7 +19,7 @@ function FirstFooter() {
</div>
<div style={{ marginLeft: '3%', width: '12%' }}>
<div style={{ marginTop: '30%', marginRight: '30%', marginLeft: '30%', width: '40%', height: '40%', backgroundColor: 'blueviolet', borderRadius: '50%' }}>
<i class="fas fa-regular fa-envelope fa-2x" style={{ marginTop: '25%', color: 'white' }}></i>
<i className="fas fa-regular fa-envelope fa-2x" style={{ marginTop: '25%', color: 'white' }}></i>
</div>
<div>
<p style={{ color: 'white ', marginTop: '1rem' }}>
Expand All @@ -29,7 +29,7 @@ function FirstFooter() {
</div>
<div style={{ marginLeft: '3%', width: '12%' }}>
<div style={{ marginTop: '30%', marginRight: '30%', marginLeft: '30%', width: '40%', height: '40%', backgroundColor: 'blueviolet', borderRadius: '50%' }}>
<i class="fas fa-solid fa-location-dot fa-2x" style={{ marginTop: '25%', color: 'white' }}></i>
<i className="fas fa-solid fa-location-dot fa-2x" style={{ marginTop: '25%', color: 'white' }}></i>
</div>
<div>
<p style={{ color: 'white ', marginTop: '1rem' }}>
Expand All @@ -40,7 +40,7 @@ function FirstFooter() {

<div style={{ marginLeft: '4%', width: '12%' }}>
<div style={{ marginTop: '30%', marginRight: '30%', marginLeft: '30%', width: '40%', height: '40%', backgroundColor: 'white', borderRadius: '50%' }}>
<i class="fas fa-solid fa-paper-plane fa-2x" style={{ marginTop: '25%', color: 'blueviolet' }}></i>
<i className="fas fa-solid fa-paper-plane fa-2x" style={{ marginTop: '25%', color: 'blueviolet' }}></i>
</div>
<div>
<p style={{ color: 'white ', marginTop: '1rem' }}>
Expand Down
26 changes: 10 additions & 16 deletions login-frontend/src/context/authContext.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,24 @@ export const AuthContext = createContext(null);

export function AuthProvider({ children }) {
const [user, setUser] = useState(null);

const login = async (email, password) => {
try {
const data = await authService.login(email, password);
if (data) {
if (data && data.token) {
sessionStorage.setItem('jwtToken', data.token);
setUser(data);
return data;
} else {
// Xử lý trường hợp không nhận được dữ liệu từ phản hồi
console.error('Không nhận được dữ liệu từ phản hồi khi đăng nhập');
return null; // Hoặc trả về giá trị mặc định khác
console.error('No data or token received on login');
return null;
}
} catch (error) {
// Xử lý lỗi từ phản hồi
console.error('Lỗi khi gọi hàm login:', error);
return null; // Hoặc trả về giá trị mặc định khác
console.error('Error during login:', error);
return null;
}
};

const register = async (name, email, password) => {
const data = await authService.register(name, email, password);
setUser(data);
};

const value = { user, login, register };
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
const value = { user, login};
const auth = <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
return auth;
}
14 changes: 14 additions & 0 deletions login-frontend/src/hooks/useAuth.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,20 @@
import { useContext } from 'react';
import { AuthContext } from '../context/authContext';
import { useEffect, useNavigate } from 'react';

export function useAuth() {
return useContext(AuthContext);
}
export function useRequireAuth(redirectUrl = '/login') {
const auth = useAuth();
const navigate = useNavigate();

useEffect(() => {
const token = sessionStorage.getItem('jwtToken');
if (!token) {
navigate(redirectUrl);
}
}, [navigate, redirectUrl]);

return auth;
}
3 changes: 2 additions & 1 deletion login-frontend/src/pages/authPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ function App() {
case 'ChangePassword': return <ChangePassword />;
}
}
return (
return (<>
<AuthProvider>
<div
className="container-fluid text-center"
Expand All @@ -54,6 +54,7 @@ function App() {
</div>
</div>
</AuthProvider>
</>
);
}

Expand Down
95 changes: 95 additions & 0 deletions login-frontend/src/pages/dashboardPage/AdminDashboard.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import React, { useState } from 'react';
import StudentInfo from './../components/DashBoard/studentInfo';
import Training from './../components/DashBoard/studentTraining';
import Footer from './../components/header_footer/Footer';
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import './StudentDashboard.css';

function DataTable() {
const [currentView, setCurrentView] = useState('StudentInfo');

const handleNavigation = (viewName) => {
setCurrentView(viewName);
};
const [isOpen, setIsOpen] = useState(false);

return (
<div className="student-dashboard">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">
<img className="logo" src="https://i.ibb.co/CMwkBmw/lSgDz8N.png" alt="logo" />
</a>
<ul className="navbar-nav ms-auto">
<li style={{padding: '2vh'}}>
<a className="nav-link" href="#">Nguyen Van A - SVxxxxx</a>
</li>
<li style={{padding: '2vh'}}>
<i className="fa fa-solid fa-bell fa-lg fa-3x"></i>
Logout
</li>
</ul>
</nav>

<div className="container-fluid">
<div className="row">
<div className="col-md-2 leftBody">
<ul className="nav flex-column">
<li className="nav-item" style={{ paddingTop: '2rem' }}>
<i className="fas fa-solid fa-home fa-md fa-2x"></i> Home
</li>
<li className="nav-item" style={{ paddingTop: '2rem' }}>
<i className="fas fa-regular fa-id-badge fa-md fa-2x"></i> Student
</li>
<li className="nav-item" style={{ paddingTop: '2rem', cursor: 'pointer'}} onClick={() => setIsOpen(!isOpen)}>
<i className="fa fa-solid fa-book fa-md fa-2x"></i> Study
<i class="fa-solid fa-angles-down"></i>
{isOpen && (
<ul>
<li className="nav-item" style={{ paddingTop: '2rem'}}><Link to={'/course'} style={{color: 'white', padding: '0'}}>Course</Link></li>
<li className="nav-item" style={{ paddingTop: '2rem' }}><Link to={'/course1'} style={{color: 'white', padding: '0'}}>Course registration</Link></li>
</ul>
)}
</li>
<li className="nav-item" style={{ paddingTop: '2rem' }}>
<i className="fa fa-solid fa-question fa-md fa-2x"></i> Assistant
</li>
</ul>
</div>

<div className="col-md-10 rightBody">
<div className="dataTable mx-auto">
<nav>
<div className="navigation">
<a
onClick={() => handleNavigation('StudentInfo')}
style={{ fontWeight: 'bold'}}
className={currentView === 'StudentInfo' ? 'active' : ''}
>
Student Information
</a>
<a
href="#"
onClick={() => handleNavigation('Training')}
style={{ fontWeight: 'bold' }}
className={currentView === 'Training' ? 'active' : ''}
>
Training Information
</a>
</div>
</nav>
<div style={{ padding: '10px' }}>
<i style={{ fontWeight: 'bold' }}>Last updated time: dd/mm/yyyy realtime</i>
</div>
{currentView === 'StudentInfo' && <StudentInfo />}
{currentView === 'Training' && <Training />}
</div>
</div>
</div>
</div>
<Footer />
</div>
);
}

export default DataTable;
2 changes: 1 addition & 1 deletion login-frontend/src/pages/dashboardPage/StudentDashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function DataTable() {
</li>
<li className="nav-item" style={{ marginTop: '2rem', cursor: 'pointer'}} onClick={() => setIsOpen(!isOpen)}>
<i className="fa fa-solid fa-book fa-md fa-2x"></i> Study
<i class="fa-solid fa-angles-down"></i>
<i className="fa-solid fa-angles-down"></i>
{isOpen && (
<ul>
<li className="nav-item" style={{ paddingTop: '2rem' }}>
Expand Down
4 changes: 2 additions & 2 deletions login-frontend/src/pages/dashboardPage/TeacherDashBoard.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,12 @@ function DataTable() {
</li>
<li className="nav-item" style={{ marginTop: '2rem', cursor: 'pointer' }}>
<a onClick={() => handleNavigation('TeacherInfo')}>
<i class="fa-regular fa-address-book fa-2x"></i> Personal
<i className="fa-regular fa-address-book fa-2x"></i> Personal
</a>
</li>
<li className="nav-item" style={{ marginTop: '2rem', cursor: 'pointer'}}>
<a onClick={() => handleNavigation('SubjectSchedule')}>
<i class="fa-brands fa-blackberry fa-2x"></i> DashBoard
<i className="fa-brands fa-blackberry fa-2x"></i> DashBoard
</a>
</li>
<li className="nav-item" style={{ marginTop: '2rem', cursor: 'pointer' }}>
Expand Down
Loading

0 comments on commit c41968c

Please sign in to comment.