diff --git a/course-content.html b/course-content.html index d9b262e7..7e974fdb 100644 --- a/course-content.html +++ b/course-content.html @@ -19,7 +19,12 @@

Course Name

+
+
+

Your Selected Courses

+ +
@@ -27,4 +32,4 @@

Course Name

- + \ No newline at end of file diff --git a/dashboard.html b/dashboard.html index ba3eb99e..f27a1c8f 100644 --- a/dashboard.html +++ b/dashboard.html @@ -19,7 +19,10 @@

Welcome to Your Dashboard

-

Hello, !

+

Hello, +

Welcome to your personalized dashboard.

diff --git a/script.js b/script.js index 7293d9e6..1fd3b7fb 100644 --- a/script.js +++ b/script.js @@ -1,16 +1,15 @@ -// scripts.js -document.addEventListener('DOMContentLoaded', () => { - const registerForm = document.getElementById('register-form'); - const loginForm = document.getElementById('login-form'); - const logoutForm = document.getElementById('logout-form'); - registerForm.addEventListener('submit', async (e) => { +document.addEventListener('DOMContentLoaded',()=>{ + const registerForm=document.getElementById('register-form'); + registerForm.addEventListener('submit',async (e)=>{ e.preventDefault(); - const formData = new FormData(registerForm); - const username = formData.get('username'); - const password = formData.get('password'); - const email = formData.get('email'); - const full_name = formData.get('full_name'); + + const formData=new FormData(registerForm); + const username=formData.get('username'); + const password=formData.get('password'); + const email=formData.get('email'); + const full_name=formData.get('full_name'); + try { const response = await fetch('/register', { method: 'POST', @@ -22,18 +21,20 @@ document.addEventListener('DOMContentLoaded', () => { if (response.ok) { alert('Registration successful'); } else { - alert('Registration failed'); + const errorData = await response.json(); + alert('Registration failed'+ errorData.errors.map(err => err.msg).join(', ')); } } catch (error) { console.error('Error:', error); } }); - + const loginForm = document.getElementById('login-form'); loginForm.addEventListener('submit', async (e) => { e.preventDefault(); const formData = new FormData(loginForm); const username = formData.get('username'); const password = formData.get('password'); + try { const response = await fetch('/login', { method: 'POST', @@ -43,72 +44,62 @@ document.addEventListener('DOMContentLoaded', () => { body: JSON.stringify({ username, password }) }); if (response.ok) { - alert('Login successful'); + alert('Login Successful'); + //window.location.href='/dashboard'; } else { - alert('Invalid username or password'); + const errorText = await response.text(); + alert('Invalid Username or Password: ' + errorText); } - } catch (error) { + }catch (error) { console.error('Error:', error); } }); - - logoutForm.addEventListener('submit', async (e) => { + const logoutForm=document.getElementById('logout-form'); + logoutForm.addEventListener('submit',async(e)=>{ e.preventDefault(); - try { - const response = await fetch('/logout', { - method: 'POST' + try{ + const response=await fetch('/logout',{ + method:'POST' }); - if (response.ok) { - alert('Logout successful'); - } else { - alert('Logout failed'); + if(response.ok){ + alert('Logout Successful'); + }else{ + alert('Logout was not successful') } - } catch (error) { - console.error('Error:', error); + }catch(error){ + console.log('Error:',error); } + }); - - // Check if the current page is the course content page - if (window.location.pathname === '/course-content') { - // Call the fetchCourseContent function + if(window.location.pathname==="/course-content"){ fetchCourseContent(); } - - // Check if the current page is the course content page - if (window.location.pathname === '/leader-board') { - // Fetch course content from server - fetchLeaderboardData(); + if(window.location.pathname==="/leader-board"){ + fetchLeaderBoardData(); } - - // Check if the current page is the course content page - if (window.location.pathname === '/dashboard') { - //fetch Logged in user's full name + if(window.location.pathname==="/dashboard"){ fetchFullName(); } }); +function fetchCourseContent(){ + const urlParams=new URLSearchParams(window.location.search); + const courseId=urlParams.get('id'); -function fetchCourseContent() { - // Get course ID from URL parameter (assuming course ID is passed in the URL) - const urlParams = new URLSearchParams(window.location.search); - const courseId = urlParams.get('id'); - - // Make AJAX request to fetch course content from server fetch(`/course/${courseId}`) - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } - return response.json(); - }) - .then(data => { - // Display course content on the page - displayCourseContent(data); - }) - .catch(error => { - console.error('Error fetching course content:', error); - }); + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + + displayCourseContent(data); + }) + .catch(error => { + console.error('Error fetching course content:', error); + }); } - function displayCourseContent(courseContent) { // Get the course name element const courseNameElement = document.getElementById('course-name'); @@ -126,12 +117,12 @@ function displayCourseContent(courseContent) { moduleSection.innerHTML = `

