Index: backend/auth_form/serializers.py =================================================================== --- backend/auth_form/serializers.py (revision 9234fcaaf818682e491ea09e8d4b36486e54b30b) +++ backend/auth_form/serializers.py (revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783) @@ -23,8 +23,11 @@ def validate(self, data): + errors = {} if not re.match(r"^[^@]+@(students\.)?finki\.ukim\.mk$", data['email']): - raise serializers.ValidationError("Email must be a valid FINKI email address") + errors['email'] = ["Email must be a valid FINKI email address"] if data['password'] != data['confirm_password']: - raise serializers.ValidationError("Passwords do not match") + errors['confirm_password'] = ["Passwords do not match"] + if errors: + raise serializers.ValidationError(errors) return data Index: frontend/src/components/PasswordInput.tsx =================================================================== --- frontend/src/components/PasswordInput.tsx (revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783) +++ frontend/src/components/PasswordInput.tsx (revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783) @@ -0,0 +1,44 @@ +import { useState } from "react"; +interface PasswordInputProps { + name: string; + value: string; + onChange: (e: React.ChangeEvent) => void; + error?: string +} + +const PasswordInput: React.FC = ({ + name, + value, + onChange, + error, +}) => { + const [showPassword, setShowPassword] = useState(false); + + const togglePasswordVisibility = () => { + setShowPassword(!showPassword); + }; + + return ( +
+ + + {error &&

{error}

} +
+ ); +}; + +export default PasswordInput; Index: frontend/src/components/SubjectCatalog/FilterSidebar.tsx =================================================================== --- frontend/src/components/SubjectCatalog/FilterSidebar.tsx (revision 9234fcaaf818682e491ea09e8d4b36486e54b30b) +++ frontend/src/components/SubjectCatalog/FilterSidebar.tsx (revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783) @@ -1,264 +1,264 @@ import { PROGRAMS } from "../../constants/subjects"; -import { Filters } from "./types"; +import { Filters } from "../types"; import { resetFilters } from "./utils"; interface FilterSidebarProps { - setSearchTerm: (term: string) => void; - setProfessorSearchTerm: (term: string) => void; - setAssistantSearchTerm: (term: string) => void; - setFilters: (filters: (prev: Filters) => Filters) => void; - filters: Filters; + setSearchTerm: (term: string) => void; + setProfessorSearchTerm: (term: string) => void; + setAssistantSearchTerm: (term: string) => void; + setFilters: (filters: (prev: Filters) => Filters) => void; + filters: Filters; } const FilterSidebar = ({ - setSearchTerm, - setProfessorSearchTerm, - setAssistantSearchTerm, - setFilters, - filters, + setSearchTerm, + setProfessorSearchTerm, + setAssistantSearchTerm, + setFilters, + filters, }: FilterSidebarProps) => { - return ( -
-
-

Филтри

- -
-
- {/* filter by season*/} -
-

Семестар

-
- {["Летен", "Зимски"].map((season) => { - const seasonValue = season === "Летен" ? "S" : "W"; - return ( -
- - setFilters((prev) => ({ - ...prev, - season: prev.season === seasonValue ? "" : seasonValue, - })) - } - checked={filters.season === seasonValue} - className="h-4 w-4 rounded border-gray-300 text-blue-600" - /> - -
- ); - })} -
-
+ return ( +
+
+

Филтри

+ +
+
+ {/* filter by season*/} +
+

Семестар

+
+ {["Летен", "Зимски"].map((season) => { + const seasonValue = season === "Летен" ? "S" : "W"; + return ( +
+ + setFilters((prev) => ({ + ...prev, + season: prev.season === seasonValue ? "" : seasonValue, + })) + } + checked={filters.season === seasonValue} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ); + })} +
+
- {/* filter by semester*/} -
- {/*

Семестар

*/} -
- {Array.from(Array(8)).map((_, index) => { - const i = index + 1; - return ( -
- - setFilters((prev) => ({ - ...prev, - semester: prev.semester.includes(i) - ? prev.semester.filter((item) => item !== i) - : [...prev.semester, i], - })) - } - checked={filters.semester.includes(i)} - className="h-4 w-4 rounded border-gray-300 text-blue-600" - /> - -
- ); - })} -
-
- {/* filter by level */} -
-

Ниво

-
- {Array.from(Array(3)).map((_, index) => { - const i = index + 1; - const level = `L${i}`; - return ( -
- - setFilters((prev) => ({ - ...prev, - level: prev.level.includes(i) - ? prev.level.filter((item) => item !== i) - : [...prev.level, i], - })) - } - checked={filters.level.includes(i)} - className="h-4 w-4 rounded border-gray-300 text-blue-600" - /> - -
- ); - })} -
-
- {/* filter by activation*/} -
-

Активирани

