Missed class front end

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,13 @@ 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';
+import StudentPortal from './views/StudentPortal/StudentPortal';
+import ShareProgram from './views/ShareProgram/ShareProgram';
+
 
 const App = () => {
   return (
@@ -27,6 +34,10 @@ 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='/share-program' element={<ShareProgram />} />
         <Route path='/forgot-password' element={<ForgetPassword />} />
         <Route path='/reset-password' element={<ResetPassword />} />
         <Route path='/login' element={<StudentLogin />} />
@@ -72,6 +83,14 @@ const App = () => {
             </PrivateRoute>
           }
         />
+        <Route
+          path="/student-portal" 
+          element={
+            <PrivateRoute>
+              <StudentPortal />
+            </PrivateRoute>
+          } 
+        />
         <Route
           path='/student'
           element={
@@ -80,6 +99,14 @@ const App = () => {
             </PrivateRoute>
           }
         />
+        <Route 
+          path='/missed-class'
+          element={
+            <PrivateRoute>
+              <MissedClass />
+            </PrivateRoute>
+          }
+        />
         <Route
           path='/classroom/:id'
           element={

client/src/Utils/requests.js

@@ -670,5 +670,13 @@ export const getClassroomWorkspace = async (id) =>
     method: GET,
     path: `${server}/classroom/workspaces/${id}`,
     auth: true,
-    error: 'Unable to retrive classroom workspaces',
+    error: 'Unable to retreive classroom workspaces',
+  });
+
+export const getMissedContent = async () => 
+  makeRequest({
+    method: GET, 
+    path: `${server}/missed-contents`, 
+    auth: true,
+    error: 'Unable to retrieve missed content'
   });

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/ActivityPanels/BlocklyCanvasPanel/canvas/StudentCanvas.jsx

@@ -5,6 +5,7 @@ import { message, Spin, Row, Col, Alert, Dropdown, Menu } from 'antd';
 import { getSaves } from '../../../../Utils/requests';
 import CodeModal from '../modals/CodeModal';
 import ConsoleModal from '../modals/ConsoleModal';
+import { Modal, Button } from 'antd';
 import PlotterModal from '../modals/PlotterModal';
 import DisplayDiagramModal from '../modals/DisplayDiagramModal'
 import VersionHistoryModal from '../modals/VersionHistoryModal';
@@ -41,6 +42,8 @@ export default function StudentCanvas({ activity }) {
   const workspaceRef = useRef(null);
   const activityRef = useRef(null);
 
+  const [isShareProgramModalVisible, setShareProgramModalVisible] = useState(false);
+
   const replayRef = useRef([]);
   const clicks = useRef(0);
 
@@ -210,6 +213,16 @@ export default function StudentCanvas({ activity }) {
     setUp();
   }, [activity]);
 
+  const handleShareProgram = () => {
+    setShareProgramModalVisible(true);
+    // TODO: route to another screen or display list of selectable students
+  };
+
+  // close out modal if student chooses not to share
+  const handleCancelShareProgram = () => {
+    setShareProgramModalVisible(false);
+  };
+
   const handleManualSave = async () => {
     // save workspace then update load save options
     pushEvent('save');
@@ -346,6 +359,9 @@ export default function StudentCanvas({ activity }) {
       <Menu.Item>
         <CodeModal title={'Arduino Code'} workspaceRef={workspaceRef.current} />
       </Menu.Item>
+      <Menu.Item onClick={handleShareProgram}>
+         &nbsp; Share Program
+      </Menu.Item>
     </Menu>
   );
 
@@ -511,7 +527,25 @@ export default function StudentCanvas({ activity }) {
           plotData={plotData}
           setPlotData={setPlotData}
           plotId={plotId}
-        />          
+        />
+
+        {/* once parent accounts are linked with students, change pop-up to conditionally display "share enabled" or "share disabled" */}
+        {/* For now, a confirm share feature pop up displays */}
+        <Modal
+          title="Share Program"
+          visible={isShareProgramModalVisible}
+          onCancel={() => setShareProgramModalVisible(false)}
+          footer={[
+            <Button key="no" onClick={handleCancelShareProgram}>
+              No, cancel share request
+            </Button>,
+            <Button key="yes" type="primary" onClick={handleShareProgram}>
+              Yes, confirm share request
+            </Button>,
+          ]}
+        >
+          <p>Are you sure you want to share this program?</p>
+        </Modal>
       </div>
 
       {/* This xml is for the blocks' menu we will provide. Here are examples on how to include categories and subcategories */}

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,26 @@ 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}
+      {shouldShowRoute('StudentPortal') ? (
+        <Menu.Item key='11' onClick={() => handleRouteChange(routes.StudentPortal)}>
+          <i className='fa fa-sign-in-alt' />
+          &nbsp; Student Portal
+        </Menu.Item>
+      ) : null}
+
     </Menu>
   );
 
@@ -112,7 +133,7 @@ export default function NavBar() {
             : value.role === 'Mentor'
             ? '/dashboard'
             : value.role === 'Student'
-            ? '/student'
+            ? '/student-portal'
             : value.role === 'Researcher'
             ? '/report'
             : '/'

client/src/components/NavBar/NavBarConfig.json

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