${module.title}

${module.description}

+ `; courseContentElement.appendChild(moduleSection); }); } - function fetchLeaderboardData() { // Make AJAX request to fetch leaderboard data from server fetch('/leaderboard') @@ -204,4 +195,50 @@ function displayFullName(fullName) { const fullNameElement = document.getElementById('user-fullname'); // Set the inner HTML of the element to the user's full name fullNameElement.textContent = fullName; -} \ No newline at end of file +} +async function selectCourse(courseId) { + try { + const response = await fetch('/select-course', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ courseId }) + }); + if (response.ok) { + alert('Course selected successfully'); + } else { + const errorData = await response.json(); + alert('Failed to select course: ' + errorData.error); + } + } catch (error) { + console.error('Error:', error); + } +} + +async function fetchSelectedCourses() { + try { + const response = await fetch('/selected-courses'); + if (response.ok) { + const courses = await response.json(); + displaySelectedCourses(courses); + } else { + alert('Failed to fetch selected courses'); + } + } catch (error) { + console.error('Error:', error); + } +} + +function displaySelectedCourses(courses) { + const selectedCoursesElement = document.getElementById('selected-courses'); + selectedCoursesElement.innerHTML = ''; + + courses.forEach(course => { + const courseItem = document.createElement('div'); + courseItem.innerHTML = ` +

${course.name}

