Refactor Backend API Interface

.env.example

@@ -1,4 +1,5 @@
 # the env variable used for vite-processed frontend should begin with `VITE_`
 VITE_TURNSTILE_SITE_KEY=0x4AAAAAABz2ci0ZN9OaO-dg
 VITE_AUTH_OTP_TIMEOUT=120
-VITE_AUTH_TEMP_TOKEN_TIMEOUT=600
+VITE_AUTH_TEMP_TOKEN_TIMEOUT=600
+VITE_API_BASE_URL=

src/components/AuthInitiate.vue

@@ -109,9 +109,10 @@
 
 <script setup>
 import { ref, onMounted, computed } from "vue";
-import { initiateAuth, getOtpState } from "../utils/auth";
+import { getOtpState } from "../utils/auth";
 import Turnstile from "./Turnstile.vue";
 import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+import { useAuth } from "../composables/useAuth";
 
 const props = defineProps({
   action: {
@@ -130,6 +131,8 @@ const copyButtonText = ref("Copy Code and Proceed");
 const isRedirecting = ref(false);
 const isLoading = ref(false);
 
+const { initiateAuth } = useAuth();
+
 onMounted(() => {
   const existingOtp = getOtpState();
   if (existingOtp) {

src/components/CourseList.vue

@@ -69,7 +69,7 @@
                   v-model.number="filters.min_quality"
                   type="number"
                   min="0"
-                  class="mt-1 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  class="mt-1 block w-full rounded-md border-0 py-1.5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                   @change="applyFiltersAndSort"
                 />
               </div>
@@ -88,12 +88,12 @@
                   @change="applyFiltersAndSort"
                 >
                   <option value="course_code">Course Code</option>
-                  <option value="num_reviews">Number of Reviews</option>
+                  <option value="review_count">Number of Reviews</option>
                   <option v-if="isAuthenticated" value="quality_score">
                     Quality Score
                   </option>
                   <option v-if="isAuthenticated" value="difficulty_score">
-                    Difficulty (Layup) Score
+                    Difficulty Score
                   </option>
                 </select>
               </div>

src/components/ReviewCard.vue

@@ -189,7 +189,6 @@ const handleVote = async (reviewId, isKudos) => {
       user_vote: data.user_vote,
     });
   } catch (e) {
-    console.error("Error voting on review:", e);
     alert("Error voting on review. Please try again.");
   }
 };

src/components/SetPasswordForm.vue

@@ -123,7 +123,6 @@
 <script setup>
 import { ref, computed } from "vue";
 import { useRouter } from "vue-router";
-import { setPassword } from "../utils/auth";
 import PasswordInput from "./PasswordInput.vue";
 import {
   validatePassword,
@@ -145,7 +144,7 @@ const props = defineProps({
 });
 
 const router = useRouter();
-const { notifyAuthStateChanged } = useAuth();
+const { notifyAuthStateChanged, setPassword } = useAuth();
 
 const password = ref("");
 const confirmPassword = ref("");

src/composables/useAuth.js

@@ -1,14 +1,48 @@
 import { ref, onMounted, onUnmounted } from "vue";
-import { checkAuthentication as checkAuthUtil } from "../utils/api";
+import { apiFetch } from "../utils/api";
 import { getCookie } from "../utils/cookies";
+import {
+  OTP_STORAGE_KEY,
+  FLOW_STATE_STORAGE_KEY,
+  clearAuthFlowState,
+} from "../utils/auth";
+
+// Default timeout
+const DEFAULT_OTP_TIMEOUT_SECONDS = 120;
+const DEFAULT_TEMP_TOKEN_TIMEOUT_SECONDS = 600;
+
+function parsePositiveInt(value, fallback) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed) || parsed <= 0) return fallback;
+  return Math.floor(parsed);
+}
+
+function getOtpTimeoutSeconds() {
+  return parsePositiveInt(
+    import.meta.env.VITE_AUTH_OTP_TIMEOUT,
+    DEFAULT_OTP_TIMEOUT_SECONDS,
+  );
+}
+
+function getTempTokenTimeoutSeconds() {
+  return parsePositiveInt(
+    import.meta.env.VITE_AUTH_TEMP_TOKEN_TIMEOUT,
+    DEFAULT_TEMP_TOKEN_TIMEOUT_SECONDS,
+  );
+}
 
 export function useAuth() {
   const isAuthenticated = ref(false);
 
   const checkAuthentication = async () => {
     try {
-      const auth = await checkAuthUtil();
-      isAuthenticated.value = !!auth;
+      const response = await apiFetch("/api/user/status/");
+      if (response.ok) {
+        const data = await response.json();
+        isAuthenticated.value = !!data.isAuthenticated;
+        return isAuthenticated.value;
+      }
+      isAuthenticated.value = false;
       return isAuthenticated.value;
     } catch (e) {
       console.error("useAuth: checkAuthentication error:", e);
@@ -17,9 +51,118 @@ export function useAuth() {
     }
   };
 
+  const initiateAuth = async (action, turnstileToken) => {
+    const response = await apiFetch("/api/auth/init/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRFToken": getCookie("csrftoken"),
+      },
+      body: JSON.stringify({
+        action,
+        turnstile_token: turnstileToken,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      throw new Error(errorData?.error || "Failed to initiate auth flow.");
+    }
+
+    const data = await response.json();
+    const now = Date.now();
+    const otpExpiresAt = now + getOtpTimeoutSeconds() * 1000;
+    const tempTokenExpiresAt = now + getTempTokenTimeoutSeconds() * 1000;
+
+    localStorage.setItem(
+      OTP_STORAGE_KEY,
+      JSON.stringify({ otp: data.otp, expires_at: otpExpiresAt }),
+    );
+    localStorage.setItem(
+      FLOW_STATE_STORAGE_KEY,
+      JSON.stringify({ status: "pending", expires_at: tempTokenExpiresAt }),
+    );
+
+    return { otp: data.otp, redirectUrl: data.redirect_url };
+  };
+
+  const verifyCallback = async (action, account, answerId) => {
+    const response = await apiFetch("/api/auth/verify/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRFToken": getCookie("csrftoken"),
+      },
+      body: JSON.stringify({
+        action,
+        account,
+        answer_id: answerId,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      throw new Error(errorData?.error || "Failed to verify authentication.");
+    }
+
+    const data = await response.json();
+    localStorage.setItem(
+      FLOW_STATE_STORAGE_KEY,
+      JSON.stringify({
+        status: "verified",
+        action: data.action,
+        expires_at: data.expires_at * 1000,
+      }),
+    );
+
+    return data;
+  };
+
+  const setPassword = async (action, password) => {
+    const url =
+      action === "signup" ? "/api/auth/signup/" : "/api/auth/password/";
+    const response = await apiFetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRFToken": getCookie("csrftoken"),
+      },
+      body: JSON.stringify({ password }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      throw new Error(errorData?.error || "Failed to set password.");
+    }
+
+    clearAuthFlowState();
+    return await response.json();
+  };
+
+  const loginWithPassword = async (account, password, turnstileToken) => {
+    const response = await apiFetch("/api/auth/login/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRFToken": getCookie("csrftoken"),
+      },
+      body: JSON.stringify({
+        account,
+        password,
+        turnstile_token: turnstileToken,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      throw new Error(errorData?.error || "Login failed.");
+    }
+    return await response.json();
+  };
+
   const logout = async () => {
     try {
-      const response = await fetch("/api/auth/logout/", {
+      const response = await apiFetch("/api/auth/logout/", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -61,6 +204,10 @@ export function useAuth() {
   return {
     isAuthenticated,
     checkAuthentication,
+    initiateAuth,
+    verifyCallback,
+    setPassword,
+    loginWithPassword,
     logout,
     notifyAuthStateChanged,
   };

src/composables/useCourses.js

@@ -1,4 +1,5 @@
 import { ref, reactive } from "vue";
+import { apiFetch } from "../utils/api";
 
 export function useCourses() {
   const courses = ref([]);
@@ -10,7 +11,6 @@ export function useCourses() {
     current_page: 1,
     total_pages: 1,
     total_courses: 0,
-    limit: 20,
   });
 
   const filters = reactive({
@@ -27,11 +27,11 @@ export function useCourses() {
 
   const fetchDepartments = async () => {
     try {
-      const response = await fetch("/api/departments/");
+      const response = await apiFetch("/api/departments/");
       if (!response.ok) throw new Error("Failed to fetch departments");
       departments.value = await response.json();
     } catch (e) {
-      console.error("useCourses: Error fetching departments:", e);
+      error.value = e.message;
     }
   };
 
@@ -44,12 +44,15 @@ export function useCourses() {
     if (filters.code) params.append("code", filters.code.trim());
     if (filters.min_quality && isAuth)
       params.append("min_quality", filters.min_quality);
+    if (filters.min_difficulty && isAuth)
+      params.append("min_difficulty", filters.min_difficulty);
+
     params.append("sort_by", sorting.sort_by);
     params.append("sort_order", sorting.sort_order);
     params.append("page", pagination.current_page);
 
     try {
-      const response = await fetch(`/api/courses/?${params.toString()}`);
+      const response = await apiFetch(`/api/courses/?${params.toString()}`);
       if (!response.ok) {
         const errorData = await response
           .json()
@@ -59,20 +62,38 @@ export function useCourses() {
         );
       }
       const data = await response.json();
-      courses.value = data.courses;
-      pagination.current_page = data.pagination.current_page;
-      pagination.total_pages = data.pagination.total_pages;
-      pagination.total_courses = data.pagination.total_courses;
-      pagination.limit = data.pagination.limit;
+      // DRF pagination: { count, next, previous, results }
+      courses.value = data.results || [];
+      const totalCount = data.count || 0;
+      pagination.total_courses = totalCount;
+      // TODO: let backend return total pages
+      if (pagination.current_page == 1) {
+        const page_size = courses.value.length;
+        pagination.total_pages =
+          page_size > 0 ? Math.ceil(totalCount / page_size) : 1;
+      }
     } catch (e) {
-      console.error("useCourses: Error fetching courses:", e);
       error.value = e.message;
       courses.value = [];
     } finally {
       loading.value = false;
     }
   };
 
+  const fetchCourse = async (courseId) => {
+    if (!courseId) return null;
+    try {
+      const response = await apiFetch(`/api/courses/${courseId}/`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      return await response.json();
+    } catch (e) {
+      error.value = e.message;
+      throw e;
+    }
+  };
+
   const getQueryObject = (isAuth = false) => {
     const query = {};
     if (filters.department) query.department = filters.department;
@@ -125,6 +146,7 @@ export function useCourses() {
     pagination,
     filters,
     sorting,
+    fetchCourse,
     fetchDepartments,
     fetchCourses,
     getQueryObject,