Parent features implementation

client/package.json

@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@types/w3c-web-serial": "^1.0.3",
-    "@vitejs/plugin-react-swc": "^3.2.0",
+    "@vitejs/plugin-react-swc": "^3.4.0",
     "parse-full-name": "^1.2.6"
   }
 }

client/src/App.jsx

@@ -19,6 +19,11 @@ import StudentLogin from './views/StudentLogin/StudentLogin';
 import ForgetPassword from './views/TeacherLogin/ForgetPassword';
 import ResetPassword from './views/TeacherLogin/ResetPassword';
 import TeacherLogin from './views/TeacherLogin/TeacherLogin';
+import ParentSignup from './views/ParentAccount/ParentSignup';
+import RestrictAccess from './views/ParentAccount/RestrictAccess'
+import ParentLogin from  './views/ParentAccount/ParentLogin';
+import MissedClass from './views/MissedClass/MissedClass';
+
 
 const App = () => {
   return (
@@ -27,6 +32,9 @@ const App = () => {
         <Route path='/' element={<Home />} />
         <Route path='/about' element={<About />} />
         <Route path='/teacherlogin' element={<TeacherLogin />} />
+        <Route path='/parent-signup' element={<ParentSignup />} />
+        <Route path='/restrict-access' element={<RestrictAccess />} />
+        <Route path='/ParentLogin' element={<ParentLogin />} />
         <Route path='/forgot-password' element={<ForgetPassword />} />
         <Route path='/reset-password' element={<ResetPassword />} />
         <Route path='/login' element={<StudentLogin />} />
@@ -80,6 +88,14 @@ const App = () => {
             </PrivateRoute>
           }
         />
+        <Route 
+          path='missed-class'
+          element={
+            <PrivateRoute>
+              <MissedClass />
+            </PrivateRoute>
+          }
+        />
         <Route
           path='/classroom/:id'
           element={

client/src/Utils/userState.js

@@ -11,6 +11,7 @@ export const getCurrUser = () => {
   if (!result.role) {
     return {
       role: 'Student',
+      id: result
     };
   } else if (result.role.type === 'content_creator') {
     return {

client/src/components/NavBar/NavBar.jsx

@@ -8,6 +8,7 @@ import { DownOutlined } from '@ant-design/icons';
 import { removeUserSession } from '../../Utils/AuthRequests';
 import { useGlobalState } from '../../Utils/userState';
 
+
 export default function NavBar() {
   const [value] = useGlobalState('currUser');
   let currentRoute = window.location.pathname;
@@ -99,6 +100,24 @@ export default function NavBar() {
             Sign Out
         </Menu.Item>
       ) : null}
+      {shouldShowRoute('ParentLogin') ? (
+
+
+        value.id % 2 == 0 ? (
+          <Menu.Item key='9' onClick={() => handleRouteChange(routes.ParentLogin)}>
+          <i className='fa fa-sign-in-alt' />
+          &nbsp; Parent Login
+        </Menu.Item>
+        ) : (
+          <Menu.Item key='10' onClick={() => handleRouteChange(routes.ParentSignUp)}>
+          <i className='fa fa-sign-in-alt' />
+          &nbsp; Parent Sign Up
+        </Menu.Item>
+        )
+
+
+      ) : null}
+
     </Menu>
   );
 

client/src/components/NavBar/NavBarConfig.json

@@ -9,12 +9,14 @@
     "AccountInfo": "/account",
     "ContentCreatorDashboard": "/ccdashboard",
     "ResearcherDashboard": "/report",
-    "BugReport": "/bugreport"
+    "BugReport": "/bugreport",
+    "ParentSignUp": "/parent-signup",
+    "ParentLogin": "/parentlogin"
   },
   "users": {
     "DefaultUser": ["Home", "TeacherLogin", "Sandbox", "About"],
     "Mentor": ["Dashboard", "AccountInfo", "SignOut", "Sandbox", "BugReport"],
-    "Student": ["SignOut"],
+    "Student": ["SignOut", "ParentSignUp", "ParentLogin"],
     "ContentCreator": [
       "ContentCreatorDashboard",
       "AccountInfo",

client/src/views/MissedClass/MissedClass.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import NavBar from '../../components/NavBar/NavBar';
+import './MissedClass.less'
+import { Link } from 'react-router-dom'
+
+// const [announcements, setAnnouncements] = React.useState([]);
+
+const LectureMaterials = ({ resources }) => {
+    return (
+      <div className="lecture-materials-container">
+        <h2>Lecture Materials</h2>
+        {resources.map((resource, index) => (
+          <div key={index} className="resource-item">
+            <a href={resource.url} target="_blank" rel="noopener noreferrer">{resource.title}</a>
+            <p>Last updated: {resource.lastUpdated}</p>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+
+  const Announcements = ({ announcements }) => {
+    if (!Array.isArray(announcements)) {
+        // Handle the case where announcements is not an array
+        return <div>No announcements available.</div>;
+    }
+
+    return (
+      <div className="announcements-container">
+        <h2>Announcements</h2>
+        {announcements.map((announcement, index) => (
+          <div key={index} className="announcement-item">
+            <p>{announcement.content}</p>
+            <p>Last updated: {announcement.lastUpdated}</p>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+
+  const MissedClassDetails = () => {
+    const missedDetails = {
+        date: 'YYYY-MM-DD', 
+        topic: 'The topic covered in the missed',
+        resources: [
+        {
+            title: 'Lecture Video',
+            url: 'http://example.com/lecture',
+            lastUpdated: '2023-08-21',
+        }, 
+        {
+            title: 'Reading Material',
+            url: 'http://example.com/reading',
+            lastUpdated: '2023-04-21',
+        },
+        {
+            title: 'Homework Assignment',
+            url: 'http://example.com/homework',
+            lastUpdated: '2023-12-21',
+        }
+        ],
+        announcements: [
+            {
+                content: 'Midterm grades have been posted.',
+                lastUpdated: '2023-08-09',
+            },
+            {
+                content: `Next week's class will be held in a different room.`,
+                lastUpdated: '2023-05-01',
+            }
+        ]
+    };
+
+    return(
+        <div id='missed-class-container'>
+            <NavBar />
+            <div id='header'>
+                <div>What happened when you were gone</div>
+            </div>
+            <div id="class-content">
+              <div id="lecture-materials-column" className="column">
+                <LectureMaterials resources={missedDetails.resources} />
+              </div>
+              <div id="announcements-column" className="column">
+                <Announcements announcements={missedDetails.announcements || []} />
+              </div>
+          </div>
+        </div>
+    );
+};
+
+export default MissedClassDetails;

client/src/views/MissedClass/MissedClass.less

@@ -0,0 +1,66 @@
+@import "../../assets/style";
+
+#missed-class-container {
+  position: absolute;
+  top: 53vh;
+  left: 10vw;
+  margin: -40vh auto 0 auto;
+  height: 85vh;
+  width: 80vw;
+  background-color: #colors[tertiary];
+  border-radius: 15px;
+  border: 4px solid;
+  border-color: #colors[secondary];
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center; //bruh
+}
+
+.column {
+  flex: 1; // Each column flexes equally
+  padding: 20px; // Padding inside the columns
+  box-sizing: border-box; // Include padding and border in the width and height
+  min-height: 300px;
+  overflow: auto; // Add scrollbars if content overflows
+}
+
+#divider{
+  flex: none;
+  width: 2px;
+  background-color: #000;
+  margin: 0 20px;
+}
+
+#header {
+    width: 50%;
+    min-height: 4vh;
+    font-size: 2.25vh;
+    font-weight: none;
+    position: relative;
+    top: -20px;
+    left: -30px;
+    line-height: 45px;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#class-content{
+    display: flex; // Make it a flex container
+    flex-direction: column; // Lay out children in a 
+    flex: 1; // Allow it to fill the available space
+    height: calc(100% - 4vh);
+}
+
+#class-content::after {
+  content: '';  // Required for the pseudo-element to work
+  display: block;  // Makes it a block element
+  height: 1px;  // Height of the divider line
+  width: 100%;  // Full width of the container
+  background-color: black;  // Color of the divider
+  position: absolute;  // Absolute positioning
+  left: 0;  // Starts at the left edge of the container
+  top: 50%;  // Position it in the middle of the container vertically
+}