Add auth API connections

.gitignore

@@ -39,3 +39,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

README.md

@@ -10,6 +10,12 @@ To clone and run this application, [Node.js](https://nodejs.org/en/download/) (w
 npm install npm@latest -g
 ```
 
+### `.env` Setup
+
+Create a file called `.env` in the root directory, copying the contents of `example.env`.
+
+Replace all values in the file with the relevant information.
+
 ### Installation
 
 ```bash

app/_utils/format-api-error.tsx

@@ -0,0 +1,36 @@
+function snakeToTitleCase(str: string): string {
+  return str
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+export default function formatApiError(errors: any): string {
+  let errorMessage = "";
+  let generalMessage = "";
+  errors = errors.error;
+
+  if (errors.general) {
+    generalMessage = errors.general[0];
+  }
+
+  for (const field in errors) {
+    if (field !== "general" && Array.isArray(errors[field])) {
+      for (const msg of errors[field]) {
+        const fieldTitle = snakeToTitleCase(field);
+        errorMessage += `${fieldTitle}: ${msg}\n`;
+      }
+    }
+  }
+
+  if (errorMessage) {
+    if (generalMessage) {
+      return generalMessage + "\n" + errorMessage.trim();
+    }
+    return errorMessage.trim();
+  } else if (generalMessage) {
+    return generalMessage;
+  }
+
+  return "An unknown error has occurred.";
+}

app/dashboard/page.tsx

@@ -1,4 +1,8 @@
-import React from "react";
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useRef } from "react";
+import formatApiError from "../_utils/format-api-error";
 
 type Event = {
   id: string;
@@ -7,6 +11,9 @@ type Event = {
 };
 
 export default function Page() {
+  const router = useRouter();
+  const isSubmitting = useRef(false);
+
   // Mock data for testing
   const joinedEvents: Event[] = [
     {
@@ -60,6 +67,29 @@ export default function Page() {
     );
   };
 
+  const logout = async () => {
+    if (isSubmitting.current) return;
+    isSubmitting.current = true;
+
+    await fetch("/api/auth/logout/", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+    })
+      .then(async (res) => {
+        if (res.ok) {
+          router.push("/login");
+        } else {
+          alert(formatApiError(await res.json()));
+        }
+      })
+      .catch((err) => {
+        console.error("Fetch error:", err);
+        alert("An error occurred. Please try again.");
+      });
+
+    isSubmitting.current = false;
+  };
+
   return (
     <div className="min-h-screen p-6">
       {/* Events You Joined */}
@@ -95,6 +125,16 @@ export default function Page() {
           ))}
         </div>
       </section>
+
+      {/* Logout Button */}
+      <div className="mt-8 flex justify-center">
+        <button
+          onClick={logout}
+          className="mb-2 cursor-pointer rounded-full bg-blue px-4 py-2 font-medium transition dark:bg-red"
+        >
+          Logout
+        </button>
+      </div>
     </div>
   );
 }

app/forgot-password/page.tsx

@@ -1,23 +1,47 @@
 "use client";
 
-import React, { useState } from "react";
 import Link from "next/link";
-import MessagePage from "../ui/layout/message-page";
 import { useRouter } from "next/navigation";
