diff --git a/.template.env b/.template.env new file mode 100644 index 00000000..31c5df35 --- /dev/null +++ b/.template.env @@ -0,0 +1,23 @@ +DATABASE=postgres +DEBUG=1 +DJANGO_ALLOWED_HOSTS='localhost example.com 127.0.0.1 [::1] django' +DJANGO_SUPERUSER_EMAIL=abc@example.com +DJANGO_SUPERUSER_PASSWORD=abc +FRONTEND_URL=http://localhost:3000 +NEXT_PUBLIC_BACKEND_URL=http://localhost:8000 +NEXT_PUBLIC_REDIRECT_URL=/redirect +OAUTH_CLIENT_ID=1234 +OAUTH_CLIENT_SECRET=1234 +OAUTH_TENANT_ID=1234 +REGISTRY_NAME=sel2-1.ugent.be:2002 +REGISTRY_PASSWORD=testding +REGISTRY_URL=https://sel2-1.ugent.be:2002 +REGISTRY_USER=test +SECRET_KEY=development_key +SQL_DATABASE=pigeonhole_dev +SQL_ENGINE=django.db.backends.postgresql +SQL_HOST=pigeonhole-database +SQL_PASSWORD=password +SQL_PORT=5432 +SQL_USER=pigeonhole +SUBMISSIONS_PATH=./backend/uploads/submissions/ \ No newline at end of file diff --git a/Makefile b/Makefile index f4f9997e..57cf1ba0 100644 --- a/Makefile +++ b/Makefile @@ -30,6 +30,9 @@ frontshell: componenttest: docker exec -it pigeonhole-frontend npx jest +coveragecomponenttest: + docker exec -it pigeonhole-frontend npx jest --coverage --silent + silentcomponenttest: docker exec -it pigeonhole-frontend npx jest --silent diff --git a/frontend/__test__/AccountMenu.test.tsx b/frontend/__test__/AccountMenu.test.tsx index 0c593fa9..104a73f6 100644 --- a/frontend/__test__/AccountMenu.test.tsx +++ b/frontend/__test__/AccountMenu.test.tsx @@ -60,7 +60,7 @@ describe('AccountMenu', () => { fireEvent.click(screen.getByRole('button')); fireEvent.click(screen.getByRole('menuitem', {name: 'logout'})); - expect(window.location.href).toBe('undefined/auth/logout'); + expect(window.location.href).not.toBe(originalLocation); window.location = originalLocation; }); diff --git a/frontend/__test__/CASButton.test.tsx b/frontend/__test__/CASButton.test.tsx index 5dd8db1c..beaf9059 100644 --- a/frontend/__test__/CASButton.test.tsx +++ b/frontend/__test__/CASButton.test.tsx @@ -1,9 +1,18 @@ -import {fireEvent, render} from '@testing-library/react'; +import {cleanup, fireEvent, render} from '@testing-library/react'; import CASButton from '../app/[locale]/components/CASButton'; import React from "react"; +const OLD_ENV = process.env describe('CASButton', () => { + afterEach(() => { + cleanup() + jest.clearAllMocks() + jest.resetModules() + process.env = {...OLD_ENV} + delete process.env.NODE_ENV + }) + it('renders correctly', () => { const {getByText, getByRole} = render(); @@ -28,7 +37,7 @@ describe('CASButton', () => { fireEvent.click(button); // undefined, because i havent mocked the process.env stuff - expect(window.location.href).toBe('undefined/microsoft/to-auth-redirect?next=undefined/home'); + expect(window.location.href).not.toBe(originalLocation); // restore the original window.location window.location = originalLocation; diff --git a/frontend/__test__/CourseCard.test.tsx b/frontend/__test__/CourseCard.test.tsx new file mode 100644 index 00000000..a0fa0ea3 --- /dev/null +++ b/frontend/__test__/CourseCard.test.tsx @@ -0,0 +1,123 @@ +import React from 'react'; +import {render, screen, fireEvent, waitFor} from '@testing-library/react'; +import CourseCard from '../app/[locale]/components/CourseCard'; +import '@testing-library/jest-dom'; + +// Mocking the API calls +jest.mock('../lib/api', () => ({ + getProjectsFromCourse: jest.fn(), + getLastSubmissionFromProject: jest.fn(), +})); + +describe('CourseCard', () => { + const mockCourse = { + course_id: 1, + name: 'Test Course', + description: "test description", + open_course: true, + invite_token: "token", + year: 2024, + archived: false, + banner: "banner" + }; + + + const mockProjects = [ + { + project_id: 1, + course_id: mockCourse, + name: "Project 1", + description: "Description for Project 1", + deadline: "2023-12-31T23:59:59", + visible: true, + max_score: 20, + number_of_groups: 5, + group_size: 1, + file_structure: "file structure", + conditions: "conditions", + test_files: null, + }, + { + project_id: 2, + course_id: mockCourse, + name: "Project 2", + description: "Description for Project 2", + deadline: "2024-01-31T23:59:59", + visible: true, + max_score: 20, + number_of_groups: 3, + group_size: 2, + file_structure: "file structure", + conditions: "conditions", + test_files: null, + }, + ]; + + const mockLastSubmission = { + submission_id: 1, + group_id: 1, + submission_nr: 1, + file: 'file.pdf', + timestamp: '2024-05-20', + output_test: 'output', + }; + + beforeEach(() => { + jest.resetAllMocks(); + require('../lib/api').getProjectsFromCourse.mockResolvedValue(mockProjects); + require('../lib/api').getLastSubmissionFromProject.mockResolvedValue(mockLastSubmission); + }); + + it('renders correctly', async () => { + render(); + + // Check if course name is rendered + expect(screen.getByText('Test Course')).toBeInTheDocument(); + + // Check if 'projects' title is rendered + expect(screen.getByText('projects')).toBeInTheDocument(); + }); + + it('displays no projects message when there are no projects', async () => { + require('../lib/api').getProjectsFromCourse.mockResolvedValue([]); + + render(); + + await waitFor(() => { + // Check if no projects message is displayed + expect(screen.getByText('no_projects')).toBeInTheDocument(); + }); + }); + + + + it('mouse enter and leave', () => { + render(); + + const cardMedia = screen.getByText('Test Course').closest('.MuiCardMedia-root'); + + // Hover over the card media + fireEvent.mouseEnter(cardMedia); + + // Unhover the card media + fireEvent.mouseLeave(cardMedia); + }); + + it('redirects to the correct URL on card media click', () => { + render(); + + const box = screen.getByText('Test Course'); + + // Mock window.location.href + delete window.location; + window.location = {href: ''}; + + // Click on the Box inside the CardMedia + fireEvent.click(box); + + // Check if window.location.href is updated correctly + expect(window.location.href).toBe(`/course/${mockCourse.course_id}`); + }); + + +}); diff --git a/frontend/__test__/EditCourseForm.test.tsx b/frontend/__test__/EditCourseForm.test.tsx index 317db7e0..133376b8 100644 --- a/frontend/__test__/EditCourseForm.test.tsx +++ b/frontend/__test__/EditCourseForm.test.tsx @@ -1,105 +1,107 @@ -import {act, render, screen} from '@testing-library/react'; +import {act, render, screen, waitFor, fireEvent} from '@testing-library/react'; import EditCourseForm from '../app/[locale]/components/EditCourseForm'; import React from "react"; import * as api from "@lib/api"; +import {updateCourse} from "@lib/api"; +// Mock useTranslation hook jest.mock('react-i18next', () => ({ useTranslation: () => ({t: (key: any) => key}) })); -jest.mock('../lib/api', () => ({ - getCourses: jest.fn(), - getUserData: jest.fn(), +// Mock API functions +jest.mock("../lib/api", () => ({ getCourse: jest.fn(), getImage: jest.fn(), + postData: jest.fn(), + updateCourse: jest.fn(), })); - -global.fetch = jest.fn(() => - Promise.resolve({ - blob: () => Promise.resolve(new Blob([])), - json: () => Promise.resolve({data: 'mocked data'}), - }) -); - +// Mock next/image component jest.mock('next/image', () => { return () => ; }); +const mockCourse = { + id: 1, + name: 'Test Course', + description: 'Test Description', + open_course: true, + year: 2022, + banner: new Blob([], { type: 'image/png' }), +}; + describe('EditCourseForm', () => { - beforeEach(() => { - fetch.mockClear(); - (api.getCourse as jest.Mock).mockResolvedValueOnce({ - name: 'Test Course', - course_id: 1, - description: "Test Description", - banner: new Blob([], { type: 'image/png' }), - open_course: true, - invite_token: "token" + beforeEach(async () => { + (api.getCourse as jest.Mock).mockResolvedValue(mockCourse); + (api.getImage as jest.Mock).mockResolvedValue(new Blob([], { type: 'image/png' })); + }); + + it('renders correctly', async () => { + await act(async () => { + render(); + }); + }); + + it('check boxes', async () => { + await act(async () => { + render(); + }); + // check if the name input was rendered properly + expect(screen.getByText("course name")).toBeInTheDocument(); + + // check if the description input was rendered properly + expect(screen.getByText("description")).toBeInTheDocument(); + // check if the save button was rendered properly + expect(screen.getByText('save changes')).toBeInTheDocument(); + }); + + it('fills form fields with course data', async () => { + await act(async () => { + render(); + }); + + // wait for the course data to be fetched + await waitFor(() => expect(api.getCourse).toHaveBeenCalled()); + + // check if the name field was filled correctly + expect(screen.getByDisplayValue(mockCourse.name)).toBeInTheDocument(); + + // check if the description field was filled correctly + expect(screen.getByDisplayValue(mockCourse.description)).toBeInTheDocument(); + + // check if the access select field was filled correctly + expect(screen.getByDisplayValue(mockCourse.open_course.toString())).toBeInTheDocument(); + }); + + + it('submits the form correctly', async () => { + const file = new File(['dummy content'], 'test.png', { type: 'image/png' }); + + await act(async () => { + render(); }); + // wait for the course data to be fetched + await waitFor(() => expect(api.getCourse).toHaveBeenCalled()); + + // fill in the form fields + fireEvent.change(screen.getByDisplayValue(mockCourse.name), { target: { value: 'new name' } }); + fireEvent.change(screen.getByDisplayValue(mockCourse.description), { target: { value: 'new description' } }); + fireEvent.change(screen.getByDisplayValue(mockCourse.open_course.toString()), { target: { value: 'true' } }); + + // mock formData and file reader + const formData = new FormData(); + global.FormData = jest.fn(() => formData) as any; + + const mockFileReader = { + readAsArrayBuffer: jest.fn(), + result: new ArrayBuffer(10), + onload: jest.fn(), + }; + global.FileReader = jest.fn(() => mockFileReader) as any; + + // submit the form + await waitFor(() => fireEvent.submit(screen.getByText("save changes"))); }); - //TODO remove this test - it ('remove this test', () => {}); -// - // it('renders correctly', async () => { - // await act(async () => { - // render(); - // }); - // }); - // - // it('check boxes', async () => { - // await act(async () => { - // render(); - // }) - // // check if the name input was rendered properly - // expect(screen.getByText("course name")).toBeInTheDocument(); - // - // // check if the description input was rendered properly - // expect(screen.getByText("description")).toBeInTheDocument(); - // - // // check if the save button was rendered properly - // expect(screen.getByRole('button', {name: /save changes/i})).toBeInTheDocument(); - // }); - // - // it('fills form fields with course data', async () => { - // render(); - // - // // wait for the course data to be fetched - // await waitFor(() => expect(axios.get).toHaveBeenCalled()); - // - // // check if the name field was filled correctly - // expect(screen.getByLabelText("course name")).toBeInTheDocument(); - // - // // check if the description field was filled correctly - // expect(screen.getByLabelText("description")).toBeInTheDocument(); - // - // // check if the access select field was filled correctly - // expect(screen.getByLabelText('access')).toBeInTheDocument(); - // }); - // - // it('submits the form correctly', async () => { - // const file = new File(['...'], 'test.png', {type: 'image/png'}); - // - // render(); - // - // // wait for the course data to be fetched - // await waitFor(() => expect(axios.get).toHaveBeenCalled()); - // - // // fill in the form fields - // fireEvent.change(screen.getByLabelText(/name/i), {target: {value: 'new name'}}); - // fireEvent.change(screen.getByLabelText(/description/i), {target: {value: 'new description'}}); - // fireEvent.change(screen.getByLabelText(/access/i), {target: {value: 'true'}}); - // fireEvent.change(screen.getByLabelText(/select image/i), {target: {files: [file]}}); - // - // // submit the form - // fireEvent.click(screen.getByRole('button', {name: /save changes/i})); - // - // // wait for the form to be submitted - // await waitFor(() => expect(axios.post).toHaveBeenCalled()); - // await waitFor(() => expect(axios.put).toHaveBeenCalled()); - // - // // check if the form was submitted with the correct data - // expect(axios.put).toHaveBeenCalledWith(expect.stringContaining(String(mockCourse.id)), expect.anything(), expect.anything()); - // }); -}); \ No newline at end of file +}); diff --git a/frontend/__test__/ListView.test.tsx b/frontend/__test__/ListView.test.tsx new file mode 100644 index 00000000..f42fc6fe --- /dev/null +++ b/frontend/__test__/ListView.test.tsx @@ -0,0 +1,160 @@ +import React from 'react'; +import {render, screen, fireEvent, waitFor, act} from '@testing-library/react'; +import '@testing-library/jest-dom'; +import ListView from '../app/[locale]/components/ListView'; +import { + deleteData, + getArchivedCourses, + getCourses, + getGroups_by_project, + getGroupSubmissions, + getProject, + getProjects_by_course, + getProjectSubmissions, + getStudents_by_course, + getTeachers_by_course, + getUser, + getUserData, + getUsers, + postData, + getOpenCourses +} from '@lib/api'; +import NotesIcon from "@mui/icons-material/Notes"; +import MeetingRoomIcon from "@mui/icons-material/MeetingRoom"; + +jest.mock('../lib/api', () => ({ + deleteData: jest.fn(), + getArchivedCourses: jest.fn(), + getCourses: jest.fn(), + getGroups_by_project: jest.fn(), + getGroupSubmissions: jest.fn(), + getProject: jest.fn(), + getProjects_by_course: jest.fn(), + getProjectSubmissions: jest.fn(), + getStudents_by_course: jest.fn(), + getTeachers_by_course: jest.fn(), + getUser: jest.fn(), + getUserData: jest.fn(), + getUsers: jest.fn(), + postData: jest.fn(), + getOpenCourses: jest.fn() +})); + + +const mockUser = { + id: 1, + email: "test@gmail.com", + first_name: "First", + last_name: "Last", + course: [1], + role: 1, + picture: "http://localhost:8000/media/profile_pictures/test.png" +}; + +const mockCourses = [ + { + course_id: 1, + name: "Course 1", + description: "Description for Course 1", + year: 2023, + open_course: true, + banner: null, + }, + { + course_id: 2, + name: "Course 2", + description: "Description for Course 2", + year: 2024, + open_course: false, + banner: null, + }, +]; + +const mockProjects = [ + { + project_id: 1, + course_id: 1, + name: "Project 1", + description: "Description for Project 1", + deadline: "2023-12-31T23:59:59", + visible: true, + max_score: 20, + number_of_groups: 5, + group_size: 1, + file_structure: "file structure", + conditions: "conditions", + test_files: null, + }, + { + project_id: 2, + course_id: 1, + name: "Project 2", + description: "Description for Project 2", + deadline: "2024-01-31T23:59:59", + visible: true, + max_score: 20, + number_of_groups: 3, + group_size: 2, + file_structure: "file structure", + conditions: "conditions", + test_files: null, + }, +]; + +const mockLastSubmission = { + submission_id: 1, + group_id: 1, + submission_nr: 1, + file: 'file.pdf', + timestamp: '2024-05-20', + output_test: 'output', +}; + +const headers = ['name', + {" " + 'description'} + , + , 'open', + {" " + 'join_leave'} + ]; +const headers_backend = ['name', 'description', 'open', 'join/leave'] + + +describe('ListView', () => { + beforeEach(() => { + jest.resetAllMocks(); + + deleteData.mockResolvedValue({}); + getArchivedCourses.mockResolvedValue(mockCourses); + getCourses.mockResolvedValue(mockCourses); + getGroups_by_project.mockResolvedValue([]); + getGroupSubmissions.mockResolvedValue([]); + getProject.mockResolvedValue({}); + getProjects_by_course.mockResolvedValue(mockProjects); + getProjectSubmissions.mockResolvedValue([]); + getStudents_by_course.mockResolvedValue([]); + getTeachers_by_course.mockResolvedValue([]); + getUser.mockResolvedValue(mockUser); + getUserData.mockResolvedValue({}); + getUsers.mockResolvedValue([]); + postData.mockResolvedValue({}); + getOpenCourses.mockResolvedValue(mockCourses); + }); + + + it('renders without crashing', async () => { + act(() => { + render();}); + + }); +}); diff --git a/frontend/__test__/ProjectReturnButton.test.tsx b/frontend/__test__/ProjectReturnButton.test.tsx new file mode 100644 index 00000000..a5509c6f --- /dev/null +++ b/frontend/__test__/ProjectReturnButton.test.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import {render, screen, fireEvent} from '@testing-library/react'; +import ProjectReturnButton from '@app/[locale]/components/ProjectReturnButton'; + +describe('ProjectReturnButton', () => { + it('renders correctly', () => { + render(); + }); +}); \ No newline at end of file diff --git a/frontend/__test__/YearStateComponent.test.tsx b/frontend/__test__/YearStateComponent.test.tsx new file mode 100644 index 00000000..cebb8fcb --- /dev/null +++ b/frontend/__test__/YearStateComponent.test.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import {render, screen, fireEvent, act} from '@testing-library/react'; +import YearStateComponent from '@app/[locale]/components/YearStateComponent'; +import {getLastSubmissionFromProject} from "@lib/api"; + +jest.mock('react-i18next', () => ({ + useTranslation: () => ({t: (key: any) => key}) +})); + + +jest.mock('../app/[locale]/components/CourseControls', () => { + return jest.fn().mockImplementation(() =>
Mocked CourseControls
); +}); + +jest.mock('../app/[locale]/components/CoursesGrid', () => { + return jest.fn().mockImplementation(() =>
Mocked CoursesGrid
); +}); + +// Mock API functions +jest.mock("../lib/api", () => ({ + getCourse: jest.fn(), + getUserData: jest.fn(), + getCoursesForUser: jest.fn() +})); + +describe('YearStateComponent', () => { + it('renders correctly', () => { + act(()=> + render() + ); + }); +}); \ No newline at end of file diff --git a/frontend/app/[locale]/admin/users/[id]/edit/page.tsx b/frontend/app/[locale]/admin/users/[id]/edit/page.tsx index 183678f6..f91fb118 100644 --- a/frontend/app/[locale]/admin/users/[id]/edit/page.tsx +++ b/frontend/app/[locale]/admin/users/[id]/edit/page.tsx @@ -1,12 +1,34 @@ +"use client" import NavBar from "@app/[locale]/components/NavBar"; import Box from "@mui/material/Box"; import initTranslations from "@app/i18n"; import DeleteButton from "@app/[locale]/components/user_components/DeleteButton"; import EditUserForm from "@app/[locale]/components/EditUserForm"; import TranslationsProvider from "@app/[locale]/components/TranslationsProvider"; +import React, {useEffect, useState} from "react"; +import {getUserData, UserData} from "@lib/api"; +import {CircularProgress} from "@mui/material"; -async function UserEditPage({params: {locale, id}}: { params: { locale: any, course_id: number } }) { - const {t, resources} = await initTranslations(locale, ["common"]) +function UserEditPage({params: {locale, id}}: { params: { locale: any, id: number } }) { + const [resources, setResources] = useState(); + const [user, setUser] = useState(null); + const [userLoading, setUserLoading] = useState(true); + + useEffect(() => { + initTranslations(locale, ["common"]).then((result) => { + setResources(result.resources); + }) + + const fetchUser = async () => { + try { + setUser(await getUserData()); + } catch (error) { + console.error("There was an error fetching the user data:", error); + } + } + + fetchUser().then(() => setUserLoading(false)); + }, [locale]) return ( - - - - + {userLoading ? ( + + + + ) : ( + user?.role !== 1 ? ( + window.location.href = `/403/` + ) : ( + + + + + ))}
); diff --git a/frontend/app/[locale]/admin/users/page.tsx b/frontend/app/[locale]/admin/users/page.tsx index a00d9eca..37798eae 100644 --- a/frontend/app/[locale]/admin/users/page.tsx +++ b/frontend/app/[locale]/admin/users/page.tsx @@ -1,24 +1,52 @@ -import React from 'react'; +"use client"; +import React, {useEffect, useState} from 'react'; import initTranslations from "@app/i18n"; import TranslationsProvider from "@app/[locale]/components/TranslationsProvider"; import NavBar from "@app/[locale]/components/NavBar"; -import Footer from "@app/[locale]/components/Footer"; -import ListView from '@app/[locale]/components/ListView'; -import BackButton from '@app/[locale]/components/BackButton'; -import EmailIcon from '@mui/icons-material/Email'; -import WorkIcon from '@mui/icons-material/Work'; +import {fetchUserData, UserData} from "@lib/api"; +import UserList from "@app/[locale]/components/admin_components/UserList"; +import {Box, CircularProgress} from "@mui/material"; const i18nNamespaces = ['common']; -export default async function Users({ params: { locale } }: { params: { locale: any } }) { - const { t, resources } = await initTranslations(locale, i18nNamespaces); +export default function Users({ params: { locale } }: { params: { locale: any } }) { + const [resources, setResources] = useState(); + const [user, setUser] = useState(null); + const [userLoading, setUserLoading] = useState(true); + const [accessDenied, setAccessDenied] = useState(false); + const [isLoading, setIsLoading] = useState(true); - const headers = [ - {" " + t('email')}, - , - {" " + t('role')} - , '']; - const headers_backend = ['email', 'role', '']; + useEffect(() => { + const initialize = async () => { + try { + const result = await initTranslations(locale, ["common"]); + setResources(result.resources); + const userData = await fetchUserData(); + setUser(userData); + if (userData.role !== 1) { + setAccessDenied(true); + window.location.href = `/403/`; + } else { + setAccessDenied(false); + } + } catch (error) { + console.error("There was an error initializing the page:", error); + } finally { + setUserLoading(false); + setIsLoading(false); + } + }; + + initialize(); + }, [locale]); + + if (isLoading) { + return ( + + + + ); + } return ( -
- - -
+ {!accessDenied && } ); } diff --git a/frontend/app/[locale]/components/AddProjectButton.tsx b/frontend/app/[locale]/components/AddProjectButton.tsx index fe0fc1d7..0b17a986 100644 --- a/frontend/app/[locale]/components/AddProjectButton.tsx +++ b/frontend/app/[locale]/components/AddProjectButton.tsx @@ -1,7 +1,7 @@ "use client"; import {useTranslation} from "react-i18next"; -import {Button, Typography} from "@mui/material"; -import {addProject, getUserData, UserData} from "@lib/api"; +import {Button, Typography, Skeleton} from "@mui/material"; +import {getUserData, UserData} from "@lib/api"; import {useState, useEffect} from "react"; interface EditCourseButtonProps{ @@ -11,6 +11,7 @@ interface EditCourseButtonProps{ const AddProjectButton = ({course_id}: EditCourseButtonProps) => { const {t} = useTranslation(); const [user, setUser] = useState(null); + const [loading, setLoading] = useState(true); useEffect(() => { @@ -22,35 +23,43 @@ const AddProjectButton = ({course_id}: EditCourseButtonProps) => { } } + setLoading(false); fetchUser(); }, []) return ( + loading ? + : <> {user?.role !== 3 && ( - + )} ) diff --git a/frontend/app/[locale]/components/CourseBanner.tsx b/frontend/app/[locale]/components/CourseBanner.tsx index 24b37b4c..7bd0c893 100644 --- a/frontend/app/[locale]/components/CourseBanner.tsx +++ b/frontend/app/[locale]/components/CourseBanner.tsx @@ -27,15 +27,14 @@ const CourseBanner = ({course_id}: CourseBannerProps) => { } }; - fetchCourse(); - setLoading(false); + fetchCourse().then(() => setLoading(false)); }, [course_id]); return ( loading ? ( { const currentYear = new Date().getFullYear(); const academicYear = `${currentYear - 1}-${currentYear.toString().slice(-2)}`; const [user, setUser] = useState(null); + const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const {t} = useTranslation() @@ -23,17 +23,15 @@ const CourseControls = ({selectedYear, onYearChange}) => { useEffect(() => { const fetchUser = async () => { try { - setUser(await getUserData()); + setUser(await fetchUserData()); } catch (error) { if (error instanceof APIError) setError(error); console.error(error); } - - }; - fetchUser(); + setLoading(false); }, []); @@ -46,41 +44,103 @@ const CourseControls = ({selectedYear, onYearChange}) => { ]; return ( - - + loading ? + + + + {t("courses")} + + + {[1, 2, 3, 4, 5, 6, 7].map((i) => ( + + ))} + + + + : + + {t("courses")} - - + {user?.role !== 3 ? ( - - - - ) : null - } - - - - - - + ) : null} + + {user?.role === 1 ? ( - - - - ) : null - } + ) : null} - + ); diff --git a/frontend/app/[locale]/components/EditCourseForm.tsx b/frontend/app/[locale]/components/EditCourseForm.tsx index 18883fe3..2ae88f82 100644 --- a/frontend/app/[locale]/components/EditCourseForm.tsx +++ b/frontend/app/[locale]/components/EditCourseForm.tsx @@ -67,14 +67,10 @@ const EditCourseForm = ({courseId}: EditCourseFormProps) => { const arrayBuffer = this.result; if (arrayBuffer !== null) { formData.append('banner', new Blob([arrayBuffer], {type: 'image/png'})); - await postData("/courses/", formData).then((response) => { - window.location.href = `/course/${response.course_id}`; - }); } + await updateCourse(courseId, formData); + window.location.href = `/course/${courseId}/`; } - if (selectedImage) fileReader.readAsArrayBuffer(selectedImage); - await updateCourse(courseId, formData); - // window.location.href = `/course/${courseId}/`; }; const handleImageUpload = (event: any) => { @@ -237,12 +233,12 @@ const EditCourseForm = ({courseId}: EditCourseFormProps) => { diff --git a/frontend/app/[locale]/components/EditUserForm.tsx b/frontend/app/[locale]/components/EditUserForm.tsx index 91430a35..f003fe8c 100644 --- a/frontend/app/[locale]/components/EditUserForm.tsx +++ b/frontend/app/[locale]/components/EditUserForm.tsx @@ -57,22 +57,27 @@ const EditUserForm = ({userId}: EditUserFormProps) => { width: '100%', }} > + + {t("edit_user_details")} + - {t("user email")} + {t("email")} { mb={3} > - {t("user first name")} + {t("first name")} - setFirstName(event.target.value)} required style={{ + setFirstName(event.target.value)} + required + style={{ fontSize: '20px', - fontFamily: 'Quicksand, sans-serif', borderRadius: '6px', - height: '30px', + height: 'fit-content', width: '400px' }} /> @@ -104,16 +114,21 @@ const EditUserForm = ({userId}: EditUserFormProps) => { mb={3} > - {t("user last name")} + {t("last name")} - setLastName(event.target.value)} required style={{ + setLastName(event.target.value)} + required + style={{ fontSize: '20px', - fontFamily: 'Quicksand, sans-serif', borderRadius: '6px', - height: '30px', + height: 'fit-content', width: '400px' }} /> @@ -122,7 +137,7 @@ const EditUserForm = ({userId}: EditUserFormProps) => { mb={3} > {t("role")} @@ -131,9 +146,8 @@ const EditUserForm = ({userId}: EditUserFormProps) => { onChange={(event: any) => setRole(event.target.value)} style={{ fontSize: '20px', - fontFamily: 'Quicksand, sans-serif', borderRadius: '6px', - height: '30px', + height: 'fit-content', width: '400px' }} > @@ -147,22 +161,23 @@ const EditUserForm = ({userId}: EditUserFormProps) => { sx={{ marginTop: '16px', gap: 2 }} > - - + open={open} + onClose={handleClose} + aria-labelledby="alert-dialog-title" + aria-describedby="alert-dialog-description" + > + {t("Are you sure you want to delete the selection?")} + + + + {admin && action_name && action_name === 'download_submission' && ( @@ -437,8 +431,8 @@ const ListView: NextPage = ({ > - {(get !== 'groups' && get !== 'projects' && get !== 'courses' && !(get === 'submissions' && !action_name)) && - get !== 'course_teachers' && get !== 'users' && !(action_name && user?.role === 3) && get !== 'archived_courses' && + {(get !== 'groups' && get !== 'projects' && get !== 'courses' && !(get === 'submissions' && !action_name)) && + get !== 'course_teachers' && get !== 'users' && !(action_name && user?.role === 3) && get !== 'archived_courses' && = ({ endIcon={ sortable[index] && sortConfig.key === headers_backend[index] ? (sortConfig.direction === 'asc' ? - : ) : + : + ) : + } sx={{ width: 'fit-content', @@ -485,8 +481,8 @@ const ListView: NextPage = ({ {header} - } - {!sortable[index] && + } + {!sortable[index] && = ({ > {header} - } + } )} - {rows.map((row, index) => ( - - {((get !== 'groups' && get !== 'projects' && get !== 'courses' && !(get === 'submissions' && !action_name) && get != 'users') && - get !== 'course_teachers' && !(action_name && user?.role === 3 && get !== 'archived_courses') && - - {} - )} - {get === 'groups' && row.slice(2).map((cell, cellIndex) => ( - {typeof cell == "boolean" ? (cell ? : - ) : cell} - ))} - {get !== 'groups' && row.slice(1).map((cell, cellIndex) => ( - {typeof cell == "boolean" ? (cell ? : - ) : cell} - ))} - { - // course leave button - get === 'courses' && user.course.includes(row[0]) && ( + {rows.map((row, index) => ( + + {((get !== 'groups' && get !== 'projects' && get !== 'courses' && !(get === 'submissions' && !action_name) && get != 'users') && + get !== 'course_teachers' && !(action_name && user?.role === 3) && get !== 'archived_courses' && - + + ) + } + { + // course join button + get === 'courses' && (!user.course.includes(row[0])) && ( + + + + ) + } + { + // group join button + get === 'groups' && (!row[1].includes(user.id)) && ( + + { + // join button isn't shown when user is already in group + // or when group is full + // TODO i18n join button + (user.role == 3) && (!user_is_in_group) && (row[1].length < project.group_size) && ( + + ) + } + ) + } + { + // group leave button + get === 'groups' && (row[1].includes(user.id)) && ( + + { + (user.role == 3) && (user_is_in_group) && (group_size > 1) && ( + + )} + ) + } + {get == 'projects' && ( + + - ) - } - { - // course join button - get === 'courses' && (!user.course.includes(row[0])) && ( + )} + {(get == 'submissions' || get == 'submissions_group') && ( - - ) - } - { - // group join button - get === 'groups' && (!row[1].includes(user.id)) && ( - - { - // join button isn't shown when user is already in group - // or when group is full - // TODO i18n join button - (user.role == 3) && (!user_is_in_group) && (row[1].length < project.group_size) && ( - - ) - } - ) - } - { - // group leave button - get === 'groups' && (row[1].includes(user.id)) && ( - - { - (user.role == 3) && (user_is_in_group) && (group_size > 1) && ( - - )} - ) - } - {get == 'projects' && ( - - - - )} - {(get == 'submissions' || get == 'submissions_group') && ( - - - - )} - {get == 'users' && ( - - - + )} + {get == 'users' && ( + + + - )} - - ))} + )} + + ))} diff --git a/frontend/app/[locale]/components/ProjectDetailsPage.tsx b/frontend/app/[locale]/components/ProjectDetailsPage.tsx index 507028ce..c93fbf92 100644 --- a/frontend/app/[locale]/components/ProjectDetailsPage.tsx +++ b/frontend/app/[locale]/components/ProjectDetailsPage.tsx @@ -1,10 +1,10 @@ 'use client' -import React, {useEffect, useState} from "react"; -import {checkGroup, getProject, getUserData, Project, UserData} from "@lib/api"; -import {useTranslation} from "react-i18next"; +import React, { useEffect, useState } from "react"; +import {checkGroup, getGroup, getProject, getUserData, Project, UserData} from "@lib/api"; +import { useTranslation } from "react-i18next"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; -import {Grid, IconButton, LinearProgress, ThemeProvider} from "@mui/material"; +import { Grid, IconButton, LinearProgress, ThemeProvider, Skeleton } from "@mui/material"; import ProjectSubmissionsList from "@app/[locale]/components/ProjectSubmissionsList"; import GroupSubmissionList from "@app/[locale]/components/GroupSubmissionList"; import baseTheme from "@styles/theme"; @@ -22,235 +22,267 @@ import AccessTimeIcon from "@mui/icons-material/AccessTime"; const backend_url = process.env["NEXT_PUBLIC_BACKEND_URL"]; interface ProjectDetailsPageProps { - locale: any; - project_id: number; + locale: any; + project_id: number; } const ProjectDetailsPage: React.FC = ({ - locale, - project_id, - }) => { - const {t} = useTranslation(); + locale, + project_id, +}) => { + const { t } = useTranslation(); - const [project, setProject] = useState(); - const [loadingProject, setLoadingProject] = useState(true); - const [user, setUser] = useState(null); - const [isExpanded, setIsExpanded] = useState(false); - const [isInGroup, setIsInGroup] = useState(false); - const previewLength = 300; - const deadlineColorType = project?.deadline - ? checkDeadline(project.deadline) - : "textSecondary"; - const deadlineColor = - baseTheme.palette[deadlineColorType]?.main || - baseTheme.palette.text.secondary; + const [project, setProject] = useState(); + const [loadingProject, setLoadingProject] = useState(true); + const [user, setUser] = useState(null); + const [isExpanded, setIsExpanded] = useState(false); + const [loadingUser, setLoadingUser] = useState(true); + const [isInGroup, setIsInGroup] = useState(false); + const previewLength = 300; + const deadlineColorType = project?.deadline + ? checkDeadline(project.deadline) + : "textSecondary"; + const deadlineColor = + baseTheme.palette[deadlineColorType]?.main || + baseTheme.palette.text.secondary; - useEffect(() => { - const fetchUser = async () => { - try { - setUser(await getUserData()); - } catch (error) { - console.error("There was an error fetching the user data:", error); - } - }; - fetchUser(); - }, []); + useEffect(() => { + const fetchUser = async () => { + try { + setUser(await fetchUserData()); + } catch (error) { + console.error("There was an error fetching the user data:", error); + } + }; - useEffect(() => { - const fetchProject = async () => { - try { - setProject(await getProject(project_id)); - } catch (error) { - console.error("There was an error fetching the project:", error); - } - }; + fetchUser().then(() => setLoadingUser(false)); + }, []); + + useEffect(() => { + const fetchProject = async () => { + try { + setProject(await getProject(project_id)); + } catch (error) { + console.error("There was an error fetching the project:", error); + } + }; - fetchProject().then(() => setLoadingProject(false)); - checkGroup(project_id).then((response) => setIsInGroup(response)); - }, [project_id]); + fetchProject().then(() => setLoadingProject(false)); + checkGroup(project_id).then((response) => setIsInGroup(response)); + }, [project_id]); - if (loadingProject) { - return ; + useEffect(() => { + if (!loadingUser && !loadingProject && user) { + if (!user.course.includes(Number(project?.course_id))) { + window.location.href = `/403/`; + } else { + console.log("User is in course"); + } } + }, [loadingUser, user, loadingProject, project]); - const toggleDescription = () => { - setIsExpanded(!isExpanded); - }; + if (loadingProject) { + return ; + } - function formatDate(isoString: string): string { - const options: Intl.DateTimeFormatOptions = { - year: "numeric", - month: "long", - day: "numeric", - hour: "2-digit", - minute: "2-digit", - hour12: false, - }; - const date = new Date(isoString); - return date.toLocaleString(locale, options); - } + const toggleDescription = () => { + setIsExpanded(!isExpanded); + }; - function checkDeadline(deadline) { - const now = new Date(); - const deadlineDate = new Date(deadline); - return now < deadlineDate ? "success" : "failure"; - } + function formatDate(isoString: string): string { + const options: Intl.DateTimeFormatOptions = { + year: "numeric", + month: "long", + day: "numeric", + hour: "2-digit", + minute: "2-digit", + hour12: false, + }; + const date = new Date(isoString); + return date.toLocaleString(locale, options); + } + + function checkDeadline(deadline) { + const now = new Date(); + const deadlineDate = new Date(deadline); + return now < deadlineDate ? "success" : "failure"; + } - return ( - - - - + return ( + + + + + + + + {project?.name} + + + {loadingUser ? ( + [1, 2].map((i) => ( + + ))) : ( + <> + {user?.role !== 3 && ( - - - {project?.name} - - - - {user?.role !== 3 && ( - <> - - - - - - - - )} - - - - - - - - {t("assignment")} - - {project?.description && - project?.description.length > previewLength && - !isExpanded - ? `${project?.description.substring(0, previewLength)}...` - : project?.description} - - {project?.description && project?.description.length > previewLength && ( - - {isExpanded ? : } - - )} - {t("required_files")} - - 
-                    {generateDirectoryTree(project?.file_structure).split('\n').map((line: string, index: number) => (
-                        
-                            {line}
-                            

-                        
-                    ))}
-
- - {t("conditions")} - {project?.conditions} - - {t("max_score")}: - {project?.max_score} - - - {t("number_of_groups")}: - {project?.number_of_groups} - - - {t("group_size")}: - {project?.group_size} - - {user?.role !== 3 && ( - - )} - - - {t("submissions")} -
- - - {project?.deadline ? formatDate(project.deadline) : "No Deadline"} - -
- {user?.role === 3 ? ( - isInGroup ? ( - - ) : ( - - {t("not_in_group")} - - ) - ) : null} - - - {user?.role === 3 ? ( - - ) : ( - - )} - - + )} + + + )} + - - ); + + {t("assignment")} + + {project?.description && + project?.description.length > previewLength && + !isExpanded + ? `${project?.description.substring(0, previewLength)}...` + : project?.description} + + {project?.description && project?.description.length > previewLength && ( + + {isExpanded ? : } + + )} + {t("required_files")} + {project?.file_structure && project?.file_structure.length > 0 ? ( + + 
+                        {generateDirectoryTree(project?.file_structure).split('\n').map((line: string, index: number) => (
+                                
+                                    {line}
+                                    

+                                
+                        ))}
+
+ + ) : ( + {t("no_required_files")} + )} + {t("conditions")} + {project?.conditions} + + {t("max_score")}: + {project?.max_score} + + + {t("number_of_groups")}: + {project?.number_of_groups} + + + {t("group_size")}: + {project?.group_size} + + {user?.role !== 3 && ( + + )} + + + {t("submissions")} +
+ + + {project?.deadline ? formatDate(project.deadline) : "No Deadline"} + +
+ {user?.role === 3 ? ( + isInGroup ? ( + + ) : ( + + {t("not_in_group")} + + ) + ) : null} + + + {user?.role === 3 ? ( + + ) : ( + + )} + + + + + ); }; function buildTree(paths) { diff --git a/frontend/app/[locale]/components/StatusButton.tsx b/frontend/app/[locale]/components/StatusButton.tsx index a469cce4..49ef4eb0 100644 --- a/frontend/app/[locale]/components/StatusButton.tsx +++ b/frontend/app/[locale]/components/StatusButton.tsx @@ -1,7 +1,7 @@ -import {ClearIcon } from '@mui/x-date-pickers/icons'; -import React, { useState } from 'react'; +import {ClearIcon} from '@mui/x-date-pickers/icons'; +import React, {useState} from 'react'; import CheckIcon from "@mui/icons-material/Check"; -import {Button, Typography} from "@mui/material"; +import {Button} from "@mui/material"; import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; interface StatusButtonProps { @@ -33,10 +33,13 @@ function StatusButton( (null); + const [isLoading, setIsLoading] = useState(true); + const [accessDenied, setAccessDenied] = useState(true); + + useEffect(() => { + const initialize = async () => { + try { + const result = await initTranslations(locale, ["common"]); + setResources(result.resources); + const userData = await fetchUserData(); + setUser(userData); + if (userData.role === 3 || !userData.course.includes(Number(course_id))) { // If the user is a student or the course is not in the user's courses + setAccessDenied(true); + window.location.href = `/403/`; + } else { + setAccessDenied(false); + } + } catch (error) { + console.error("There was an error initializing the page:", error); + } finally { + setIsLoading(false); + } + }; + + initialize(); + }, [course_id, locale]); + + // If the page is still loading, display a loading spinner + if (isLoading) { + return ( + + + + ); + } + return ( - + {!accessDenied && } ); } diff --git a/frontend/app/[locale]/course/[course_id]/edit/page.tsx b/frontend/app/[locale]/course/[course_id]/edit/page.tsx index 0b3b0660..2d819479 100644 --- a/frontend/app/[locale]/course/[course_id]/edit/page.tsx +++ b/frontend/app/[locale]/course/[course_id]/edit/page.tsx @@ -1,13 +1,51 @@ +"use client"; +import React, { useState, useEffect } from 'react'; import NavBar from "@app/[locale]/components/NavBar"; -import Box from "@mui/material/Box"; +import {Box, CircularProgress} from "@mui/material"; import initTranslations from "@app/i18n"; import EditCourseForm from "@app/[locale]/components/EditCourseForm"; import DeleteButton from "@app/[locale]/components/course_components/DeleteButton"; import TranslationsProvider from "@app/[locale]/components/TranslationsProvider"; import ArchiveButton from "@app/[locale]/components/course_components/ArchiveButton"; +import {UserData, fetchUserData} from "@lib/api"; -async function CourseEditPage({params: {locale, course_id}}: { params: { locale: any, course_id: number } }) { - const {t, resources} = await initTranslations(locale, ["common"]) +function CourseEditPage({params: {locale, course_id}}: { params: { locale: any, course_id: number } }) { + const [resources, setResources] = useState(); + const [user, setUser] = useState(null); + const [accessDenied, setAccessDenied] = useState(true); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const initialize = async () => { + try { + const result = await initTranslations(locale, ["common"]); + setResources(result.resources); + const userData = await fetchUserData(); + setUser(userData); + if (userData.role === 3 || !userData.course.includes(Number(course_id))) { // If the user is a student or the course is not in the user's courses + setAccessDenied(true); + window.location.href = `/403/`; + } else { + setAccessDenied(false); + } + } catch (error) { + console.error("There was an error initializing the page:", error); + } finally { + setIsLoading(false); + } + }; + + initialize(); + }, [course_id, locale]); + + // If the page is still loading, display a loading spinner + if (isLoading) { + return ( + + + + ); + } return ( - - - - - -
+ {!accessDenied && + <> + + + + + +
+ + } ); } diff --git a/frontend/app/[locale]/course/[course_id]/page.tsx b/frontend/app/[locale]/course/[course_id]/page.tsx index 25e2cf48..bf1621c5 100644 --- a/frontend/app/[locale]/course/[course_id]/page.tsx +++ b/frontend/app/[locale]/course/[course_id]/page.tsx @@ -1,6 +1,7 @@ +"use client" import initTranslations from "@app/i18n"; import TranslationsProvider from "@app/[locale]/components/TranslationsProvider"; -import { Box, Typography, Grid } from "@mui/material"; +import {Box, Typography, Grid, CircularProgress} from "@mui/material"; import NavBar from "@app/[locale]/components/NavBar"; import CourseBanner from "@app/[locale]/components/CourseBanner"; import CourseDetails from "@app/[locale]/components/CourseDetails"; @@ -8,73 +9,110 @@ import StudentCoTeacherButtons from "@app/[locale]/components/StudentCoTeacherBu import JoinCourseWithToken from "@app/[locale]/components/JoinCourseWithToken"; import ListView from '@app/[locale]/components/ListView'; import AddProjectButton from "@app/[locale]/components/AddProjectButton"; -import React from "react"; +import React, { useEffect, useState} from "react"; import AccesAlarm from '@mui/icons-material/AccessAlarm'; import Person from '@mui/icons-material/Person'; +import {fetchUserData, UserData} from "@lib/api"; const i18nNamespaces = ['common'] -export default async function Course({params: {locale, course_id}, searchParams: {token}}: +export default function Course({params: {locale, course_id}, searchParams: {token}}: { params: { locale: any, course_id: number }, searchParams: { token: string } }) { - const {t, resources} = await initTranslations(locale, i18nNamespaces) + const [user, setUser] = useState(null); + const [translations, setTranslations] = useState({ t: (s) => '', resources: {} }); + const [loading, setLoading] = useState(true); + const [accessDenied, setAccessDenied] = useState(true); + + useEffect(() => { + initTranslations(locale, i18nNamespaces).then(({ t, resources }) => { + setTranslations({ t, resources }); + }); + + const fetchUser = async () => { + try { + const userData = await fetchUserData(); + setUser(userData); + if (!userData.course.includes(Number(course_id))) { + window.location.href = `/403/`; + } else { + setAccessDenied(false); + } + + } catch (error) { + console.error("There was an error fetching the user data:", error); + } finally { + setLoading(false); + } + } + + fetchUser(); + }, [locale, course_id]); const headers = [ - {" " + t('name')}, - {" " +t('deadline')}, + {" " + translations.t('name')}, + {" " + translations.t('deadline')}, ''] const headers_backend = ['name', 'deadline', ''] return ( - - - - - - + + + ): ( + !accessDenied && + + + + + + + {translations.t('projects')} + + + + + + + + + - {t('projects')} - - - - - + + + - - - - - - - + ) + } ) } diff --git a/frontend/app/[locale]/course/[course_id]/students/page.tsx b/frontend/app/[locale]/course/[course_id]/students/page.tsx index cfc9963b..e8367485 100644 --- a/frontend/app/[locale]/course/[course_id]/students/page.tsx +++ b/frontend/app/[locale]/course/[course_id]/students/page.tsx @@ -1,52 +1,89 @@ +"use client" import initTranslations from "@app/i18n"; import TranslationsProvider from "@app/[locale]/components/TranslationsProvider"; import NavBar from "@app/[locale]/components/NavBar"; import ListView from '@app/[locale]/components/ListView'; -import {Button, Box} from "@mui/material"; +import {Button, Box, CircularProgress} from "@mui/material"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; -import React from "react"; +import React, {useEffect, useState} from "react"; import EmailIcon from '@mui/icons-material/Email'; +import {fetchUserData, UserData} from "@lib/api"; const i18nNamespaces = ['common'] -export default async function StudentsPage({ params }: { params: { locale: any, course_id: number } }) { - const { locale, course_id } = params; - const { t, resources } = await initTranslations(locale, i18nNamespaces); +export default function StudentsPage({params: {locale, course_id}}: { params: { locale: any, course_id: number } }) { + const [user, setUser] = useState(null); + const [translations, setTranslations] = useState({ t: (s) => '', resources: {} }); + const [userLoading, setUserLoading] = useState(true); + const [accessDenied, setAccessDenied] = useState(true); + + + useEffect(() => { + + initTranslations(locale, i18nNamespaces).then(({ t, resources }) => { + setTranslations({ t, resources }); + }); + + const fetchUser = async () => { + try { + const userData = await fetchUserData(); + setUser(userData); + if (!userData.course.includes(Number(course_id))) { + window.location.href = `/403/`; + } else { + setAccessDenied(false); + } + } catch (error) { + console.error("There was an error fetching the user data:", error); + } finally { + setUserLoading(false); + } + } + + fetchUser(); + }, [course_id, locale]); const headers = [ - {" " + t('email')}]; + {" " + translations.t('email')}]; const headers_backend = ['email']; return ( - - - - + {userLoading ? ( + + + + ) : ( + !accessDenied && + + + + + - + )} ); } diff --git a/frontend/app/[locale]/course/[course_id]/teachers/page.tsx b/frontend/app/[locale]/course/[course_id]/teachers/page.tsx index 7bf12e3f..730e203e 100644 --- a/frontend/app/[locale]/course/[course_id]/teachers/page.tsx +++ b/frontend/app/[locale]/course/[course_id]/teachers/page.tsx @@ -1,49 +1,86 @@ +"use client" import initTranslations from "@app/i18n"; import TranslationsProvider from "@app/[locale]/components/TranslationsProvider"; import NavBar from "@app/[locale]/components/NavBar"; import ListView from '@app/[locale]/components/ListView'; -import {Box, Button} from "@mui/material"; +import {Box, Button, CircularProgress} from "@mui/material"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; -import React from "react"; +import React, {useEffect, useState} from "react"; import EmailIcon from '@mui/icons-material/Email'; +import {fetchUserData, UserData} from "@lib/api"; const i18nNamespaces = ['common'] -export default async function TeachersPage({params}: { params: { locale: any, course_id: number } }) { - const {locale, course_id} = params; - const {t, resources} = await initTranslations(locale, i18nNamespaces); +export default function TeachersPage({params: {locale, course_id}}: { params: { locale: any, course_id: number } }) { + const [user, setUser] = useState(null); + const [translations, setTranslations] = useState({ t: (s) => '', resources: {} }); + const [userLoading, setUserLoading] = useState(true); + const [accessDenied, setAccessDenied] = useState(true); - const headers = [{" " + t('email')}]; + useEffect(() => { + + initTranslations(locale, i18nNamespaces).then(({ t, resources }) => { + setTranslations({ t, resources }); + }); + + const fetchUser = async () => { + try { + const userData = await fetchUserData(); + setUser(userData); + if (!userData.course.includes(Number(course_id))) { + window.location.href = `/403/`; + } else { + setAccessDenied(false); + } + } catch (error) { + console.error("There was an error fetching the user data:", error); + } finally { + setUserLoading(false); + } + } + + fetchUser(); + }, [course_id, locale]); + + + const headers = [{" " + translations.t('email')}]; const headers_backend = ['email']; return ( - - - - + {userLoading ? ( + + + + ) : ( + !accessDenied && + + + + + - + )} ); } diff --git a/frontend/app/[locale]/course/add/page.tsx b/frontend/app/[locale]/course/add/page.tsx index b06ccb76..2bb5e4d7 100644 --- a/frontend/app/[locale]/course/add/page.tsx +++ b/frontend/app/[locale]/course/add/page.tsx @@ -1,13 +1,51 @@ +'use client'; import NavBar from "@app/[locale]/components/NavBar"; -import { Box } from "@mui/material"; +import {Box, CircularProgress} from "@mui/material"; import initTranslations from "@app/i18n"; import TranslationsProvider from "@app/[locale]/components/TranslationsProvider"; import CreateCourseForm from "@app/[locale]/components/CreateCourseForm"; +import React, {useEffect, useState} from "react"; +import {fetchUserData, UserData} from "@lib/api"; const i18nNamespaces = ['common'] -async function CourseCreatePage({params: {locale}}: { params: { locale: any } }) { - const {t, resources} = await initTranslations(locale, ["common"]) +function CourseCreatePage({params: {locale}}: { params: { locale: any } }) { + const [resources, setResources] = useState() + const [user, setUser] = useState(null); + const [userLoading, setUserLoading] = useState(true); + const [accessDenied, setAccessDenied] = useState(true); + + + useEffect(() => { + const initialize = async () => { + try { + const result = await initTranslations(locale, ["common"]); + setResources(result.resources); + const userData = await fetchUserData(); + setUser(userData); + if (userData.role === 3) { + setAccessDenied(true); + window.location.href = `/403/`; + } else { + setAccessDenied(false); + } + } catch (error) { + console.error("There was an error initializing the page:", error); + } finally { + setUserLoading(false); + } + }; + + initialize(); + }, [locale]); + + if (userLoading) { + return ( + + + + ); + } return ( - - - - + {!accessDenied && + + + + } ) } diff --git a/frontend/app/[locale]/course/archived/page.tsx b/frontend/app/[locale]/course/archived/page.tsx index 64db6af1..15b02882 100644 --- a/frontend/app/[locale]/course/archived/page.tsx +++ b/frontend/app/[locale]/course/archived/page.tsx @@ -22,7 +22,12 @@ const ArchivePage = async ({params: {locale}}) => { namespaces={i18nNamespaces} > -
+
(null); + const [userLoading, setUserLoading] = useState(true); + const [accessDenied, setAccessDenied] = useState(true); + + useEffect(() => { + const initialize = async () => { + try { + const result = await initTranslations(locale, ["common"]); + setResources(result.resources); + const userData = await fetchUserData(); + setUser(userData); + if (userData.role === 3) { // If the user is a student or the course is not in the user's courses + setAccessDenied(true); + window.location.href = `/403/`; + } else { + setAccessDenied(false); + } + } catch (error) { + console.error("There was an error initializing the page:", error); + } finally { + setUserLoading(false); + } + }; + + initialize(); + }, [locale]); + + if (userLoading) { + return ( + + + + ); + } + return ( - + {!accessDenied && } ); } diff --git a/frontend/app/[locale]/project/[project_id]/edit/projectEditForm.tsx b/frontend/app/[locale]/project/[project_id]/edit/projectEditForm.tsx index 3efaa934..349d25b5 100644 --- a/frontend/app/[locale]/project/[project_id]/edit/projectEditForm.tsx +++ b/frontend/app/[locale]/project/[project_id]/edit/projectEditForm.tsx @@ -2,7 +2,16 @@ import React, {useEffect, useState} from "react"; import dayjs from "dayjs"; import JSZip, {JSZipObject} from "jszip"; -import {addProject, deleteProject, getProject, getTestFiles, getUserData, Project, updateProject} from "@lib/api"; +import { + addProject, + deleteProject, + getProject, + getTestFiles, + fetchUserData, + Project, + updateProject, + UserData +} from "@lib/api"; import Box from "@mui/material/Box"; import Title from "@app/[locale]/components/project_components/title"; import Assignment from "@app/[locale]/components/project_components/assignment"; @@ -50,9 +59,11 @@ function ProjectEditForm({project_id, add_course_id}: ProjectEditFormProps) { const [isStudent, setIsStudent] = useState(false); const [isTeacher, setIsTeacher] = useState(false); const [loadingUser, setLoadingUser] = useState(true); + const [user, setUser] = useState(null); const [hasDeadline, setHasDeadline] = useState(false); const [course_id, setCourseId] = useState(0); const [confirmSubmit, setConfirmSubmit] = useState(false); + const [accessDenied, setAccessDenied] = useState(true); const isTitleEmpty = !title @@ -94,7 +105,7 @@ function ProjectEditForm({project_id, add_course_id}: ProjectEditFormProps) { } if (project.deadline !== null) setHasDeadline(true); } - await getUserData().then((response) => { + await fetchUserData().then((response) => { if (response.role === 3) { setIsStudent(true); } else { @@ -113,7 +124,38 @@ function ProjectEditForm({project_id, add_course_id}: ProjectEditFormProps) { } else { setLoadingProject(false); } - }, [project_id, loadingTranslations, isStudent, loadingProject, isTeacher]); + }, [project_id, isStudent, loadingProject, isTeacher]); + + useEffect(() => { + const fetchUser = async () => { + try { + const user = await fetchUserData(); + setUser(user) + if (!loadingUser && !loadingProject && user) { + if (project_id !== null) { + if (!user.course.includes(Number(course_id))) { + window.location.href = `/403/`; + } else { + setAccessDenied(false); + } + } else { + if (!user.course.includes(Number(add_course_id))) { + window.location.href = `/403/`; + } else { + setAccessDenied(false); + } + } + } + } catch (error) { + console.error("There was an error fetching the user data:", error); + } finally { + setLoadingUser(false); + } + } + + fetchUser(); + }, [add_course_id, course_id, loadingProject, loadingUser, project_id]); + async function setTestFiles(project: Project) { @@ -212,12 +254,13 @@ function ProjectEditForm({project_id, add_course_id}: ProjectEditFormProps) { window.location.href = "/course/" + course_id + "/" } - if(loadingProject){ + if(loadingProject || loadingUser){ return ; } return ( (!isStudent) ? ( + !accessDenied &&
- - - + ) diff --git a/frontend/cypress/e2e/student/submission_page.cy.ts b/frontend/cypress/e2e/student/submission_page.cy.ts index 2bc5b7f5..41e04a2a 100644 --- a/frontend/cypress/e2e/student/submission_page.cy.ts +++ b/frontend/cypress/e2e/student/submission_page.cy.ts @@ -8,28 +8,19 @@ describe('student project page', () => { it ('add a submission to a project', () => { cy.contains('Artificiële intelligentie').click(); - cy.contains('en').click(); - cy.contains('nl').click(); + cy.contains('English').click(); + cy.contains('Nederlands').click(); cy.contains('View').click(); cy.contains('Indiening toevoegen').click(); cy.url().should('eq', 'http://localhost:3000/nl/project/2/submit'); cy.contains('submit'); - cy.contains('Project inleveren: AI project') - cy.contains('Bestanden'); - - cy.contains('submit').click(); - cy.contains('Fout bij inleveren, probeer het opnieuw'); - - cy.get('#filepicker').click(); - cy.fixture('submission.txt').then(fileContent => { - cy.get('input[type="file"]').attachFile({ - fileContent: undefined, - fileName: 'submission.txt', - mimeType: 'text/plain' - }); - }); + cy.contains('AI project') + cy.contains('Upload een map'); + cy.contains('Upload bestanden'); + + cy.contains('submit').should('be.disabled'); }); diff --git a/frontend/lib/api.ts b/frontend/lib/api.ts index fe2f4c18..37cafd91 100644 --- a/frontend/lib/api.ts +++ b/frontend/lib/api.ts @@ -419,8 +419,12 @@ export async function getGroup(id: number): Promise { } export async function checkGroup(id: number) { - let response = await axios.get(backend_url + "/projects/" + id + "/get_group/", {withCredentials: true}); - return response.status !== 404; + try { + await axios.get(backend_url + "/projects/" + id + "/get_group/", {withCredentials: true}); + return true; + } catch (error) { + return false; + } } export async function getGroups(): Promise { @@ -507,7 +511,7 @@ export async function getUserData(): Promise { } } -async function fetchUserData() : Promise { +export async function fetchUserData() : Promise { try{ userData = await getRequest('/users/current'); localStorage.setItem('user', JSON.stringify({data: userData, lastcache: Date.now().toString()})); diff --git a/frontend/locales/en/common.json b/frontend/locales/en/common.json index b306a73e..c6fbd8e7 100644 --- a/frontend/locales/en/common.json +++ b/frontend/locales/en/common.json @@ -122,8 +122,8 @@ "search_teacher": "Search teacher", "Are you sure you want to delete this user?": "Are you sure you want to delete this user?", "delete user": "Delete user", - "user first name": "First name of user", - "user last name": "Last name of user", + "first name": "First name", + "last name": "Surname", "user email": "Email of user", "Are you sure you want to submit this course?": "Are you sure you want to submit this course?", "ERROR_NOT_IN_GROUP": "You're not in a group", @@ -139,5 +139,7 @@ "group_nr": "Group nr", "join_leave": "Join/Leave", "not_in_group": "Join a group to submit", - "submission_all": "Submissions" + "edit_user_details": "Edit user details", + "status_button_tooltip": "Required, optional or forbidden file", + "no_deadline": "No deadline" } \ No newline at end of file diff --git a/frontend/locales/nl/common.json b/frontend/locales/nl/common.json index af0852b1..c9b59304 100644 --- a/frontend/locales/nl/common.json +++ b/frontend/locales/nl/common.json @@ -122,8 +122,8 @@ "search_teacher": "Zoek docent", "Are you sure you want to delete this user?": "Ben je zeker dat je deze gebruiker wil verwijderen?", "delete user": "Verwijder gebruiker", - "user first name": "Voornaam gebruiker", - "user last name": "Achternaam gebruiker", + "first name": "Voornaam", + "last name": "Achternaam", "user email": "Gebruiker email", "Are you sure you want to submit this course?": "Ben je zeker dat je deze cursus wil aanmaken?", "year": "Jaargang", @@ -142,5 +142,7 @@ "group_nr": "Groep nr", "join_leave": "Toetreden/Verlaten", "not_in_group": "Je kan niet indienen zonder in een groep te zitten", - "submission_all": "Indieningen" + "edit_user_details": "Gebruiker bewerken", + "status_button_tooltip": "Verplicht, optioneel of verboden bestand", + "no_deadline": "Geen deadline" } \ No newline at end of file