added axios client

server/environment.ts

@@ -43,7 +43,17 @@ const environmentSchema = z.object({
         .pipe(z.number().optional()),
     EMAIL_SMTP_USER: z.string().optional(),
     EMAIL_SMTP_PASS: z.string().optional(),
-    EMAIL_NOREPLY: z.string().optional(),
+    EMAIL_NOREPLY: z.string().email().optional(),
+    SITE_DOMAIN: z
+        .string()
+        .optional()
+        .transform((val) => {
+            if (!val) {
+                return `http://localhost:${environment.EXTERNAL_PORT}`;
+            }
+            return val;
+        })
+        .pipe(z.string().url()),
 });
 
 const environment = {
@@ -63,6 +73,7 @@ const environment = {
     EMAIL_SMTP_USER: process.env.EMAIL_SMTP_USER as string,
     EMAIL_SMTP_PASS: process.env.EMAIL_SMTP_PASS as string,
     EMAIL_NOREPLY: process.env.EMAIL_NOREPLY as string,
+    SITE_DOMAIN: process.env.NEXT_PUBLIC_SITE_DOMAIN as string,
 };
 
 const parsedConfig = environmentSchema.safeParse(environment);

server/index.ts

@@ -7,6 +7,7 @@ import helmet from "helmet";
 import cors from "cors";
 import {
     errorHandlerMiddleware,
+    notFoundMiddleware,
     rateLimitMiddleware,
 } from "@server/middlewares";
 import internal from "@server/routers/internal";
@@ -42,6 +43,8 @@ app.prepare().then(() => {
     externalServer.use(prefix, unauthenticated);
     externalServer.use(prefix, authenticated);
 
+    externalServer.use(notFoundMiddleware)
+
     // We are using NEXT from here on
     externalServer.all("*", (req: Request, res: Response) => {
         const parsedUrl = parse(req.url!, true);

server/middlewares/notFound.ts

@@ -7,8 +7,11 @@ export function notFoundMiddleware(
     res: Response,
     next: NextFunction,
 ) {
-    const message = `The requests url is not found - ${req.originalUrl}`;
-    return next(createHttpError(HttpCode.NOT_FOUND, message));
+    if (req.path.startsWith("/api")) {
+        const message = `The requests url is not found - ${req.originalUrl}`;
+        return next(createHttpError(HttpCode.NOT_FOUND, message));
+    }
+    return next();
 }
 
 export default notFoundMiddleware;

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>