From 66ea305d24b394f402b1c9296a9a7c8cbf2d7fcd Mon Sep 17 00:00:00 2001
From: Pranav Ramesh <laphatize@protonmail.com>
Date: Tue, 5 Mar 2024 23:54:15 -0500
Subject: [PATCH 01/12] [chore] fixed styling issues on edit assignment view

---
 src/pages/challenges/[id].jsx                 | 1802 ++++++++---------
 .../groups/[group]/edit-assignment/[id].jsx   |    4 +-
 2 files changed, 903 insertions(+), 903 deletions(-)

diff --git a/src/pages/challenges/[id].jsx b/src/pages/challenges/[id].jsx
index 426485d3..b553533b 100644
--- a/src/pages/challenges/[id].jsx
+++ b/src/pages/challenges/[id].jsx
@@ -1,1012 +1,1012 @@
-import React, { use } from 'react';
-import { useRouter } from 'next/router';
-import Head from 'next/head';
-import { StandardNav } from '@/components/StandardNav';
-import { useEffect, useState, Fragment } from 'react';
-import { Transition, Dialog } from '@headlessui/react';
-import {
-  XMarkIcon,
-  HeartIcon,
-} from '@heroicons/react/24/outline';
-
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-
-import { getAuth } from 'firebase/auth';
-const auth = getAuth();
-
-import { Footer } from '@/components/Footer';
-import { MarkdownViewer } from '@/components/MarkdownViewer';
-import {
-  CheckCircleIcon,
-  FlagIcon,
-} from '@heroicons/react/20/solid';
-import request from '@/utils/request';
-
-import api from '@/utils/terminal-api';
-
-export default function Challenge() {
-  const router = useRouter();
-  const { id } = router.query;
-
-  const NO_PLACE = 'Not placed';
-
-  const [challenge, setChallenge] = useState({});
-  const [liked, setLiked] = useState(false);
-  const [likeCount, setLikeCount] = useState(0);
-  const [open, setOpen] = useState(false);
-  const [submissionMsg, setSubmissionMsg] = useState(false);
-  const [hintOpen, setHintOpen] = useState(false);
-  const [flag, setFlag] = useState('');
-  const [comment, setComment] = useState('');
-  const [comments, setComments] = useState([]);
-  const [leaderboards, setLeaderboards] = useState([
-    NO_PLACE,
-    NO_PLACE,
-    NO_PLACE,
-  ]);
-
-  const [award, setAward] = useState('');
-  const [terminalUsername, setTerminalUsername] = useState('...');
-  const [terminalPassword, setTerminalPassword] = useState('...');
-
-  const [terminalUrl, setTerminalUrl] = useState('');
-  const [serviceName, setServiceName] = useState('');
-  const [minutesRemaining, setMinutesRemaining] = useState(-1);
-  const [foundTerminal, setFoundTerminal] = useState(false);
-  const [fetchingTerminal, setFetchingTerminal] = useState(false);
-
-  const [difficulty, setDifficulty] = useState('');
-  const [alreadySolved, setAlreadySolved] = useState(false);
-
-  const [progress, setProgress] = useState(0);
-  const [eta, setEta] = useState(15);
-
-  // change eta by one every sec
-  useEffect(() => {
-    let interval;
-
-    if (eta >= 0) {
-      interval = setInterval(() => {
-        setEta((prevEta) => prevEta - 1);
-      }, 1000); // Update every 1 second
-    }
+  import React, { use } from 'react';
+  import { useRouter } from 'next/router';
+  import Head from 'next/head';
+  import { StandardNav } from '@/components/StandardNav';
+  import { useEffect, useState, Fragment } from 'react';
+  import { Transition, Dialog } from '@headlessui/react';
+  import {
+    XMarkIcon,
+    HeartIcon,
+  } from '@heroicons/react/24/outline';
+
+  import { ToastContainer, toast } from 'react-toastify';
+  import 'react-toastify/dist/ReactToastify.css';
+
+  import { getAuth } from 'firebase/auth';
+  const auth = getAuth();
+
+  import { Footer } from '@/components/Footer';
+  import { MarkdownViewer } from '@/components/MarkdownViewer';
+  import {
+    CheckCircleIcon,
+    FlagIcon,
+  } from '@heroicons/react/20/solid';
+  import request from '@/utils/request';
+
+  import api from '@/utils/terminal-api';
+
+  export default function Challenge() {
+    const router = useRouter();
+    const { id } = router.query;
+
+    const NO_PLACE = 'Not placed';
+
+    const [challenge, setChallenge] = useState({});
+    const [liked, setLiked] = useState(false);
+    const [likeCount, setLikeCount] = useState(0);
+    const [open, setOpen] = useState(false);
+    const [submissionMsg, setSubmissionMsg] = useState(false);
+    const [hintOpen, setHintOpen] = useState(false);
+    const [flag, setFlag] = useState('');
+    const [comment, setComment] = useState('');
+    const [comments, setComments] = useState([]);
+    const [leaderboards, setLeaderboards] = useState([
+      NO_PLACE,
+      NO_PLACE,
+      NO_PLACE,
+    ]);
+
+    const [award, setAward] = useState('');
+    const [terminalUsername, setTerminalUsername] = useState('...');
+    const [terminalPassword, setTerminalPassword] = useState('...');
+
+    const [terminalUrl, setTerminalUrl] = useState('');
+    const [serviceName, setServiceName] = useState('');
+    const [minutesRemaining, setMinutesRemaining] = useState(-1);
+    const [foundTerminal, setFoundTerminal] = useState(false);
+    const [fetchingTerminal, setFetchingTerminal] = useState(false);
+
+    const [difficulty, setDifficulty] = useState('');
+    const [alreadySolved, setAlreadySolved] = useState(false);
+
+    const [progress, setProgress] = useState(0);
+    const [eta, setEta] = useState(15);
+
+    // change eta by one every sec
+    useEffect(() => {
+      let interval;
+
+      if (eta >= 0) {
+        interval = setInterval(() => {
+          setEta((prevEta) => prevEta - 1);
+        }, 1000); // Update every 1 second
+      }
 
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
+      return () => {
+        clearInterval(interval);
+      };
+    }, []);
 
-  // console.log(challenge);
+    // console.log(challenge);
 
-  const loadBar = () => {
-    const interval = setInterval(() => {
-      setProgress((prevProgress) => {
-        const newProgress = prevProgress + 100 / (15 * 10);
-        if (newProgress >= 100) {
-          clearInterval(interval);
-          return 100;
-        }
-        return newProgress;
-      });
-    }, 100); // Update every 100ms (15 seconds total for 0 to 100)
+    const loadBar = () => {
+      const interval = setInterval(() => {
+        setProgress((prevProgress) => {
+          const newProgress = prevProgress + 100 / (15 * 10);
+          if (newProgress >= 100) {
+            clearInterval(interval);
+            return 100;
+          }
+          return newProgress;
+        });
+      }, 100); // Update every 100ms (15 seconds total for 0 to 100)
 
-    return () => {
-      clearInterval(interval);
+      return () => {
+        clearInterval(interval);
+      };
     };
-  };
 
-  // Kshitij
-  const [hintMessages, setHintMessages] = useState([]);
-  const [hideHintButton, setHideHintButton] = useState(false);
+    // Kshitij
+    const [hintMessages, setHintMessages] = useState([]);
+    const [hideHintButton, setHideHintButton] = useState(false);
 
-  const [userData, setUserData] = useState({
-    points: 0,
-    susername: 'Loading...',
-    spassword: 'Loading...',
-  });
+    const [userData, setUserData] = useState({
+      points: 0,
+      susername: 'Loading...',
+      spassword: 'Loading...',
+    });
 
-  const getTerminalStatus = async (id) => {
-    setFetchingTerminal(true);
-    if(!foundTerminal) {
-      const isActive = await api.getStatus(id);
-      if(isActive) {
+    const getTerminalStatus = async (id) => {
+      setFetchingTerminal(true);
+      if (!foundTerminal) {
+        const isActive = await api.getStatus(id);
+        if (isActive) {
 
-        setFoundTerminal(true);
-        setFetchingTerminal(false);
+          setFoundTerminal(true);
+          setFetchingTerminal(false);
 
-        setTimeout(() => {
-          document.getElementById('termurl').classList.remove('absolute');
-          document.getElementById('termurl').classList.remove('opacity-0');
-          document.getElementById('terminalLoader').classList.add('hidden');
-        }, 3000);
+          setTimeout(() => {
+            document.getElementById('termurl').classList.remove('absolute');
+            document.getElementById('termurl').classList.remove('opacity-0');
+            document.getElementById('terminalLoader').classList.add('hidden');
+          }, 3000);
 
+        } else {
+          setTimeout(async () => {
+            await getTerminalStatus(id);
+          }, 3000);
+        }
+      }
+    };
+
+
+    const fetchTerminal = async () => {
+      if (!challenge) return;
+      loadBar();
+      const token = auth.currentUser.accessToken;
+      setFetchingTerminal(true);
+      const data = await api.checkUserTerminal(token, challenge.id);
+      if (data !== null) {
+        setPassword(data.password);
+        setServiceName(data.serviceName);
+        setTerminalUrl(data.url);
+        setUserName(data.userName);
+        setMinutesRemaining(data.minutesRemaining);
+        console.log('Terminal data ID:', data.id);
+        console.log('Terminal url:', data.url);
+        await getTerminalStatus(data.id);
       } else {
-        setTimeout(async () => {
-          await getTerminalStatus(id);
-        }, 3000);
+        await createTerminal();
       }
-    }
-  };
-
-
-  const fetchTerminal = async () => {
-    if(!challenge) return;
-    loadBar();
-    const token = auth.currentUser.accessToken;
-    setFetchingTerminal(true);
-    const data = await api.checkUserTerminal(token, challenge.id);
-    if(data !== null) {
-      setPassword(data.password);
-      setServiceName(data.serviceName);
-      setTerminalUrl(data.url);
-      setUserName(data.userName);
-      setMinutesRemaining(data.minutesRemaining);
-      console.log('Terminal data ID:', data.id);
-      console.log('Terminal url:', data.url);
-      await getTerminalStatus(data.id);
-    } else {
-      await createTerminal();
-    }
-  };
-
-  const createTerminal = async () => {
-    if(!challenge) return;
-    setFetchingTerminal(true);
-    const token = auth.currentUser.accessToken;
-    const data = await api.buildTerminal(challenge, token);
-    if(data) {
-      setPassword(data.password);
-      setServiceName(data.serviceName);
-      setTerminalUrl(data.url);
-      setUserName(data.userName);
-      setMinutesRemaining(data.minutesRemaining);
-      await getTerminalStatus(data.id);
-    } else {
-      toast.error("Unable to create the terminal, please refresh the page and try again");
-      setFetchingTerminal(false);
-    }
-  };
-
-  const getChallengeData = async () => {
-    const endPoint = process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id;
-    const result = await request(endPoint, 'GET', null);
-    const { difficulty } = result.body;
-    setChallenge(result.body);
-    setDifficulty(difficulty);
-  };
-
-  const fetchLikeUrl = async () => {
-    try {
-      const userLikesUrl = localStorage.getItem('userLikesUrl');
-      const requestOptions = {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include'
-      };
-      const response = await fetch(userLikesUrl, requestOptions);
-      const result = await response.json();
-      const likes = result.filter((item) => {
-        return item.challenge.slug === slug;
-      });
-    } catch (err) {
-      console.log(err);
-    }
-  };
-
-  useEffect(() => {
-    if (id) {
-      fetchLeaderboard();
-      //fetchComments();
-      if (challenge.upvotes) {
-        setLikeCount(challenge.upvotes);
-       }
-       fetchLikeUrl();
-      getChallengeData();
-    }
-    const award = localStorage.getItem('award');
-    if (award) {
-      setAward(award);
-    }
-  }, [id]);
-
-  const fetchSolvedUsers = async () => {
-    try {
-      const endPoint =
-        process.env.NEXT_PUBLIC_API_URL +
-        '/challenges/' +
-        id +
-        '/completed-users';
-      const requestOptions = {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include'
-      };
-      const response = await fetch(endPoint, requestOptions);
-      const result = await response.json();
+    };
+
+    const createTerminal = async () => {
+      if (!challenge) return;
+      setFetchingTerminal(true);
+      const token = auth.currentUser.accessToken;
+      const data = await api.buildTerminal(challenge, token);
+      if (data) {
+        setPassword(data.password);
+        setServiceName(data.serviceName);
+        setTerminalUrl(data.url);
+        setUserName(data.userName);
+        setMinutesRemaining(data.minutesRemaining);
+        await getTerminalStatus(data.id);
+      } else {
+        toast.error("Unable to create the terminal, please refresh the page and try again");
+        setFetchingTerminal(false);
+      }
+    };
+
+    const getChallengeData = async () => {
+      const endPoint = process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id;
+      const result = await request(endPoint, 'GET', null);
+      const { difficulty } = result.body;
+      setChallenge(result.body);
+      setDifficulty(difficulty);
+    };
 
-      if (result != null) {
-        const user = result.users.filter((user) => {
-          return user.username === localStorage.getItem('username');
+    const fetchLikeUrl = async () => {
+      try {
+        const userLikesUrl = localStorage.getItem('userLikesUrl');
+        const requestOptions = {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include'
+        };
+        const response = await fetch(userLikesUrl, requestOptions);
+        const result = await response.json();
+        const likes = result.filter((item) => {
+          return item.challenge.slug === slug;
         });
+      } catch (err) {
+        console.log(err);
+      }
+    };
 
-        if (user.length) {
-          setAlreadySolved(true);
-          console.log('Already solved');
+    useEffect(() => {
+      if (id) {
+        fetchLeaderboard();
+        //fetchComments();
+        if (challenge.upvotes) {
+          setLikeCount(challenge.upvotes);
         }
+        fetchLikeUrl();
+        getChallengeData();
       }
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const submitFlag = async () => {
-    const slug = challenge.slug;
-    // console.log(flag.length);
-
-    if (!flag) {
-      document
-        .getElementById('enteredFlag')
-        .classList.remove('border-gray-700');
-      document.getElementById('enteredFlag').classList.add('border-red-600');
-      document.getElementById('enterFlagBTN').innerHTML = 'Submit Flag';
+      const award = localStorage.getItem('award');
+      if (award) {
+        setAward(award);
+      }
+    }, [id]);
 
-      setTimeout(function () {
-        document
-          .getElementById('enteredFlag')
-          .classList.remove('border-red-600');
-      }, 2000);
-    } else {
+    const fetchSolvedUsers = async () => {
       try {
         const endPoint =
           process.env.NEXT_PUBLIC_API_URL +
           '/challenges/' +
           id +
-          '/submissions';
+          '/completed-users';
         const requestOptions = {
-          method: 'POST',
+          method: 'GET',
           headers: {
             'Content-Type': 'application/json',
           },
-          credentials: 'include',
-          body: JSON.stringify({
-            keyword: flag,
-          }),
+          credentials: 'include'
         };
         const response = await fetch(endPoint, requestOptions);
-        console.log(await response.json());
-        const { success, incorrect, error } = await response.json();
+        const result = await response.json();
 
+        if (result != null) {
+          const user = result.users.filter((user) => {
+            return user.username === localStorage.getItem('username');
+          });
 
-        if (error) {
-          document.getElementById('enterFlagBTN').innerHTML = 'Submit Flag';
-          setSubmissionMsg('error');
-          setOpen(true);
-        } else if (success) {
-          document
-            .getElementById('enteredFlag')
-            .classList.add('border-green-600');
-          document.getElementById('enterFlagBTN').innerHTML = 'Submit Flag';
-          setSubmissionMsg('success');
-          setOpen(true);
-
-          if (!alreadySolved) {
-            try {
-              const endPoint =
-                process.env.NEXT_PUBLIC_API_URL +
-                '/users/' +
-                localStorage.getItem('username') +
-                '/complete-challenge/' +
-                id +
-                '/' +
-                difficulty;
-              const response = await request(endPoint, "POST", {keyword: flag});
-            } catch (err) {
-              console.log(err);
-            }
+          if (user.length) {
+            setAlreadySolved(true);
+            console.log('Already solved');
           }
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    };
 
-          setTimeout(function () {
-            document
-              .getElementById('enteredFlag')
-              .classList.remove('border-green-600');
-          }, 2000);
-        } else {
+    const submitFlag = async () => {
+      const slug = challenge.slug;
+      // console.log(flag.length);
+
+      if (!flag) {
+        document
+          .getElementById('enteredFlag')
+          .classList.remove('border-gray-700');
+        document.getElementById('enteredFlag').classList.add('border-red-600');
+        document.getElementById('enterFlagBTN').innerHTML = 'Submit Flag';
+
+        setTimeout(function () {
           document
             .getElementById('enteredFlag')
-            .classList.add('border-red-600');
-          document.getElementById('enterFlagBTN').innerHTML = 'Submit Flag';
-          setSubmissionMsg('incorrect');
-          setOpen(true);
+            .classList.remove('border-red-600');
+        }, 2000);
+      } else {
+        try {
+          const endPoint =
+            process.env.NEXT_PUBLIC_API_URL +
+            '/challenges/' +
+            id +
+            '/submissions';
+          const requestOptions = {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            credentials: 'include',
+            body: JSON.stringify({
+              keyword: flag,
+            }),
+          };
+          const response = await fetch(endPoint, requestOptions);
+          console.log(await response.json());
+          const { success, incorrect, error } = await response.json();
+
+
+          if (error) {
+            document.getElementById('enterFlagBTN').innerHTML = 'Submit Flag';
+            setSubmissionMsg('error');
+            setOpen(true);
+          } else if (success) {
+            document
+              .getElementById('enteredFlag')
+              .classList.add('border-green-600');
+            document.getElementById('enterFlagBTN').innerHTML = 'Submit Flag';
+            setSubmissionMsg('success');
+            setOpen(true);
+
+            if (!alreadySolved) {
+              try {
+                const endPoint =
+                  process.env.NEXT_PUBLIC_API_URL +
+                  '/users/' +
+                  localStorage.getItem('username') +
+                  '/complete-challenge/' +
+                  id +
+                  '/' +
+                  difficulty;
+                const response = await request(endPoint, "POST", { keyword: flag });
+              } catch (err) {
+                console.log(err);
+              }
+            }
 
-          setTimeout(function () {
+            setTimeout(function () {
+              document
+                .getElementById('enteredFlag')
+                .classList.remove('border-green-600');
+            }, 2000);
+          } else {
             document
               .getElementById('enteredFlag')
-              .classList.remove('border-red-600');
-          }, 2000);
+              .classList.add('border-red-600');
+            document.getElementById('enterFlagBTN').innerHTML = 'Submit Flag';
+            setSubmissionMsg('incorrect');
+            setOpen(true);
+
+            setTimeout(function () {
+              document
+                .getElementById('enteredFlag')
+                .classList.remove('border-red-600');
+            }, 2000);
+          }
+        } catch (err) {
+          console.log(err);
         }
-      } catch (err) {
-        console.log(err);
       }
-    }
-  };
-
-  const fetchComments = async () => {
-    try {
-      const url = process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id + '/comments';
-      const { result } = await request(url, 'GET', null);
-      if (result && result.length) {
-        setComments([...result]);
+    };
+
+    const fetchComments = async () => {
+      try {
+        const url = process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id + '/comments';
+        const { result } = await request(url, 'GET', null);
+        if (result && result.length) {
+          setComments([...result]);
+        }
+      } catch (error) {
+        console.log(error);
       }
-    } catch (error) {
-      console.log(error);
-    }
-  };
+    };
 
-  // Kshitij
-  async function fetchHints() {
-    try {
-      const endPoint = process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id + '/hint';
-      const result = await request(endPoint, 'GET', null);
-      updateHintMessage(result.hintMessage, result.order);
-    } catch (error) {
-      console.log(error);
+    // Kshitij
+    async function fetchHints() {
+      try {
+        const endPoint = process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id + '/hint';
+        const result = await request(endPoint, 'GET', null);
+        updateHintMessage(result.hintMessage, result.order);
+      } catch (error) {
+        console.log(error);
+      }
     }
-  }
 
-  // Kshitij
-  const updateHintMessage = (message, id) => {
-    setHintMessages((prevHints) => {
-      const newHints = [...prevHints];
-      newHints[id] = message;
-      if (newHints.length === 3) {
+    // Kshitij
+    const updateHintMessage = (message, id) => {
+      setHintMessages((prevHints) => {
+        const newHints = [...prevHints];
+        newHints[id] = message;
+        if (newHints.length === 3) {
+          setHideHintButton(true);
+        }
+        return newHints;
+      });
+    };
+
+    // Kshitij
+    const handleButtonClick = () => {
+      if (hintMessages.length < 3) {
+        fetchHints();
+      }
+      if (hintMessages.length === 3) {
         setHideHintButton(true);
       }
-      return newHints;
-    });
-  };
-
-  // Kshitij
-  const handleButtonClick = () => {
-    if (hintMessages.length < 3) {
-      fetchHints();
-    }
-    if (hintMessages.length === 3) {
-      setHideHintButton(true);
-    }
-  };
+    };
 
-  const onCommentReport = async () => {
-    alert(
-      'Thank you for reporting this comment. Our moderation team will look into this.'
-    );
-    // Call comment report API
-  };
+    const onCommentReport = async () => {
+      alert(
+        'Thank you for reporting this comment. Our moderation team will look into this.'
+      );
+      // Call comment report API
+    };
 
-  const fetchLeaderboard = async () => {
-    try {
-      const url = process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id + '/leaderboard';
-      const leaderboards = await request(url, 'GET', null);
-      const NO_PLACE = 'Not placed';
+    const fetchLeaderboard = async () => {
+      try {
+        const url = process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id + '/leaderboard';
+        const leaderboards = await request(url, 'GET', null);
+        const NO_PLACE = 'Not placed';
 
-      if (!leaderboards.length) return;
+        if (!leaderboards.length) return;
 
-      const user1 = leaderboards.filter((leaderboard) => {
-        return leaderboard.id == 5;
-      });
-      const user2 = leaderboards.filter((leaderboard) => {
-        return leaderboard.id == 4;
-      });
-      const user3 = leaderboards.filter((leaderboard) => {
-        return leaderboard.id == 3;
-      });
+        const user1 = leaderboards.filter((leaderboard) => {
+          return leaderboard.id == 5;
+        });
+        const user2 = leaderboards.filter((leaderboard) => {
+          return leaderboard.id == 4;
+        });
+        const user3 = leaderboards.filter((leaderboard) => {
+          return leaderboard.id == 3;
+        });
 
-      setLeaderboards([
-        user1.length ? user1[0].username : NO_PLACE,
-        user2.length ? user2[0].username : NO_PLACE,
-        user3.length ? user3[0].username : NO_PLACE,
-      ]);
-    } catch (error) {
-      console.log(error);
-    }
-  };
+        setLeaderboards([
+          user1.length ? user1[0].username : NO_PLACE,
+          user2.length ? user2[0].username : NO_PLACE,
+          user3.length ? user3[0].username : NO_PLACE,
+        ]);
+      } catch (error) {
+        console.log(error);
+      }
+    };
 
-  const submitComment = async () => {
-    const endPoint = process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id + '/comments';
-    const result = await request(endPoint, 'POST', {content: comment});
+    const submitComment = async () => {
+      const endPoint = process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id + '/comments';
+      const result = await request(endPoint, 'POST', { content: comment });
 
-    setComments([result, ...comments]);
+      setComments([result, ...comments]);
 
-    if (result.error) {
-      console.log('Error occured while adding the comment');
-    }
-  };
-  const commentChange = (event) => {
-    setComment(event.target.value);
-  };
-  const flagChanged = (event) => {
-    setFlag(event.target.value);
-  };
-  const likeChallenge = async () => {
-    console.log(liked);
-    if (!liked) {
-      const endPoint =
-        process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id + '/like';
-      const { error }= await request(endPoint, 'POST', {});
-      if (error) {
-        alert(error);
-      } else {
-        setLikeCount(likeCount + 1);
-        setLiked(true);
+      if (result.error) {
+        console.log('Error occured while adding the comment');
       }
-    } else {
-      const endPoint = process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id + '/deletelike';
-      const { error } = await request(endPoint, "POST", {});
-      if (error) {
-        alert(error);
+    };
+    const commentChange = (event) => {
+      setComment(event.target.value);
+    };
+    const flagChanged = (event) => {
+      setFlag(event.target.value);
+    };
+    const likeChallenge = async () => {
+      console.log(liked);
+      if (!liked) {
+        const endPoint =
+          process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id + '/like';
+        const { error } = await request(endPoint, 'POST', {});
+        if (error) {
+          alert(error);
+        } else {
+          setLikeCount(likeCount + 1);
+          setLiked(true);
+        }
       } else {
-        setLikeCount(likeCount - 1);
-        setLiked(false);
+        const endPoint = process.env.NEXT_PUBLIC_API_URL + '/challenges/' + id + '/deletelike';
+        const { error } = await request(endPoint, "POST", {});
+        if (error) {
+          alert(error);
+        } else {
+          setLikeCount(likeCount - 1);
+          setLiked(false);
+        }
       }
-    }
-  };
-
-  return (
-    <>
-      <Head>
-        <title>{challenge ? challenge.title : ''} - CTFGuide</title>
-        <style>
-          @import
-          url(&apos;https://fonts.googleapis.com/css2?family=Poppins&display=swap&apos;);
-        </style>
-      </Head>
-      <main>
-        <div
-          id="reportalert"
-          className="center fixed bottom-6 right-6 flex hidden rounded-md bg-[#7cd313] bg-blue-900 p-2 text-white"
-        >
-          <CheckCircleIcon className="mr-2 h-6 w-6"> </CheckCircleIcon>We'll
-          investigate this challenge and take appropriate action.
-        </div>
-        <StandardNav />
-        <div
-          className=" w-full py-10 "
-          style={{
-            backgroundSize: 'cover',
-            backgroundImage:
-              'url("https://images.unsplash.com/photo-1633259584604-afdc243122ea?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80")',
-          }}
-        >
-          <div className="mx-auto my-auto flex  text-center">
-            <h1 className="mx-auto my-auto text-4xl font-semibold text-white">
-              {' '}
-              {challenge.title}{' '}
-            </h1>
-          </div>
-          <div className="mx-auto my-auto  text-center text-lg text-white">
-            <div className="my-auto flex place-items-center justify-center">
-              <p className="my-auto mr-2 text-sm">Created by</p>
-              <img
-                className="my-auto my-auto mr-2 h-6   w-6  rounded-full bg-neutral-900"
-                src={
-                  `https://robohash.org/` +
-                  challenge.creator +
-                  `.png?set=set1&size=150x150`
-                }
-                alt=""
-              />
-              <p className="my-auto text-sm">{challenge.creator}</p>
-            </div>
-          </div>
-        </div>
-
-        <div className="mx-auto mt-6 max-w-6xl text-left">
-          <div className="mb-2 flex place-items-center justify-between">
-            <div>
-              <h1 className="inline-block text-2xl font-semibold text-white">
-                {' '}
-                Challenge Description{' '}
-              </h1>
-            </div>
+    };
 
-            <div className="flex">
-              <button
-                onClick={likeChallenge}
-                className="card-body m-1 flex rounded-md bg-neutral-800 px-10 py-2 hover:bg-neutral-700"
-              >
-                <h1 className=" mr-4 bg-gradient-to-br from-orange-400 to-yellow-400 bg-clip-text text-xl font-semibold text-transparent">
-                  <HeartIcon className="h-8 w-8 text-red-500" />
-                </h1>
-                <p className=" text-2xl text-white">{likeCount}</p>
-              </button>
-              <button
-                onClick={() => {
-                  document
-                    .getElementById('reportalert')
-                    .classList.remove('hidden');
-                  setTimeout(function () {
-                    document
-                      .getElementById('reportalert')
-                      .classList.add('hidden');
-                  }, 15000);
-                }}
-                className="card-body m-1 flex hidden rounded-md bg-neutral-800 px-10 py-2 hover:bg-neutral-700"
-              >
-                <h1 className=" flex bg-gradient-to-br from-orange-400 to-yellow-400 bg-clip-text text-2xl font-semibold text-transparent">
-                  <FlagIcon className="mr-2 h-8 w-8 text-yellow-600" />{' '}
-                  <p className="text-lg font-normal text-white">
-                    Report Challenge
-                  </p>
-                </h1>
-              </button>
-              <button className="card-body m-1 hidden rounded-md bg-neutral-800 px-4 py-1 hover:bg-neutral-700">
-                <h1 className="bg-gradient-to-br from-orange-400 to-yellow-400 bg-clip-text text-sm font-semibold text-transparent">
-                  View Submissions
-                </h1>
-                <p className="text-sm text-white">Coming Soon</p>
-              </button>
-            </div>
+    return (
+      <>
+        <Head>
+          <title>{challenge ? challenge.title : ''} - CTFGuide</title>
+          <style>
+            @import
+            url(&apos;https://fonts.googleapis.com/css2?family=Poppins&display=swap&apos;);
+          </style>
+        </Head>
+        <main>
+          <div
+            id="reportalert"
+            className="center fixed bottom-6 right-6 flex hidden rounded-md bg-[#7cd313] bg-blue-900 p-2 text-white"
+          >
+            <CheckCircleIcon className="mr-2 h-6 w-6"> </CheckCircleIcon>We'll
+            investigate this challenge and take appropriate action.
           </div>
-          {/* ***************************************** */}
-
+          <StandardNav />
           <div
-            id="challengeDetails"
-            
-            className="w-full text-white whitespace-pre-wrap  border-blue-700 bg-neutral-800/50 px-4 py-2 text-lg text-white"
+            className=" w-full py-10 "
+            style={{
+              backgroundSize: 'cover',
+              backgroundImage:
+                'url("https://images.unsplash.com/photo-1633259584604-afdc243122ea?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80")',
+            }}
           >
-            <div>
-              <MarkdownViewer content={challenge.content} />
+            <div className="mx-auto my-auto flex  text-center">
+              <h1 className="mx-auto my-auto text-4xl font-semibold text-white">
+                {' '}
+                {challenge.title}{' '}
+              </h1>
             </div>
-          </div>
-          <div className="flex ">
-            <div className="mt-4 rounded-lg">
-              <div className="flex    rounded-lg   rounded-lg text-sm">
-                <div style={{ color: '#8c8c8c' }} className="mb-4">
-                  <input
-                    id="enteredFlag"
-                    onChange={flagChanged}
-                    style={{ backgroundColor: '#212121' }}
-                    placeholder="Flag Here"
-                    className="focus-outline-none mx-auto  mr-2  rounded-lg border border-neutral-700 bg-black px-4 py-1 text-white outline-none"
-                  ></input>
-                  <button
-                    id="enterFlagBTN"
-                    onClick={submitFlag}
-                    className="  rounded-lg   bg-green-700  px-4 py-1 text-green-300 hover:bg-green-900"
-                  >
-                    Submit Flag
-                  </button>
-                  <button
-                    //hidden={!hintMessages}
-                    onClick={() => setHintOpen(true)}
-                    className="hidden ml-2  mt-4  rounded-lg  bg-black bg-yellow-700 px-4 py-1 text-white text-yellow-300 hover:bg-yellow-900"
-                  >
-                    Stuck?
-                  </button>
-                </div>
+            <div className="mx-auto my-auto  text-center text-lg text-white">
+              <div className="my-auto flex place-items-center justify-center">
+                <p className="my-auto mr-2 text-sm">Created by</p>
+                <img
+                  className="my-auto my-auto mr-2 h-6   w-6  rounded-full bg-neutral-900"
+                  src={
+                    `https://robohash.org/` +
+                    challenge.creator +
+                    `.png?set=set1&size=150x150`
+                  }
+                  alt=""
+                />
+                <p className="my-auto text-sm">{challenge.creator}</p>
               </div>
             </div>
           </div>
 
-          <div className='bg-neutral-800 px-2 py-4 mt-10 mb-10'>
-                  <h1 className='text-white text-center'>Public terminals are temporarily unavaliable. Some challenges that require pre-configured enviroments may not be solvable.</h1>
-          </div>
-          <div className="mt-6 grid hidden gap-10 sm:grid-cols-1 lg:grid-cols-3">
-            <div
-              style={{ backgroundColor: '#212121' }}
-              className="card mx-auto w-full rounded-lg py-3 text-center shadow-lg"
-            >
-              <div className="card-body">
-                <h1 className="bg-gradient-to-br from-orange-400 to-yellow-400 bg-clip-text text-2xl  font-semibold text-transparent">
-                  #1
+          <div className="mx-auto mt-6 max-w-6xl text-left">
+            <div className="mb-2 flex place-items-center justify-between">
+              <div>
+                <h1 className="inline-block text-2xl font-semibold text-white">
+                  {' '}
+                  Challenge Description{' '}
                 </h1>
-                <p className="text-lg text-white">{leaderboards[0]}</p>
               </div>
-            </div>
 
-            <div
-              style={{ backgroundColor: '#212121' }}
-              className="card mx-auto w-full rounded-lg py-3 text-center shadow-lg"
-            >
-              <div className="card-body">
-                <h1 className="bg-gradient-to-br from-blue-400 to-indigo-500 bg-clip-text text-2xl font-semibold text-transparent text-white ">
-                  #2
-                </h1>
-                <p className="text-lg text-white">{leaderboards[1]}</p>
+              <div className="flex">
+                <button
+                  onClick={likeChallenge}
+                  className="card-body m-1 flex rounded-md bg-neutral-800 px-10 py-2 hover:bg-neutral-700"
+                >
+                  <h1 className=" mr-4 bg-gradient-to-br from-orange-400 to-yellow-400 bg-clip-text text-xl font-semibold text-transparent">
+                    <HeartIcon className="h-8 w-8 text-red-500" />
+                  </h1>
+                  <p className=" text-2xl text-white">{likeCount}</p>
+                </button>
+                <button
+                  onClick={() => {
+                    document
+                      .getElementById('reportalert')
+                      .classList.remove('hidden');
+                    setTimeout(function () {
+                      document
+                        .getElementById('reportalert')
+                        .classList.add('hidden');
+                    }, 15000);
+                  }}
+                  className="card-body m-1 flex hidden rounded-md bg-neutral-800 px-10 py-2 hover:bg-neutral-700"
+                >
+                  <h1 className=" flex bg-gradient-to-br from-orange-400 to-yellow-400 bg-clip-text text-2xl font-semibold text-transparent">
+                    <FlagIcon className="mr-2 h-8 w-8 text-yellow-600" />{' '}
+                    <p className="text-lg font-normal text-white">
+                      Report Challenge
+                    </p>
+                  </h1>
+                </button>
+                <button className="card-body m-1 hidden rounded-md bg-neutral-800 px-4 py-1 hover:bg-neutral-700">
+                  <h1 className="bg-gradient-to-br from-orange-400 to-yellow-400 bg-clip-text text-sm font-semibold text-transparent">
+                    View Submissions
+                  </h1>
+                  <p className="text-sm text-white">Coming Soon</p>
+                </button>
               </div>
             </div>
+            {/* ***************************************** */}
 
             <div
-              style={{ backgroundColor: '#212121' }}
-              className="card mx-auto w-full rounded-lg py-3 text-center shadow-lg"
+              id="challengeDetails"
+
+              className="w-full text-white whitespace-pre-wrap  border-blue-700 bg-neutral-800/50 px-4 py-2 text-lg text-white"
             >
-              <div className="card-body">
-                <h1 className="bg-gradient-to-br from-blue-400 to-green-500 bg-clip-text text-2xl font-semibold text-transparent text-white">
-                  #3
-                </h1>
-                <p className="text-lg text-white">{leaderboards[2]}</p>
+              <div>
+                <MarkdownViewer content={challenge.content} />
               </div>
             </div>
-          </div>
-          <div id="terminal" className="hidden mx-auto mt-6 max-w-6xl">
-            <div className="hint mb-2 text-gray-400">
-              <span className="font-semibold text-white   ">
-                {' '}
-                <span className="text-blue-500"></span>
-              </span>{' '}
-              Login as{' '}
-              <span className="text-yellow-400">{terminalUsername}</span> using
-              the password{' '}
-              <span className="text-yellow-400">{terminalPassword}</span>
-              <div className="float-right ml-auto flex  cursor-pointer">
-                <span
-                  style={{ cursor: 'pointer' }}
-                  className=" text-gray-300 hover:bg-black"
-                >
-                  Container will stop in: <span id="timer"></span>
-                </span>
-
-                <span
-                  onClick={() => {
-                    window.location.reload();
-                  }}
-                  className="ml-2 hidden text-red-500"
-                >
-                  If you see a 404, click here.
-                </span>
+            <div className="flex ">
+              <div className="mt-4 rounded-lg">
+                <div className="flex    rounded-lg   rounded-lg text-sm">
+                  <div style={{ color: '#8c8c8c' }} className="mb-4">
+                    <input
+                      id="enteredFlag"
+                      onChange={flagChanged}
+                      style={{ backgroundColor: '#212121' }}
+                      placeholder="Flag Here"
+                      className="focus-outline-none mx-auto  mr-2  rounded-lg border border-neutral-700 bg-black px-4 py-1 text-white outline-none"
+                    ></input>
+                    <button
+                      id="enterFlagBTN"
+                      onClick={submitFlag}
+                      className="  rounded-lg   bg-green-700  px-4 py-1 text-green-300 hover:bg-green-900"
+                    >
+                      Submit Flag
+                    </button>
+                    <button
+                      //hidden={!hintMessages}
+                      onClick={() => setHintOpen(true)}
+                      className="hidden ml-2  mt-4  rounded-lg  bg-black bg-yellow-700 px-4 py-1 text-white text-yellow-300 hover:bg-yellow-900"
+                    >
+                      Stuck?
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
 
-            <div
-              className="h-500 mx-auto w-full bg-black py-10 text-center text-white"
-              height="500"
-              id="terminalLoader"
-            >
-              <span className="inline-block text-2xl font-semibold text-white">
-                {Math.round(progress)}%
-              </span>
-              <h1 className="text-center text-xl">{!fetchingTerminal ? "Launch Terminal" : "Launching Terminal"}</h1>
-              <div className="relative mx-auto max-w-xl ">
-                <div className="flex  items-center justify-between">
-                  <span className="inline-block rounded-full px-2 py-1 text-xs font-semibold uppercase text-blue-800 "></span>
+            <div className='bg-neutral-800 px-2 py-4 mt-10 mb-10'>
+              <h1 className='text-white text-center'>Public terminals are temporarily unavaliable. Some challenges that require pre-configured enviroments may not be solvable.</h1>
+            </div>
+            <div className="mt-6 grid hidden gap-10 sm:grid-cols-1 lg:grid-cols-3">
+              <div
+                style={{ backgroundColor: '#212121' }}
+                className="card mx-auto w-full rounded-lg py-3 text-center shadow-lg"
+              >
+                <div className="card-body">
+                  <h1 className="bg-gradient-to-br from-orange-400 to-yellow-400 bg-clip-text text-2xl  font-semibold text-transparent">
+                    #1
+                  </h1>
+                  <p className="text-lg text-white">{leaderboards[0]}</p>
                 </div>
-                <div className="mb-4 flex h-2 overflow-hidden rounded bg-blue-600 text-xs">
-                  <div
-                    style={{ width: `${progress}%` }}
-                    className="flex flex-col justify-center whitespace-nowrap bg-blue-900 text-center text-white shadow-none"
-                  ></div>
+              </div>
+
+              <div
+                style={{ backgroundColor: '#212121' }}
+                className="card mx-auto w-full rounded-lg py-3 text-center shadow-lg"
+              >
+                <div className="card-body">
+                  <h1 className="bg-gradient-to-br from-blue-400 to-indigo-500 bg-clip-text text-2xl font-semibold text-transparent text-white ">
+                    #2
+                  </h1>
+                  <p className="text-lg text-white">{leaderboards[1]}</p>
                 </div>
+              </div>
 
-                <span className="inline-block hidden text-sm italic text-white">
-                  Expected Time: {eta} seconds
-                </span>
+              <div
+                style={{ backgroundColor: '#212121' }}
+                className="card mx-auto w-full rounded-lg py-3 text-center shadow-lg"
+              >
+                <div className="card-body">
+                  <h1 className="bg-gradient-to-br from-blue-400 to-green-500 bg-clip-text text-2xl font-semibold text-transparent text-white">
+                    #3
+                  </h1>
+                  <p className="text-lg text-white">{leaderboards[2]}</p>
+                </div>
               </div>
-              <img
-                className="mx-auto text-center"
-                width="50"
-                src="https://ctfguide.com/darkLogo.png"
-              ></img>
             </div>
+            <div id="terminal" className="hidden mx-auto mt-6 max-w-6xl">
+              <div className="hint mb-2 text-gray-400">
+                <span className="font-semibold text-white   ">
+                  {' '}
+                  <span className="text-blue-500"></span>
+                </span>{' '}
+                Login as{' '}
+                <span className="text-yellow-400">{terminalUsername}</span> using
+                the password{' '}
+                <span className="text-yellow-400">{terminalPassword}</span>
+                <div className="float-right ml-auto flex  cursor-pointer">
+                  <span
+                    style={{ cursor: 'pointer' }}
+                    className=" text-gray-300 hover:bg-black"
+                  >
+                    Container will stop in: <span id="timer"></span>
+                  </span>
+
+                  <span
+                    onClick={() => {
+                      window.location.reload();
+                    }}
+                    className="ml-2 hidden text-red-500"
+                  >
+                    If you see a 404, click here.
+                  </span>
+                </div>
+              </div>
 
-            {foundTerminal ? (
-              <embed
-                onError={() => window.location.reload()}
-                className="absolute w-full bg-white opacity-0"
+              <div
+                className="h-500 mx-auto w-full bg-black py-10 text-center text-white"
                 height="500"
-                id="termurl"
-                src={foundTerminal ? terminalUrl : ''}
-              ></embed>
-            ) : (
-              <></>
-            )}
-
-            <br></br>
-            {challenge && !fetchingTerminal && !foundTerminal &&
-              <div className=" mx-auto text-center ">
-                <span
-                  className="cursor-pointer rounded-lg bg-green-800 px-2 py-1 text-white hover:bg-green-700"
-                  disabled={fetchingTerminal}
-                  onClick={fetchTerminal}
-                >
-                  Launch Terminal
+                id="terminalLoader"
+              >
+                <span className="inline-block text-2xl font-semibold text-white">
+                  {Math.round(progress)}%
                 </span>
+                <h1 className="text-center text-xl">{!fetchingTerminal ? "Launch Terminal" : "Launching Terminal"}</h1>
+                <div className="relative mx-auto max-w-xl ">
+                  <div className="flex  items-center justify-between">
+                    <span className="inline-block rounded-full px-2 py-1 text-xs font-semibold uppercase text-blue-800 "></span>
+                  </div>
+                  <div className="mb-4 flex h-2 overflow-hidden rounded bg-blue-600 text-xs">
+                    <div
+                      style={{ width: `${progress}%` }}
+                      className="flex flex-col justify-center whitespace-nowrap bg-blue-900 text-center text-white shadow-none"
+                    ></div>
+                  </div>
+
+                  <span className="inline-block hidden text-sm italic text-white">
+                    Expected Time: {eta} seconds
+                  </span>
+                </div>
+                <img
+                  className="mx-auto text-center"
+                  width="50"
+                  src="https://ctfguide.com/darkLogo.png"
+                ></img>
               </div>
-            }
-          </div>
-          <div className="mt-10  rounded-lg  pb-20">
-            <h1 className="text-2xl font-semibold text-white">Comments</h1>
-            <textarea
-              id="comment"
-              onChange={commentChange}
-              style={{ backgroundColor: '#212121' }}
-              className="focus-outline-none mt-4 block w-full rounded-lg border-none bg-black text-white outline-none"
-            ></textarea>
-
-            <button
-              onClick={submitComment}
-              id="commentButton"
-              style={{ backgroundColor: '#212121' }}
-              className="mt-4 rounded-lg border border-gray-700 bg-black px-4 py-1 text-white hover:bg-gray-900"
-            >
-              Post Comment
-            </button>
-            <h1
-              id="commentError"
-              className="mt-4 hidden px-2 py-1 text-xl text-red-400"
-            >
-              Error posting comment! This could be because it was less than 5
-              characters or greater than 250 characters.{' '}
-            </h1>
-            {comments.map((message, index) => (
-              <div
-                key={index}
-                className="mt-4 rounded-lg bg-black  "
+
+              {foundTerminal ? (
+                <embed
+                  onError={() => window.location.reload()}
+                  className="absolute w-full bg-white opacity-0"
+                  height="500"
+                  id="termurl"
+                  src={foundTerminal ? terminalUrl : ''}
+                ></embed>
+              ) : (
+                <></>
+              )}
+
+              <br></br>
+              {challenge && !fetchingTerminal && !foundTerminal &&
+                <div className=" mx-auto text-center ">
+                  <span
+                    className="cursor-pointer rounded-lg bg-green-800 px-2 py-1 text-white hover:bg-green-700"
+                    disabled={fetchingTerminal}
+                    onClick={fetchTerminal}
+                  >
+                    Launch Terminal
+                  </span>
+                </div>
+              }
+            </div>
+            <div className="mt-10  rounded-lg  pb-20">
+              <h1 className="text-2xl font-semibold text-white">Comments</h1>
+              <textarea
+                id="comment"
+                onChange={commentChange}
+                style={{ backgroundColor: '#212121' }}
+                className="focus-outline-none mt-4 block w-full rounded-lg border-none bg-black text-white outline-none"
+              ></textarea>
+
+              <button
+                onClick={submitComment}
+                id="commentButton"
                 style={{ backgroundColor: '#212121' }}
+                className="mt-4 rounded-lg border border-gray-700 bg-black px-4 py-1 text-white hover:bg-gray-900"
               >
-                <h1 className="px-5 pt-4 text-xl text-white">
-                  @{message.username}
-                </h1>
-                <p className="space-y-10 px-5 pb-4 text-white">
-                  <span className="mb-5">{message.content}</span>
-                  <br className="mt-10"></br>
-                  <a
-                    onClick={onCommentReport}
-                    className="mt-4 cursor-pointer text-red-600 hover:text-red-500"
-                  >
-                    Report Comment
-                  </a>
-                </p>
-              </div>
-            ))}
+                Post Comment
+              </button>
+              <h1
+                id="commentError"
+                className="mt-4 hidden px-2 py-1 text-xl text-red-400"
+              >
+                Error posting comment! This could be because it was less than 5
+                characters or greater than 250 characters.{' '}
+              </h1>
+              {comments.map((message, index) => (
+                <div
+                  key={index}
+                  className="mt-4 rounded-lg bg-black  "
+                  style={{ backgroundColor: '#212121' }}
+                >
+                  <h1 className="px-5 pt-4 text-xl text-white">
+                    @{message.username}
+                  </h1>
+                  <p className="space-y-10 px-5 pb-4 text-white">
+                    <span className="mb-5">{message.content}</span>
+                    <br className="mt-10"></br>
+                    <a
+                      onClick={onCommentReport}
+                      className="mt-4 cursor-pointer text-red-600 hover:text-red-500"
+                    >
+                      Report Comment
+                    </a>
+                  </p>
+                </div>
+              ))}
+            </div>
           </div>
-        </div>
-        {/* ***************************************** */}
-      </main>
-      <Transition.Root show={open} as={Fragment}>
-        <Dialog
-          as="div"
-          className="fixed inset-0 z-10 overflow-y-auto"
-          onClose={setOpen}
-        >
-          <div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Dialog.Overlay className="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity" />
-            </Transition.Child>
+          {/* ***************************************** */}
+        </main>
+        <Transition.Root show={open} as={Fragment}>
+          <Dialog
+            as="div"
+            className="fixed inset-0 z-10 overflow-y-auto"
+            onClose={setOpen}
+          >
+            <div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Dialog.Overlay className="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity" />
+              </Transition.Child>
 
-            {/* This element is to trick the browser into centering the modal contents. */}
-            <span
-              className="hidden sm:inline-block sm:h-screen sm:align-middle"
-              aria-hidden="true"
-            >
-              &#8203;
-            </span>
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <div className="relative inline-block transform overflow-hidden rounded-lg border border-gray-700 bg-gray-900 px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle">
-                <div>
-                  <div className="mx-auto flex items-center justify-center rounded-full ">
-                    {submissionMsg == 'success' && (
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke-width="1.5"
-                        stroke="currentColor"
-                        class="h-6 w-6 text-yellow-500"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
-                        />
-                      </svg>
-                    )}
-
-                    {submissionMsg == 'incorrect' && (
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke-width="1.5"
-                        stroke="currentColor"
-                        className="h-14 w-14 text-red-500"
+              {/* This element is to trick the browser into centering the modal contents. */}
+              <span
+                className="hidden sm:inline-block sm:h-screen sm:align-middle"
+                aria-hidden="true"
+              >
+                &#8203;
+              </span>
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                enterTo="opacity-100 translate-y-0 sm:scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              >
+                <div className="relative inline-block transform overflow-hidden rounded-lg border border-gray-700 bg-gray-900 px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle">
+                  <div>
+                    <div className="mx-auto flex items-center justify-center rounded-full ">
+                      {submissionMsg == 'success' && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke-width="1.5"
+                          stroke="currentColor"
+                          class="h-6 w-6 text-yellow-500"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
+                          />
+                        </svg>
+                      )}
+
+                      {submissionMsg == 'incorrect' && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke-width="1.5"
+                          stroke="currentColor"
+                          className="h-14 w-14 text-red-500"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                          />
+                        </svg>
+                      )}
+                    </div>
+                    <div className="mt-2 text-center sm:mt-5">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-gray-100"
                       >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                        />
-                      </svg>
-                    )}
-                  </div>
-                  <div className="mt-2 text-center sm:mt-5">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-gray-100"
-                    >
-                      {submissionMsg == 'success'
-                        ? "Nice hackin', partner!"
-                        : ''}
-                      {submissionMsg == 'incorrect'
-                        ? 'Submission incorrect!'
-                        : ''}
-                      {submissionMsg == 'error' ? 'Login to submit a flag' : ''}
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      <p className="text-gray-200">
                         {submissionMsg == 'success'
-                          ? `You were awarded ${award} points.`
+                          ? "Nice hackin', partner!"
                           : ''}
                         {submissionMsg == 'incorrect'
-                          ? `Incorrect submission, no points awarded.`
+                          ? 'Submission incorrect!'
                           : ''}
-                      </p>
+                        {submissionMsg == 'error' ? 'Login to submit a flag' : ''}
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-gray-200">
+                          {submissionMsg == 'success'
+                            ? `You were awarded ${award} points.`
+                            : ''}
+                          {submissionMsg == 'incorrect'
+                            ? `Incorrect submission, no points awarded.`
+                            : ''}
+                        </p>
+                      </div>
                     </div>
                   </div>
+                  <div className="mx-auto mt-5 flex text-center sm:mt-6">
+                    <button
+                      type="button"
+                      className="inline-flex w-auto justify-center rounded-md border border-gray-700 bg-gray-800 px-4 py-2 text-base font-medium text-white shadow-sm  focus:outline-none  sm:text-sm"
+                      onClick={() =>
+                        (window.location.href = '../leaderboards/global')
+                      }
+                    >
+                      View Leaderboards
+                    </button>
+                    <button
+                      type="button"
+                      className="ml-2 inline-flex w-auto justify-center   rounded-md border border-gray-700 bg-gray-800 px-4 py-2 text-base font-medium text-white shadow-sm  focus:outline-none  sm:text-sm"
+                      onClick={() => (window.location.href = '../practice')}
+                    >
+                      Back to Challenges
+                    </button>
+                  </div>
                 </div>
-                <div className="mx-auto mt-5 flex text-center sm:mt-6">
-                  <button
-                    type="button"
-                    className="inline-flex w-auto justify-center rounded-md border border-gray-700 bg-gray-800 px-4 py-2 text-base font-medium text-white shadow-sm  focus:outline-none  sm:text-sm"
-                    onClick={() =>
-                      (window.location.href = '../leaderboards/global')
-                    }
-                  >
-                    View Leaderboards
-                  </button>
-                  <button
-                    type="button"
-                    className="ml-2 inline-flex w-auto justify-center   rounded-md border border-gray-700 bg-gray-800 px-4 py-2 text-base font-medium text-white shadow-sm  focus:outline-none  sm:text-sm"
-                    onClick={() => (window.location.href = '../practice')}
+              </Transition.Child>
+            </div>
+          </Dialog>
+        </Transition.Root>
+
+        <Transition.Root show={hintOpen} as={Fragment}>
+          <Dialog as="div" className="relative z-10" onClose={setHintOpen}>
+            <div className="fixed inset-0" />
+
+            <div className="fixed inset-0 overflow-hidden">
+              <div className="absolute inset-0 overflow-hidden">
+                <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
+                  <Transition.Child
+                    as={Fragment}
+                    enter="transform transition ease-in-out duration-500 sm:duration-700"
+                    enterFrom="translate-x-full"
+                    enterTo="translate-x-0"
+                    leave="transform transition ease-in-out duration-500 sm:duration-700"
+                    leaveFrom="translate-x-0"
+                    leaveTo="translate-x-full"
                   >
-                    Back to Challenges
-                  </button>
-                </div>
-              </div>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition.Root>
-
-      <Transition.Root show={hintOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={setHintOpen}>
-          <div className="fixed inset-0" />
-
-          <div className="fixed inset-0 overflow-hidden">
-            <div className="absolute inset-0 overflow-hidden">
-              <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
-                <Transition.Child
-                  as={Fragment}
-                  enter="transform transition ease-in-out duration-500 sm:duration-700"
-                  enterFrom="translate-x-full"
-                  enterTo="translate-x-0"
-                  leave="transform transition ease-in-out duration-500 sm:duration-700"
-                  leaveFrom="translate-x-0"
-                  leaveTo="translate-x-full"
-                >
-                  <Dialog.Panel className="pointer-events-auto w-screen max-w-md">
-                    <div className="flex h-full flex-col overflow-y-scroll bg-[#161616] py-6 shadow-xl">
-                      <div className="px-4 sm:px-6">
-                        <div className="flex items-start justify-between">
-                          <Dialog.Title className="text-base font-semibold leading-6 text-gray-300">
-                            <h2>Hints</h2>
-                            <hr></hr>
-                          </Dialog.Title>
-                          <div className="ml-3 flex h-7 items-center">
-                            <button
-                              type="button"
-                              className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                              onClick={() => setHintOpen(false)}
-                            >
-                              <span className="sr-only">Close panel</span>
-                              <XMarkIcon
-                                className="h-6 w-6"
-                                aria-hidden="true"
-                              />
-                            </button>
-                          </div>
-                        </div>
-                        <div className="mt-3 rounded-md border border-neutral-900 bg-neutral-800">
-                          <h2 className="text-md mx-4 mb-2 mt-2 text-gray-200">
-                            <i class="far fa-lightbulb mr-1 text-yellow-400"></i>{' '}
-                            On our main platform, each hint incurs a 10% penalty
-                            and each submission a 3% penalty.
-                          </h2>
-                        </div>
-                        <div className="absolute bottom-4 mx-auto mt-3 hidden w-4/5 rounded-md border border-neutral-900 bg-neutral-800">
-                          <h2 className="text-md mx-4 mb-2 mt-2 text-gray-200">
-                            <i class="far fa-star mr-1 text-blue-500"></i> You
-                            must be logged in to see hints!
-                          </h2>
-                        </div>
-                      </div>
-                      <div className="mt-6 px-4 font-medium text-yellow-400 sm:px-6">
-                        {hintMessages ? (
-                          <div>
-                            {hintMessages.map((hint, index) => (
-                              <div
-                                key={index}
-                                className="mb-2 w-full  border-l-4  border-blue-600 bg-[#212121] px-4 py-3 text-lg"
-                                enter="transition-opacity duration-75"
-                                enterFrom="opacity-0"
-                                enterTo="opacity-100"
-                                leave="transition-opacity duration-150"
-                                leaveFrom="opacity-100"
-                                leaveTo="opacity-0"
-                              >
-                                <p className="text-white">
-                                  <span className="text-xl font-semibold">
-                                    Hint #{index + 1}
-                                  </span>
-                                  {hint && <p>{hint}</p>}
-                                </p>
-                              </div>
-                            ))}
-                            <div className="w-full">
+                    <Dialog.Panel className="pointer-events-auto w-screen max-w-md">
+                      <div className="flex h-full flex-col overflow-y-scroll bg-[#161616] py-6 shadow-xl">
+                        <div className="px-4 sm:px-6">
+                          <div className="flex items-start justify-between">
+                            <Dialog.Title className="text-base font-semibold leading-6 text-gray-300">
+                              <h2>Hints</h2>
+                              <hr></hr>
+                            </Dialog.Title>
+                            <div className="ml-3 flex h-7 items-center">
                               <button
-                                hidden={hideHintButton}
                                 type="button"
-                                className="mx-auto w-full bg-[#212121] py-2 text-center text-lg hover:bg-neutral-800"
-                                onClick={handleButtonClick}
+                                className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                                onClick={() => setHintOpen(false)}
                               >
-                                <span className="sr-only bg-gradient-to-r from-orange-400 to-yellow-600 bg-clip-text">
-                                  View hint
-                                </span>
-                                <i class="fas fa-unlock "></i>&nbsp; Unlock Hint
-                                #{hintMessages.length + 1}
+                                <span className="sr-only">Close panel</span>
+                                <XMarkIcon
+                                  className="h-6 w-6"
+                                  aria-hidden="true"
+                                />
                               </button>
                             </div>
                           </div>
-                        ) : (
-                          <p className="text-base font-normal text-white">
-                            Oops, no hints for this challenge.
-                          </p>
-                        )}
+                          <div className="mt-3 rounded-md border border-neutral-900 bg-neutral-800">
+                            <h2 className="text-md mx-4 mb-2 mt-2 text-gray-200">
+                              <i class="far fa-lightbulb mr-1 text-yellow-400"></i>{' '}
+                              On our main platform, each hint incurs a 10% penalty
+                              and each submission a 3% penalty.
+                            </h2>
+                          </div>
+                          <div className="absolute bottom-4 mx-auto mt-3 hidden w-4/5 rounded-md border border-neutral-900 bg-neutral-800">
+                            <h2 className="text-md mx-4 mb-2 mt-2 text-gray-200">
+                              <i class="far fa-star mr-1 text-blue-500"></i> You
+                              must be logged in to see hints!
+                            </h2>
+                          </div>
+                        </div>
+                        <div className="mt-6 px-4 font-medium text-yellow-400 sm:px-6">
+                          {hintMessages ? (
+                            <div>
+                              {hintMessages.map((hint, index) => (
+                                <div
+                                  key={index}
+                                  className="mb-2 w-full  border-l-4  border-blue-600 bg-[#212121] px-4 py-3 text-lg"
+                                  enter="transition-opacity duration-75"
+                                  enterFrom="opacity-0"
+                                  enterTo="opacity-100"
+                                  leave="transition-opacity duration-150"
+                                  leaveFrom="opacity-100"
+                                  leaveTo="opacity-0"
+                                >
+                                  <p className="text-white">
+                                    <span className="text-xl font-semibold">
+                                      Hint #{index + 1}
+                                    </span>
+                                    {hint && <p>{hint}</p>}
+                                  </p>
+                                </div>
+                              ))}
+                              <div className="w-full">
+                                <button
+                                  hidden={hideHintButton}
+                                  type="button"
+                                  className="mx-auto w-full bg-[#212121] py-2 text-center text-lg hover:bg-neutral-800"
+                                  onClick={handleButtonClick}
+                                >
+                                  <span className="sr-only bg-gradient-to-r from-orange-400 to-yellow-600 bg-clip-text">
+                                    View hint
+                                  </span>
+                                  <i class="fas fa-unlock "></i>&nbsp; Unlock Hint
+                                  #{hintMessages.length + 1}
+                                </button>
+                              </div>
+                            </div>
+                          ) : (
+                            <p className="text-base font-normal text-white">
+                              Oops, no hints for this challenge.
+                            </p>
+                          )}
+                        </div>
                       </div>
-                    </div>
-                  </Dialog.Panel>
-                </Transition.Child>
+                    </Dialog.Panel>
+                  </Transition.Child>
+                </div>
               </div>
             </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
-      <p className="hidden mx-auto mt-1.5 w-3/5 rounded-lg bg-neutral-800 px-4 py-0.5 text-sm text-gray-200">
-        ℹ We provide accessible environments for everyone to run cybersecurity
-        tools. Abuse and unnecessary computation is prohibited.
-      </p>
-      <ToastContainer
-        position="bottom-right"
-        autoClose={5000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme="dark"
-      />
-      <Footer />
-    </>
-  );
-}
+          </Dialog>
+        </Transition.Root>
+        <p className="hidden mx-auto mt-1.5 w-3/5 rounded-lg bg-neutral-800 px-4 py-0.5 text-sm text-gray-200">
+          ℹ We provide accessible environments for everyone to run cybersecurity
+          tools. Abuse and unnecessary computation is prohibited.
+        </p>
+        <ToastContainer
+          position="bottom-right"
+          autoClose={5000}
+          hideProgressBar={false}
+          newestOnTop={false}
+          closeOnClick
+          rtl={false}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+          theme="dark"
+        />
+        <Footer />
+      </>
+    );
+  }
diff --git a/src/pages/groups/[group]/edit-assignment/[id].jsx b/src/pages/groups/[group]/edit-assignment/[id].jsx
index 79c4379a..143a0fe9 100644
--- a/src/pages/groups/[group]/edit-assignment/[id].jsx
+++ b/src/pages/groups/[group]/edit-assignment/[id].jsx
@@ -439,10 +439,11 @@ export default function EditingAssignment() {
                     setMessageOfConfirm(actions[1]);
                     setIndex(1);
                   }}
-                  className="inline-flex justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                  className="ml-4 rounded-lg bg-blue-600 px-2 py-1 text-white hover:bg-blue-700"
                 >
                   Save
                 </button>
+                <button  className="ml-4 rounded-lg bg-blue-600 px-2 py-1 text-white hover:bg-blue-700" onClick={() => setIsEditingChallenge(true)}>Edit Challenge</button>
 
                 <button
                   onClick={() => {
@@ -454,7 +455,6 @@ export default function EditingAssignment() {
                 >
                   Delete Assignment
                 </button>
-                <button onClick={() => setIsEditingChallenge(true)}>Edit Challenge</button>
               </div>
             </div>
           </div>

From e6801b721903808917c934de32cd1ce0d1fb57be Mon Sep 17 00:00:00 2001
From: Pranav Ramesh <laphatize@protonmail.com>
Date: Wed, 6 Mar 2024 00:00:07 -0500
Subject: [PATCH 02/12] [chore] fix for navbar redirect to user profiles

---
 src/components/StandardNav.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/StandardNav.jsx b/src/components/StandardNav.jsx
index 9da44750..8e2821bc 100644
--- a/src/components/StandardNav.jsx
+++ b/src/components/StandardNav.jsx
@@ -302,7 +302,7 @@ export function StandardNav() {
                           <Menu.Item>
                             {({ active }) => (
                               <a
-                                href={`../../users/${username}`}
+                                href={`${NEXT_PUBLIC_FRONTEND_URL}/users/${username}`}
                                 className={classNames(
                                   active ? '-100' : '',
                                   'block flex px-4 py-2 text-sm text-white hover:bg-neutral-800'
@@ -435,7 +435,7 @@ export function StandardNav() {
                 <div className="space-y-1">
                   <Disclosure.Button
                     as="a"
-                    href="#"
+                    href={`${NEXT_PUBLIC_FRONTEND_URL}/users/${username}`}
                     className="hover-bg-neutral-900 block px-4 py-2 text-base font-medium text-gray-300 hover:text-gray-800 sm:px-6"
                   >
                     Your Profile

From 5b33664d28c1ae3bb6ad20484a5d210536bd1892 Mon Sep 17 00:00:00 2001
From: Pranav Ramesh <laphatize@protonmail.com>
Date: Wed, 6 Mar 2024 00:02:24 -0500
Subject: [PATCH 03/12] [fix] fix last commit

---
 src/components/StandardNav.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/StandardNav.jsx b/src/components/StandardNav.jsx
index 8e2821bc..4ee520a0 100644
--- a/src/components/StandardNav.jsx
+++ b/src/components/StandardNav.jsx
@@ -302,7 +302,7 @@ export function StandardNav() {
                           <Menu.Item>
                             {({ active }) => (
                               <a
-                                href={`${NEXT_PUBLIC_FRONTEND_URL}/users/${username}`}
+                                href={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/users/${username}`}
                                 className={classNames(
                                   active ? '-100' : '',
                                   'block flex px-4 py-2 text-sm text-white hover:bg-neutral-800'
@@ -435,7 +435,7 @@ export function StandardNav() {
                 <div className="space-y-1">
                   <Disclosure.Button
                     as="a"
-                    href={`${NEXT_PUBLIC_FRONTEND_URL}/users/${username}`}
+                    href={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/users/${username}`}
                     className="hover-bg-neutral-900 block px-4 py-2 text-base font-medium text-gray-300 hover:text-gray-800 sm:px-6"
                   >
                     Your Profile

From 90c6ad4c32fc6dfdb62d08b25bbb0fadfaf76ece Mon Sep 17 00:00:00 2001
From: Pranav Ramesh <laphatize@protonmail.com>
Date: Wed, 6 Mar 2024 00:11:48 -0500
Subject: [PATCH 04/12] [chore] fix image loading issue with 404 pages

---
 src/pages/404.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/404.jsx b/src/pages/404.jsx
index 78b1026d..0d730b32 100644
--- a/src/pages/404.jsx
+++ b/src/pages/404.jsx
@@ -37,7 +37,7 @@ const NotFound = () => {
           <div className='grid-cols-1 grid'>
             <div>
 
-            <img width="200" src="ctfguide404WithLogo.png" className='mx-auto text-center mt-10'></img>
+            <img width="200" src="../../../ctfguide404WithLogo.png" className='mx-auto text-center mt-10'></img>
               <h1 className='text-white text-xl mt-4'>Uh, oh. We looked everywhere and couldn't find that page.</h1>
 
               <div className='bg-black  text-white text-left   px-4 py-4 mt-4'>
@@ -60,7 +60,7 @@ const NotFound = () => {
               </div>
 
 
-              <img width="500" src="Kana404.png" className='mx-auto text-center mt-10'></img>
+              <img width="500" src="../../../Kana404.png" className='mx-auto text-center mt-10'></img>
 
               <span
                 onClick={() => router.back()}

From 2c889dcab39b13c1e2f194d6b59bf564c6d0de69 Mon Sep 17 00:00:00 2001
From: Pranav Ramesh <laphatize@protonmail.com>
Date: Wed, 6 Mar 2024 00:23:38 -0500
Subject: [PATCH 05/12] [feat] 404 redirect for invalid users

---
 src/pages/404.jsx          |  4 +--
 src/pages/users/[user].jsx | 54 +++++++++++++++++++-------------------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/pages/404.jsx b/src/pages/404.jsx
index 0d730b32..d534e696 100644
--- a/src/pages/404.jsx
+++ b/src/pages/404.jsx
@@ -37,7 +37,7 @@ const NotFound = () => {
           <div className='grid-cols-1 grid'>
             <div>
 
-            <img width="200" src="../../../ctfguide404WithLogo.png" className='mx-auto text-center mt-10'></img>
+            <img width="200" src={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/ctfguide404WithLogo.png`} className='mx-auto text-center mt-10'></img>
               <h1 className='text-white text-xl mt-4'>Uh, oh. We looked everywhere and couldn't find that page.</h1>
 
               <div className='bg-black  text-white text-left   px-4 py-4 mt-4'>
@@ -60,7 +60,7 @@ const NotFound = () => {
               </div>
 
 
-              <img width="500" src="../../../Kana404.png" className='mx-auto text-center mt-10'></img>
+              <img width="500" src={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/Kana404.png`} className='mx-auto text-center mt-10'></img>
 
               <span
                 onClick={() => router.back()}
diff --git a/src/pages/users/[user].jsx b/src/pages/users/[user].jsx
index cca4c707..485ef7bb 100644
--- a/src/pages/users/[user].jsx
+++ b/src/pages/users/[user].jsx
@@ -384,6 +384,9 @@ export default function Users() {
                 const endPoint = process.env.NEXT_PUBLIC_API_URL + '/users/' + user;
                 const result = await request(endPoint, "GET", null);
 
+                if (!result.username) {
+                    return window.location.href = '/404';
+                }
                 setUsername(result.username);
                 setCreateDate(result.createdAt);
                 setRank(result.leaderboardNum);
@@ -1107,31 +1110,27 @@ export default function Users() {
                             <div className="rounded-md">
                                 <h1 className="ml-2 mb-3 text-3xl font-semibold text-gray-300">Badges</h1>
                                 <div className="bg-neutral-800 rounded-xl grid grid-cols-5 gap-x-2 gap-y-2 py-4 px-4">
-                                    {(badges && badges.map((badge) => (
-                                        <Badge createdAt={badge.createdAt} badgeName={badge.badge.badgeName} badgeTier={badge.badge.badgeTier} badgeInfo={badge.badge.badgeInfo} />
-                                    ))) || (
-
-                                            <div
-                                                className="border col-span-5 border-neutral-700 border-2 bg-neutral-800 align-center mx-auto w-full rounded-lg px-4 py-4 text-center duration-4000 min-h-[190px] min-w-[200px] transition ease-in-out hover:bg-neutral-700/40"
-                                                data-tooltip-content="Complete challenges to earn badges!"
-                                                data-tooltip-id="badge-tooltip"
-                                                data-tooltip-place="top"
-                                            >
-                                                {ownUser &&
-                                                    <Tooltip id="badge-tooltip" />
-                                                }
-                                                <img
-                                                    src={'/CuteKana.png'}
-                                                    width="100"
-                                                    className="mx-auto mt-2 px-1"
-                                                />
-
-                                                <h1 className="mx-auto mt-2 text-center text-xl text-white">
-                                                    No Badges Yet...
-                                                </h1>
-
-                                            </div>
-                                        )}
+                                    {badges && badges.length > 0 ? (
+                                        badges.map((badge) => (
+                                            <Badge
+                                                createdAt={badge.createdAt}
+                                                badgeName={badge.badge.badgeName}
+                                                badgeTier={badge.badge.badgeTier}
+                                                badgeInfo={badge.badge.badgeInfo}
+                                            />
+                                        ))
+                                    ) : (
+                                        <div
+                                            className="border col-span-5 border-neutral-700 border-2 bg-neutral-800 align-center mx-auto w-full rounded-lg px-4 py-4 text-center duration-4000 min-h-[190px] min-w-[200px] transition ease-in-out hover:bg-neutral-700/40"
+                                            data-tooltip-content="Complete challenges to earn badges!"
+                                            data-tooltip-id="badge-tooltip"
+                                            data-tooltip-place="top"
+                                        >
+                                            {ownUser && <Tooltip id="badge-tooltip" />}
+                                            <img src={'/CuteKana.png'} width="100" className="mx-auto mt-2 px-1" />
+                                            <h1 className="mx-auto mt-2 text-center text-xl text-white">No Badges Yet...</h1>
+                                        </div>
+                                    )}
                                 </div>
                             </div>
                         </div>
@@ -1188,7 +1187,7 @@ export default function Users() {
                             <div className="rounded-md">
                                 <h1 className="ml-2 mt-4 py-2 text-3xl font-semibold text-gray-300">Liked Challenges</h1>
                                 <div className="bg-neutral-800 rounded-xl mt-2 gap-x-4 gap-y-2 p-4 flex flex-col grid grid-cols-3">
-                                    {(pinnedChallenges && pinnedChallenges.map((challenge) => (
+                                    {pinnedChallenges && Array.isArray(pinnedChallenges) && pinnedChallenges.map((challenge) => (
                                         <ChallengeCard
                                             title={challenge.challenge.title}
                                             category={challenge.challenge.category}
@@ -1198,7 +1197,8 @@ export default function Users() {
                                             views={challenge.challenge.views}
                                             likes={challenge.challenge.upvotes}
                                         />
-                                    ))) || (
+                                    ))
+                                         || (
                                         <div
                                         className="border col-span-5 border-neutral-700 border-2 bg-neutral-800 align-center mx-auto w-full rounded-lg px-4 py-4 text-center duration-4000 min-h-[190px] min-w-[200px] transition ease-in-out hover:bg-neutral-700/40"
                                         data-tooltip-content="Like some challenges and they'll appear here!"

From d72dfcaadcf09e7237c1033408312c20cbe32ad5 Mon Sep 17 00:00:00 2001
From: Pranav Ramesh <laphatize@protonmail.com>
Date: Wed, 6 Mar 2024 00:56:44 -0500
Subject: [PATCH 06/12] [feat] text wrap in box for hints

---
 src/pages/assignments/student/[code].jsx |  9 +++--
 src/pages/assignments/teacher/[code].jsx | 47 ++++++++++++------------
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/pages/assignments/student/[code].jsx b/src/pages/assignments/student/[code].jsx
index b5e4050c..0f49ff54 100644
--- a/src/pages/assignments/student/[code].jsx
+++ b/src/pages/assignments/student/[code].jsx
@@ -477,18 +477,19 @@ export default function Slug() {
                       cursor: 'pointer',
                       display: 'flex',
                       justifyContent: 'space-between',
+                      width: '100%',
+                      wordWrap: 'break-word',
                     }}
                   >
-                    <div>
+                    <div style={{ maxWidth: '90%' }}>
                       <p className="text-white">
-                        <span className="text-sm">
+                        <span className="text-sm ">
                           Hint {idx + 1}: {hint.message}
                         </span>
                       </p>
                     </div>
                     <span className="mt-1 text-sm text-white">
-                      {assignment && assignment.challenge.hints[idx].penalty}{' '}
-                      points
+                      {assignment && assignment.challenge.hints[idx].penalty} points
                     </span>
                   </div>
                 );
diff --git a/src/pages/assignments/teacher/[code].jsx b/src/pages/assignments/teacher/[code].jsx
index eed4305a..872abf86 100644
--- a/src/pages/assignments/teacher/[code].jsx
+++ b/src/pages/assignments/teacher/[code].jsx
@@ -494,30 +494,31 @@ export default function id() {
                 <p className="mt-6 font-semibold text-white">HINTS</p>
                 <hr className="rounded-lg border border-blue-600 bg-neutral-900 " />
                 {hints.map((hint, idx) => {
-                  return (
-                    <div
-                      className="mb-2 mt-3 w-full border-l-2 border-yellow-600 bg-[#212121] px-4 text-lg opacity-75 transition-opacity transition-opacity duration-150 duration-75 hover:opacity-100"
-                      onClick={() => showHint(idx)}
-                      style={{
-                        cursor: 'pointer',
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                      }}
-                    >
-                      <div>
-                        <p className="text-white">
-                          <span className="text-sm">
-                            Hint {idx + 1}: {hint.message}
-                          </span>
-                        </p>
-                      </div>
-                      <span className="mt-1 text-sm text-white">
-                        {assignment && assignment.challenge.hints[idx].penalty}{' '}
-                        points
-                      </span>
+                return (
+                  <div
+                    className="mb-2 mt-3 w-full border-l-2 border-yellow-600 bg-[#212121] px-4 text-lg opacity-75 transition-opacity transition-opacity duration-150 duration-75 hover:opacity-100"
+                    onClick={() => showHint(idx)}
+                    style={{
+                      cursor: 'pointer',
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      width: '100%',
+                      wordWrap: 'break-word',
+                    }}
+                  >
+                    <div style={{ maxWidth: '90%' }}>
+                      <p className="text-white">
+                        <span className="text-sm ">
+                          Hint {idx + 1}: {hint.message}
+                        </span>
+                      </p>
                     </div>
-                  );
-                })}
+                    <span className="mt-1 text-sm text-white">
+                      {assignment && assignment.challenge.hints[idx].penalty} points
+                    </span>
+                  </div>
+                );
+              })}
               </div>
               
 

From ff3d70ca057251062b50b29c94fc1b45f0a15309 Mon Sep 17 00:00:00 2001
From: Stephen Stefanatos <stephenstef456@gmail.com>
Date: Wed, 6 Mar 2024 02:27:49 -0500
Subject: [PATCH 07/12] sending less info to client, fixed an auth bug

---
 src/components/groups/announcements.jsx       |  5 +-
 .../assignments/[code]/submissions/[id].jsx   | 62 +++++--------------
 src/pages/assignments/student/[code].jsx      | 39 +++++++-----
 src/pages/assignments/teacher/[code].jsx      | 28 ++++++---
 .../groups/[group]/edit-assignment/[id].jsx   |  7 ++-
 src/utils/terminal-api.js                     |  3 -
 6 files changed, 70 insertions(+), 74 deletions(-)

diff --git a/src/components/groups/announcements.jsx b/src/components/groups/announcements.jsx
index b8fc7069..2abb473e 100644
--- a/src/components/groups/announcements.jsx
+++ b/src/components/groups/announcements.jsx
@@ -164,12 +164,16 @@ const Announcement = ({
                         {new Date(
                           announcementObj.createdAt
                         ).toLocaleTimeString()}{' '}
+                        {
+                          /*
                         <span
                           className="bg-green-900 ml-4 text-sm text-white px-2 py-1 rounded-md"
                           style={{ marginRight: '5px' }}
                         >
                           {`${announcementObj.type}`}
                         </span>
+                           * */
+                        }
                         <br></br> <span style={{whiteSpace: 'pre-wrap'}}> {announcementObj.message}</span>
                       </span>{' '}
                     </li>
@@ -317,7 +321,6 @@ const Announcement = ({
                       {new Date(
                         announcementObj.createdAt
                       ).toLocaleTimeString()}{' '}
-                      {`(${announcementObj.type}) `}
                       <br></br>
                       <textarea
                         value={announcementObj.message}
diff --git a/src/pages/assignments/[code]/submissions/[id].jsx b/src/pages/assignments/[code]/submissions/[id].jsx
index 1a309553..34ec7db8 100644
--- a/src/pages/assignments/[code]/submissions/[id].jsx
+++ b/src/pages/assignments/[code]/submissions/[id].jsx
@@ -15,8 +15,6 @@ const baseUrl = process.env.NEXT_PUBLIC_API_URL;
 
 export default function id() {
   const [open, setOpen] = useState(false);
-
-
   
   const router = useRouter();
   const [assignment, setAssignment] = useState(null);
@@ -33,12 +31,9 @@ export default function id() {
   const [role, setRole] = useState(null);
 
   const [kanaError, setKanaError] = useState(false);
-
-
   const [submissions, setSubmissions] = useState([]);
 
-
-  console.log(submission);
+  //const [challenge, setChallenge] = useState(null);
 
   // fetch kana log
   const fetchKanaLog = async (password, challengeId, uid, assignmentID) => {
@@ -153,12 +148,6 @@ export default function id() {
   useEffect(() => {
     if (!loading) {
       getJson();
-      console.log("penguins")
-      console.log(router.query.key)
-      if (router.query.key == "t") {
-        setRole("t");
-      }
-    
     }
   }, [loading]);
 
@@ -202,41 +191,32 @@ export default function id() {
     }
   }, []);
 
-
-  // NEW SUBMISSION LOGIC
-
-  const parseDate = (dateString) => {
-    const date = new Date(dateString);
-    const offsetInMinutes = date.getTimezoneOffset();
-    date.setMinutes(date.getMinutes() + offsetInMinutes);
-    function to12HourFormat(hour, minute) {
-      let period = hour >=  12 ? "PM" : "AM";
-      hour = hour %  12;
-      hour = hour ? hour :  12; // the hour '0' should be '12'
-      return hour + ":" + minute.toString().padStart(2, '0') + " " + period;
+  const authenticate = async (assignment) => {
+    const url = `${baseUrl}/classroom/inClass/${assignment.classroom.id}`;
+    const data = await request(url, 'GET', null);
+    console.log(data);
+    if (data.body.isTeacher) {
+      setRole('t');
+      return true;
     }
-    const day = date.getDate();
-    const month = date.getMonth() +  1; // Months are  0-based in JavaScript
-    const year = date.getFullYear().toString().slice(-2);
-    const hour = date.getHours();
-    const minute = date.getMinutes();
-    const time = to12HourFormat(hour, minute);
-    const formattedDate = `${month}/${day}/${year} ${time}`;
-    return formattedDate;
+    setRole('');
+    return data.body.isStudent;
   };
+  // NEW SUBMISSION LOGIC
 
   const getAssignment = async () => {
     const params = window.location.href.split('/');
     if (params.length < 5) {
       return;
     }
-    const url = `${baseUrl}/classroom-assignments/fetch-assignment/${params[4]}`;
+    const r = router.query.key == "t" ? "teacher" : "student";
+    const url = `${baseUrl}/classroom-assignments/fetch-assignment-${r}/${params[4]}`;
     const data = await request(url, 'GET', null);
     if (data && data.success) {
       const isAuth = await authenticate(data.body);
       if (isAuth) {
         setAssignment(data.body);
-        getChallenge(data.body);
+        //getChallenge(data.body);
         await getSubmissions(data.body);
       } else {
         console.log('You are not apart of this class');
@@ -250,8 +230,6 @@ export default function id() {
     window.location.href = `/assignments/${assignment.id}/submissions/${id}?key=t`;
   };
 
-
-
   const getSubmissions = async (assignment) => {
     const url = `${baseUrl}/submission/getSubmissionsForTeachers/${assignment.classroom.id}/${assignment.id}`;
     const data = await request(url, 'GET', null);
@@ -264,12 +242,7 @@ export default function id() {
     }
   };
 
-  const authenticate = async (assignment) => {
-    const url = `${baseUrl}/classroom/inClass/${assignment.classroom.id}`;
-    const data = await request(url, 'GET', null);
-    return data.success;
-  };
-
+  /*
   const getChallenge = async (assignment) => {
     try {
       const url = `${baseUrl}/challenges/${assignment.challenge.id}?assignmentId=${assignment.id}`;
@@ -281,8 +254,7 @@ export default function id() {
       console.log(err);
     }
   };
-
-
+  */
 
   return (
     <>
@@ -318,7 +290,7 @@ export default function id() {
                   {/* go back */}
                   {assignment && (
                     <a
-                      href={`/assignments/teacher/${assignment.id}`}
+                      href={`/assignments/${role ? "teacher" : "student"}/${assignment.id}`}
                       className="text-blue-600 mt-4 px-3  font-semibold bg-white  text-center rounded-lg hover:text-blue-600 hover:bg-gray-100 cursor-pointer"
                     >
                       Back to Assignment View
diff --git a/src/pages/assignments/student/[code].jsx b/src/pages/assignments/student/[code].jsx
index 0f49ff54..2716220d 100644
--- a/src/pages/assignments/student/[code].jsx
+++ b/src/pages/assignments/student/[code].jsx
@@ -75,7 +75,7 @@ export default function Slug() {
     });
   }
 
-  console.log(assignment);
+  // console.log(assignment);
 
   const parseDate = (dateString) => {
     const date = new Date(dateString);
@@ -97,24 +97,27 @@ export default function Slug() {
     return formattedDate;
   };
 
+  /*
   const getChallenge = async (assignment) => {
     try {
       const url = `${baseUrl}/challenges/${assignment.challenge.id}?assignmentId=${assignment.id}`;
       const data = await request(url, "GET", null);
       if (data.success) {
         setChallenge(data.body);
+        console.log('Challenge:', data.body);
       }
     } catch (err) {
       console.log(err);
     }
   };
+  */
 
   const getAssignment = async () => {
     const params = window.location.href.split('/');
     if (params.length < 5) {
       return;
     }
-    const url = `${baseUrl}/classroom-assignments/fetch-assignment/${params[5]}`;
+    const url = `${baseUrl}/classroom-assignments/fetch-assignment-student/${params[5]}`;
     const data = await request(url, "GET", null);
     if (data && data.success) {
       const isAuth = await authenticate(data.body);
@@ -122,7 +125,7 @@ export default function Slug() {
         setAssignment(data.body);
         setSubmissionId(data.submissionId);
         setChallengeHints(data.body.challenge.hints);
-        getChallenge(data.body);
+        setChallenge(data.body.challenge);
       } else {
         console.log('You are not apart of this class');
       }
@@ -132,10 +135,9 @@ export default function Slug() {
   const authenticate = async (assignment) => {
     const url = `${baseUrl}/classroom/inClass/${assignment.classroom.id}`;
     const data = await request(url, "GET", null);
-    return data && data.success;
+    return data && data.body.isStudent;
   };
 
-
   const createTerminal = async (skipToCheckStatus) => {
     if (!challenge) return;
     setLoadingMessage('Creating terminal ');
@@ -215,13 +217,20 @@ export default function Slug() {
     }
   }, []);
 
-  const checkFlag = () => {
-    if (assignment && flagInput === assignment.solution.keyword) {
-      setSolved(true);
-      toast.success('Flag is Correct, Good Job!');
-    } else {
-      toast.error('Flag is incorrect. Try again!');
-      setSolved(false);
+  const checkFlag = async () => {
+    const url = `${baseUrl}/classroom-assignments/check-flag`;
+    const body = { flag: flagInput, challengeId: challenge.id};
+    setLoading(true);
+    const response = await request(url, "POST", body);
+    setLoading(false);
+    if(response && response.success) {
+      if(response.body.solved) {
+        setSolved(true);
+        toast.success('Flag is Correct, Good Job!');
+      } else {
+        toast.error('Flag is incorrect. Try again!');
+        setSolved(false);
+      }
     }
   };
 
@@ -262,7 +271,7 @@ export default function Slug() {
     const url = `${baseUrl}/submission/create/${assignment.classroom.classCode}`;
 
     const body = {
-      solved: flagInput === assignment.solution.keyword,
+      solved: solved,
       classroomId: assignment.classroomId,
       assignmentId: params[5],
       keyword: flagInput,
@@ -436,10 +445,12 @@ export default function Slug() {
                 value={flagInput}
               ></input>
               <button
+                disabled={loading}
                 onClick={checkFlag}
+                style={{ width: '40%' }}
                 className="mt-3 rounded-lg bg-green-800 px-2 py-1 text-white hover:bg-green-700"
               >
-                Check Flag
+                {loading ? <><i className="fas fa-spinner fa-pulse"></i></>: 'Check Flag'}
               </button>
 
               {solved === true ? (
diff --git a/src/pages/assignments/teacher/[code].jsx b/src/pages/assignments/teacher/[code].jsx
index 872abf86..d990cbb9 100644
--- a/src/pages/assignments/teacher/[code].jsx
+++ b/src/pages/assignments/teacher/[code].jsx
@@ -100,7 +100,7 @@ export default function id() {
     if (params.length < 5) {
       return;
     }
-    const url = `${baseUrl}/classroom-assignments/fetch-assignment/${params[5]}`;
+    const url = `${baseUrl}/classroom-assignments/fetch-assignment-teacher/${params[5]}`;
     const data = await request(url, 'GET', null);
     if (data && data.success) {
       const isAuth = await authenticate(data.body);
@@ -129,7 +129,8 @@ export default function id() {
   const authenticate = async (assignment) => {
     const url = `${baseUrl}/classroom/inClass/${assignment.classroom.id}`;
     const data = await request(url, 'GET', null);
-    return data.success;
+    if(!data) return false;
+    return data.body.isTeacher;
   };
 
   const getChallenge = async (assignment) => {
@@ -223,13 +224,20 @@ export default function id() {
     }
   }, []);
 
-  const checkFlag = () => {
-    if (assignment && flagInput === assignment.solution.keyword) {
-      setSolved(true);
-      toast.success('Flag is Correct, Good Job!');
-    } else {
-      toast.error('Flag is incorrct');
-      setSolved(false);
+  const checkFlag = async () => {
+    const url = `${baseUrl}/classroom-assignments/check-flag`;
+    const body = { flag: flagInput, challengeId: challenge.id};
+    setLoading(true);
+    const response = await request(url, "POST", body);
+    setLoading(false);
+    if(response && response.success) {
+      if(response.body.solved) {
+        setSolved(true);
+        toast.success('Flag is Correct, Good Job!');
+      } else {
+        toast.error('Flag is incorrect. Try again!');
+        setSolved(false);
+      }
     }
   };
 
@@ -464,7 +472,7 @@ export default function id() {
                   onClick={checkFlag}
                   className="mt-3 rounded-lg bg-green-800 px-2 py-1 text-white hover:bg-green-700"
                 >
-                  Check Flag
+                {loading ? <><i className="fas fa-spinner fa-pulse"></i></>: 'Check Flag'}
                 </button>
 
                 {solved === true ? (
diff --git a/src/pages/groups/[group]/edit-assignment/[id].jsx b/src/pages/groups/[group]/edit-assignment/[id].jsx
index 143a0fe9..7bc37298 100644
--- a/src/pages/groups/[group]/edit-assignment/[id].jsx
+++ b/src/pages/groups/[group]/edit-assignment/[id].jsx
@@ -42,7 +42,7 @@ export default function EditingAssignment() {
   const { id } = router.query;
 
   const getAssignment = async () => {
-    const url = `${process.env.NEXT_PUBLIC_API_URL}/classroom-assignments/fetch-assignment/${id}`;
+    const url = `${process.env.NEXT_PUBLIC_API_URL}/classroom-assignments/fetch-assignment-teacher/${id}`;
     const data = await request(url, 'GET', null);
     if (data && data.success) {
       console.log(data);
@@ -443,7 +443,12 @@ export default function EditingAssignment() {
                 >
                   Save
                 </button>
+                      {
+                        /*
+
                 <button  className="ml-4 rounded-lg bg-blue-600 px-2 py-1 text-white hover:bg-blue-700" onClick={() => setIsEditingChallenge(true)}>Edit Challenge</button>
+                         * */
+                      }
 
                 <button
                   onClick={() => {
diff --git a/src/utils/terminal-api.js b/src/utils/terminal-api.js
index 2e5b71d7..8bf3c7e9 100644
--- a/src/utils/terminal-api.js
+++ b/src/utils/terminal-api.js
@@ -25,7 +25,6 @@ const buildTerminal = async (challenge, token) => {
     };
 
     const response = await fetch(url, requestOptions);
-    console.log('Response from createTerminal: ', response);
     if(!response.ok) {
       return [false, null];
     }
@@ -104,8 +103,6 @@ async function checkUserTerminal(token, challengeId) {
       result = await reader.read();
     }
 
-    console.log("Data from checkUserTerminal: ", data);
-
     if(data && data.url) {
       return data;
     }

From a9577eb7e3eb62b9dab99ed24e228ab5dfefe353 Mon Sep 17 00:00:00 2001
From: Stephen Stefanatos <stephenstef456@gmail.com>
Date: Wed, 6 Mar 2024 13:22:51 -0500
Subject: [PATCH 08/12] small teacherview bug

---
 src/pages/assignments/teacher/[code].jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/assignments/teacher/[code].jsx b/src/pages/assignments/teacher/[code].jsx
index d990cbb9..4f3f99bd 100644
--- a/src/pages/assignments/teacher/[code].jsx
+++ b/src/pages/assignments/teacher/[code].jsx
@@ -115,6 +115,7 @@ export default function id() {
     }
   };
 
+  console.log('Assignment:', assignment);
   const getSubmissions = async (assignment) => {
     const url = `${baseUrl}/submission/getSubmissionsForTeachers/${assignment.classroom.id}/${assignment.id}`;
     const data = await request(url, 'GET', null);
@@ -226,7 +227,8 @@ export default function id() {
 
   const checkFlag = async () => {
     const url = `${baseUrl}/classroom-assignments/check-flag`;
-    const body = { flag: flagInput, challengeId: challenge.id};
+    console.log(assignment);
+    const body = { flag: flagInput, challengeId: assignment.challenge.id};
     setLoading(true);
     const response = await request(url, "POST", body);
     setLoading(false);

From a9bcfbabcc71c6236e96f9df0efede1e0c295020 Mon Sep 17 00:00:00 2001
From: Stephen Stefanatos <stephenstef456@gmail.com>
Date: Wed, 6 Mar 2024 17:00:42 -0500
Subject: [PATCH 09/12] updaing challenge of assignment update

---
 .../assignments/updateChallengeInfo.jsx       | 40 ++++++++++---------
 .../assignments/[code]/submissions/[id].jsx   |  2 +-
 .../groups/[group]/edit-assignment/[id].jsx   |  5 ---
 src/utils/request.js                          |  1 +
 4 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/components/groups/assignments/updateChallengeInfo.jsx b/src/components/groups/assignments/updateChallengeInfo.jsx
index f2d375e9..1fc4c908 100644
--- a/src/components/groups/assignments/updateChallengeInfo.jsx
+++ b/src/components/groups/assignments/updateChallengeInfo.jsx
@@ -50,9 +50,7 @@ const Editor = (props) => {
   };
 
   const sendToFileApi = async () => {
-    console.log("Not finished yet");
-    toast.info("This is incomplete");
-    await uploadChallenge('');
+    await uploadChallenge([]);
     return;
     const isValid = await validateNewChallege();
     if (isValid) {
@@ -74,9 +72,7 @@ const Editor = (props) => {
     }
   };
 
-  const uploadChallenge = async (fileId) => {
-    const classCode = window.location.href.split('/')[4];
-
+  const uploadChallenge = async (fileIds) => {
     const exConfig = existingConfig.replace('\n', ' && ');
     const nConfig = newConfig.replace('\n', ' && ');
     let finalConfig = '';
@@ -87,6 +83,7 @@ const Editor = (props) => {
     }
 
     const challengeInfo = {
+      id: props.challenge.id,
       name: newChallengeName,
       hints,
       penalty,
@@ -95,21 +92,28 @@ const Editor = (props) => {
       difficulty,
       category,
       commands: finalConfig,
-      fileId: fileId,
+      fileIds: fileIds,
     };
 
-    console.log(challengeInfo);
-
-    /*
     const url = `${process.env.NEXT_PUBLIC_API_URL}/challenges/update-assignment-challenge`;
-    const data = await request(url, 'PUT', challengeInfo);
+    const data = await request(url, 'POST', challengeInfo);
+    //console.log(data);
 
     if (data && data.success) {
       window.location.href = ``; 
     }
-    */
+
   };
 
+  async function loadSolution() {
+    const url = `${process.env.NEXT_PUBLIC_API_URL}/challenges/solution/${props.challenge.id}/${props.classCode}`;
+    const data = await request(url, 'GET', null);
+    console.log(data);
+    if (data && data.success) {
+      setSolution(data.body.keyword);
+    }
+  }
+
   function loadProps() {
     setClassCode(props.classCode);
     setHints(props.challenge.hints);
@@ -117,7 +121,9 @@ const Editor = (props) => {
     setSolution(props.challenge.solution);
     setDifficulty(props.challenge.difficulty);
     setCategory(props.challenge.category);
-    setExistingConfig(props.challenge.commands);
+    // remove all spaces and replace && with new line
+    let commands = props.challenge.commands.replace(/ && /g, '\n');
+    setExistingConfig(commands);
     setNewChallengeName(props.challenge.title);
     setAssignmentName(props.assignmentName);
     let hintPoints = [];
@@ -129,8 +135,10 @@ const Editor = (props) => {
     }
     setPenalty(hintPoints);
     setHints(hintMessage);
+    loadSolution();
   }
 
+  console.log(hints);
 
   useEffect(() => {
     setUsername(localStorage.getItem('username'));
@@ -529,9 +537,3 @@ const Editor = (props) => {
 };
 
 export default Editor;
-
-
-
-
-
-
diff --git a/src/pages/assignments/[code]/submissions/[id].jsx b/src/pages/assignments/[code]/submissions/[id].jsx
index 34ec7db8..b1e4a2b6 100644
--- a/src/pages/assignments/[code]/submissions/[id].jsx
+++ b/src/pages/assignments/[code]/submissions/[id].jsx
@@ -202,8 +202,8 @@ export default function id() {
     setRole('');
     return data.body.isStudent;
   };
-  // NEW SUBMISSION LOGIC
 
+  // NEW SUBMISSION LOGIC
   const getAssignment = async () => {
     const params = window.location.href.split('/');
     if (params.length < 5) {
diff --git a/src/pages/groups/[group]/edit-assignment/[id].jsx b/src/pages/groups/[group]/edit-assignment/[id].jsx
index 7bc37298..0f9aca81 100644
--- a/src/pages/groups/[group]/edit-assignment/[id].jsx
+++ b/src/pages/groups/[group]/edit-assignment/[id].jsx
@@ -443,12 +443,7 @@ export default function EditingAssignment() {
                 >
                   Save
                 </button>
-                      {
-                        /*
-
                 <button  className="ml-4 rounded-lg bg-blue-600 px-2 py-1 text-white hover:bg-blue-700" onClick={() => setIsEditingChallenge(true)}>Edit Challenge</button>
-                         * */
-                      }
 
                 <button
                   onClick={() => {
diff --git a/src/utils/request.js b/src/utils/request.js
index 704a727f..a431609e 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,3 +1,4 @@
+
 const request = async (url, req_method, body) => {
   try {
     //const token = getCookie();

From 896343a75ce4f71bed747b6a69b3640416fe0e87 Mon Sep 17 00:00:00 2001
From: Pranav Ramesh <laphatize@protonmail.com>
Date: Wed, 6 Mar 2024 17:19:21 -0500
Subject: [PATCH 10/12] [feat] bug fixes

---
 src/components/dashboard/QuickSetttings.jsx | 234 ++++++++++----------
 1 file changed, 118 insertions(+), 116 deletions(-)

diff --git a/src/components/dashboard/QuickSetttings.jsx b/src/components/dashboard/QuickSetttings.jsx
index 12ab491e..869aec8b 100644
--- a/src/components/dashboard/QuickSetttings.jsx
+++ b/src/components/dashboard/QuickSetttings.jsx
@@ -148,11 +148,11 @@ export function QuickSettings() {
                     CTF solves. But, it does require you to solve
                     several problems first.
                   </p>
-                  <a href="/practice/community">
+                    <div onClick={() => window.location.href = "/practice/community"}>
                     <p className='flex tracking-loose text-blue-500 mt-2 hover:underline'>
                       Let's get hacking<ArrowRightIcon className='ml-1.5 h-5 mt-0.5'/>
                     </p>
-                  </a>
+                  </div>
                 </div>
               </div>
             </div>
@@ -163,141 +163,143 @@ export function QuickSettings() {
 
       <h1 className="text-xl text-gray-300 mt-10"> SITE FEED</h1>
 
+    
       <div className="mx-auto mb-4 mt-1 w-full gap-4 gap-y-6 rounded-lg">
-        <div
-          style={{ backgroundColor: '#212121', borderColor: '#3b3a3a' }}
-          className=" mx-auto w-full rounded-lg px-4 py-2 pt-2 pb-5 text-white  "
-        >
-          <h1 className="mt-2 text-xl font-semibold text-white">
-            {' '}
-            v.1.2 Patch Notes
-          </h1>
+              <div
+                style={{ backgroundColor: '#212121', borderColor: '#3b3a3a' }}
+                className=" mx-auto w-full rounded-lg px-4 py-2 pt-2 pb-5 text-white  "
+              >
+                <h1 className="mt-2 text-xl font-semibold text-white">
+                  {' '}
+                  v.1.2 Patch Notes
+                </h1>
 
-          <p> 
-            {' '}
-            A lot of changes in this one!
-          </p>
-          <p
-            id="feed1readmore"
-            className=" mt-4 cursor-pointer italic text-blue-500 hover:text-blue-500 hover:underline"
-            onClick={() => {
-              document.getElementById('feed1rest').classList.remove('hidden');
-              document.getElementById('feed1readmore').classList.add('hidden');
-            }}
-          >
-            Read More
-          </p>
+                <p> 
+                  {' '}
+                  A lot of changes in this one!
+                </p>
+                <p
+                  id="feed1readmore"
+                  className=" mt-4 cursor-pointer italic text-blue-500 hover:text-blue-500 hover:underline"
+                  onClick={() => {
+                    document.getElementById('feed1rest').classList.remove('hidden');
+                    document.getElementById('feed1readmore').classList.add('hidden');
+                  }}
+                >
+                  Read More
+                </p>
 
-          <div id="feed1rest" className="mt-2 hidden">
+                <div id="feed1rest" className="mt-2 hidden">
 
-            <p className="mt-1">
+                  <div className="mt-1">
 
-              <span className='font-semibold text-blue-500'>  CTFGuide Education</span><br></br>
-              <div className='grid grid-cols-6 gap-x-4'>
-                <div className='col-span-4'>
-                  We're excited to introduce CTFGuide EDU, the world's first cybersecurity LMS powered by AI. We've been working on this for a while and we're super excited to finally release it. 
+                    <span className='font-semibold text-blue-500'>  CTFGuide Education</span><br></br>
+                    <div className='grid grid-cols-6 gap-x-4'>
+                      <div className='col-span-4'>
+                        We're excited to introduce CTFGuide EDU, the world's first cybersecurity LMS powered by AI. We've been working on this for a while and we're super excited to finally release it. 
 
-                  <br></br>
-                  <br></br>
+                        <br></br>
+                        <br></br>
 
-                  CTFGuide EDU allows for teachers to create custom lab environments for students. Student submissions can be played back in real-time, allowing for teachers to see exactly how a student solved a problem. Submissions are also automatically graded by our AI, allowing for teachers to focus on teaching, rather than grading.
+                        CTFGuide EDU allows for teachers to create custom lab environments for students. Student submissions can be played back in real-time, allowing for teachers to see exactly how a student solved a problem. Submissions are also automatically graded by our AI, allowing for teachers to focus on teaching, rather than grading.
 
-                </div>
-                <div className='col-span-2'>
-                  <iframe height="200" src="https://www.youtube-nocookie.com/embed/m0I__kMTziU?si=fI-qPfCgP3LAPAZ0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; auto-play;" 
-                    className="mx-auto  w-full max-w-4xl rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
-                    allowfullscreen autoplay></iframe>
+                      </div>
+                      <div className='col-span-2'>
+                        <iframe height="200" src="https://www.youtube-nocookie.com/embed/m0I__kMTziU?si=fI-qPfCgP3LAPAZ0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; auto-play;" 
+                          className="mx-auto  w-full max-w-4xl rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
+                          allowfullscreen autoplay></iframe>
+                      </div>
+                    </div>
+                    <br></br>
+                    <br></br>
+
+                    This feature required us to rework a lot of our internal API's meaning we've temporarily disabled some features. We're working on getting these features back up and running as soon as possible.
+                    <br></br>
+                    <br></br>
+                    <span className='text-yellow-500 font-semibold'>Temporarily Disabled Features:</span> <br></br>
+                    • Hints <br></br>
+                    • Terminals on challenges <br></br>
+                    • Comments <br></br>
+                    • Likes <br></br>
+                    • Create <br></br>
+                    <br></br>
+                    <span className='text-yellow-500 font-semibold'>The following features are not working and will be fixed in the next patch:</span> <br></br>
+                    • Saving Progress on Learn <br></br>
+                    • Hub feature on Practice
+                    <br></br><br></br>
+                    <span className='font-semibold text-blue-500'>  A word about Learn...</span><br></br>
+                    This entire feature is being replaced. We're partnering with The Pennsylvania State University to bring you a new and improved learning experience. We're excited to share more about this in the coming months.
+                    <br></br> <br></br>
+                  </div>
+                  <p
+                    id="feed1readless"
+                    className=" mt-4 cursor-pointer italic text-blue-500 hover:text-blue-500 hover:underline"
+                    onClick={() => {
+                      document.getElementById('feed1rest').classList.add('hidden');
+                      document
+                        .getElementById('feed1readmore')
+                        .classList.remove('hidden');
+                    }}
+                  >
+                    See Less
+                  </p>
                 </div>
               </div>
-              <br></br>
-              <br></br>
+              <Transition.Root show={open} as={Fragment}>
+                <Dialog as="div" className="relative z-10" onClose={setOpen}>
+                  <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                  >
+                    <div className="fixed inset-0 bg-black bg-opacity-75 transition-opacity" />
+                  </Transition.Child>
 
-              This feature required us to rework a lot of our internal API's meaning we've temporarily disabled some features. We're working on getting these features back up and running as soon as possible.
-              <br></br>
-              <br></br>
-              <span className='text-yellow-500 font-semibold'>Temporarily Disabled Features:</span> <br></br>
-              • Hints <br></br>
-              • Terminals on challenges <br></br>
-              • Comments <br></br>
-              • Likes <br></br>
-              • Create <br></br>
-              <br></br>
-              <span className='text-yellow-500 font-semibold'>The following features are not working and will be fixed in the next patch:</span> <br></br>
-              • Saving Progress on Learn <br></br>
-              • Hub feature on Practice
-              <br></br><br></br>
-              <span className='font-semibold text-blue-500'>  A word about Learn...</span><br></br>
-              This entire feature is being replaced. We're partnering with The Pennsylvania State University to bring you a new and improved learning experience. We're excited to share more about this in the coming months.
-              <br></br> <br></br>
-            </p>
-            <p
-              id="feed1readless"
-              className=" mt-4 cursor-pointer italic text-blue-500 hover:text-blue-500 hover:underline"
-              onClick={() => {
-                document.getElementById('feed1rest').classList.add('hidden');
-                document
-                  .getElementById('feed1readmore')
-                  .classList.remove('hidden');
-              }}
-            >
-              See Less
-            </p>
-          </div>
-        </div>
-        <Transition.Root show={open} as={Fragment}>
-          <Dialog as="div" className="relative z-10" onClose={setOpen}>
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="fixed inset-0 bg-black bg-opacity-75 transition-opacity" />
-            </Transition.Child>
+                  <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+                    <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0" >
 
-            <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
-              <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0" >
+                      <Transition.Child
+                        as={Fragment}
+                        enter="ease-out duration-300"
+                        enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enterTo="opacity-100 translate-y-0 sm:scale-100"
+                        leave="ease-in duration-200"
+                        leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                        leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                      >
 
-                <Transition.Child
-                  as={Fragment}
-                  enter="ease-out duration-300"
-                  enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                  enterTo="opacity-100 translate-y-0 sm:scale-100"
-                  leave="ease-in duration-200"
-                  leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                  leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
+                        <Dialog.Panel className="w-full max-w-6xl relative transform overflow-hidden rounded-lg shadow-lg shadow-neutral-800  bg-gradient-to-r from-neutral-900 to-black  px-4  text-left  transition-all ">
+                          <div>
 
-                  <Dialog.Panel className="w-full max-w-6xl relative transform overflow-hidden rounded-lg shadow-lg shadow-neutral-800  bg-gradient-to-r from-neutral-900 to-black  px-4  text-left  transition-all ">
-                    <div>
 
+                            <div className="mt-3  sm:mt-5 w-full">
+                              <h1 className='text-6xl mb-2 text-white text-center mt-12'>Introducing <span className="font-semibold rainbow_text_animated">CTFGuide AI</span>  </h1>
+                              <h2 className='text-2xl mb-8 text-white text-center'>The world's first <b>AI powered</b> teaching tool for cybersecurity.</h2>
+                              <iframe width="auto" height="500" src="https://www.youtube-nocookie.com/embed/m0I__kMTziU?si=fI-qPfCgP3LAPAZ0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; auto-play;" 
+                                className="mx-auto  mt-4 w-full max-w-4xl rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
+                                allowfullscreen autoplay></iframe>
 
-                      <div className="mt-3  sm:mt-5 w-full">
-                        <h1 className='text-6xl mb-2 text-white text-center mt-12'>Introducing <span className="font-semibold rainbow_text_animated">CTFGuide AI</span>  </h1>
-                        <h2 className='text-2xl mb-8 text-white text-center'>The world's first <b>AI powered</b> teaching tool for cybersecurity.</h2>
-                        <iframe width="auto" height="500" src="https://www.youtube-nocookie.com/embed/m0I__kMTziU?si=fI-qPfCgP3LAPAZ0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; auto-play;" 
-                          className="mx-auto  mt-4 w-full max-w-4xl rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
-                          allowfullscreen autoplay></iframe>
 
+                            </div>
+                            <div className='text-center mt-10 mb-10'>
+                              <a href="../groups" className='text-xl px-4 py-2 text-center cursor-pointer font-semibold bg-blue-800 hover:bg-blue-800/50 rounded-lg text-white w-40'>Try the Demo</a>
+                              <a onClick={() => { setOpen(false) }} className='ml-4 text-xl cursor-pointer text-center  px-4  py-2 text-white w-40' >Maybe later...</a>
 
-                      </div>
-                      <div className='text-center mt-10 mb-10'>
-                        <a href="../groups" className='text-xl px-4 py-2 text-center cursor-pointer font-semibold bg-blue-800 hover:bg-blue-800/50 rounded-lg text-white w-40'>Try the Demo</a>
-                        <a onClick={() => { setOpen(false) }} className='ml-4 text-xl cursor-pointer text-center  px-4  py-2 text-white w-40' >Maybe later...</a>
+                            </div>
+                          </div>
 
-                      </div>
+                        </Dialog.Panel>
+                      </Transition.Child>
                     </div>
-
-                  </Dialog.Panel>
-                </Transition.Child>
-              </div>
+                  </div>
+                </Dialog>
+              </Transition.Root>
             </div>
-          </Dialog>
-        </Transition.Root>
-      </div>
+  
 
     </>
   );

From ff991fd1cd8f071504d0221e73b8df903e1fd9ab Mon Sep 17 00:00:00 2001
From: Stephen Stefanatos <stephenstef456@gmail.com>
Date: Fri, 8 Mar 2024 01:24:38 -0500
Subject: [PATCH 11/12] GP challenge flag submission

---
 src/pages/assignments/student/[code].jsx |  3 ---
 src/pages/assignments/teacher/[code].jsx |  1 -
 src/pages/challenges/[id].jsx            | 32 ++++++------------------
 3 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/src/pages/assignments/student/[code].jsx b/src/pages/assignments/student/[code].jsx
index 2716220d..84b2b82d 100644
--- a/src/pages/assignments/student/[code].jsx
+++ b/src/pages/assignments/student/[code].jsx
@@ -13,7 +13,6 @@ import { Fragment } from 'react';
 import { getAuth } from 'firebase/auth';
 import api from '@/utils/terminal-api';
 const auth = getAuth();
-// import socket client
 import io from 'socket.io-client';
 import request from '@/utils/request';
 
@@ -75,8 +74,6 @@ export default function Slug() {
     });
   }
 
-  // console.log(assignment);
-
   const parseDate = (dateString) => {
     const date = new Date(dateString);
     const offsetInMinutes = date.getTimezoneOffset();
diff --git a/src/pages/assignments/teacher/[code].jsx b/src/pages/assignments/teacher/[code].jsx
index 4f3f99bd..9bbd5e05 100644
--- a/src/pages/assignments/teacher/[code].jsx
+++ b/src/pages/assignments/teacher/[code].jsx
@@ -115,7 +115,6 @@ export default function id() {
     }
   };
 
-  console.log('Assignment:', assignment);
   const getSubmissions = async (assignment) => {
     const url = `${baseUrl}/submission/getSubmissionsForTeachers/${assignment.classroom.id}/${assignment.id}`;
     const data = await request(url, 'GET', null);
diff --git a/src/pages/challenges/[id].jsx b/src/pages/challenges/[id].jsx
index b553533b..98154330 100644
--- a/src/pages/challenges/[id].jsx
+++ b/src/pages/challenges/[id].jsx
@@ -262,26 +262,13 @@
         }, 2000);
       } else {
         try {
-          const endPoint =
-            process.env.NEXT_PUBLIC_API_URL +
-            '/challenges/' +
-            id +
-            '/submissions';
-          const requestOptions = {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            credentials: 'include',
-            body: JSON.stringify({
-              keyword: flag,
-            }),
-          };
-          const response = await fetch(endPoint, requestOptions);
-          console.log(await response.json());
-          const { success, incorrect, error } = await response.json();
-
-
+          const endPoint = process.env.NEXT_PUBLIC_API_URL +'/challenges/' + id + '/submissions';
+          const response = await request(endPoint, "POST", { keyword: flag });
+          if(!response) {
+            console.log('Error occured while submitting the flag');
+            return;
+          }
+          const { success, incorrect, error } = response;
           if (error) {
             document.getElementById('enterFlagBTN').innerHTML = 'Submit Flag';
             setSubmissionMsg('error');
@@ -297,10 +284,7 @@
             if (!alreadySolved) {
               try {
                 const endPoint =
-                  process.env.NEXT_PUBLIC_API_URL +
-                  '/users/' +
-                  localStorage.getItem('username') +
-                  '/complete-challenge/' +
+                  process.env.NEXT_PUBLIC_API_URL + '/users/' + localStorage.getItem('username') +'/complete-challenge/' +
                   id +
                   '/' +
                   difficulty;

From 9fe621588c7b488edc5d80ecef6ede6a0c97cb5c Mon Sep 17 00:00:00 2001
From: Pranav Ramesh <laphatize@protonmail.com>
Date: Fri, 8 Mar 2024 09:21:17 -0500
Subject: [PATCH 12/12] [feat] change pfp from settings

---
 src/pages/settings.jsx | 369 +++++++++++++++++++++++++++++------------
 1 file changed, 267 insertions(+), 102 deletions(-)

diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index 5fab676d..06928a08 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -3,8 +3,11 @@ import { Footer } from '@/components/Footer';
 import { StandardNav } from '@/components/StandardNav';
 import { useEffect } from 'react';
 import { useState } from 'react';
-import { getStorage, ref, uploadBytes, getDownloadURL } from 'firebase/storage';
+import { getStorage, ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';
 import { getCookie } from '@/utils/request';
+import { Transition, Dialog } from '@headlessui/react';
+import { Fragment } from 'react';
+import request from "@/utils/request";
 
 import {
   updatePassword,
@@ -32,6 +35,14 @@ export default function Dashboard() {
   const [security, setSecurity] = useState(false);
   const [preferences, setPreferences] = useState(false);
   const [billing, setbilling] = useState(false);
+  const [username, setUsername] = useState('');
+
+
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [pfp, setPfp] = useState(`https://robohash.org/KshitijIsCool.png?set=set1&size=150x150`);
+
+
 
   var pfpString = '';
   var pfpChanged = false;
@@ -39,8 +50,127 @@ export default function Dashboard() {
   const auth = getAuth();
   const user = auth.currentUser;
 
+  const handlePopupOpen = () => {
+    setIsPopupOpen(true);
+}
+
+
+const handlePopupClose = () => {
+    setIsPopupOpen(false);
+}
+  const handleImageChange = (event) => {
+    const file = event.target.files[0];
+    setSelectedImage(file);
+}
+
+
+const handleSaveChanges = async () => {
+    if (!selectedImage) {
+        console.log("No image selected");
+        setIsPopupOpen(false)
+        return;
+    }
+
+
+    // upload to firebase storage
+    try {
+        const storage = getStorage();
+        const metadata = {
+            contentType: 'image/jpeg',
+        };
+
+
+        const storageRef = ref(storage, `${email}/pictures/pfp`);
+        const uploadTask = uploadBytesResumable(storageRef, selectedImage, metadata)
+
+
+        uploadTask.on('state_changed',
+            (snapshot) => {
+                // progress function
+                const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
+                console.log('Upload is ' + progress + '% done');
+                switch (snapshot.state) {
+                    case 'paused':
+                        console.log('Upload is paused');
+                        break;
+                    case 'running':
+                        console.log('Upload is running');
+                        break;
+                }
+            },
+            (error) => {
+                switch (error.code) {
+                    case 'storage/unauthorized':
+                        console.log('User does not have permission to access the object');
+                        break;
+                    case 'storage/canceled':
+                        console.log('User canceled the upload');
+                        break;
+                    case 'storage/unknown':
+                        console.log('Unknown error occurred, inspect error.serverResponse');
+                        break;
+                }
+            },
+            async () => {
+                const imageUrl = await getDownloadURL(uploadTask.snapshot.ref)
+                console.log(imageUrl)
+                console.log(user);
+                const endPoint = process.env.NEXT_PUBLIC_API_URL + '/users/' + username + '/updatePfp';
+                const body = { imageUrl }
+                const response = await request(endPoint, "POST", body);
+                console.log("Here is the result: ", response)
+                if (response.success) {
+                    console.log("profile picture uploaded successfully");
+                } else {
+                    console.log("Failed to upload profile picture");
+                }
+                window.location.reload();
+
+            }
+        );
+        setIsPopupOpen(false);
+
+
+    } catch (err) {
+        console.log(err);
+        console.log("An error occured while uploading profile picture");
+    }
+}
+
+const handleClick = () => {
+
+}
+
+
   useEffect(() => {
     const fileInput = document.getElementById('fileInput');
+
+    // set username
+    var xhr = new XMLHttpRequest();
+
+    xhr.addEventListener('readystatechange', function () {
+      if (this.readyState === 4) {
+        console.log(this.responseText);
+        try {
+          if (document.getElementById('first-name')) {
+        
+            setUsername(JSON.parse(this.responseText).username);
+          }
+
+          
+
+       
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    });
+
+    xhr.open('GET', `${process.env.NEXT_PUBLIC_API_URL}/account`);
+    let token = getCookie();
+    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
+    xhr.withCredentials = true;
+    xhr.send();
   }, []);
 
   function pfpChange() {
@@ -109,18 +239,11 @@ export default function Dashboard() {
 
             if (pfpString == '') {
             } else {
-              document.getElementById('pfp').src = pfpString;
+            //  document.getElementById('pfp').src = pfpString;
             }
+            
 
-            if (JSON.parse(this.responseText).profileImage == '') {
-              document.getElementById('pfp').src = `https://robohash.org/${
-                document.getElementById('username').value
-              }.png?set=set1&size=150x150`;
-            } else {
-              document.getElementById('pfp').src = JSON.parse(
-                this.responseText
-              ).profileImage;
-            }
+          
           } catch (e) {
             console.log(e);
           }
@@ -230,77 +353,6 @@ export default function Dashboard() {
   function saveGeneral() {
     document.getElementById('save').innerHTML = 'Saving...';
 
-    if (pfpChanged) {
-      var xhr = new XMLHttpRequest();
-      xhr.addEventListener('readystatechange', function () {
-        if (this.readyState === 4) {
-          const file = document.getElementById('fileInput').files[0];
-          const storage = getStorage();
-          const storageRef = ref(
-            storage,
-            JSON.parse(this.responseText).email + '/pictures/' + 'pfp'
-          );
-
-          uploadBytes(storageRef, file).then((snapshot) => {
-            getDownloadURL(snapshot.ref).then((downloadURL) => {
-              document.getElementById('pfp').src = downloadURL;
-              console.log(downloadURL);
-
-              var firstName = document.getElementById('first-name').value;
-              var lastName = document.getElementById('last-name').value;
-              var bio = document.getElementById('bio').value;
-              var github = document.getElementById('url').value;
-              var location = document.getElementById('location').value;
-
-              var data = {};
-              if (bio !== '') {
-                data.bio = bio;
-              }
-              if (github !== '') {
-                data.githubUrl = github;
-              }
-              if (firstName !== '') {
-                data.firstName = firstName;
-              }
-              if (lastName !== '') {
-                data.lastName = lastName;
-              }
-              if (location !== '') {
-                data.location = location;
-              }
-              if (downloadURL !== '') {
-                data.profileImage = downloadURL;
-              }
-
-              var gooddata = JSON.stringify(data);
-
-              var xhr = new XMLHttpRequest();
-
-              xhr.addEventListener('readystatechange', function () {
-                if (this.readyState === 4) {
-                  console.log(this.responseText);
-                  document.getElementById('save').innerHTML = 'Save';
-                }
-              });
-
-              xhr.open('PUT', `${process.env.NEXT_PUBLIC_API_URL}/account`);
-              xhr.setRequestHeader('Content-Type', 'application/json');
-              let token = getCookie();
-              xhr.setRequestHeader('Authorization', 'Bearer ' + token);
-              xhr.withCredentials = true;
-
-              xhr.send(gooddata);
-            });
-          });
-        }
-      });
-
-      xhr.open('GET', `${process.env.NEXT_PUBLIC_API_URL}/account`);
-      let token = getCookie();
-      xhr.setRequestHeader('Authorization', 'Bearer ' + token);
-      xhr.withCredentials = true;
-      xhr.send();
-    } else {
       var firstName = document.getElementById('first-name').value;
       var lastName = document.getElementById('last-name').value;
       var bio = document.getElementById('bio').value;
@@ -330,7 +382,7 @@ export default function Dashboard() {
       xhr.setRequestHeader('Authorization', 'Bearer ' + token);
       xhr.withCredentials = true;
       xhr.send(data);
-    }
+    
   }
 
   function savePreferences() {
@@ -552,37 +604,34 @@ export default function Dashboard() {
                       </div>
                     </div>
 
-                    <div className="blur-sm sm:col-span-6 ">
+                    <div className=" sm:col-span-6 ">
                       <label
                         htmlFor="photo"
                         className="block flex text-sm font-medium leading-6 text-white"
                       >
-                        Photo (Experimental)
+                        Profile Picture
                       </label>
                       <div className="mt-2 flex items-center">
                         <img
                           className="inline-block h-12 w-12 rounded-full"
                           id="pfp"
-                          src=""
+                          src={
+                            pfp
+                          }
                           alt="photo"
                         />
-                        <div className="relative ml-4">
                           <input
-                            onChange={pfpChange}
-                            id="fileInput"
-                            name="user-photo"
-                            type="file"
-                            className="peer absolute inset-0 h-full w-full rounded-md opacity-0"
-                            disabled
-                          />
-                          <label
-                            htmlFor="user-photo"
-                            className="bg-neutral cursor:pointer pointer-events-none block rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-slate-300 peer-hover:bg-neutral-800 peer-focus:ring-2 peer-focus:ring-blue-600"
-                          >
-                            <span>Change</span>
-                            <span className="sr-only"> user photo</span>
-                          </label>
-                        </div>
+                                                        className="hidden"
+                                                        type="file"
+                                                        id="profileImageInput"
+                                                        onChange={handleImageChange}
+                                                        accept="image/*"
+                                                    />
+
+                        <button onClick={() => handlePopupOpen()} className="ml-4 bg-neutral cursor:pointer  block rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-slate-300 hover:bg-neutral-800 peer-focus:ring-2 peer-focus:ring-blue-600">
+                          Change
+                        </button>
+                      
                       </div>
                     </div>
 
@@ -1008,6 +1057,122 @@ export default function Dashboard() {
                     </div>
                   </div>
 
+ {/* PROFILE PICTURE POP-UP */}
+
+          <Transition.Root show={isPopupOpen} as={Fragment}>
+            <Dialog as="div" className="fixed z-10 inset-0 overflow-y-auto" onClose={() => handlePopupClose()}>
+
+
+                            <Transition.Child
+                                as={Fragment}
+                                enter="ease-out duration-300"
+                                enterFrom="opacity-0"
+                                enterTo="opacity-100"
+                                leave="ease-in duration-200"
+                                leaveFrom="opacity-100"
+                                leaveTo="opacity-0"
+                            >
+                                <div onClick={() => {
+                                    handlePopupClose()
+                                    localStorage.setItem("22-18-update", false)
+                                }}
+                                    className="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity" />
+                            </Transition.Child>
+                            <div className="flex items-end justify-center min-h-screen pt-4 px-4 text-center sm:block sm:p-0">
+                                <Transition.Child
+                                    as={Fragment}
+                                    enter="ease-out duration-300"
+                                    enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                                    enterTo="opacity-100 translate-y-0 sm:scale-100"
+                                    leave="ease-in duration-200"
+                                    leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                                    leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                                >
+                                    <div style={{ fontFamily: 'Poppins, sans-serif', backgroundColor: "#161716" }} className="max-w-6xl relative inline-block align-bottom w-5/6 pb-10 pt-10 bg-gray-900 border border-gray-700 rounded-lg px-20 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle ">
+                                        <div>
+                                            <div className="mt-3 sm:mt-5">
+                                                <h1 className="text-white text-4xl text-center pb-10">Change Profile Picture</h1>
+                                                <div className="grid grid-cols-2 flex justify-center items-center">
+                                                    <div className="mx-20 h-80 w-80 flex items-center justify-center">
+                                                        <div className="mx-10">
+                                                            <img
+                                                                className="h-48 w-48 border border-neutral-800 rounded-full sm:h-48 sm:w-48"
+                                                                src={pfp}
+                                                                alt=""
+                                                            />
+                                                            <h1 className="text-white text-xl text-center font-bold -mx-6 mt-7">
+                                                                Current Profile Picture
+                                                            </h1>
+                                                        </div>
+                                                    </div>
+                                                    {/* INPUT BOX */}
+                                                    <div
+                                                        className="h-72 w-80 border border-neutral-800 mx-20 relative rounded-lg p-4 text-center cursor-pointer flex items-center justify-center"
+                                                        onClick={handleClick}
+                                                        onDrop={handleImageChange}
+                                                        onDragOver={handleImageChange}
+                                                    >
+                                                        <label htmlFor="profileImageInput">
+                                                            {selectedImage ? (
+                                                                <div>
+                                                                    <img
+                                                                        src={URL.createObjectURL(selectedImage)}
+                                                                        alt="Selected Profile Picture"
+                                                                        className="mx-auto h-48 w-48 object-cover rounded-full"
+                                                                    />
+                                                                    <h1 className="text-white text-xl text-center font-bold -mx-6 mt-7">
+                                                                        New Profile Picture
+                                                                    </h1>
+                                                                </div>
+                                                            ) : (
+                                                                <div className="">
+                                                                    <svg
+                                                                        className="mx-auto h-12 w-12 text-gray-400"
+                                                                        fill="none"
+                                                                        stroke="currentColor"
+                                                                        viewBox="0 0 24 24"
+                                                                    >
+                                                                        <path
+                                                                            strokeLinecap="round"
+                                                                            strokeLinejoin="round"
+                                                                            strokeWidth="2"
+                                                                            d="M12 4v16m8-8H4"
+                                                                        />
+                                                                    </svg>
+                                                                    <p className="mt-5 text-sm text-gray-600">Click here or Drag an Image!</p>
+                                                                </div>
+                                                            )}
+                                                        </label>
+                                                    </div>
+                                                    <input
+                                                        className="hidden"
+                                                        type="file"
+                                                        id="profileImageInput"
+                                                        onChange={handleImageChange}
+                                                        accept="image/*"
+                                                    />
+                                                </div>
+                                                <div className="grid grid-cols-2 pt-5">
+                                                    <div className="flex items-center justify-end">
+                                                        <button className="border border-neutral-700 mx-3 rounded-md w-20 text-white py-2 bg-neutral-800 hover:text-neutral-500"
+                                                            onClick={() => handlePopupClose()}>Close
+                                                        </button>
+                                                    </div>
+                                                    <div className="flex items-center justify-start">
+                                                        <button className="border border-neutral-700 mx-3 rounded-md w-20 text-white py-2 bg-green-900 hover:text-neutral-500"
+                                                            onClick={() => handleSaveChanges()}>Save
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </Transition.Child>
+                            </div>
+                        </Dialog>
+                    </Transition.Root>
+                
+
                   <div className="flex justify-end gap-x-3 pt-8">
                     <button
                       id="save"