various fixes

client/src/components/task_form.tsx

@@ -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_item.tsx

@@ -82,6 +82,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")
@@ -98,7 +101,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/timetable.tsx

@@ -374,7 +374,7 @@ function Timetable({ timetable_tasks_props }: TimetableProps) {
     >
       <div
         id="timetable-content"
-        className="h-full w-full overflow-auto overscroll-none"
+        className="h-full w-full overflow-auto overscroll-none scrollbar"
         onScroll={resizeAndPositionTimetableElements}
       >
         <div

client/src/components/ui/focus/taskDisplay.tsx

@@ -16,21 +16,40 @@ interface Time {
 export default function TaskDisplay({
   task,
   time,
-  current
+  current,
 }: {
   task: Task;
   time: Time;
-  current: Boolean;
+  current: boolean;
 }) {
   return (
-    <div className={current ? "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-500 p-4 shadow-md shadow-black/40 outline-3 outline outline-slate-50" : "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-400 p-4 shadow-md shadow-black/40"}>
-      <div className="flex flex-auto flex-row gap-4 px-3">
-        <div>{task.name}:</div>
-        <div>
-          {time.start_time} - {time.end_time}
-        </div>
+    <div
+      className={
+        current
+          ? "px-auto outline-3 m-3 flex flex-auto flex-col rounded-3xl bg-indigo-500 p-4 shadow-md shadow-black/40 outline outline-slate-50"
+          : "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-400 p-4 shadow-md shadow-black/40"
+      }
+    >
+      <div className="font-bold">{task.name}</div>
+      <div>
+        {time.day === 1
+          ? "Mon"
+          : time.day === 2
+            ? "Tue"
+            : time.day === 3
+              ? "Wed"
+              : time.day === 4
+                ? "Thu"
+                : time.day === 5
+                  ? "Fri"
+                  : time.day === 6
+                    ? "Sat"
+                    : time.day === 7
+                      ? "Sun"
+                      : ""}{" "}
+        - {time.start_time} - {time.end_time}
       </div>
-      <div className="px-3 italic">{task.description}</div>
+      <div className="italic">{task.description}</div>
     </div>
   );
 }

client/src/components/ui/focus/timer.tsx

@@ -24,7 +24,7 @@ const Timer = (timeRemaining: number) => {
   };
 
   return (
-    <div className="rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
+    <div className="w-32 rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
       {formatTime(timeRemaining)}
     </div>
   );

client/src/pages/focus.tsx

@@ -1,4 +1,4 @@
 import React, { useEffect, useState } from "react";
 
 import CurrentTaskTitle from "@/components/ui/focus/currentTaskTitle";
 import TimeDisplay from "@/components/ui/focus/timeDisplay";
@@ -87,7 +87,7 @@
   }, [router]);
 
   useEffect(() => {
     var task_times : Time[] = [];
     for (let index = 0; index < tasks.length; index++) {
       const task = tasks[index];
       for (let i = 0; i < task.times.length; i++) {
@@ -98,7 +98,7 @@
     setTimes(task_times);
     console.log("times: ", task_times);
     getCurrentTask(task_times);
   }, [tasks])
 
   function getCurrentTask(ts: Time[]) {
       let upcomingTimes: Time[];
@@ -152,7 +152,7 @@
   }
 
   return (
-    <div className="h-screen bg-slate-800 p-8 font-inter">
+    <div className="h-[calc(100vh-64px)] bg-slate-800 p-8 font-inter">
       <div className="flex flex-col items-center justify-start rounded-xl bg-slate-700 p-8 font-mono text-white shadow-inner shadow-slate-900">
         <p className="p-4 font-inter text-4xl font-semibold">focus</p>
         <div className="flex flex-row justify-center">

client/src/pages/login.tsx

@@ -73,10 +73,10 @@ export default function Login() {
 
       <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
         <form onSubmit={handleSubmit} className="space-y-6">
-          <label className="block text-sm/6 font-medium text-gray-100">
-            Username
-          </label>
           <div className="mt-2">
+            <label className="block text-sm/6 font-medium text-gray-100">
+              Username
+            </label>
             <input
               id="username"
               type="text"
@@ -87,10 +87,10 @@ export default function Login() {
             />
           </div>
 
-          <label className="block text-sm/6 font-medium text-gray-100">
-            Email
-          </label>
           <div className="mt-2">
+            <label className="block text-sm/6 font-medium text-gray-100">
+              Email
+            </label>
             <input
               id="email"
               type="email"
@@ -102,17 +102,17 @@ export default function Login() {
           </div>
 
           <div>
-            <div className="flex items-center justify-between">
-              <label className="block text-sm/6 font-medium text-gray-100">
-                Password
-              </label>
-              <div className="text-sm">
-                <a className="font-semibold text-indigo-400 hover:text-indigo-300">
-                  Forgot password?
-                </a>
-              </div>
-            </div>
             <div className="mt-2">
+              <div className="flex items-center justify-between">
+                <label className="block text-sm/6 font-medium text-gray-100">
+                  Password
+                </label>
+                <div className="text-sm">
+                  <a className="font-semibold text-indigo-400 hover:text-indigo-300">
+                    Forgot password?
+                  </a>
+                </div>
+              </div>
               <input
                 id="password"
                 type="password"

client/src/pages/schedule.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
 
 import Timetable, {
   getDurationMinutes,
   resizeAndPositionTimetableElements,
 } from "@/components/timetable";
 import { TimetableTaskProps } from "@/components/timetable_task";
+import { useRouter } from "next/router";
 
 /*
 Database representation of Time.
@@ -59,6 +60,8 @@
 assigned.
 */
 function Schedule() {
+
+  const router = useRouter();
   const [timetableTasksProps, setTimetableTasksProps] = useState<
     TimetableTaskProps[]
   >([]);
@@ -82,13 +85,35 @@
     to be displayed. Sets the timetableTasksProps State variable once finished.
     */
     async function fetchTasks() {
-      const API_URL = "http://localhost:8000/api/planner/tasks/";
+
       try {
-        const response = await fetch(API_URL);
-        if (!response.ok) {
-          throw new Error(`Response status: ${response.status}`);
+        const token = localStorage.getItem("access");
+        if (!token) {
+          router.push("/login"); //redirect to login if unauthorised
+          return;
+        }
+        const auth = await fetch(
+          "http://localhost:8000/api/planner/protected/",
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          },
+        );
+        if (!auth.ok) {
+          router.push("/login"); //redirect to login if unauthorised
+          return;
         }
-        const data = await response.json();
+        const tasksFetch = await fetch(
+          `http://localhost:8000/api/planner/tasks/`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          },
+        );
+
+        const data = await tasksFetch.json();
         let timetable_task_props =
           await formatTaskDataToTimetableTaskProps(data);
         timetable_task_props =
@@ -269,12 +294,12 @@
     return () => {
       removeEventListeners();
     };
-  }, []);
+  }, [router]);
   /* This should be dependent on timetableTasksProps however doing so causes it
   to run in an infinite loop. */
 
   return (
-    <div className="content-container min-w-screen min-h-screen flex w-full flex-row bg-slate-950">
+    <div className="content-container min-w-screen h-[calc(100vh-64px)] flex w-full flex-row bg-slate-950">
       <div className="timetable-container max-h-[90vh] w-full p-3">
         <Timetable timetable_tasks_props={timetableTasksProps} />
       </div>

client/src/pages/tasks.tsx

@@ -49,7 +49,8 @@ export default function TasksPage() {
           router.push("/login"); //redirect to login if unauthorised
           return;
         }
-        const auth = await fetch( "http://localhost:8000/api/planner/protected/",
+        const auth = await fetch(
+          "http://localhost:8000/api/planner/protected/",
           {
             headers: {
               Authorization: `Bearer ${token}`,
@@ -102,13 +103,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 }),
         },
@@ -135,10 +139,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) {
@@ -152,7 +163,7 @@ export default function TasksPage() {
   }
 
   return (
-    <div className="content-container min-w-screen min-h-screen relative flex flex-row items-center justify-center bg-slate-500">
+    <div className="content-container min-w-screen relative flex min-h-[calc(100vh-64px)] flex-row items-center justify-center bg-slate-500">
       <div className="task-list-container h-full w-full">
         <div className="task-list-content flex h-full w-full flex-col items-center justify-center rounded-lg p-3 text-slate-200">
           <div className="task-list-top mb-3 hidden h-[10%] w-full rounded-t-lg">
@@ -163,10 +174,10 @@ export default function TasksPage() {
           <div className="task-list-bottom flex w-full flex-row justify-center gap-6">
             <div
               className="task-list-wrapper flex w-fit flex-row justify-center"
-              style={{ 
-                scrollbarWidth: "thin", 
+              style={{
+                scrollbarWidth: "thin",
                 scrollbarColor: "grey white",
-                display: !(showAddTask && items.length === 0) ? "flex" : "none"
+                display: !(showAddTask && items.length === 0) ? "flex" : "none",
               }}
             >
               <TaskList

client/src/styles/globals.css

@@ -6,6 +6,8 @@
 
 @layer base {
   :root {
+
+    @apply font-inter;
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
@@ -91,6 +93,8 @@
 
 @layer base {
   body {
+    @apply font-inter;
     @apply bg-background text-foreground;
+    @apply font-inter;
   }
 }