Merge pull request #50 from CS3219-AY2425S1/question-crud-auth-cherry

Question auth, Minor UI fixes to Collab Space

Author: RingoftheKing

Backend/user-service/controller/auth-controller.js

@@ -39,3 +39,13 @@ export async function handleVerifyToken(req, res) {
     return res.status(500).json({ message: err.message });
   }
 }
+
+// Add function to handle verifying admin
+export async function handleVerifyAdmin(req, res) {
+  try {
+    const adminUser = req.user;
+    return res.status(200).json({ message: "Admin status verified", data: adminUser});
+  } catch (err) {
+    return res.status(500).json({ message: err.message });
+  }
+}

Backend/user-service/routes/auth-routes.js

@@ -1,12 +1,15 @@
 import express from "express";
 
-import { handleLogin, handleVerifyToken } from "../controller/auth-controller.js";
-import { verifyAccessToken } from "../middleware/basic-access-control.js";
+import { handleLogin, handleVerifyAdmin, handleVerifyToken } from "../controller/auth-controller.js";
+import { verifyAccessToken, verifyIsAdmin } from "../middleware/basic-access-control.js";
 
 const router = express.Router();
 
 router.post("/login", handleLogin);
 
 router.get("/verify-token", verifyAccessToken, handleVerifyToken);
 
+// add new route to check for admin
+router.get("/verify-admin", verifyAccessToken, verifyIsAdmin, handleVerifyAdmin);
+
 export default router;

Frontend/src/components/collab/CodeSpace.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Editor } from '@monaco-editor/react'
 import { Container, Stack, Spinner } from 'react-bootstrap'
 
