Frontend code commenting

threat-total/src/components/cookieDisclosure.js

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 function CookieDisclosure () {
     const { t } = useTranslation();
 
+    // Hide the cookie disclosure if the cookiesEnabled cookie is present
     useEffect(() => {
         if (localStorage.getItem("cookiesEnabled") !== "true") {
             console.log("True")

threat-total/src/components/source.js

@@ -3,29 +3,16 @@ import { useTranslation } from 'react-i18next';
 import i18next from '../i18next';
 
 export default function Source(props) {
-
-    //i18next.init({ resources: {} });
-    //i18next.addResourceBundle('en', 'sourceEn', translationData.en);
-    //i18next.addResourceBundle('no', 'sourceNo', translationData.no);
-    
     // Add the translation data from the backend
     if (props.Data !== "") {
     const norsk = props.Data.no
     const english = props.Data.en
     i18next.addResources('en', 'translation', english);
     i18next.addResources('no', 'translation', norsk);
-    //i18next.addResource('en', 'translation2', 'status', 'status2', {})
-    //console.log ("english: ", english)
-    //i18next.addResources({ lng:'no', ns : 'default', any: norsk });
-    //console.log("English source x: ", english)
-    //console.log( i18next.getDataByLanguage('en'))
-    //console.log( i18next.getResource('en', 'translation', 'status'))
-    //console.log( i18next.getResource('no', 'translation', 'status'))
     }
 
     const { t } = useTranslation();
     // If the input is empty return an empty box
-    // add a loading animation?
 if (props.Data === "") {
     return(
         <div className='bg-white border-2 m-2 border-gray-400 rounded-lg p-1 text-left'>

threat-total/src/pages/about.js

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 function About() {
 
+// The consts are used for the open / close functionality of the menus
 const { t } = useTranslation();
 
 const [q1, setQ1] = useState(false);

threat-total/src/pages/homepage.js

@@ -6,6 +6,7 @@ import ntnuLogo from '../img/ntnuLogoUtenSlagOrd.svg';
 import CookieDisclosure from '../components/cookieDisclosure';
 import { useTranslation } from 'react-i18next';
 
+// Search function which redirects the user to the result page with a search parameter
 function search(e){
     e.preventDefault();
     var formData = new FormData(e.target.form);
@@ -24,15 +25,13 @@ function search(e){
     }
 }
 
-// Possibly cleaner to use an svg image for the headline text
-// consider renaming the file? our main function file probably shouldn't contain "test"
-
 function Homepage() {
     const { t } = useTranslation();
     const queryParams = new URLSearchParams(window.location.search);
     const code = queryParams.get('code');
 
-    // Put this on a seperate page with a redirect on completion of the request?
+    // Function which handles logging in, if a code parameter is present it is used with a request
+    // to get a proper authenticaion cookie.
     useEffect(() => {
         if (code != null) {
             fetch('http://localhost:8081/login?code=' + code, {

threat-total/src/pages/login.js

@@ -5,9 +5,10 @@ import SubNavbar from '../components/subNavbar'
 import { useTranslation } from 'react-i18next';
 import ntnuLogo from '../img/ntnuLogoUtenSlagOrd.svg';
 
+// Function for logging out the user
 function logoutRequest(){
+    // Get and remove the local  authentication key
     const userAuth = localStorage.getItem('userAuth');
-
     localStorage.removeItem('userAuth')
     console.log("logging out")
     fetch(process.env.REACT_APP_BACKEND_URL+'/login?userAuth=' + userAuth, {
@@ -16,6 +17,7 @@ function logoutRequest(){
                     Accept: 'application/json',
                     'Content-Type': 'application/json'
                 }
+            // Redirect to the logout page at Feide
             }).then((response) => response.json())
             .then((json) => {
                 console.log(json, json.hash)
@@ -31,6 +33,7 @@ function Login(){
     const { t } = useTranslation();
     const [isLoggedIn, setIsLoggedIn] = useState(false);
 
+    // Change the display of the component if the user is logged in
     useEffect(() => {
         if (localStorage.getItem('userAuth') != null) {
             setIsLoggedIn(true)

threat-total/src/pages/logout.js

@@ -32,8 +32,7 @@ const Logout = () => {
                     response_type=code&
                     redirect_uri=http://localhost:3000&
                     scope=openid&
-                    state=whatever&
-                    secret=198cb677-d113-446c-807e-8d9ad81ab8e0">
+                    state=whatever">
             <button className='bg-blue-400 border-2 rounded-lg p-2'>{t("loginButton")}</button>
             </a>
         </div>

threat-total/src/pages/result.js

@@ -20,6 +20,7 @@ function Result() {
     const userAuth = localStorage.getItem('userAuth')
     const [ScreenshotProvided, setScreenshotProvided] = useState(false)
     
+    // Perform api request to the backend
     useEffect(() => {
         if (userAuth != null) {
             if (hash != null) {
@@ -107,7 +108,7 @@ function Result() {
         }
     }, [file, hash, url, userAuth]);
 
-    console.log(JsonData)
+    // Add the translation data if the backend request gave data
     if (JsonData !== undefined){
         i18next.addResources('en', 'translation', JsonData.EN);
         i18next.addResources('no', 'translation', JsonData.NO);
@@ -161,6 +162,7 @@ function Result() {
         );
 }
 
+// Function which escalates a request to manual analysis by sending an api request to the backend.
 function EscalateAnalysis(url, userAuth, filehash){
 
     fetch(process.env.REACT_APP_BACKEND_URL+'/escalate?url=' + url +"&result=" + window.location.href + "&userAuth=" + userAuth + "&hash=" + filehash, {