{initials}
@@ -24,10 +24,11 @@ const ProfileCircle = ({ initials }) => {
);
};
-const CascadingMenu = () => {
+export const CascadingMenu = ({ id }) => {
+
return (
+ );
+};
+
+export default CohortsList;
+
+
+
diff --git a/src/pages/cohort/teacherCohort/cohortsList/style.css b/src/pages/cohort/teacherCohort/cohortsList/style.css
new file mode 100644
index 00000000..8c2d27c4
--- /dev/null
+++ b/src/pages/cohort/teacherCohort/cohortsList/style.css
@@ -0,0 +1,71 @@
+
+
+
+.course-icon {
+ width: 56px;
+ height: 56px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* Farger per kurs */
+.software-icon {
+ background: #28C846;
+}
+
+.front-icon {
+ background: #6E6EDC;
+}
+
+.data-icon {
+ background: #46A0FA;
+}
+
+.course-icon svg {
+ width: 30px;
+ height: 30px;
+}
+
+.cohort-name-course {
+ font-size: 16px;
+ color: #64648C;
+ margin-top: 4px;
+ margin-right: 10px;
+}
+
+.cohort-info {
+ margin-top: 10px;
+}
+
+.course-name {
+ font-size: 20px;
+ font-weight: bold;
+
+}
+
+
+.cohort-course-row {
+ display: flex;
+ align-items: center;
+ padding: 12px;
+ cursor: pointer;
+ border-radius: 6px;
+ transition: background-color 0.2s ease;
+ width: 380px;
+ box-sizing: border-box;
+ gap: 12px;
+ margin-bottom: 8px;
+ font-size: 20px
+
+}
+
+.cohort-course-row:hover {
+ background-color: #f0f5fa; /* lys blΓ₯grΓ₯ ved hover */
+}
+
+.cohort-course-row.selected {
+ background-color: #E6EBF5;
+
+}
diff --git a/src/pages/cohort/teacherCohort/index.js b/src/pages/cohort/teacherCohort/index.js
new file mode 100644
index 00000000..21c0a6eb
--- /dev/null
+++ b/src/pages/cohort/teacherCohort/index.js
@@ -0,0 +1,117 @@
+import { useEffect, useState } from "react"
+import SearchIcon from "../../../assets/icons/searchIcon"
+import EditIconCohortTeacher from "../../../components/editIconCohortTeacher"
+import TextInput from "../../../components/form/textInput"
+import CohortsList from "./cohortsList"
+import './style.css';
+import StudentList from "./studentList"
+import EditIconCouse from "../../../components/editIconCourse"
+import CourseIcon from "../../../components/courseIcon"
+import { get } from "../../../service/apiClient"
+
+
+const TeacherCohort = () => {
+ const [searchVal, setSearchVal] = useState('');
+ const [selectedProfiles, setSelectedProfiles] = useState([]);
+ const[selectedCohort, setSelectedCohort] = useState(null);
+ const [cohorts, setCohorts] = useState([]);
+
+
+
+
+ useEffect(() => {
+ async function fetchCohorts() {
+ try {
+ const response = await get("cohorts");
+ setCohorts(response.data.cohorts);
+ } catch (error) {
+ console.error("Error fetching cohorts:", error);
+ }
+ }
+
+ fetchCohorts();
+ }, []);
+
+
+ const onChange = (e) => {
+ setSearchVal(e.target.value);
+ };
+
+
+ return (
+ <>
+ {cohorts.length > 0 ? (
+
+
+
Cohorts
+ Students
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setSelectedProfiles(profiles)} />
+
+
+
+
+
+
+ {selectedCohort !== null ? (
+ <>
+
+
+ ): (<>Select a course
)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
):(
+
+ )}
+
+
+ )
+}
+
+export default TeacherCohort
\ No newline at end of file
diff --git a/src/pages/cohort/teacherCohort/studentList/index.js b/src/pages/cohort/teacherCohort/studentList/index.js
new file mode 100644
index 00000000..665ffcab
--- /dev/null
+++ b/src/pages/cohort/teacherCohort/studentList/index.js
@@ -0,0 +1,21 @@
+import ProfileIconTeacher from "../../../../components/profile-icon-teacherView";
+
+const StudentList = ({ profiles }) => {
+ if (!profiles || profiles.length === 0) {
+ return
;
+ }
+
+ return (
+
+ {profiles.map((student) => (
+ -
+
+
+ ))}
+
+ );
+};
+
+export default StudentList;
diff --git a/src/pages/cohort/teacherCohort/style.css b/src/pages/cohort/teacherCohort/style.css
new file mode 100644
index 00000000..eb26c747
--- /dev/null
+++ b/src/pages/cohort/teacherCohort/style.css
@@ -0,0 +1,190 @@
+
+.cohort-card {
+ width: 88%;
+ height: 100%;
+ position: absolute;
+ top: 120px;
+ left: 175px;
+ background-color: #FFFFFF;
+ border: 1px solid #E6EBF5;
+ border-radius: 8px;
+ padding: 24px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ display: flex;
+ flex-direction: column;
+
+
+}
+
+.cohort-card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 16px;
+ border-bottom: 1px solid var(--color-blue5);
+
+}
+
+.header-titles {
+ display: flex;
+ gap: 350px;
+}
+
+.header-titles h3 {
+ font-size: 32px;
+ color: #000046;
+
+}
+
+.search-bar {
+ margin-bottom: 10px;
+}
+
+
+.sections-wrapper {
+ display: flex;
+ flex-direction: row;
+ height: calc(100vh - 80px); /* justerer for header-hΓΈyden */
+ width: 100%;
+}
+
+.cohorts-section {
+ position: relative;
+ width: 500px;
+ padding: 24px;
+ border-right: 1px solid var(--color-blue5);
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ height: 100%; /* viktig for at linjen skal dekke hele hΓΈyden */
+}
+
+.cohort-list {
+ overflow-y: auto;
+ height: 100%;
+ width: 106%;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ scrollbar-width: thin;
+}
+
+
+
+.student-list {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+ width: 101%;
+ min-height: auto;
+ overflow-y: auto;
+ scrollbar-width: thin;
+
+}
+
+.students-section {
+ position: relative;
+ width: 100%;
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.students {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+}
+
+
+
+.selected-course {
+ flex: 1; /* tar opp all tilgjengelig plass til venstre */
+}
+
+
+.actions {
+ display: flex;
+ align-items: center;
+ gap: 16px; /* mellomrom mellom knapp og ikon */
+}
+
+
+.add-student-button button {
+ height: 56px;
+ width: 300px !important;
+ padding: 0 24px;
+ background-color: #F0F5FA;
+ border: none;
+ color: #64648C;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ box-sizing: border-box;
+}
+
+
+.edit-icon-course {
+ font-size: 24px;
+ color: #64648C;
+}
+
+
+.add-cohort {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 16px; /* gir luft mellom knapp og ikon */
+
+
+}
+
+.add-cohort-button {
+ width: auto;
+ flex-grow: 2;
+}
+
+
+.add-cohort-button button{
+ width: 199px;
+ height: 56px;
+ padding: 14px 24px;
+ gap: 8px; /* hvis du har ikon og tekst inni */
+ border-radius: 8px;
+ background-color: #F0F5FA;
+ border: none;
+ cursor: pointer;
+ font-size: 20px;
+ color: #64648C;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 1;
+ transform: rotate(0deg); /* angle: 0 deg */
+ position: relative; /* ikke absolute med top/left med mindre nΓΈdvendig */
+}
+
+
+.edit-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+
+.divider {
+ border-bottom: 1px solid var(--color-blue5);
+
+}
+
+.cohort-teacher-loading {
+ margin-top: 20px;
+ margin-left: 20px;
+}
\ No newline at end of file
diff --git a/src/pages/cohort/teachers/index.js b/src/pages/cohort/teachers/index.js
new file mode 100644
index 00000000..8be4ebd1
--- /dev/null
+++ b/src/pages/cohort/teachers/index.js
@@ -0,0 +1,31 @@
+import Card from "../../../components/card";
+import './style.css';
+import Teacher from "./teacher";
+
+
+const Teachers = ({ teachers, getInitials }) => {
+
+ return (
+
+
+
+
+
+ {teachers.map((teacher, index) => (
+
+ ))}
+
+
+
+ );
+}
+
+export default Teachers;
diff --git a/src/pages/cohort/teachers/style.css b/src/pages/cohort/teachers/style.css
new file mode 100644
index 00000000..1311a5ad
--- /dev/null
+++ b/src/pages/cohort/teachers/style.css
@@ -0,0 +1,35 @@
+.card {
+ background: white;
+ padding: 24px;
+ border-radius: 8px;
+ width: 50%;
+ margin-bottom: 25px;
+ border: 1px #e6ebf5 solid;
+}
+
+.cohort {
+ display: grid;
+ row-gap: 20px;
+}
+
+.cohort-teachers-container {
+ display: grid;
+ gap: 20px;
+}
+
+.teacher-details {
+ display: grid;
+ grid-template-columns: 56px 1fr 48px;
+ align-items: center;
+ column-gap: 20px;
+ padding: 15px;
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.border-top {
+ border-top: 1px solid #ccc;
+ padding-top: 20px;
+ padding-bottom: 10px;
+}
\ No newline at end of file
diff --git a/src/pages/cohort/teachers/teacher/index.js b/src/pages/cohort/teachers/teacher/index.js
new file mode 100644
index 00000000..00ca77fa
--- /dev/null
+++ b/src/pages/cohort/teachers/teacher/index.js
@@ -0,0 +1,19 @@
+import UserIcon from "../../../../components/profile-icon";
+
+const Teacher = ({ initials, firstName, lastName, role }) => {
+
+ return (
+ <>
+
+
+
+
+ );
+};
+
+export default Teacher;
diff --git a/src/pages/dashboard/cohorts/index.js b/src/pages/dashboard/cohorts/index.js
new file mode 100644
index 00000000..44be2165
--- /dev/null
+++ b/src/pages/dashboard/cohorts/index.js
@@ -0,0 +1,74 @@
+import { useEffect, useState } from "react"
+import Card from "../../../components/card"
+import { get } from "../../../service/apiClient"
+import SoftwareLogo from "../../../assets/icons/software-logo"
+import FrontEndLogo from "../../../assets/icons/frontEndLogo"
+import DataAnalyticsLogo from "../../../assets/icons/dataAnalyticsLogo"
+import './style.css';
+
+const Cohorts = () => {
+ const [cohorts, setCohorts] = useState(null)
+
+
+ useEffect(() => {
+ async function fetchCohorts() {
+ try {
+ const response = await get("cohorts");
+ setCohorts(response.data.cohorts);
+ } catch (error) {
+ console.error("Error fetching cohorts:", error);
+ }
+ }
+
+ fetchCohorts();
+ }, []);
+
+ return (
+ <>
+
+ Cohorts
+
+ {cohorts !== null ? (
+
+ {cohorts.map((cohort, index) => {
+ return (
+ -
+ {cohort.course === null ? <> :
+
+
+
+ {cohort.course.name === "Software Development" && }
+ {cohort.course.name === "Front-End Development" && }
+ {cohort.course.name === "Data Analytics" && }
+
+
+
{cohort.course.name}
+
Cohort {cohort.id}
+
+
+ );
+ })}
+
+ ) : (
+
+ )}
+
+
+
+ )
+ }
+
+export default Cohorts
\ No newline at end of file
diff --git a/src/pages/dashboard/cohorts/style.css b/src/pages/dashboard/cohorts/style.css
new file mode 100644
index 00000000..f9c27bcc
--- /dev/null
+++ b/src/pages/dashboard/cohorts/style.css
@@ -0,0 +1,105 @@
+main {
+ padding: 30px;
+}
+
+aside {
+ padding: 30px 60px 30px 0;
+}
+
+.create-post-input {
+ display: grid;
+ grid-template-columns: 70px auto;
+}
+
+.create-post-input button {
+ color: var(--color-blue1);
+ font-size: 1rem !important;
+ padding-left: 15px !important;
+ text-align: left !important;
+ max-width: 100% !important;
+ background-color: var(--color-blue5);
+}
+
+
+
+.dashboard-cohort-item {
+ margin-top: 10px;
+
+}
+
+.dashboard-cohort-info {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+}
+
+.course-text {
+ margin-left: -35px
+}
+
+
+.course-icon {
+ width: 56px;
+ height: 56px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+/* Farger per kurs */
+.software-icon {
+ background: #28C846;
+}
+
+.front-icon {
+ background: #6E6EDC;
+}
+
+.data-icon {
+ background: #46A0FA;
+}
+
+.course-icon svg {
+ width: 30px;
+ height: 30px;
+
+}
+
+.dashboard-cohort-name {
+ margin-left: 50px;
+ font-size: 16px;
+ color: #64648C;
+ margin-top: 4px;
+
+}
+
+
+.dashboard-course-name {
+ font-size: 20px;
+ font-weight: bold;
+ margin-left: 50px;
+
+}
+
+.student-button {
+ margin-top: 20px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 199px;
+ height: 56px;
+ padding: 14px 24px;
+ gap: 8px;
+ border-radius: 8px;
+ background: #F0F5FA;
+ color: #64648C;
+ border: none;
+ cursor: pointer;
+ font-size: 16px;
+
+}
+
+.loading-cohorts {
+ font-size: 20px;
+}
\ No newline at end of file
diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
index 54606849..260c7a9e 100644
--- a/src/pages/dashboard/index.js
+++ b/src/pages/dashboard/index.js
@@ -1,19 +1,78 @@
-import { useState } from 'react';
-import SearchIcon from '../../assets/icons/searchIcon';
+
+
+import { useState, useRef, useEffect } from 'react';
+
+
import Button from '../../components/button';
import Card from '../../components/card';
import CreatePostModal from '../../components/createPostModal';
-import TextInput from '../../components/form/textInput';
import Posts from '../../components/posts';
import useModal from '../../hooks/useModal';
import './style.css';
+import Cohorts from './cohorts';
+import { useUserRoleData } from '../../context/userRole.';
+import Students from './students';
+import TeachersDashboard from './teachers';
+import useAuth from '../../hooks/useAuth';
+import jwtDecode from 'jwt-decode';
+import Search from './search';
+import Student from '../cohort/students/student';
+import { getUserById, get } from '../../service/apiClient';
+import UserIcon from '../../components/profile-icon';
const Dashboard = () => {
- const [searchVal, setSearchVal] = useState('');
+ const { token } = useAuth();
+ const [students, setStudents] = useState([]);
+ const [cohort, setCohort] = useState([]);
+ const [course, setCourse] = useState([]);
+
+ // Safely decode token with fallback
+ let decodedToken = {};
+ try {
+ if (token || localStorage.getItem('token')) {
+ decodedToken = jwtDecode(token || localStorage.getItem('token')) || {};
+ }
+ } catch (error) {
+ console.error('Invalid token in Dashboard:', error);
+ }
+
+ // to view people My Cohort
+ useEffect(() => {
+ async function fetchCohortData() {
+ try {
+ const token = localStorage.getItem('token');
+ if (!token) {
+ console.error('No token found.');
+ return;
+ }
+
+ let userId;
+ try {
+ const decodedToken = jwtDecode(token);
+ userId = decodedToken.userId;
+ } catch (decodeError) {
+ console.error('Invalid token:', decodeError);
+ return;
+ }
+
+ const user = await getUserById(userId);
+ const data = await get(`cohorts/${user.profile.cohort.id}`);
+
+ setCohort(data.data.cohort)
+ setCourse(data.data.cohort);
+ setStudents(data.data.cohort.profiles)
+
+ } catch (error) {
+ console.error('fetchCohortData() in dashboard/index.js:', error);
+ }
+ }
+ fetchCohortData();
+ }, []);
+
+ const fullName = `${decodedToken.firstName || decodedToken.first_name || 'Current'} ${decodedToken.lastName || decodedToken.last_name || 'User'}`;
+ const initials = fullName?.match(/\b(\w)/g)?.join('') || 'NO';
+ const { userRole, setUserRole } = useUserRoleData();
- const onChange = (e) => {
- setSearchVal(e.target.value);
- };
// Use the useModal hook to get the openModal and setModal functions
const { openModal, setModal } = useModal();
@@ -27,14 +86,59 @@ const Dashboard = () => {
openModal();
};
+ useEffect(() => {
+ async function fetchAndSetUserRole() {
+ const storedToken = token || localStorage.getItem('token');
+ if (!storedToken) return;
+ try {
+ const decoded = jwtDecode(storedToken);
+ const user = await getUserById(decoded.userId);
+ // Sjekk rollen fra backend
+ const roleName = user.profile.role.name;
+ if (roleName === 'ROLE_TEACHER') setUserRole(1);
+ else if (roleName === 'ROLE_STUDENT') setUserRole(2);
+ else setUserRole(null);
+ } catch (error) {
+ console.error('Error fetching user role from backend:', error);
+ }
+ }
+ fetchAndSetUserRole();
+ }, [token, setUserRole]);
+
+/* TODO TRIED ADDING CORRECT INITALS TO PROFILE CIRCLE, DIDN'T WORK
+ *
+ * Jeg hyller dette forsoket :) -Richard 22.09.2025
+useEffect(() => {
+ async function fetchUser() {
+ try {
+ const { userId } = jwt_decode(token || localStorage.getItem('token')) || {};
+ if (!userId) {
+ console.log('Could not determine user. Please log in again.');
+ return;
+ }
+ const fetchedUser = await get(`users/${userId}`);
+ setUser(fetchedUser);
+ } catch (error) {
+ console.error('Error fetching user:', error);
+ setUser([]);
+ }
+ const authorName = post.user.profile
+ ? `${post.user.profile.firstName || 'Unknown'} ${post.user.profile.lastName || 'User'}`
+ : 'Unknown User';
+ setUserInitials(authorName.match(/\b(\w)/g));
+ }
+ fetchUser();
+ }, []); */
+
return (
<>
@@ -43,15 +147,40 @@ const Dashboard = () => {
);
diff --git a/src/pages/dashboard/search/index.js b/src/pages/dashboard/search/index.js
new file mode 100644
index 00000000..01200646
--- /dev/null
+++ b/src/pages/dashboard/search/index.js
@@ -0,0 +1,112 @@
+import { useNavigate } from "react-router-dom"
+import { useState, useRef, useEffect } from "react"
+import Card from "../../../components/card"
+import TextInput from "../../../components/form/textInput"
+import SearchIcon from "../../../assets/icons/searchIcon"
+import { get } from "../../../service/apiClient"
+import UserIcon from "../../../components/profile-icon"
+import { useSearchResults } from "../../../context/searchResults"
+
+const Search = () => {
+ const [query, setQuery] = useState("");
+ const {searchResults, setSearchResults} = useSearchResults();
+ const [isOpen, setIsOpen] = useState(false);
+ const navigate = useNavigate();
+ const popupRef = useRef();
+
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (!query.trim()) return;
+ try {
+ const response = await get(`search/profiles/${query}`);
+ setSearchResults(response.data.profiles);
+ setIsOpen(true);
+ } catch (error) {
+ console.error("Error fetching search results:", error);
+ }
+ }
+
+ useEffect(() => {
+ function handleClickOutside(e) {
+ if (popupRef.current && !popupRef.current.contains(e.target)) {
+ setIsOpen(false);
+ }
+ }
+
+ if (isOpen) {
+ document.addEventListener("mousedown", handleClickOutside);
+ document.addEventListener("touchstart", handleClickOutside);
+ }
+
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ document.removeEventListener("touchstart", handleClickOutside);
+ };
+ }, [isOpen]);
+
+
+ return (
+
+
+
+
+ {isOpen && (
+
+
+ People
+ {searchResults?.length > 0 ? (
+
+ {searchResults.slice(0, 10).map((student, index) => (
+ -
+
+
+ ))}
+
+ ) : (
+ Sorry, no results found
+ )}
+
+
+ {searchResults?.length > 10 && (
+
+
+
+ )}
+
+
+ )}
+
+
+ );
+
+}
+
+export default Search;
diff --git a/src/pages/dashboard/students/index.js b/src/pages/dashboard/students/index.js
new file mode 100644
index 00000000..2df3b589
--- /dev/null
+++ b/src/pages/dashboard/students/index.js
@@ -0,0 +1,76 @@
+import { useEffect, useState } from "react";
+import { get } from "../../../service/apiClient";
+
+import { useNavigate } from "react-router-dom";
+import Card from "../../../components/card"
+import UserIcon from "../../../components/profile-icon";
+import ProfileIconTeacher from "../../../components/profile-icon-teacherView";
+
+const Students = () => {
+ const [students, setStudents] = useState(null)
+
+
+ useEffect(() => {
+ async function fetchStudents() {
+ try {
+ const response = await get("students");
+ setStudents(response.data.profiles);
+ } catch (error) {
+ console.error("Error fetching students:", error);
+ }
+ }
+
+ fetchStudents();
+ }, []);
+
+ const navigate = useNavigate()
+
+ const handleClick = () => {
+ navigate("/")
+ // navigate("/students")
+ }
+
+ return(
+ <>
+
+ Students
+
+ {students !== null ? (
+
+
+ {students.slice(0,10).map((student, index) => (
+ -
+
+
word[0].toUpperCase())
+ .join('')}
+ firstname={student.firstName}
+ lastname={student.lastName}
+ />
+
+ ))}
+
+
+
+
+
+
+ )
+}
+export default Students
\ No newline at end of file
diff --git a/src/pages/dashboard/style.css b/src/pages/dashboard/style.css
index f55ef0a7..2e3bef39 100644
--- a/src/pages/dashboard/style.css
+++ b/src/pages/dashboard/style.css
@@ -19,3 +19,109 @@ aside {
max-width: 100% !important;
background-color: var(--color-blue5);
}
+
+
+.dashboard-cohort-item {
+ margin-bottom: 20px;
+}
+
+.cohort-header {
+ display: flex;
+ align-items: center;
+}
+
+.course-icon {
+ width: 56px;
+ height: 56px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* Farger per kurs */
+.software-icon {
+ background: #28C846;
+}
+
+.front-icon {
+ background: #6E6EDC;
+}
+
+.data-icon {
+ background: #46A0FA;
+}
+
+.course-icon svg {
+ width: 30px;
+ height: 30px;
+}
+
+
+.cohort-name {
+ font-size: 16px;
+ color: #64648C;
+ margin-top: 4px;
+}
+
+.course-text {
+ display: flex;
+ flex-direction: column;
+}
+
+
+.dashboard-course-name {
+ font-size: 20px;
+ font-weight: bold;
+ margin: 0;
+}
+
+.student-button {
+ margin-top: 20px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 199px;
+ height: 56px;
+ padding: 14px 24px;
+ gap: 8px;
+ border-radius: 8px;
+ background: #F0F5FA;
+ color: #64648C;
+ border: none;
+ cursor: pointer;
+ font-size: 16px;
+
+}
+
+.people {
+ font-size: 16px;
+ color: #64648C;
+ border-bottom: 1px solid var(--color-blue5);
+ padding: 10px 10px;
+
+}
+
+.cohort-teachers-container {
+ display: grid;
+ gap: 20px;
+}
+
+.border-top {
+ border-top: 1px solid #ccc;
+ padding-top: 20px;
+ padding-bottom: 10px;
+}
+
+.padding-top {
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.cohort-name-student {
+ margin-left: 50px;
+ font-size: 16px;
+ color: #64648C;
+ margin-top: 4px;
+}
\ No newline at end of file
diff --git a/src/pages/dashboard/teachers/index.js b/src/pages/dashboard/teachers/index.js
new file mode 100644
index 00000000..a9dc5a39
--- /dev/null
+++ b/src/pages/dashboard/teachers/index.js
@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react"
+import { get } from "../../../service/apiClient"
+import Card from "../../../components/card"
+import UserIcon from "../../../components/profile-icon"
+
+const TeachersDashboard = () => {
+ const [teachers, setTeachers] = useState(null)
+
+ useEffect(() => {
+ async function fetchTeachers() {
+ try {
+ const response = await get("teachers")
+ setTeachers(Array.isArray(response.data.profiles) ? response.data.profiles : [])
+ } catch (error) {
+ console.error("Error fetching teachers: ", error)
+ }
+ }
+ fetchTeachers()
+ }, [])
+
+ return (
+ <>
+
+ Teachers
+
+ {teachers !== null ? (
+
+ ) : (
+
+ )}
+
+
+
+ )
+}
+
+export default TeachersDashboard
\ No newline at end of file
diff --git a/src/pages/edit/edit.css b/src/pages/edit/edit.css
new file mode 100644
index 00000000..6d9701c5
--- /dev/null
+++ b/src/pages/edit/edit.css
@@ -0,0 +1,164 @@
+.edit-profile-form {
+ width: 120%;
+ margin: 2rem auto;
+ padding: 2rem;
+ background-color: #fff;
+ border: 1px solid #e6ebf5;
+ border-radius: 12px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+ font-family: 'Inter', sans-serif;
+ display: flex;
+ flex-direction: column;
+}
+
+.edit-profile-form h2 {
+ font-size: 2rem;
+ margin-bottom: 2rem;
+ color: #333;
+}
+
+.section h3 {
+ font-size: 1.25rem;
+ margin-bottom: 1rem;
+ color: #444;
+}
+
+.row {
+ display: flex;
+ gap: 2rem;
+ margin-bottom: 2rem;
+ flex-wrap: wrap;
+}
+
+.section {
+ flex: 1;
+ min-width: 300px;
+}
+
+.half {
+ width: 100%;
+}
+
+@media (min-width: 768px) {
+ .half {
+ width: 48%;
+ }
+}
+
+.section > *:not(h3):not(.photo-placeholder):not(.char-count) {
+ margin-bottom: 1.5rem;
+}
+
+.photo-placeholder {
+ width: 80px;
+ height: 80px;
+ background-color: #ddd;
+ border-radius: 50%;
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: #555;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 1.5rem;
+}
+
+input,
+select,
+textarea {
+ width: 100%;
+ padding: 01.6rem;
+ font-size: 1rem;
+ font-family: 'Inter', sans-serif;
+ background-color: #fff;
+}
+
+.char-count {
+ text-align: right;
+ font-size: 0.85rem;
+ color: #666;
+ margin-top: -1rem;
+ margin-bottom: 1.5rem;
+}
+
+.save-button {
+ align-self: flex-end;
+ background-color: #0077cc;
+ color: white;
+ padding: 0.75rem 1.5rem;
+ border: none;
+ border-radius: 8px;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+}
+
+.save-button:hover {
+ background-color: #005fa3;
+}
+
+.bio-area {
+ background-color: #e6ebf5
+}
+
+.save {
+ background-color: var(--color-blue);
+ color: white;
+}
+
+.cancel {
+ background-color: var(--color-blue5);
+}
+
+.bottom-buttons {
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+ padding: 20px;
+}
+
+.change-password-button {
+ width: 100%;
+ padding: 0.6rem;
+ font-size: 1rem;
+ font-family: 'Inter', sans-serif;
+ background-color: var(--color-blue);
+ color: white;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+}
+
+.photo-row {
+ display: flex !important;
+ flex-direction: row !important;
+ align-items: center !important;
+ gap: 20px !important;
+ flex-wrap: nowrap !important;
+}
+
+.photo-wrapper .profile-photo {
+ width: 60px !important;
+ height: 60px !important;
+ object-fit: cover !important;
+ display: block !important;
+}
+
+.profile-photo {
+ width: 100px;
+ height: 100px;
+}
+
+.profile-container .info-section .info-row .label {
+ color: #333333;
+}
+
+.profile-container .info-section .info-row .value {
+ color: #111111;
+}
+
+.profile-container .info-section .info-row .value a {
+ color: #0077cc;
+ text-decoration: underline;
+}
diff --git a/src/pages/edit/index.js b/src/pages/edit/index.js
new file mode 100644
index 00000000..d5f14d9f
--- /dev/null
+++ b/src/pages/edit/index.js
@@ -0,0 +1,291 @@
+import { useEffect, useState } from "react";
+import "./edit.css";
+import Popup from "reactjs-popup";
+import imageCompression from "browser-image-compression";
+import { getUserById, updateUserProfile } from "../../service/apiClient";
+import useAuth from "../../hooks/useAuth";
+import jwtDecode from "jwt-decode";
+import TextInput from "../../components/form/textInput";
+import ProfileCircle from "../../components/profileCircle";
+import Card from "../../components/card";
+import { validatePassword, validateEmail } from '../register';
+
+const EditPage = () => {
+ const [formData, setFormData] = useState(null);
+ const { token } = useAuth();
+
+ let userId;
+ try {
+ const decodedToken = jwtDecode(token || localStorage.getItem('token'));
+ userId = decodedToken?.userId;
+ } catch (error) {
+ console.error('Invalid token:', error);
+ userId = null;
+ }
+
+ const [formValues, setFormValues] = useState({
+ photo: "",
+ firstName: "",
+ lastName: "",
+ username: "",
+ githubUsername: "",
+ email: "",
+ mobile: "",
+ password: "",
+ bio: "",
+ });
+ const [showPasswordFields, setShowPasswordFields] = useState(false);
+ const [newPassword, setNewPassword] = useState("");
+ const [confirmPassword, setConfirmPassword] = useState("");
+
+ useEffect(() => {
+ async function fetchUser() {
+ try {
+ const data = await getUserById(userId);
+ setFormData(data);
+
+ const profile = data.profile || {};
+ setFormValues({
+ photo: profile.photo || "",
+ firstName: profile.firstName || "",
+ lastName: profile.lastName || "",
+ username: profile.username || "",
+ githubUsername: profile.githubUrl || "",
+ email: data.email || "",
+ mobile: profile.mobile || "",
+ password: "",
+ bio: profile.bio || "",
+ });
+ } catch (error) {
+ console.error("Error in EditPage", error);
+ }
+ }
+ if (userId) fetchUser();
+ }, [userId]);
+
+ if (!formData || !formData.profile) {
+ return (
+
+ );
+ }
+
+ const firstName = formData.profile.firstName;
+ const lastName = formData.profile.lastName;
+ const name = `${firstName} ${lastName}`;
+
+ const getReadableRole = (role) => {
+ switch (role) {
+ case 'ROLE_STUDENT': return 'Student';
+ case 'ROLE_TEACHER': return 'Teacher';
+ case 'ROLE_ADMIN': return 'Administrator';
+ default: return role;
+ }
+ };
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormValues((prev) => ({ ...prev, [name]: value }));
+ };
+
+ const togglePasswordFields = () => setShowPasswordFields(prev => !prev);
+
+ const handleFileCompressionAndSet = async (file, closePopup) => {
+ if (!file) return;
+ if (!file.type.startsWith('image/')) { alert('Not an image'); return; }
+
+ const options = { maxSizeMB: 0.5, maxWidthOrHeight: 1024, useWebWorker: true, initialQuality: 0.8 };
+
+ try {
+ const compressedFile = await imageCompression(file, options);
+ if (compressedFile.size > 2 * 1024 * 1024) {
+ alert('Bildet er fortsatt for stort etter komprimering. Velg et mindre bilde.');
+ return;
+ }
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ const dataUrl = reader.result;
+ setFormValues(prev => ({ ...prev, photo: dataUrl }));
+ if (typeof closePopup === 'function') closePopup();
+ };
+ reader.readAsDataURL(compressedFile);
+ } catch (err) {
+ console.error('Compression error', err);
+ alert('Kunne ikke komprimere bildet');
+ }
+ };
+
+ const resetFormToSaved = () => {
+ if (!formData) return;
+ const profile = formData.profile || {};
+ setFormValues({
+ photo: profile.photo || "",
+ firstName: profile.firstName || "",
+ lastName: profile.lastName || "",
+ username: profile.username || "",
+ githubUsername: profile.githubUrl || "",
+ email: formData.email || "",
+ mobile: profile.mobile || "",
+ password: "",
+ bio: profile.bio || "",
+ });
+ alert("The changes are discarded")
+ setNewPassword("");
+ setConfirmPassword("");
+ setShowPasswordFields(false);
+ };
+
+ const handleSave = async (e) => {
+ e.preventDefault();
+
+ if (!validateEmail(formValues.email)) return;
+
+ if (showPasswordFields) {
+ const isValidFormat = validatePassword(newPassword);
+ if (!isValidFormat) return;
+ if (newPassword !== confirmPassword) {
+ alert("The passwords do not match.");
+ return;
+ }
+ };
+
+ const updatedValues = { ...formValues, password: showPasswordFields ? newPassword : "" };
+
+ try {
+ await updateUserProfile(userId, updatedValues);
+ alert("Profile is updated!");
+ const refreshed = await getUserById(userId);
+ setFormData(refreshed);
+ setFormValues(prev => ({ ...prev, photo: refreshed.profile.photo || prev.photo }));
+ } catch (error) {
+ console.error("Error by update:", error);
+ alert("Something went wrong by the update.");
+ }
+ };
+
+ return (
+ <>
+
+ Profile
+
+
+
+ );
+};
+
+export default EditPage;
diff --git a/src/pages/login/index.js b/src/pages/login/index.js
index 08df7d5a..0b9341ee 100644
--- a/src/pages/login/index.js
+++ b/src/pages/login/index.js
@@ -4,10 +4,15 @@ import TextInput from '../../components/form/textInput';
import useAuth from '../../hooks/useAuth';
import CredentialsCard from '../../components/credentials';
import './login.css';
+import { useUserRoleData } from '../../context/userRole.';
+import { get } from '../../service/apiClient';
+// eslint-disable-next-line camelcase
+import jwt_decode from 'jwt-decode';
const Login = () => {
- const { onLogin } = useAuth();
+ const { onLogin} = useAuth();
const [formData, setFormData] = useState({ email: '', password: '' });
+ const {setUserRole} = useUserRoleData()
const onChange = (e) => {
const { name, value } = e.target;
@@ -36,7 +41,19 @@ const Login = () => {
diff --git a/src/pages/profile/index.js b/src/pages/profile/index.js
new file mode 100644
index 00000000..b8dda618
--- /dev/null
+++ b/src/pages/profile/index.js
@@ -0,0 +1,17 @@
+import FullScreenCard from '../../components/fullscreenCard';
+import './profile.css';
+
+const ProfilePage = () => {
+ return (
+ <>
+
+
+ )
+}
+
+export default ProfilePage;
diff --git a/src/pages/profile/profile-data/index.js b/src/pages/profile/profile-data/index.js
new file mode 100644
index 00000000..c52e8af2
--- /dev/null
+++ b/src/pages/profile/profile-data/index.js
@@ -0,0 +1,91 @@
+import './profile-data.css'
+
+const ProfileData = ({ user }) => {
+ const {email} = user;
+ const roleName = user.profile.role.name;
+ const { firstName, lastName, githubUrl, mobile, specialism, bio, photo } = user.profile;
+
+ const getReadableRole = (role) => {
+ switch (role) {
+ case 'ROLE_STUDENT':
+ return 'Student';
+ case 'ROLE_TEACHER':
+ return 'Teacher';
+ case 'ROLE_ADMIN':
+ return 'Administrator'
+ default:
+ return role;
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default ProfileData;
diff --git a/src/pages/profile/profile-data/profile-data.css b/src/pages/profile/profile-data/profile-data.css
new file mode 100644
index 00000000..a04d18f1
--- /dev/null
+++ b/src/pages/profile/profile-data/profile-data.css
@@ -0,0 +1,66 @@
+.profile-container {
+ display: flex;
+ flex-direction: row;
+ gap: 3rem;
+ padding: 3rem;
+ font-family: 'Inter', sans-serif;
+ font-size: 1.4rem;
+}
+
+.info-section {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.info-row {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ font-size: 1.6rem;
+}
+
+.label {
+ font-weight: 600;
+ margin-right: 1rem;
+ min-width: 150px;
+}
+
+.value {
+ font-weight: 400;
+ flex: 1;
+}
+
+.value a {
+ color: #0077cc;
+ text-decoration: underline;
+ font-size: 1.6rem;
+}
+
+.bio-text {
+ margin-top: 1rem;
+ text-align: center;
+ font-style: italic;
+ color: #555;
+ font-size: 1.4rem;
+ max-width: 450px;
+}
+
+.photo-section-edit {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 1rem;
+}
+
+.profile-photo-edit {
+ width: 300px;
+ height: 300px;
+ object-fit: cover;
+ border-radius: 50%;
+ display: block;
+ border: 2px solid black;
+}
+
diff --git a/src/pages/profile/profile.css b/src/pages/profile/profile.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/register/index.js b/src/pages/register/index.js
index 5cc70e32..d518be30 100644
--- a/src/pages/register/index.js
+++ b/src/pages/register/index.js
@@ -1,13 +1,36 @@
-import { useState } from 'react';
import Button from '../../components/button';
import TextInput from '../../components/form/textInput';
import useAuth from '../../hooks/useAuth';
import CredentialsCard from '../../components/credentials';
import './register.css';
+import ReactPasswordChecklist from 'react-password-checklist';
+import { useFormData } from '../../context/form';
+
+export const validateEmail = (email) => {
+ const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;
+ if (email.match(mailFormat)) {
+ return true;
+ }
+ else {
+ alert("You have entered an invalid email address");
+ return false;
+ }
+ }
+
+ export const validatePassword = (password) => {
+ const passwordFormat = /^(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
+ if (password.match(passwordFormat)) {
+ return true;
+ }
+ else {
+ alert("Your password is not in the right format");
+ return false;
+ }
+ }
const Register = () => {
const { onRegister } = useAuth();
- const [formData, setFormData] = useState({ email: '', password: '' });
+ const {formData, setFormData} = useFormData()
const onChange = (e) => {
const { name, value } = e.target;
@@ -31,6 +54,7 @@ const Register = () => {
type="email"
name="email"
label={'Email *'}
+ required
/>