style, backend

app/globals.css

@@ -25,24 +25,24 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
+    --foreground: 0 0% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
+    --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 24.6 95% 53.1%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 0 85.7% 97.3%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 72.2% 50.6%;
     --radius: 1rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
@@ -52,25 +52,25 @@
   }
 
   .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 0 85.7% 97.3%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 72.2% 50.6%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;

lib/actions.ts

@@ -2,18 +2,20 @@
 
 import { z } from "zod";
 import { oldestDate, signupFormSchema, youngestDate } from "@/app/sign-up/sign-up-form";
-import listmonk from "./listmonk";
+import listmonk, { listmonkData } from "./listmonk";
 
 export async function signupFormSubmit(data: z.infer<typeof signupFormSchema>) {
   if (data.dob > youngestDate || data.dob < oldestDate) {
     return { error: "Invalid date of birth" };
   }
-  const listmonkData = {
+  const listmonkData: listmonkData = {
     email: data.email,
     name: data.name,
+    status: "enabled",
+    lists: [6],
     attribs: {
       dob: data.dob.toISOString(),
     },
   };
-  console.log(listmonkData);
+  listmonk(listmonkData);
 }

lib/listmonk.ts

@@ -1,5 +1,13 @@
 import "server-only";
 
+export type listmonkData = {
+  email: string;
+  name: string;
+  status: "enabled" | "blocklisted";
+  lists: number[];
+  attribs: {};
+};
+
 async function makeApiCall(url: string, options?: RequestInit) {
   try {
     const response = await fetch(url, options);
@@ -13,9 +21,31 @@ async function makeApiCall(url: string, options?: RequestInit) {
   }
 }
 
-async function listmonk() {
-  const listmonkUrl = process.env.LISTMONK_URL ?? "";
-  makeApiCall(listmonkUrl);
+async function listmonk(data: listmonkData) {
+  const listmonkUrl = process.env.LISTMONK_URL ?? "http://localhost:9000/api/";
+  const listmonkUser = process.env.LISTMONK_USER ?? "nouser";
+  const listmonkPass = process.env.LISTMONK_PASS ?? "nopass";
+  // Encode the username and password in base64
+  const credentials = Buffer.from(`${listmonkUser}:${listmonkPass}`).toString("base64");
+
+  const options: RequestInit = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Basic ${credentials}`,
+    },
+    body: JSON.stringify(data),
+  };
+  try {
+    const response = await fetch(`${listmonkUrl}subscribers`, options);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const responseData = await response.json();
+    console.log("Subscriber created successfully:", responseData);
+  } catch (error) {
+    console.error("Failed to create subscriber:", error);
+  }
 }
 
 export default listmonk;