fixed permissions issues

Author: Precipicee

client/package-lock.json

@@ -27,6 +27,7 @@
     "next": "15.4.7",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7"
   },

client/package.json

@@ -51,6 +51,13 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
+    const token = localStorage.getItem("access");
+    if (!token) {
+      console.error("No access token");
+      return;
+    }
+
     try {
       const existing_topic_ids = topics
         .filter((t) => t.type === "existing")
@@ -63,6 +70,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
         },
         body: JSON.stringify({
           name: taskName,

client/src/components/task_form.tsx

@@ -78,6 +78,9 @@ export function TaskItem({
 
   async function saveEdit() {
     setSaving(true);
+
+    const token = localStorage.getItem("access");
+
     try {
       const existing_topic_ids = draftTopics
         .filter((t) => t.type === "existing")
@@ -94,7 +97,10 @@ export function TaskItem({
         `http://localhost:8000/api/planner/tasks/${item.id}/`,
         {
           method: "PUT",
-          headers: { "Content-Type": "application/json" },
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
           body: JSON.stringify({
             name: draftName,
             description: draftDescription,

client/src/components/task_item.tsx

@@ -96,13 +96,16 @@ export default function TasksPage() {
     const task = items.find((t) => t.id === id);
     if (!task) return;
 
+    const token = localStorage.getItem("access");
+
     try {
       const response = await fetch(
         `http://localhost:8000/api/planner/tasks/${id}/toggle_complete/`,
         {
           method: "PATCH",
           headers: {
             "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
           },
           body: JSON.stringify({ completed: !task.completed }),
         },
@@ -129,10 +132,17 @@ export default function TasksPage() {
   async function handleTaskDeleted(id: number) {
     if (!window.confirm("Delete this task?")) return;
 
+    const token = localStorage.getItem("access");
+
     try {
       const response = await fetch(
         `http://localhost:8000/api/planner/tasks/${id}/`,
-        { method: "DELETE" },
+        {
+          method: "DELETE",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        },
       );
 
       if (!response.ok) {