added axios client

src/api/index.ts

@@ -0,0 +1,11 @@
+import axios from "axios";
+
+export const api = axios.create({
+    baseURL: `http://${process.env.NEXT_PUBLIC_SITE_DOMAIN || "localhost:3000"}/api/v1`,
+    timeout: 10000,
+    headers: {
+        "Content-Type": "application/json",
+    },
+});
+
+export default api;

src/app/auth/login/page.tsx

@@ -24,6 +24,8 @@ import {
 } from "@/components/ui/card";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+import api from "@app/api";
+import { LoginBody, LoginResponse } from "@server/routers/auth";
 
 const formSchema = z.object({
     email: z.string().email({ message: "Invalid email address" }),
@@ -43,9 +45,19 @@ export default function LoginForm() {
         },
     });
 
-    function onSubmit(values: z.infer<typeof formSchema>) {
-        console.log(values);
-        setError("Invalid email or password. Please try again.");
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        const { email, password } = values;
+        const res = await api
+            .post<LoginBody, LoginResponse>("/auth/login", {
+                email,
+                password,
+            })
+            .catch((e) => {
+                setError(
+                    e.response?.data?.message ||
+                        "An error occurred while logging in",
+                );
+            });
     }
 
     return (

src/app/globals.css

@@ -3,47 +3,47 @@
 @tailwind utilities;
 @layer base {
     :root {
-        --background: 28.4 100% 100%;
-        --foreground: 28.4 5% 10%;
-        --card: 28.4 50% 100%;
-        --card-foreground: 28.4 5% 15%;
-        --popover: 28.4 100% 100%;
-        --popover-foreground: 28.4 100% 10%;
-        --primary: 28.4 72.5% 25.7%;
+        --background: 31 100% 100%;
+        --foreground: 31 5% 10%;
+        --card: 31 50% 100%;
+        --card-foreground: 31 5% 15%;
+        --popover: 31 100% 100%;
+        --popover-foreground: 31 100% 10%;
+        --primary: 31 11% 28%;
         --primary-foreground: 0 0% 100%;
-        --secondary: 28.4 30% 90%;
+        --secondary: 31 30% 90%;
         --secondary-foreground: 0 0% 0%;
-        --muted: -9.600000000000001 30% 95%;
-        --muted-foreground: 28.4 5% 40%;
-        --accent: -9.600000000000001 30% 90%;
-        --accent-foreground: 28.4 5% 15%;
+        --muted: -7 30% 95%;
+        --muted-foreground: 31 5% 40%;
+        --accent: -7 30% 90%;
+        --accent-foreground: 31 5% 15%;
         --destructive: 0 100% 50%;
-        --destructive-foreground: 28.4 5% 100%;
-        --border: 28.4 30% 82%;
-        --input: 28.4 30% 50%;
-        --ring: 28.4 72.5% 25.7%;
+        --destructive-foreground: 31 5% 100%;
+        --border: 31 30% 82%;
+        --input: 31 30% 50%;
+        --ring: 31 11% 28%;
         --radius: 0rem;
     }
     .dark {
-        --background: 28.4 50% 10%;
-        --foreground: 28.4 5% 100%;
-        --card: 28.4 50% 10%;
-        --card-foreground: 28.4 5% 100%;
-        --popover: 28.4 50% 5%;
-        --popover-foreground: 28.4 5% 100%;
-        --primary: 28.4 72.5% 25.7%;
+        --background: 31 50% 10%;
+        --foreground: 31 5% 100%;
+        --card: 31 50% 10%;
+        --card-foreground: 31 5% 100%;
+        --popover: 31 50% 5%;
+        --popover-foreground: 31 5% 100%;
+        --primary: 31 11% 28%;
         --primary-foreground: 0 0% 100%;
-        --secondary: 28.4 30% 20%;
+        --secondary: 31 30% 20%;
         --secondary-foreground: 0 0% 100%;
-        --muted: -9.600000000000001 30% 25%;
-        --muted-foreground: 28.4 5% 65%;
-        --accent: -9.600000000000001 30% 25%;
-        --accent-foreground: 28.4 5% 95%;
+        --muted: -7 30% 25%;
+        --muted-foreground: 31 5% 65%;
+        --accent: -7 30% 25%;
+        --accent-foreground: 31 5% 95%;
         --destructive: 0 100% 50%;
-        --destructive-foreground: 28.4 5% 100%;
-        --border: 28.4 30% 50%;
-        --input: 28.4 30% 50%;
-        --ring: 28.4 72.5% 25.7%;
+        --destructive-foreground: 31 5% 100%;
+        --border: 31 30% 50%;
+        --input: 31 30% 50%;
+        --ring: 31 11% 28%;
         --radius: 0rem;
     }
 }

src/app/layout.tsx

@@ -1,13 +1,13 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { Noto_Sans } from "next/font/google";
+import { Roboto } from "next/font/google";
 
 export const metadata: Metadata = {
     title: "Pangolin",
     description: "",
 };
 
-const inter = Noto_Sans({ subsets: ["latin"] });
+const font = Roboto({ subsets: ["latin"], style: "normal", weight: "400" });
 
 export default function RootLayout({
     children,
@@ -16,7 +16,7 @@ export default function RootLayout({
 }>) {
     return (
         <html>
-            <body className={`${inter.className}`}>
+            <body className={`${font.className}`}>
                 <main>{children}</main>
             </body>
         </html>