+import React, { useRef, useState } from "react";
+import formatApiError from "../_utils/format-api-error";
+import MessagePage from "../ui/layout/message-page";
 
 export default function Page() {
   const [email, setEmail] = useState("");
   const [emailSent, setEmailSent] = useState(false);
+  const isSubmitting = useRef(false);
   const router = useRouter();
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
+    if (isSubmitting.current) return;
+    isSubmitting.current = true;
+
     if (!email) {
-      alert("Please enter an email address.");
+      alert("Missing email");
+      isSubmitting.current = false;
       return;
     }
-    setEmailSent(true);
+
+    await fetch("/api/auth/start-password-reset/", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email }),
+    })
+      .then(async (res) => {
+        if (res.ok) {
+          setEmailSent(true);
+        } else {
+          alert(formatApiError(await res.json()));
+        }
+      })
+      .catch((err) => {
+        console.error("Fetch error:", err);
+        alert("An error occurred. Please try again.");
+      });
+
+    isSubmitting.current = false;
   };
 
   return (

app/login/page.tsx

@@ -1,24 +1,51 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import formatApiError from "../_utils/format-api-error";
 
 export default function Page() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const isSubmitting = useRef(false);
   const router = useRouter();
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    console.log("Login attempt:", { email, password });
 
-    // TODO: Replace with real authentication
-    if (email === "test" && password === "1234") {
-      router.push("/dashboard");
-    } else {
-      alert("Invalid email or password");
+    if (isSubmitting.current) return;
+    isSubmitting.current = true;
+
+    if (!email) {
+      alert("Missing email");
+      isSubmitting.current = false;
+      return;
+    }
+    if (!password) {
+      alert("Missing password");
+      isSubmitting.current = false;
+      return;
     }
+
+    await fetch("/api/auth/login/", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password }),
+    })
+      .then(async (res) => {
+        if (res.ok) {
+          router.push("/dashboard");
+        } else {
+          alert(formatApiError(await res.json()));
+        }
+      })
+      .catch((err) => {
+        console.error("Fetch error:", err);
+        alert("An error occurred. Please try again.");
+      });
+
+    isSubmitting.current = false;
   };
 
   return (

app/reset-password/page.tsx

@@ -1,35 +1,62 @@
 "use client";
 
 import { useRouter, useSearchParams } from "next/navigation";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
+import formatApiError from "../_utils/format-api-error";
 
 export default function Page() {
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
+  const isSubmitting = useRef(false);
   const router = useRouter();
 
   const searchParams = useSearchParams();
   const pwdResetToken = searchParams.get("token");
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
+    if (isSubmitting.current) return;
+    isSubmitting.current = true;
+
     if (!pwdResetToken) {
-      alert("Invalid or missing password reset token.");
+      alert("This link is expired or invalid.");
+      isSubmitting.current = false;
       return;
     }
 
-    if (!newPassword || !confirmPassword) {
-      alert("Please fill in all fields.");
+    if (!newPassword) {
+      alert("Missing new password.");
+      isSubmitting.current = false;
       return;
     }
 
-    // TODO: Replace with real password reset API call
     if (newPassword !== confirmPassword) {
       alert("Passwords do not match.");
-    } else {
-      router.push("/reset-password/success");
+      isSubmitting.current = false;
+      return;
     }
+    await fetch("/api/auth/reset-password/", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        reset_token: pwdResetToken,
+        new_password: newPassword,
+      }),
+    })
+      .then(async (res) => {
+        if (res.ok) {
+          router.push("/reset-password/success");
+        } else {
+          alert(formatApiError(await res.json()));
+        }
+      })
+      .catch((err) => {
+        console.error("Fetch error:", err);
+        alert("An error occurred. Please try again.");
+      });
+
+    isSubmitting.current = false;
   };
 
   return (

app/sign-up/email-sent/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import formatApiError from "@/app/_utils/format-api-error";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef } from "react";
 import MessagePage from "../../ui/layout/message-page";
@@ -23,7 +24,7 @@ export default function Page() {
     return null;
   }
 
-  const handleResendEmail = () => {
+  const handleResendEmail = async () => {
     const emailResendCooldown = 30000; // 30 seconds
     let timeLeft =
       (emailResendCooldown - (Date.now() - lastEmailResend.current)) / 1000;
@@ -32,8 +33,24 @@ export default function Page() {
       alert(`Slow down! ${timeLeft} seconds until you can send again.`);
       return;
     }
-    // TODO: Replace with real resend email API logic
-    console.log("Resending email to:", email);
+
+    await fetch("/api/auth/resend-register-email/", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email }),
+    })
+      .then(async (res) => {
+        if (res.ok) {
+          alert("Email resent. Please check your inbox.");
+        } else {
+          alert(formatApiError(await res.json()));
+        }
+      })
+      .catch((err) => {
+        console.error("Fetch error:", err);
+        alert("An error occurred. Please try again.");
+      });
+
     lastEmailResend.current = Date.now();
   };