🔒 Improve security of frontend by migrating to cookies - Part of #42

MeetPlan · Aug 27, 2022 · d1279ba · d1279ba
1 parent d482629
commit d1279ba
Show file tree

Hide file tree

Showing 32 changed files with 195 additions and 145 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,11 +41,13 @@
     "@tauri-apps/api": "^1.0.1",
     "@tauri-apps/cli": "^1.0.5",
     "@tsconfig/svelte": "^3.0.0",
+    "@types/js-cookie": "^3.0.2",
     "@types/marked": "^4.0.3",
     "apexcharts": "^3.35.3",
     "date-fns": "^2.28.0",
     "insane": "^2.6.2",
     "is-mobile": "^3.1.1",
+    "js-cookie": "^3.0.1",
     "jwt-decode": "^3.1.2",
     "marked": "^4.0.17",
     "rollup": "^2.75.7",

diff --git a/src/AbsenceManagement.svelte b/src/AbsenceManagement.svelte
@@ -14,11 +14,12 @@
 
     import SegmentedButton, {Segment} from "@smui/segmented-button";
     import { Label } from '@smui/common';
+    import Cookies from "js-cookie";
 
     let absences = [];
 
     function getStudents() {
-        fetch(`${baseurl}/meeting/get/${meetingId}/absences`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+        fetch(`${baseurl}/meeting/get/${meetingId}/absences`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
             .then((response) => response.json())
             .then((r) => absences = r["data"])
     }
@@ -57,7 +58,7 @@
                             let formData = new FormData();
                             formData.append("absence_type", segment)
 
-                            fetch(`${baseurl}/meeting/absence/${item.ID}`, {method: "PATCH", body: formData, headers: {"Authorization": "Bearer " + localStorage.getItem("key")}}).then((response) => {
+                            fetch(`${baseurl}/meeting/absence/${item.ID}`, {method: "PATCH", body: formData, headers: {"Authorization": "Bearer " + Cookies.get("key")}}).then((response) => {
                                 return response.json()
                             }).then((response) => {
                                 console.log(response);

diff --git a/src/Admin/Users.svelte b/src/Admin/Users.svelte
@@ -18,7 +18,7 @@
     function loadThings() {
         loaded = false;
 
-        fetch(`${baseurl}/users/get`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+        fetch(`${baseurl}/users/get`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
             .then((response) => response.json())
             .then((json) => {
                     items = json["data"];
@@ -38,13 +38,12 @@
 
 
     import { navigate } from "svelte-navigator";
+    import Cookies from "js-cookie";
 
-    const token = localStorage.getItem("key");
+    const token = Cookies.get("key");
     if (token === null || token === undefined) {
         navigate("/login");
     }
-
-
 </script>
 
 <DataTable table$aria-label="User list" style="width: 100%;">
@@ -77,7 +76,7 @@
                         principalId = undefined;
 
                         fetch(`${baseurl}/user/role/update/${item["ID"]}`, {
-                            headers: {"Authorization": "Bearer " + localStorage.getItem("key")},
+                            headers: {"Authorization": "Bearer " + Cookies.get("key")},
                             body: fd,
                             method: "PATCH"
                         })
@@ -105,7 +104,7 @@
                 {#if sessionStorage.getItem("email") !== item["Email"]}
                     <IconButton class="material-icons" on:click={(e) => {
                         e.stopPropagation();
-                        fetch(`${baseurl}/user/get/password_reset/${item["ID"]}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+                        fetch(`${baseurl}/user/get/password_reset/${item["ID"]}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
                             .then((response) => response.blob())
                             .then((blob) => saveBlob(blob))
                             .catch((err) => {
@@ -119,7 +118,7 @@
                     <IconButton class="material-icons" on:click={(e) => {
                         e.stopPropagation();
                         fetch(`${baseurl}/user/delete/${item["ID"]}`, {
-                            headers: {"Authorization": "Bearer " + localStorage.getItem("key")},
+                            headers: {"Authorization": "Bearer " + Cookies.get("key")},
                             method: "DELETE"
                         })
                             .then((response) => response.json())

diff --git a/src/Class.svelte b/src/Class.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import List, {Item, Text as TextList, Meta, Graphic, PrimaryText, SecondaryText} from "@smui/list";
+    import List, {Item, Text as TextList, Meta, PrimaryText} from "@smui/list";
     import IconButton from "@smui/icon-button";
 
     import Avatar from "svelte-avatar";
@@ -9,10 +9,11 @@
     import Textfield from "@smui/textfield";
     import HelperText from '@smui/textfield/helper-text';
     import {navigate} from "svelte-navigator";
+    import Cookies from "js-cookie";
 
 
 
-    const token = localStorage.getItem("key");
+    const token = Cookies.get("key");
     if (token === null || token === undefined) {
         navigate("/login");
     }
@@ -43,7 +44,7 @@
 
 
     async function getClass() {
-        let response = await fetch(`${baseurl}/class/get/${id}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+        let response = await fetch(`${baseurl}/class/get/${id}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
         let r = await response.json();
         students = r["data"];
         classYear = students["ClassYear"];
@@ -54,13 +55,13 @@
     }
 
     function assignToClass(cid: string) {
-        fetch(`${baseurl}/class/get/${id}/add_user/${cid}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}, method: "PATCH"})
+        fetch(`${baseurl}/class/get/${id}/add_user/${cid}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}, method: "PATCH"})
             .then((response) => response.json())
             .then((r) => getClass());
     }
 
     function deleteFromClass(cid: string) {
-        fetch(`${baseurl}/class/get/${id}/remove_user/${cid}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}, method: "DELETE"})
+        fetch(`${baseurl}/class/get/${id}/remove_user/${cid}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}, method: "DELETE"})
             .then((response) => response.json())
             .then((r) => getClass());
     }
@@ -71,7 +72,7 @@
         fd.append("sok", sok.toString());
         fd.append("eok", eok.toString())
         fd.append("last_date", ((new Date(lastDate)).valueOf() / 1000).toString())
-        fetch(`${baseurl}/class/get/${id}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}, method: "PATCH", body: fd})
+        fetch(`${baseurl}/class/get/${id}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}, method: "PATCH", body: fd})
             .then((response) => response.json())
             .then((r) => getClass());
     }

diff --git a/src/ClassUser.svelte b/src/ClassUser.svelte
@@ -21,6 +21,7 @@
         Meta,
     } from '@smui/list';
     import insane from "insane";
+    import Cookies from "js-cookie";
 
 
     let grades;
@@ -51,7 +52,7 @@
     let printTemplate = false;
 
     function getUserData() {
-        fetch(`${baseurl}/user/get/data/${studentId}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+        fetch(`${baseurl}/user/get/data/${studentId}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
             .then((r) => r.json())
             .then((r) => {
                 userData = r["data"];
@@ -60,15 +61,15 @@
     }
 
     function getImprovements() {
-        fetch(`${baseurl}/user/get/improvements?studentId=${studentId}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+        fetch(`${baseurl}/user/get/improvements?studentId=${studentId}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
             .then((r) => r.json())
             .then((r) => {
                 improvements = r.data;
             });
     }
 
     function getAbsences() {
-        fetch(`${baseurl}/user/get/absences/${studentId}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+        fetch(`${baseurl}/user/get/absences/${studentId}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
             .then((r) => r.json())
             .then((r) => {
                 absences = r["data"];
@@ -82,23 +83,23 @@
     }
 
     function getUserGradings() {
-        fetch(`${baseurl}/my/gradings?studentId=${studentId}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+        fetch(`${baseurl}/my/gradings?studentId=${studentId}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
             .then((r) => r.json())
             .then((r) => {
                 gradings = r["data"];
             });
     }
 
     function getHomework() {
-        fetch(`${baseurl}/user/get/homework/${studentId}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+        fetch(`${baseurl}/user/get/homework/${studentId}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
             .then((r) => r.json())
             .then((r) => {
                 homework = r["data"];
             });
     }
 
     function getGrades() {
-        fetch(`${baseurl}/my/grades?studentId=${studentId}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+        fetch(`${baseurl}/my/grades?studentId=${studentId}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
             .then((r) => r.json())
             .then((r) => {
                 if (r.data !== "Forbidden") {
@@ -109,7 +110,7 @@
 
     function getParentConfig() {
         if (sessionStorage.getItem("role") === "parent") {
-            fetch(`${baseurl}/parents/get/config`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+            fetch(`${baseurl}/parents/get/config`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
                 .then((r) => r.json())
                 .then((r) => {
                     let data = r["data"];
@@ -148,7 +149,7 @@
         "#64DD17"
     ];
 
-    const token = localStorage.getItem("key");
+    const token = Cookies.get("key");
     if (token === null || token === undefined) {
         navigate("/login");
     }
@@ -170,7 +171,7 @@
 {/if}
 {#if sessionStorage.getItem("role") === "admin" || sessionStorage.getItem("role") === "principal" || sessionStorage.getItem("role") === "principal assistant" || sessionStorage.getItem("role") === "school psychologist"}
     <Button on:click={() => {
-        fetch(`${baseurl}/user/get/certificate_of_schooling/${studentId}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+        fetch(`${baseurl}/user/get/certificate_of_schooling/${studentId}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
             .then((response) => response.blob())
             .then((blob) => saveBlob(blob))
         .catch((err) => {
@@ -238,7 +239,7 @@
             setTimeout(() => {
                 let fd = new FormData();
                 fd.append("is_passing", isPassing.toString());
-                fetch(`${baseurl}/user/get/data/${studentId}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}, method: "PATCH", body: fd})
+                fetch(`${baseurl}/user/get/data/${studentId}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}, method: "PATCH", body: fd})
                     .then((response) => response.json())
                     .then((r) => getUserData());
             }, 200);
@@ -252,7 +253,7 @@
     </FormField>
     <p/>
     <Button on:click={() => {
-        fetch(`${baseurl}/user/get/ending_certificate/${studentId}?useDocument=${printTemplate.toString()}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+        fetch(`${baseurl}/user/get/ending_certificate/${studentId}?useDocument=${printTemplate.toString()}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
             .then((response) => response.blob())
             .then((blob) => saveBlob(blob))
             .catch((err) => {
@@ -286,7 +287,7 @@
                             <Meta>
                                 <IconButton class="material-icons" style="color: {item['IsExcused'] ? 'green' : 'red'};" on:click={() => {
                                     if (sessionStorage.getItem("role") === "teacher" || sessionStorage.getItem("role") === "admin") {
-                                        fetch(`${baseurl}/user/get/absences/${studentId}/excuse/${item["ID"]}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}, method: "PATCH"})
+                                        fetch(`${baseurl}/user/get/absences/${studentId}/excuse/${item["ID"]}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}, method: "PATCH"})
                                             .then((r) => r.json())
                                             .then((r) => {
                                                 getAbsences();

diff --git a/src/Classes.svelte b/src/Classes.svelte
@@ -15,21 +15,18 @@
 
     import { navigate } from "svelte-navigator";
     import {baseurl} from "./constants";
+    import Cookies from "js-cookie";
 
-
-
-    const token = localStorage.getItem("key");
+    const token = Cookies.get("key");
     if (token === null || token === undefined) {
         navigate("/login");
     }
 
-
-
     let items = [];
     let teachers = [];
 
     function loadThings() {
-        fetch(`${baseurl}/classes/get`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+        fetch(`${baseurl}/classes/get`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
             .then((response) => response.json())
             .then((json) => {
                     items = json["data"];
@@ -38,7 +35,7 @@
     }
 
     function getTeachers() {
-        fetch(`${baseurl}/teachers/get`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
+        fetch(`${baseurl}/teachers/get`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}})
             .then((response) => response.json())
             .then((json) => {
                     teachers = json["data"];
@@ -58,7 +55,7 @@
         fd.append("teacher_id", teacherId);
         fd.append("name", nclass);
         fd.append("class_year", classYear);
-        fetch(`${baseurl}/class/new`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}, method: "POST", body: fd})
+        fetch(`${baseurl}/class/new`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}, method: "POST", body: fd})
             .then((response) => response.json())
             .then((json) => {
                     loadThings();
@@ -67,7 +64,7 @@
     }
 
     function deleteClass(cid: number) {
-        fetch(`${baseurl}/class/get/${cid}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}, method: "DELETE"})
+        fetch(`${baseurl}/class/get/${cid}`, {headers: {"Authorization": "Bearer " + Cookies.get("key")}, method: "DELETE"})
             .then((response) => response.json())
             .then((json) => {
                     loadThings();
@@ -80,7 +77,7 @@
     <Textfield label="Nov razred" bind:value={nclass}>
         <HelperText slot="helper">Vpišite prosimo ime novega razreda</HelperText>
     </Textfield>
-    <Textfield label="Šolsko leto" bind:value={classYear} style="width: 100%;" on:change={() => patchClass()}>
+    <Textfield label="Šolsko leto" bind:value={classYear} style="width: 100%;">
         <HelperText slot="helper">Vpišite prosimo šolsko leto - to ime se bo prikazalo na spričevalu, zato bodite še posebej previdni (primer - 2021/2022)</HelperText>
     </Textfield>
     <Select bind:teacherId label="Izberite razrednika" variant="outlined">