-
- {["Активирани", "Неактивирани"].map((value) => { - const activeValue = - value === "Активирани" ? "activated" : "not_activated"; - return ( -
- - setFilters((prev) => ({ - ...prev, - activated: - prev.activated === activeValue ? "" : activeValue, - })) - } - checked={filters.activated === activeValue} - className="h-4 w-4 rounded border-gray-300 text-blue-600" - /> - -
- ); - })} -
-
- {/* filter by mandatoryFor */} -
-

Задолжителен за:

-
- {PROGRAMS.map((program) => { - const programName = program.replace(/\d+$/, ""); - return ( -
- - setFilters((prev) => ({ - ...prev, - mandatoryFor: prev.mandatoryFor.includes(program) - ? prev.mandatoryFor.filter((item) => item !== program) - : [...prev.mandatoryFor, program], - })) - } - checked={filters.mandatoryFor.includes(program)} - className="h-4 w-4 rounded border-gray-300 text-blue-600" - /> - -
- ); - })} -
-
- {/* filter by electiveFor */} -
-

Изборен за:

-
- {PROGRAMS.map((program) => { - const programName = program.replace(/\d+$/, ""); - return ( -
- - setFilters((prev) => ({ - ...prev, - electiveFor: prev.electiveFor.includes(program) - ? prev.electiveFor.filter((item) => item !== program) - : [...prev.electiveFor, program], - })) - } - checked={filters.electiveFor.includes(program)} - className="h-4 w-4 rounded border-gray-300 text-blue-600" - /> - -
- ); - })} -
-
- {/* filter by prereq */} -
-
- - setFilters((prev) => ({ - ...prev, - hasPrerequisites: !prev.hasPrerequisites, - })) - } - checked={filters.hasPrerequisites} - className="h-4 w-4 rounded border-gray-300 text-blue-600" - /> - -
-
-
-
- ); + {/* filter by semester*/} +
+ {/*

Семестар

*/} +
+ {Array.from(Array(8)).map((_, index) => { + const i = index + 1; + return ( +
+ + setFilters((prev) => ({ + ...prev, + semester: prev.semester.includes(i) + ? prev.semester.filter((item) => item !== i) + : [...prev.semester, i], + })) + } + checked={filters.semester.includes(i)} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ); + })} +
+
+ {/* filter by level */} +
+

Ниво

+
+ {Array.from(Array(3)).map((_, index) => { + const i = index + 1; + const level = `L${i}`; + return ( +
+ + setFilters((prev) => ({ + ...prev, + level: prev.level.includes(i) + ? prev.level.filter((item) => item !== i) + : [...prev.level, i], + })) + } + checked={filters.level.includes(i)} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ); + })} +
+
+ {/* filter by activation*/} +
+

Активирани

+
+ {["Активирани", "Неактивирани"].map((value) => { + const activeValue = + value === "Активирани" ? "activated" : "not_activated"; + return ( +
+ + setFilters((prev) => ({ + ...prev, + activated: + prev.activated === activeValue ? "" : activeValue, + })) + } + checked={filters.activated === activeValue} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ); + })} +
+
+ {/* filter by mandatoryFor */} +
+

Задолжителен за:

+
+ {PROGRAMS.map((program) => { + const programName = program.replace(/\d+$/, ""); + return ( +
+ + setFilters((prev) => ({ + ...prev, + mandatoryFor: prev.mandatoryFor.includes(program) + ? prev.mandatoryFor.filter((item) => item !== program) + : [...prev.mandatoryFor, program], + })) + } + checked={filters.mandatoryFor.includes(program)} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ); + })} +
+
+ {/* filter by electiveFor */} +
+

Изборен за:

