From dffd5b6f3dffbeab1f0181c429aace25119a380d Mon Sep 17 00:00:00 2001
From: szelongq <72333104+szelongq@users.noreply.github.com>
Date: Tue, 14 Nov 2023 13:50:13 +0800
Subject: [PATCH 1/4] Update formatting of profile and user tables

---
 frontend/src/components/AdminUsersTable.tsx  |  4 +-
 frontend/src/components/NormalUsersTable.tsx |  4 +-
 frontend/src/pages/profile.tsx               | 66 ++++++++++++--------
 3 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/AdminUsersTable.tsx b/frontend/src/components/AdminUsersTable.tsx
index 05674a78..388be0c9 100644
--- a/frontend/src/components/AdminUsersTable.tsx
+++ b/frontend/src/components/AdminUsersTable.tsx
@@ -82,7 +82,7 @@ const AdminUsersTable: React.FC = () => {
 
   return (
     <>
-      <div style={{ maxHeight: "400px", overflowY: "auto", width: "100%" }}>
+      <div style={{ maxHeight: "600px", overflowY: "auto", width: "100%", display: "flex" }}>
         <TableContainer
           component={Paper}
           style={{ margin: "10px", padding: "10px" }}
@@ -125,7 +125,7 @@ const AdminUsersTable: React.FC = () => {
           </Table>
         </TableContainer>
       </div>
-      <div style={{ display: "flex", alignItems: "center" }}>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
         <Select
           value={itemsPerPage}
           onChange={handleChangeItemsPerPage}
diff --git a/frontend/src/components/NormalUsersTable.tsx b/frontend/src/components/NormalUsersTable.tsx
index 3731920d..90f4c2b8 100644
--- a/frontend/src/components/NormalUsersTable.tsx
+++ b/frontend/src/components/NormalUsersTable.tsx
@@ -61,7 +61,7 @@ const NormalUsersTable: React.FC = () => {
   const currentUsers = normalUsersData.slice(indexOfFirstUser, indexOfLastUser);
 
   return (
-    <><div style={{ maxHeight: '400px', overflowY: 'auto', width: '100%' }}>
+    <><div style={{ maxHeight: '600px', overflowY: 'auto', width: '100%', display: "flex" }}>
 
           <TableContainer component={Paper} style={{ margin: '10px', padding: '10px' }}>
           <Grid container>
@@ -101,7 +101,7 @@ const NormalUsersTable: React.FC = () => {
                   </TableBody>
               </Table>
           </TableContainer>
-      </div><div style={{ display: 'flex', alignItems: 'center' }}>
+      </div><div style={{ display: 'flex', alignItems: 'center', justifyContent: "center"  }}>
               <Select
                   value={itemsPerPage}
                   onChange={handleChangeItemsPerPage}
diff --git a/frontend/src/pages/profile.tsx b/frontend/src/pages/profile.tsx
index ba4dceee..28e3e129 100644
--- a/frontend/src/pages/profile.tsx
+++ b/frontend/src/pages/profile.tsx
@@ -55,35 +55,49 @@ export default function Profile() {
       <Navbar />
       <Container sx={{ mt: 5 }}>
         <Grid container spacing={2}>
-          <Grid item xs={12} sm={4}>
-            <Avatar sx={{ height: 192, width: 192, mb: 2 }}>R</Avatar>
-            {user && <Chip label={user.role} color="primary" />}
+          <Grid item container spacing={2}>
+            <Grid item xs={12} sm={4}>
+              <Grid container direction="column" spacing={2}>
+                <Grid item xs={12} justifyContent={"center"}>
+                  <Avatar sx={{ height: 192, width: 192, mb: 2 }}>R</Avatar>
+                </Grid>
+                <Grid item xs={12} alignItems={"center"}>
+                  {user && <Chip label={user.role} color="primary" />}
+                </Grid>
+                <Grid item xs={12}>
+                  <DeleteButtonModal />
+                </Grid>
+              </Grid>
+            </Grid>
+            <Grid item xs={12} sm={8}>
+              <Box display="flex" justifyContent="flex-end" width="100%">
+                <Button
+                  variant="contained"
+                  onClick={toggleEdit}
+                  color={edit ? "success" : "primary"}
+                >
+                  {edit ? "Save Details" : "Edit Details"}
+                </Button>
+              </Box>
+              {profileFields.map((field) => (
+                <ProfileField
+                  key={field.title}
+                  title={field.title}
+                  data={field.data}
+                  edit={edit}
+                  value={value}
+                  setValue={setValue}
+                />
+              ))}
+            </Grid>
           </Grid>
-          <Grid item xs={12} sm={8}>
-            <Box display="flex" justifyContent="flex-end" width="100%">
-              <Button
-                variant="contained"
-                onClick={toggleEdit}
-                color={edit ? "success" : "primary"}
-              >
-                {edit ? "Save Details" : "Edit Details"}
-              </Button>
-            </Box>
-            {profileFields.map((field) => (
-              <ProfileField
-                key={field.title}
-                title={field.title}
-                data={field.data}
-                edit={edit}
-                value={value}
-                setValue={setValue}
-              />
-            ))}
+          <Grid item xs={12}>
+            {user?.role === "master" && <AdminUsersTable />}
+          </Grid>
+          <Grid item xs={12}>
+            {user?.role === "master" && <NormalUsersTable />}
           </Grid>
         </Grid>
-        <DeleteButtonModal />
-        {user?.role === "master" && <AdminUsersTable />}
-        {user?.role === "master" && <NormalUsersTable />}
       </Container>
     </Box>
   );

From 5187a08cfc1a3afb836c4158508bcf66c78016d0 Mon Sep 17 00:00:00 2001
From: szelongq <72333104+szelongq@users.noreply.github.com>
Date: Tue, 14 Nov 2023 14:02:43 +0800
Subject: [PATCH 2/4] Add html sanitization

---
 frontend/package-lock.json   | 15 +++++++++++++++
 frontend/package.json        |  2 ++
 frontend/src/utils/utils.tsx |  2 ++
 3 files changed, 19 insertions(+)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d7a66422..c971d310 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,9 +16,11 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "@types/dompurify": "^3.0.5",
         "@types/jest": "^27.5.2",
         "assert": "^2.1.0",
         "axios": "^1.5.1",
+        "dompurify": "^3.0.6",
         "dotenv": "^16.3.1",
         "firebase": "^10.4.0",
         "html-entities": "^2.4.0",
@@ -5212,6 +5214,14 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.44.5",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.5.tgz",
@@ -8270,6 +8280,11 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.6.tgz",
+      "integrity": "sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w=="
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 11b43bcb..942ac9de 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,9 +11,11 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/dompurify": "^3.0.5",
     "@types/jest": "^27.5.2",
     "assert": "^2.1.0",
     "axios": "^1.5.1",
+    "dompurify": "^3.0.6",
     "dotenv": "^16.3.1",
     "firebase": "^10.4.0",
     "html-entities": "^2.4.0",
diff --git a/frontend/src/utils/utils.tsx b/frontend/src/utils/utils.tsx
index 961534b5..a057a50e 100644
--- a/frontend/src/utils/utils.tsx
+++ b/frontend/src/utils/utils.tsx
@@ -1,10 +1,12 @@
 import {decode} from "html-entities";
 import htmr from "htmr";
 import {ReactNode} from "react";
+import DOMPurify from "dompurify";
 
 export function parseHtmlDescription(description: string): ReactNode {
   // Decode escaped HTML characters and add text wrap to pre tags in the question description
   let decodedDescription = decode(description)
     .replace(/<pre>/g, "<pre style=\"white-space: pre-wrap;\">");
+  decodedDescription = DOMPurify.sanitize(decodedDescription);
   return htmr(decodedDescription);
 }
\ No newline at end of file

From 8b0c8ac7fe66da18296af324d25983d3b36a464c Mon Sep 17 00:00:00 2001
From: szelongq <72333104+szelongq@users.noreply.github.com>
Date: Tue, 14 Nov 2023 14:22:31 +0800
Subject: [PATCH 3/4] Update Typography to use span instead of p

For holding parsed HTML elements
---
 frontend/src/components/CollabProblemSolverLeft.tsx   | 2 +-
 frontend/src/components/ProblemSolverLeft.tsx         | 2 +-
 frontend/src/components/Questions/EditQuestionTab.tsx | 2 +-
 frontend/src/components/Questions/QuestionsTable.tsx  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/CollabProblemSolverLeft.tsx b/frontend/src/components/CollabProblemSolverLeft.tsx
index 689dda99..befce636 100644
--- a/frontend/src/components/CollabProblemSolverLeft.tsx
+++ b/frontend/src/components/CollabProblemSolverLeft.tsx
@@ -44,7 +44,7 @@ function CollabProblemSolverLeft({
         {question.title}
       </Typography>
       <Divider sx={{ marginBottom: 2, marginTop: 5 }} />
-      <Typography variant="body1" sx={{ marginBottom: 2, fontSize: "18px", overflowX: 'auto' }}>
+      <Typography component={'span'} variant="body1" sx={{ marginBottom: 2, fontSize: "18px", overflowX: 'auto' }}>
         {parseHtmlDescription(question.description)}
       </Typography>
       <Divider sx={{ marginBottom: 10 }} />
diff --git a/frontend/src/components/ProblemSolverLeft.tsx b/frontend/src/components/ProblemSolverLeft.tsx
index fd5859dc..5db45721 100644
--- a/frontend/src/components/ProblemSolverLeft.tsx
+++ b/frontend/src/components/ProblemSolverLeft.tsx
@@ -46,7 +46,7 @@ const ProblemSolverLeft = () => {
         {question.title}
       </Typography>
       <Divider sx={{ marginBottom: 2, marginTop: 5 }} />
-      <Typography variant="body1" sx={{ marginBottom: 2, fontSize: '18px', overflowX: 'auto' }}>
+      <Typography component={'span'} variant="body1" sx={{ marginBottom: 2, fontSize: '18px', overflowX: 'auto' }}>
         {parseHtmlDescription(question.description)}
       </Typography>
       <Divider sx={{ marginBottom: 10 }} />
diff --git a/frontend/src/components/Questions/EditQuestionTab.tsx b/frontend/src/components/Questions/EditQuestionTab.tsx
index 3712e4eb..16b5d863 100644
--- a/frontend/src/components/Questions/EditQuestionTab.tsx
+++ b/frontend/src/components/Questions/EditQuestionTab.tsx
@@ -48,7 +48,7 @@ const EditQuestionTab: React.FC<EditQuestionPreviewProps> = ({question, onEdit,
                         <Typography variant="h5" gutterBottom component="div">
                             {question.title}
                         </Typography>
-                        <Typography variant="body2" gutterBottom component="div">
+                        <Typography variant="body2" gutterBottom component="span">
                             {parseHtmlDescription(question.description)}
                         </Typography>
                         <br />
diff --git a/frontend/src/components/Questions/QuestionsTable.tsx b/frontend/src/components/Questions/QuestionsTable.tsx
index 87a79d6d..b4bc813f 100644
--- a/frontend/src/components/Questions/QuestionsTable.tsx
+++ b/frontend/src/components/Questions/QuestionsTable.tsx
@@ -202,7 +202,7 @@ const InterviewQuestionsTable: React.FC = () => {
               <Typography variant="body2" style={{ padding: "5px" }}>
                 <b>Difficulty:</b> {selectedQuestion.difficulty}
               </Typography>
-              <Typography variant="body2" style={{ padding: "5px" }}>
+              <Typography component={'span'} variant="body2" style={{ padding: "5px" }}>
                 <b>Description</b>: {parseHtmlDescription(selectedQuestion.description)}
               </Typography>
             </DialogContent>

From aec7c7595f9546532feee87c6acf9f2a7fded97c Mon Sep 17 00:00:00 2001
From: szelongq <72333104+szelongq@users.noreply.github.com>
Date: Tue, 14 Nov 2023 14:32:14 +0800
Subject: [PATCH 4/4] Remove unused buttons in Navbar

---
 frontend/src/components/Navbar.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 68ef821d..ae0f0e2f 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -64,8 +64,6 @@ export default function Navbar() {
 
   let settings = [
     { name: "Profile", onclick: () => navigate("/profile", { replace: true }) },
-    { name: "Account", onclick: handleCloseUserMenu },
-    { name: "Dashboard", onclick: handleCloseUserMenu },
     { name: "Logout", onclick: logout },
   ];
   if (user?.role === "master") {