-const CodeSpace = ({ handleEditorChange, loading, code, language, output }) => {
+const CodeSpace = ({ handleEditorChange, loading, code, language, output, isError }) => {
   return (
 
     <Stack gap={3} className='h-100'>
@@ -14,15 +14,17 @@ const CodeSpace = ({ handleEditorChange, loading, code, language, output }) => {
             onChange={handleEditorChange}
             theme='vs-dark'
         />
-        <Container style={{ height: '200px', border: '1px solid #ccc', borderRadius: '0.5rem', padding: '1rem', backgroundColor: '#f8f9fa'}}>
-            <h5>Output</h5>
+        <Container style={{ height: '225px', border: '1px solid #ccc', borderRadius: '0.5rem', padding: '1rem', backgroundColor: '#f8f9fa', padding: '20px'}}>
+            <h4>Output</h4>
             {loading ? (
               <div className="d-flex justify-content-center align-items-center" style={{ height: '100%' }}>
                 <Spinner animation="border" variant="primary" />
                 <span className="ms-1">Running...</span>
               </div>
             ): (
-              <p style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap'}}>{output}</p>
+              <div style={{ height: '150px', maxHeight: '150px', overflowY: 'auto', fontFamily: 'monospace', whiteSpace: 'pre-wrap', border: '1px solid rgba(0, 0, 0, 0.2)', borderRadius: '0.5rem'}}>
+                <p style={{ color: isError ? 'red' : '#212529' }}>{output}</p>
+              </div>
             )}
         </Container>
     </Stack>

Frontend/src/components/collab/CollabNavigationBar.jsx

@@ -18,7 +18,7 @@ const CollabNavigationBar = ({ handleExit, users, handleCodeRun, setLanguage, la
               </DropdownToggle>
               <DropdownMenu>
                 <DropdownItem eventKey="python">Python</DropdownItem>
-                <DropdownItem eventKey="c++">C++</DropdownItem>
+                <DropdownItem eventKey="javascript">Javascript</DropdownItem>
                 <DropdownItem eventKey="java">Java</DropdownItem>
               </DropdownMenu>
             </Dropdown>

Frontend/src/components/collab/CollaborationSpace.jsx

@@ -26,12 +26,13 @@ const CollaborationSpace = () => {
     const [output, setOutput] = useState("")
     const [messages, setMessages] = useState([])
     const [outputLoading, setOutputLoading] = useState(false)
+    const [isError, setIsError] = useState(false);
 
     // use https://emkc.org/api/v2/piston/runtimes to GET other languages
     const LANGUAGEVERSIONS = {
         "python" : "3.10.0",
         "java" : "15.0.2",
-        "c++": "10.2.0"
+        "javascript": "1.32.3"
     };
 
     {/* State management for access denied toast */}
@@ -187,7 +188,14 @@ const CollaborationSpace = () => {
         collabService.getCodeOutput(code_message)
             .then(result => {
                 setOutputLoading(false);
-                console.log(result.data.run.output)
+
+                if (result.data.run.stderr != "") {
+                    console.log("There is an error");
+                   setIsError(true); 
+                } else {
+                    setIsError(false);
+                }
+
                 setOutput(result.data.run.output)
             })
             .catch(err => console.log(err));
@@ -221,9 +229,9 @@ const CollaborationSpace = () => {
     }
 
     return (
-        <div style={{ textAlign: 'center' }}>
+        <div>
             {showAccessDeniedToast ? (
-                <ToastContainer className="p-3" position="top-center" style={{ zIndex: 1 }}>
+                <ToastContainer className="p-3" position="top-center" style={{ zIndex: 1, textAlign: 'center' }}>
                     <Toast
                         onClose={handleCloseToast}
                         show={showAccessDeniedToast}
@@ -255,7 +263,7 @@ const CollaborationSpace = () => {
                     <Container fluid style={{ marginTop: '20px' }}>
                         <Row>
                             <Col md={8}>
-                                <CodeSpace handleEditorChange={handleEditorChange} loading={outputLoading} code={code} language={language} output={output}/>
+                                <CodeSpace handleEditorChange={handleEditorChange} loading={outputLoading} code={code} language={language} output={output} isError={isError}/>
                             </Col>
                             <Col md={4}>
                                 <QuestionDisplay/>

Frontend/src/components/question/Question.jsx

@@ -5,6 +5,7 @@ import ButtonGroup from "react-bootstrap/ButtonGroup";
 import CreateQn from "./CreateQn";
 import EditQn from "./EditQn";
 import questionService from "../../services/questions"
+import userService from "../../services/users";
 
 function Question() {
     const [questions, setQuestions] = useState([]);
@@ -13,6 +14,7 @@ function Question() {
     const [questionToDelete, setQuestionToDelete] = useState(null);
     const [showEditModal, setShowEditModal] = useState(false);
     const [currentQuestion, setCurrentQuestion] = useState(null);
+    const [isAdmin, setIsAdmin] = useState(false);
 
     const handleShow = () => setShowComponent(true);
     const handleClose = () => setShowComponent(false);
@@ -25,6 +27,28 @@ function Question() {
         .catch(err => console.log(err));
     }, []);
 
+    {/* Added to check the authorization status to determine whether to show edit, delete, add buttons */}
+
+    useEffect(() => {
+        const token = sessionStorage.getItem('jwt_token');
+        const authHeader = {
+            headers: {
+                'Authorization': `Bearer ${token}`,
+            },
+        };
+
+        // verify token asynchronously, set auth status only after request completes
+        userService.verifyAdmin(authHeader)
+        .then(response => {
+            if (response.status == 200) {
+                setIsAdmin(true);
+            }
+        })
+        .catch(e => {
+            console.log('Error:', e);
+        });
+    }, []);
+
     const easyQuestions = questions.filter(q => q.complexity === "Easy")
     const mediumQuestions = questions.filter(q => q.complexity === "Medium")
     const hardQuestions = questions.filter(q => q.complexity === "Hard")
@@ -85,7 +109,7 @@ function Question() {
                   <th>Title</th>
                   <th>Description</th>
                   <th>Category</th>
-                  <th>Action</th>
+                  {isAdmin && (<th>Action</th>)}
                 </tr>
                 </thead>
                 <tbody>
@@ -95,20 +119,22 @@ function Question() {
                         <td>{question.title}</td>
                         <td>{question.description}</td>
                         <td>{question.category ? question.category.join(", ") : ''}</td>
-                        <td>
-                            <ButtonGroup className="mb-2">
-                                <button 
-                                    className='btn btn-success' 
-                                    onClick={() => handleShowEditModal(question)}
-                                >
-                                    Edit
-                                </button>
-                                <button className='btn btn-danger' size="sm"
-                                    onClick={() => handleShowDelete(question._id)}>
-                                    Delete
-                                </button>
-                            </ButtonGroup>
-                        </td>
+                        {isAdmin && (
+                            <td>
+                                <ButtonGroup className="mb-2">
+                                    <button 
+                                        className='btn btn-success' 
+                                        onClick={() => handleShowEditModal(question)}
+                                    >
+                                        Edit
+                                    </button>
+                                    <button className='btn btn-danger' size="sm"
+                                        onClick={() => handleShowDelete(question._id)}>
+                                        Delete
+                                    </button>
+                                </ButtonGroup>
+                            </td>
+                        )}
                     </tr>
                 ))}
                 </tbody>
@@ -121,10 +147,11 @@ function Question() {
             <div className='bg-white rounded p-3 m-3'>
                 <div className="d-flex justify-content-between">
                     <h1>Questions</h1>
-                    <button className="btn btn-primary mt-3" onClick={() => handleShow()}>
-                        {showComponent ? 'Hide' : 'Add question'}
-                    </button>
-
+                    {isAdmin && (
+                        <button className="btn btn-primary mt-3" onClick={() => handleShow()}>
+                            {showComponent ? 'Hide' : 'Add question'}
+                        </button>
+                    )}
                     <Modal show={showComponent} onHide={handleClose}>
                         <Modal.Header closeButton>
                             <Modal.Title>Add New Question</Modal.Title>

Frontend/src/components/routes/ProtectedRoute.jsx

@@ -26,8 +26,13 @@ const ProtectedRoute = ({ children }) => {
         // verify token asynchronously, set auth status only after request completes
         userService.verifyToken(authHeader)
         .then(response => {
-            console.log(response);
-            setIsAuthenticated(true);
+            //console.log(response.status);
+            if (response.status == 200) {
+                setIsAuthenticated(true);
+            } else {
+                setIsAuthenticated(false);
+            }
+
         })
         .catch(e => {
             console.log('Error:', e);

Frontend/src/services/users.js

@@ -31,4 +31,9 @@ const verifyToken = async (authHeader) => {
     return response;
 }
 
-export default { createUser, getUser, loginUser, updateUser, verifyToken };
+const verifyAdmin = async (authHeader) => {
+    const response = await axios.get(`${baseUrl}/${auth}/verify-admin`, authHeader);
+    return response;
+}
+
+export default { createUser, getUser, loginUser, updateUser, verifyToken, verifyAdmin };