+ `; + selectedCoursesElement.appendChild(courseItem); + }); +} diff --git a/server.js b/server.js index 2b854861..255f16a5 100644 --- a/server.js +++ b/server.js @@ -1,67 +1,55 @@ -// server.js -const express = require('express'); -const session = require('express-session'); -const bcrypt = require('bcryptjs'); -const bodyParser = require('body-parser'); -const mysql = require('mysql'); -const { check, validationResult } = require('express-validator'); -const app = express(); - -// Configure session middleware +const express=require('express'); +const session=require('express-session'); +const bcrypt=require('bcryptjs'); +const bodyParser=require('body-parser'); +const mysql=require('mysql'); +const {check,validationResult}=require('express-validator'); +const { render } = require('ejs'); +const app=express(); + app.use(session({ - secret: 'secret-key', - resave: false, - saveUninitialized: true + secret:'cdyyf-c3457-l88uiguel', + resave:false, + saveUninitialized:true + })); -// Create MySQL connection -const connection = mysql.createConnection({ - host: 'localhost', - user: 'root', - password: '', - database: 'learning_management' +const connection=mysql.createConnection({ + host:'localhost', + user:'root', + password:'MySql04@axa#', + database:'learning_management' }); - -// Connect to MySQL -connection.connect((err) => { - if (err) { - console.error('Error connecting to MySQL: ' + err.stack); +connection.connect((err)=>{ + if(err){ + console.error('Error connecting to mysql:'+err.stack); return; } - console.log('Connected to MySQL as id ' + connection.threadId); + console.log('Connected to Mysql') }); - -// Serve static files from the default directory app.use(express.static(__dirname)); -// Set up middleware to parse incoming JSON data app.use(express.json()); app.use(bodyParser.json()); -app.use(express.urlencoded({ extended: true })); -app.use(bodyParser.urlencoded({ extended: true })); +app.use(express.urlencoded({extended:true})); +app.use(bodyParser.urlencoded({extended:true})); -// Define routes -app.get('/', (req, res) => { +app.get('/',(req,res)=>{ res.sendFile(__dirname + '/index.html'); }); - - - -// Define a User representation for clarity -const User = { - tableName: 'users', - createUser: function(newUser, callback) { - connection.query('INSERT INTO ' + this.tableName + ' SET ?', newUser, callback); - }, - getUserByEmail: function(email, callback) { - connection.query('SELECT * FROM ' + this.tableName + ' WHERE email = ?', email, callback); +const User= { + tablename:'Users', + createUser:function(newUser,callback){ + connection.query('INSERT INTO '+ this.tablename + ' SET ?',newUser,callback); + }, + getUserByEmail:function(email,callback){ + connection.query('SELECT * FROM '+ this.tablename + ' WHERE email = ?',email,callback); }, - getUserByUsername: function(username, callback) { - connection.query('SELECT * FROM ' + this.tableName + ' WHERE username = ?', username, callback); + getUserByUserName:function(username,callback){ + connection.query('SELECT * FROM '+ this.tablename + ' WHERE username = ?',username,callback); } }; -// Registration route app.post('/register', [ // Validate email and username fields check('email').isEmail(), @@ -75,7 +63,8 @@ app.post('/register', [ } }), check('username').custom(async (value) => { - const user = await User.getUserByUsername(value); + console.log('User object:', User); + const user = await User.getUserByUserName(value); if (user) { throw new Error('Username already exists'); } @@ -110,59 +99,99 @@ app.post('/register', [ }); }); -// Login route app.post('/login', (req, res) => { const { username, password } = req.body; - // Retrieve user from database connection.query('SELECT * FROM users WHERE username = ?', [username], (err, results) => { - if (err) throw err; + if (err) { + console.log(err); + return res.status(500).send('Server error'); + } if (results.length === 0) { - res.status(401).send('Invalid username or password'); - } else { - const user = results[0]; - // Compare passwords - bcrypt.compare(password, user.password, (err, isMatch) => { - if (err) throw err; - if (isMatch) { - // Store user in session - req.session.user = user; - res.send('Login successful'); - } else { - res.status(401).send('Invalid username or password'); - } - }); + return res.status(401).send('Invalid username or password'); } + const user = results[0]; + bcrypt.compare(password, user.password, (err, isMatch) => { + if (err) throw err; + if (isMatch) { + req.session.user = user; + res.json({ message: 'Login Successful', redirect: '/dashboard' }); // Send JSON response with redirect URL + } else { + res.status(401).send('Invalid username or password'); + } + }); }); }); - -// Logout route -app.post('/logout', (req, res) => { +app.post('/logout',(req,res)=>{ req.session.destroy(); - res.send('Logout successful'); + res.send('Logout Successful') }); - -//Dashboard route app.get('/dashboard', (req, res) => { - // Assuming you have middleware to handle user authentication and store user information in req.user - const userFullName = req.user.full_name; - res.render('dashboard', { fullName: userFullName }); + if (!req.session.user) { + return res.status(401).redirect('/'); // Redirect to login if not authenticated + } + + // Read the dashboard.html file and replace the placeholder with the user's full name + const fs = require('fs'); + const filePath = path.join(__dirname, 'dashboard.html'); + fs.readFile(filePath, 'utf8', (err, data) => { + if (err) { + console.log(err); + return res.status(500).send('Server error'); + } + + // Replace placeholder with user's full name + const userFullName = req.session.user.full_name; + const result = data.replace('<%= fullName %>', userFullName); + + // Send the modified HTML file + res.send(result); + }); +}); +app.get('/course/:id',(req,res)=>{ + const courseId=req.params.id; + const sql='SELECT * FROM courses WHERE id = ?'; + db.query(sql,[courseId],(err,result)=>{ + if(err){ + throw err; + } + res.json(result); + }); +}); +app.post('/select-course', (req, res) => { + if (!req.session.user) { + return res.status(401).send('Unauthorized'); + } + const userId = req.session.user.id; + const courseId = req.body.courseId; + + connection.query('INSERT INTO user_courses (user_id, course_id) VALUES (?, ?)', [userId, courseId], (err, results) => { + if (err) { + return res.status(500).json({ error: 'Failed to select course' }); + } + res.json({ success: true }); + }); }); -// Route to retrieve course content -app.get('/course/:id', (req, res) => { - const courseId = req.params.id; - const sql = 'SELECT * FROM courses WHERE id = ?'; - db.query(sql, [courseId], (err, result) => { - if (err) { - throw err; - } - // Send course content as JSON response - res.json(result); +app.get('/selected-courses', (req, res) => { + if (!req.session.user) { + return res.status(401).send('Unauthorized'); + } + const userId = req.session.user.id; + + connection.query(` + SELECT c.id, c.name + FROM courses c + JOIN user_courses uc ON c.id = uc.course_id + WHERE uc.user_id = ?`, [userId], (err, results) => { + if (err) { + return res.status(500).json({ error: 'Failed to fetch selected courses' }); + } + res.json(results); }); - }); +}); + -// Start server -const PORT = process.env.PORT || 3000; -app.listen(PORT, () => { - console.log(`Server running on port ${PORT}`); +const PORT=3000; +app.listen(PORT,()=>{ + console.log(`Server is running on port: ${PORT}`); }); \ No newline at end of file