+
+ {PROGRAMS.map((program) => { + const programName = program.replace(/\d+$/, ""); + return ( +
+ + setFilters((prev) => ({ + ...prev, + electiveFor: prev.electiveFor.includes(program) + ? prev.electiveFor.filter((item) => item !== program) + : [...prev.electiveFor, program], + })) + } + checked={filters.electiveFor.includes(program)} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ); + })} +
+
+ {/* filter by prereq */} +
+
+ + setFilters((prev) => ({ + ...prev, + hasPrerequisites: !prev.hasPrerequisites, + })) + } + checked={filters.hasPrerequisites} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+
+
+
+ ); }; Index: frontend/src/components/SubjectCatalog/SubjectCatalog.tsx =================================================================== --- frontend/src/components/SubjectCatalog/SubjectCatalog.tsx (revision 9234fcaaf818682e491ea09e8d4b36486e54b30b) +++ frontend/src/components/SubjectCatalog/SubjectCatalog.tsx (revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783) @@ -5,110 +5,110 @@ import SubjectList from "./SubjectList"; import SubjectModal from "./SubjectModal"; -import { Filters, Subject } from "./types"; +import { Filters, Subject } from "../types"; import { filterSubjects, getRandomStaff, resetFilters } from "./utils"; const SubjectCatalog = () => { - const [visibleCourses, setVisibleCourses] = useState(10); - const [searchTerm, setSearchTerm] = useState(""); - const [professorSearchTerm, setProfessorSearchTerm] = useState(""); - const [assistantSearchTerm, setAssistantSearchTerm] = useState(""); - const [selectedSubject, setSelectedSubject] = useState(null); - const [subjectData, setSubjectData] = useState([]); - const [isLoaded, setIsLoaded] = useState(false); - const [randomStaff, setRandomStaff] = useState(["", ""]); - const [showModal, setShowModal] = useState(false); - const [filters, setFilters] = useState({ - season: "", - semester: [], - level: [], - activated: "", - mandatoryFor: [], - electiveFor: [], - professors: [], - assistants: [], - hasPrerequisites: false, - }); + const [visibleCourses, setVisibleCourses] = useState(10); + const [searchTerm, setSearchTerm] = useState(""); + const [professorSearchTerm, setProfessorSearchTerm] = useState(""); + const [assistantSearchTerm, setAssistantSearchTerm] = useState(""); + const [selectedSubject, setSelectedSubject] = useState(null); + const [subjectData, setSubjectData] = useState([]); + const [isLoaded, setIsLoaded] = useState(false); + const [randomStaff, setRandomStaff] = useState(["", ""]); + const [showModal, setShowModal] = useState(false); + const [filters, setFilters] = useState({ + season: "", + semester: [], + level: [], + activated: "", + mandatoryFor: [], + electiveFor: [], + professors: [], + assistants: [], + hasPrerequisites: false, + }); - const filteredSubjects: Subject[] = filterSubjects({ - subjectData, - searchTerm, - professorSearchTerm, - assistantSearchTerm, - filters, - }); + const filteredSubjects: Subject[] = filterSubjects({ + subjectData, + searchTerm, + professorSearchTerm, + assistantSearchTerm, + filters, + }); - useEffect(() => { - const fetchData = async () => { - const response = await fetch("http://localhost:8000/subjects"); - const data = await response.json(); - setSubjectData(data.subjects); - setIsLoaded(true); - }; - fetchData(); - }, []); + useEffect(() => { + const fetchData = async () => { + const response = await fetch("http://localhost:8000/subjects"); + const data = await response.json(); + setSubjectData(data.subjects); + setIsLoaded(true); + }; + fetchData(); + }, []); - useEffect(() => { - getRandomStaff(subjectData, setRandomStaff); - }, [subjectData]); + useEffect(() => { + getRandomStaff(subjectData, setRandomStaff); + }, [subjectData]); - const loadMore = () => { - setVisibleCourses((prev) => prev + 10); - }; + const loadMore = () => { + setVisibleCourses((prev) => prev + 10); + }; - const openSubjectDetails = (subject: Subject) => { - setSelectedSubject( - subjectData.find((item) => item.id == subject.id) ?? null - ); - setShowModal(true); - }; + const openSubjectDetails = (subject: Subject) => { + setSelectedSubject( + subjectData.find((item) => item.id == subject.id) ?? null + ); + setShowModal(true); + }; - const closeModal = () => { - setShowModal(false); - }; + const closeModal = () => { + setShowModal(false); + }; - const getSubjectPrerequisites = () => { - if (!selectedSubject) return "Нема предуслов"; - return "subjects" in selectedSubject?.info.prerequisite - ? selectedSubject.info.prerequisite.subjects.map( - (item) => - subjectData.find((subject) => subject.id === item)?.name || "/" - ) - : "credits" in selectedSubject.info.prerequisite - ? selectedSubject.info.prerequisite.credits - : "Нема предуслов"; - }; + const getSubjectPrerequisites = () => { + if (!selectedSubject) return "Нема предуслов"; + return "subjects" in selectedSubject?.info.prerequisite + ? selectedSubject.info.prerequisite.subjects.map( + (item) => + subjectData.find((subject) => subject.id === item)?.name || "/" + ) + : "credits" in selectedSubject.info.prerequisite + ? selectedSubject.info.prerequisite.credits + : "Нема предуслов"; + }; - return ( -
-

Преглед на сите предмети

-
-
- - -
- {/* Main content */} -
- {/* Search bar */} -
- setSearchTerm(e.target.value)} - className="w-full p-3 pl-4 pr-12 border border-gray-300 rounded-lg + return ( +
+

Преглед на сите предмети

+
+
+ + +
+ {/* Main content */} +
+ {/* Search bar */} +
+ setSearchTerm(e.target.value)} + className="w-full p-3 pl-4 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" - /> - {/*
+
- {/* Course grid */} + {/* Course grid */} - {!isLoaded ? ( -
- {[...Array(9)].map((_, index) => ( - - ))} -
- ) : ( - - )} + {!isLoaded ? ( +
+ {[...Array(9)].map((_, index) => ( + + ))} +
+ ) : ( + + )} - {/* Load more button */} - {isLoaded && filteredSubjects.length > visibleCourses && ( -
- -
- )} + {/* Load more button */} + {isLoaded && filteredSubjects.length > visibleCourses && ( +
+ +
+ )} - {/* No results message */} - {isLoaded && filteredSubjects.length === 0 && ( -
-

- Не постојат такви предмети -

- -
- )} -
-
- {showModal && selectedSubject && ( - - )} -
- ); + {/* No results message */} + {isLoaded && filteredSubjects.length === 0 && ( +
+

+ Не постојат такви предмети +

+ +
+ )} +
+
+ {showModal && selectedSubject && ( + + )} +
+ ); }; Index: frontend/src/components/SubjectCatalog/SubjectList.tsx =================================================================== --- frontend/src/components/SubjectCatalog/SubjectList.tsx (revision 9234fcaaf818682e491ea09e8d4b36486e54b30b) +++ frontend/src/components/SubjectCatalog/SubjectList.tsx (revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783) @@ -1,52 +1,52 @@ -import { Subject } from "./types"; +import { Subject } from "../types"; interface SubjectListProps { - filteredSubjects: Subject[]; - visibleCourses: number; - openSubjectDetails: (subject: Subject) => void; + filteredSubjects: Subject[]; + visibleCourses: number; + openSubjectDetails: (subject: Subject) => void; } const SubjectList = ({ - filteredSubjects, - visibleCourses, - openSubjectDetails, + filteredSubjects, + visibleCourses, + openSubjectDetails, }: SubjectListProps) => { - return ( -
- {filteredSubjects.slice(0, visibleCourses).map((subject) => ( -
+ {filteredSubjects.slice(0, visibleCourses).map((subject) => ( +
-
-
-
-

{subject.name}

-

{subject.code}

-
-
+ > +
+
+
+

{subject.name}

+

{subject.code}

+
+
- {/*

+ {/*

{subject.abstract}

*/} -
- {/* these tags are for listing the domains a subject covers, ex. backend, AI ...*/} - {["Web Development", "Machine Learning", "Data Science"].map( - (tag) => ( - - {tag} - - ) - )} -
+
+ {/* these tags are for listing the domains a subject covers, ex. backend, AI ...*/} + {["Web Development", "Machine Learning", "Data Science"].map( + (tag) => ( + + {tag} + + ) + )} +
-
- {/* these tags could be used as certain flags for some subjects, like most picked subject, best match etc. */} - {/*
+
+ {/* these tags could be used as certain flags for some subjects, like most picked subject, best match etc. */} + {/*
TAG1 @@ -56,17 +56,17 @@
*/} - -
-
-
- ))} -
- ); + +
+
+
+ ))} +
+ ); }; Index: frontend/src/components/SubjectCatalog/SubjectModal.tsx =================================================================== --- frontend/src/components/SubjectCatalog/SubjectModal.tsx (revision 9234fcaaf818682e491ea09e8d4b36486e54b30b) +++ frontend/src/components/SubjectCatalog/SubjectModal.tsx (revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783) @@ -1,206 +1,206 @@ import { useState } from "react"; -import { Subject } from "./types"; +import { Subject } from "../types"; interface SubjectModalProps { - selectedSubject: Subject; - subjectPrerequisites: string[] | number | "Нема предуслов"; - closeModal: () => void; + selectedSubject: Subject; + subjectPrerequisites: string[] | number | "Нема предуслов"; + closeModal: () => void; } function SubjectModal({ - selectedSubject, - closeModal, - subjectPrerequisites, + selectedSubject, + closeModal, + subjectPrerequisites, }: SubjectModalProps) { - const [isExpanded, setIsExpanded] = useState(false); - - const WORD_LIMIT = 40; - - const truncateText = (text: string) => { - if (!text) return ""; - const words = text.split(/\s+/); - console.log(words.slice(0, WORD_LIMIT).join(" ") + "..."); - return words.length <= WORD_LIMIT - ? text - : words.slice(0, WORD_LIMIT).join(" ") + "..."; - }; - - const canToggle = selectedSubject.abstract.split(/\s+/).length > WORD_LIMIT; - const abstractText = isExpanded - ? selectedSubject.abstract - : truncateText(selectedSubject.abstract); - return ( - <> -
-
-
-
-
-

{selectedSubject.name}

-

{selectedSubject.code}

-
- -
- -
- - {abstractText} - {canToggle && ( - - )} - -
- -
-

Професори:

-

- {selectedSubject.info.professors.length == 0 - ? "Нема одредени професори" - : selectedSubject.info.professors.join(", ")} -

-
-
-

Асистенти:

-

- {selectedSubject.info.assistants.length == 0 - ? "Нема одредени асистенти" - : selectedSubject.info.assistants.join(", ")} -

-
- -
-

- Информации за предметот -

- -
-
-
-
-

- Препорачан семестар -

-

- {selectedSubject.info.semester} -

-
-
-
-
-

Зимски / Летен

-

- {selectedSubject.info.season == "S" - ? "Летен" - : "Зимски"} -

-
-
-
-
-

Ниво

-

- L{selectedSubject.info.level} -

-
-
-
-
-
-
-

Задолжителен за:

-

- {selectedSubject.info.mandatory_for.length == 0 - ? "Не е задолжителен предмет" - : selectedSubject.info.mandatory_for - .map((s) => s.replace(/\d+$/, "")) - .join(", ")} -

-
-
-
-
-

Изборен за:

-

- {selectedSubject.info.elective_for.length == 0 - ? "Не е изборен предмет" - : selectedSubject.info.elective_for - .map((s) => s.replace(/\d+$/, "")) - .join(", ")} -

-
-
-
-
-

Предуслови:

-

- {Array.isArray(subjectPrerequisites) - ? subjectPrerequisites.join(" или ") - : typeof subjectPrerequisites === "number" - ? `${subjectPrerequisites} кредити` - : subjectPrerequisites} -

-
-
-
-
-
-
- {selectedSubject.info.participants[0] == 0 ? ( -
- Овој предмет не бил активиран минатиот семестар. -
- ) : ( -

{`Овој предмет минатиот семестар бил запишан од + const [isExpanded, setIsExpanded] = useState(false); + + const WORD_LIMIT = 40; + + const truncateText = (text: string) => { + if (!text) return ""; + const words = text.split(/\s+/); + console.log(words.slice(0, WORD_LIMIT).join(" ") + "..."); + return words.length <= WORD_LIMIT + ? text + : words.slice(0, WORD_LIMIT).join(" ") + "..."; + }; + + const canToggle = selectedSubject.abstract.split(/\s+/).length > WORD_LIMIT; + const abstractText = isExpanded + ? selectedSubject.abstract + : truncateText(selectedSubject.abstract); + return ( + <> +

+
+
+
+
+

{selectedSubject.name}

+

{selectedSubject.code}

+
+ +
+ +
+ + {abstractText} + {canToggle && ( + + )} + +
+ +
+

Професори:

+

+ {selectedSubject.info.professors.length == 0 + ? "Нема одредени професори" + : selectedSubject.info.professors.join(", ")} +

+
+
+

Асистенти:

+

+ {selectedSubject.info.assistants.length == 0 + ? "Нема одредени асистенти" + : selectedSubject.info.assistants.join(", ")} +

+
+ +
+

+ Информации за предметот +

+ +
+
+
+
+

+ Препорачан семестар +

+

+ {selectedSubject.info.semester} +

+
+
+
+
+

Зимски / Летен

+

+ {selectedSubject.info.season == "S" + ? "Летен" + : "Зимски"} +

+
+
+
+
+

Ниво

+

+ L{selectedSubject.info.level} +

+
+
+
+
+
+
+

Задолжителен за:

+

+ {selectedSubject.info.mandatory_for.length == 0 + ? "Не е задолжителен предмет" + : selectedSubject.info.mandatory_for + .map((s) => s.replace(/\d+$/, "")) + .join(", ")} +

+
+
+
+
+

Изборен за:

+

+ {selectedSubject.info.elective_for.length == 0 + ? "Не е изборен предмет" + : selectedSubject.info.elective_for + .map((s) => s.replace(/\d+$/, "")) + .join(", ")} +

+
+
+
+
+

Предуслови:

+

+ {Array.isArray(subjectPrerequisites) + ? subjectPrerequisites.join(" или ") + : typeof subjectPrerequisites === "number" + ? `${subjectPrerequisites} кредити` + : subjectPrerequisites} +

+
+
+
+
+
+
+ {selectedSubject.info.participants[0] == 0 ? ( +
+ Овој предмет не бил активиран минатиот семестар. +
+ ) : ( +

{`Овој предмет минатиот семестар бил запишан од ${selectedSubject.info.participants[0]} студенти.`}

- )} -
-
-

Тагови

-
- {/* TODO: change this when real tags are added in the database*/} - {["Web Development", "Machine Learning", "Data Science"].map( - (tag) => ( - - {tag} - - ) - )} -
-
- -
- - {/* + {/*
-
-
-
- - ); +
+
+
+
+ + ); } export default SubjectModal; Index: ontend/src/components/SubjectCatalog/types.ts =================================================================== --- frontend/src/components/SubjectCatalog/types.ts (revision 9234fcaaf818682e491ea09e8d4b36486e54b30b) +++ (revision ) @@ -1,55 +1,0 @@ -import { PROGRAMS } from "../../constants/subjects"; - -export interface Subject { - id: number; - code: string; - name: string; - abstract: string; - info: SubjectInfo; -} - -type Prerequisite = - | { subjects: number[] } - | { credits: number } - | Record; - -export interface SubjectInfo { - level: number; - short: string; - prerequisite: Prerequisite; - activated: boolean; - participants: number[]; - mandatory: boolean; - mandatory_for: Programs[]; - semester: number; - season: string; - elective_for: Programs[]; - professors: string[]; - assistants: string[]; -} - -export type Filters = { - season: "W" | "S" | ""; - semester: number[]; - level: number[]; - activated: "activated" | "not_activated" | ""; - mandatoryFor: Programs[]; - electiveFor: Programs[]; - professors: string[]; - assistants: string[]; - hasPrerequisites: boolean; -}; - -export type Programs = (typeof PROGRAMS)[number]; - -export interface LoginData { - email: string; - password: string; -} - -export interface RegisterData { - email: string; - password: string; - fullName: string; - confirmPassword?: string; -} Index: frontend/src/components/SubjectCatalog/utils.ts =================================================================== --- frontend/src/components/SubjectCatalog/utils.ts (revision 9234fcaaf818682e491ea09e8d4b36486e54b30b) +++ frontend/src/components/SubjectCatalog/utils.ts (revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783) @@ -1,138 +1,138 @@ -import { Filters, Programs, Subject } from "./types"; +import { Filters, Programs, Subject } from "../types"; interface filteredSubjectsParams { - subjectData: Subject[]; - searchTerm: string; - professorSearchTerm: string; - assistantSearchTerm: string; - filters: { - season: "W" | "S" | ""; - semester: number[]; - level: number[]; - activated: "activated" | "not_activated" | ""; - mandatoryFor: Programs[]; - electiveFor: Programs[]; - professors: string[]; - assistants: string[]; - hasPrerequisites: boolean; - }; + subjectData: Subject[]; + searchTerm: string; + professorSearchTerm: string; + assistantSearchTerm: string; + filters: { + season: "W" | "S" | ""; + semester: number[]; + level: number[]; + activated: "activated" | "not_activated" | ""; + mandatoryFor: Programs[]; + electiveFor: Programs[]; + professors: string[]; + assistants: string[]; + hasPrerequisites: boolean; + }; } export const filterSubjects = ({ - subjectData, - searchTerm, - professorSearchTerm, - assistantSearchTerm, - filters, + subjectData, + searchTerm, + professorSearchTerm, + assistantSearchTerm, + filters, }: filteredSubjectsParams) => - subjectData.filter((subject) => { - const searchMatches = - subject.name.toLowerCase().includes(searchTerm.toLowerCase()) || - subject.code.toLowerCase().includes(searchTerm.toLowerCase()) || - subject.abstract?.toLowerCase().includes(searchTerm.toLowerCase()); + subjectData.filter((subject) => { + const searchMatches = + subject.name.toLowerCase().includes(searchTerm.toLowerCase()) || + subject.code.toLowerCase().includes(searchTerm.toLowerCase()) || + subject.abstract?.toLowerCase().includes(searchTerm.toLowerCase()); - const seasonMatches = - filters.season === "" || filters.season === subject.info.season; + const seasonMatches = + filters.season === "" || filters.season === subject.info.season; - const semesterMatches = - filters.semester.length === 0 || - filters.semester.includes(subject.info.semester); + const semesterMatches = + filters.semester.length === 0 || + filters.semester.includes(subject.info.semester); - const levelMatches = - filters.level.length === 0 || filters.level.includes(subject.info.level); + const levelMatches = + filters.level.length === 0 || filters.level.includes(subject.info.level); - const activatedMatches = - filters.activated == "" || - (filters.activated == "activated" && subject.info.activated) || - (filters.activated == "not_activated" && !subject.info.activated); + const activatedMatches = + filters.activated == "" || + (filters.activated == "activated" && subject.info.activated) || + (filters.activated == "not_activated" && !subject.info.activated); - const mandatoryMatches = - filters.mandatoryFor.length === 0 || - subject.info.mandatory_for.some((item) => - filters.mandatoryFor.includes(item) - ); + const mandatoryMatches = + filters.mandatoryFor.length === 0 || + subject.info.mandatory_for.some((item) => + filters.mandatoryFor.includes(item) + ); - const electiveMatches = - filters.electiveFor.length === 0 || - subject.info.elective_for.some((item) => - filters.electiveFor.includes(item) - ); + const electiveMatches = + filters.electiveFor.length === 0 || + subject.info.elective_for.some((item) => + filters.electiveFor.includes(item) + ); - const professorsMatches = - professorSearchTerm == "" || - subject.info.professors.some((item) => - item.toLowerCase().includes(professorSearchTerm.toLowerCase()) - ); + const professorsMatches = + professorSearchTerm == "" || + subject.info.professors.some((item) => + item.toLowerCase().includes(professorSearchTerm.toLowerCase()) + ); - const assistantsMatches = - assistantSearchTerm == "" || - subject.info.assistants.some((item) => - item.toLowerCase().includes(assistantSearchTerm.toLowerCase()) - ); + const assistantsMatches = + assistantSearchTerm == "" || + subject.info.assistants.some((item) => + item.toLowerCase().includes(assistantSearchTerm.toLowerCase()) + ); - const prerequisitesMatch = - !filters.hasPrerequisites || subject.info.prerequisite == ""; + const prerequisitesMatch = + !filters.hasPrerequisites || subject.info.prerequisite == ""; - return ( - searchMatches && - seasonMatches && - semesterMatches && - levelMatches && - activatedMatches && - mandatoryMatches && - electiveMatches && - professorsMatches && - assistantsMatches && - prerequisitesMatch - ); - }); + return ( + searchMatches && + seasonMatches && + semesterMatches && + levelMatches && + activatedMatches && + mandatoryMatches && + electiveMatches && + professorsMatches && + assistantsMatches && + prerequisitesMatch + ); + }); export const resetFilters = ( - setSearchTerm: (val: string) => void, - setProfessorSearchTerm: (val: string) => void, - setAssistantSearchTerm: (val: string) => void, - setFilters: (val: (prev: Filters) => Filters) => void + setSearchTerm: (val: string) => void, + setProfessorSearchTerm: (val: string) => void, + setAssistantSearchTerm: (val: string) => void, + setFilters: (val: (prev: Filters) => Filters) => void ) => { - setSearchTerm(""); - setProfessorSearchTerm(""); - setAssistantSearchTerm(""); - setFilters(() => ({ - season: "", - semester: [], - level: [], - activated: "", - mandatoryFor: [], - electiveFor: [], - professors: [], - assistants: [], - hasPrerequisites: false, - })); + setSearchTerm(""); + setProfessorSearchTerm(""); + setAssistantSearchTerm(""); + setFilters(() => ({ + season: "", + semester: [], + level: [], + activated: "", + mandatoryFor: [], + electiveFor: [], + professors: [], + assistants: [], + hasPrerequisites: false, + })); }; export const getRandomStaff = ( - subjectData: Subject[], - setRandomStaff: ([]: string[]) => void + subjectData: Subject[], + setRandomStaff: ([]: string[]) => void ) => { - if (subjectData.length == 0) return; - const getRandomProfessor = () => { - const randomSubject1 = - subjectData[Math.floor(Math.random() * subjectData.length)]; - return randomSubject1?.info.professors[ - Math.floor(Math.random() * randomSubject1.info.professors.length) - ]; - }; - const getRandomAssistant = () => { - const randomSubject2 = - subjectData[Math.floor(Math.random() * subjectData.length)]; - return randomSubject2?.info.assistants[ - Math.floor(Math.random() * randomSubject2.info.assistants.length) - ]; - }; - let randomProfessor = ""; - let randomAssistant = ""; + if (subjectData.length == 0) return; + const getRandomProfessor = () => { + const randomSubject1 = + subjectData[Math.floor(Math.random() * subjectData.length)]; + return randomSubject1?.info.professors[ + Math.floor(Math.random() * randomSubject1.info.professors.length) + ]; + }; + const getRandomAssistant = () => { + const randomSubject2 = + subjectData[Math.floor(Math.random() * subjectData.length)]; + return randomSubject2?.info.assistants[ + Math.floor(Math.random() * randomSubject2.info.assistants.length) + ]; + }; + let randomProfessor = ""; + let randomAssistant = ""; - while (!randomProfessor) randomProfessor = getRandomProfessor(); - while (!randomAssistant) randomAssistant = getRandomAssistant(); + while (!randomProfessor) randomProfessor = getRandomProfessor(); + while (!randomAssistant) randomAssistant = getRandomAssistant(); - setRandomStaff([randomProfessor, randomAssistant]); + setRandomStaff([randomProfessor, randomAssistant]); }; Index: frontend/src/pages/Login.tsx =================================================================== --- frontend/src/pages/Login.tsx (revision 9234fcaaf818682e491ea09e8d4b36486e54b30b) +++ frontend/src/pages/Login.tsx (revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783) @@ -2,91 +2,100 @@ import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; +import PasswordInput from "../components/PasswordInput"; interface LoginForm { - email: string; - password: string; + email: string; + password: string; } const Login: React.FC = () => { - const [formData, setFormData] = useState({ - email: "", - password: "", - }); - const [error, setError] = useState(null); - const navigate = useNavigate(); + const [formData, setFormData] = useState({ + email: "", + password: "", + }); + const [errors, setErrors] = useState< + Partial & { detail?: string[] } + >({}); + const navigate = useNavigate(); - const handleChange = (e: React.ChangeEvent) => { - setFormData({ - ...formData, - [e.target.name]: e.target.value, - }); - }; + const handleChange = (e: React.ChangeEvent) => { + setFormData({ + ...formData, + [e.target.name]: e.target.value, + }); + }; - const handleLogin = async (e: React.FormEvent) => { - e.preventDefault(); - setError(null); + const handleLogin = async (e: React.FormEvent) => { + e.preventDefault(); + setErrors({}); - try { - console.log(formData); - const response = await axios - .post("http://localhost:8000/auth/login/", { - email: formData.email, - password: formData.password, - }) - .catch((error: AxiosError) => { - console.error( - "Registration failed:", - error.response?.data || error.message - ); - setError( - error.response?.data?.error || - "Registration failed. Please try again." - ); - }); - // property data does not exist on type 'void'? - const token = response.data.token; - localStorage.setItem("token", token); + try { + const response = await axios.post<{ token: string }>( + "http://localhost:8000/auth/login/", + { + email: formData.email, + password: formData.password, + } + ); + const token = response.data.token; + localStorage.setItem("token", token); + navigate("/"); + } catch (err: unknown) { + const axiosError = err as AxiosError<{ + [key: string]: string[] | string; + }>; + console.log("Error response data:", axiosError.response?.data); - navigate("/"); - // ovde ne znam sto so err i any da pravam :() - } catch (err: AxiosError) { - setError("Login failed. Please try again."); - } - }; - return ( -
-
-

Login

- {error &&
{error}
} - - - -
-
- ); + if (axiosError.response && axiosError.response.data) { + const errorData = axiosError.response.data; + const normalizedErrors: { [key: string]: string[] } = {}; + Object.entries(errorData).forEach(([field, message]) => { + normalizedErrors[field] = Array.isArray(message) + ? message + : [message]; + }); + setErrors(normalizedErrors); + } else { + setErrors({ detail: ["An unknown error occurred."] }); + } + } + }; + return ( +
+
+

Login

+ {errors.detail && ( +
{errors.detail[0]}.
+ )} + + {errors.email && ( +

{errors.email[0]}

+ )} + + + +
+ ); }; Index: frontend/src/pages/Register.tsx =================================================================== --- frontend/src/pages/Register.tsx (revision 9234fcaaf818682e491ea09e8d4b36486e54b30b) +++ frontend/src/pages/Register.tsx (revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783) @@ -1,5 +1,6 @@ import React, { useState } from "react"; -import axios from "axios"; +import axios, { AxiosError } from "axios"; import { useNavigate } from "react-router-dom"; +import PasswordInput from "../components/PasswordInput"; interface RegisterForm { @@ -18,5 +19,7 @@ }); const [loading, setLoading] = useState(false); - const [error, setError] = useState(null); + const [errors, setErrors] = useState< + Partial & { non_field_errors?: string[] } + >({}); const navigate = useNavigate(); @@ -30,42 +33,39 @@ const handleRegister = async (e: React.FormEvent) => { e.preventDefault(); - setError(null); + setErrors({}); setLoading(true); - - if (formData.password !== formData.confirmPassword) { - setError("Passwords do not match."); - setLoading(false); - return; - } try { console.log(formData); - const response = await axios - .post("http://localhost:8000/auth/register/", { + const response = await axios.post( + "http://localhost:8000/auth/register/", + { email: formData.email, password: formData.password, confirm_password: formData.confirmPassword, full_name: formData.fullName, - }) - .catch((error) => { - console.error( - "Registration failed:", - error.response?.data || error.message - ); - setError( - error.response?.data?.error || - "Registration failed. Please try again." - ); - }); - // property data does not exist on type 'void'? + } + ); + const { token, userType } = response.data; - localStorage.setItem("token", token); localStorage.setItem("userType", userType); - navigate("/"); - // ovde ne znam sto so err i any da pravam :() - } catch (err: any) { - setError("Registration failed. Please try again."); + } catch (err: unknown) { + const axiosError = err as AxiosError<{ + [key: string]: string[] | string; + }>; + if (axiosError.response && axiosError.response.data) { + const errorData = axiosError.response.data; + const normalizedErrors: { [key: string]: string[] } = {}; + Object.entries(errorData).forEach(([field, message]) => { + normalizedErrors[field] = Array.isArray(message) + ? message + : [message]; + }); + setErrors(normalizedErrors); + } else { + setErrors({ non_field_errors: ["An unexpected error occurred."] }); + } } finally { setLoading(false); @@ -79,5 +79,9 @@ >

Register

- {error &&
{error}
} + {errors.non_field_errors && ( +
+ {errors.non_field_errors[0]} +
+ )} - {errors.email[0]}

+ )} + -