Skip to content

Commit 7c34e73

Browse files
skeptrunedevskeptrunedev
committed
feat: v1 of email list signup through button
1 parent 3c2b9b4 commit 7c34e73

4 files changed

Lines changed: 118 additions & 4 deletions

File tree

‎website/.env.dist‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
PUBLIC_LISTMONK_API_KEY=

‎website/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
{
2-
"name": "",
2+
"name": "threshold-security-website",
3+
"description": "A website for Threshold Security, built with Astro and React.",
34
"type": "module",
45
"version": "0.0.1",
6+
"license": "MIT",
57
"scripts": {
68
"dev": "astro dev",
79
"build": "astro build",

‎website/src/layouts/HomeLayout.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,8 @@ const currentPath = Astro.url.pathname;
6868

6969
<script
7070
defer
71-
data-domain="skeptrune.com"
71+
is:inline
72+
data-domain="onthreshold.com"
7273
src="https://plausible.trieve.ai/js/script.js"></script>
7374
</head>
7475
<body>

‎website/src/pages/index.astro‎

Lines changed: 112 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,14 @@ invariant(i18n, "No homepage content found");
3535
/>
3636
<button
3737
type="submit"
38-
class="bg-btcgray-800 text-white p-3 rounded hover:bg-btcgray-700"
38+
class="bg-btcgray-800 text-white p-3 rounded hover:bg-btcgray-700 hover:cursor-pointer disabled:cursor-not-allowed"
3939
>
4040
{i18n.waitlist.buttonText}
4141
</button>
4242
</form>
43-
<p class="mt-2 text-sm text-btcgray-600">
43+
<p class="mt-2
44+
text-sm
45+
text-btcgray-600">
4446
&rarr; 1,070 {i18n.waitlist.numberSuffix}
4547
</p>
4648
</section>
@@ -72,3 +74,111 @@ invariant(i18n, "No homepage content found");
7274
</section>
7375
</div>
7476
</HomeLayout>
77+
<script>
78+
const form = document.querySelector("form");
79+
const emailInput = document.querySelector('input[type="email"]');
80+
const submitButton = document.querySelector('button[type="submit"]');
81+
82+
if (form && emailInput && submitButton) {
83+
const htmlEmailInput = emailInput as HTMLInputElement;
84+
const htmlSubmitButton = submitButton as HTMLButtonElement;
85+
const originalButtonText = htmlSubmitButton.textContent || "Submit";
86+
87+
form.addEventListener("submit", async (event) => {
88+
event.preventDefault();
89+
90+
const email = htmlEmailInput.value;
91+
if (!email) {
92+
return;
93+
}
94+
const name = email.substring(0, email.indexOf("@"));
95+
const apiKey = import.meta.env.PUBLIC_LISTMONK_API_KEY;
96+
const apiUsername = "skeptrune-api-key";
97+
98+
if (!apiKey) {
99+
console.error(
100+
"PUBLIC_LISTMONK_API_KEY is not set in environment variables."
101+
);
102+
htmlSubmitButton.textContent = "Error: Config Missing";
103+
htmlSubmitButton.disabled = true;
104+
return;
105+
}
106+
107+
htmlSubmitButton.textContent = "Submitting...";
108+
htmlSubmitButton.disabled = true;
109+
110+
try {
111+
const response = await fetch(
112+
"https://listmonk.skeptrune.com/api/subscribers",
113+
{
114+
method: "POST",
115+
headers: {
116+
"Content-Type": "application/json",
117+
Authorization: `Basic ${btoa(`${apiUsername}:${apiKey}`)}`,
118+
},
119+
body: JSON.stringify({
120+
email: email,
121+
name: name,
122+
status: "enabled",
123+
lists: [1],
124+
}),
125+
}
126+
);
127+
128+
if (response.ok || response.status === 201 || response.status === 409) {
129+
htmlSubmitButton.textContent = "Subscribed!";
130+
htmlSubmitButton.classList.remove(
131+
"bg-btcgray-800",
132+
"hover:bg-btcgray-700"
133+
);
134+
htmlSubmitButton.classList.add("bg-green-500");
135+
} else {
136+
const errorData = await response.json();
137+
console.error("Failed to subscribe:", response.status, errorData);
138+
htmlSubmitButton.textContent = "Subscription Failed";
139+
htmlSubmitButton.disabled = false;
140+
htmlSubmitButton.classList.remove(
141+
"bg-btcgray-800",
142+
"hover:bg-btcgray-700",
143+
"bg-green-500"
144+
);
145+
htmlSubmitButton.classList.add("bg-red-500");
146+
147+
setTimeout(() => {
148+
if (htmlSubmitButton.textContent === "Subscription Failed") {
149+
htmlSubmitButton.textContent = originalButtonText;
150+
htmlSubmitButton.classList.remove("bg-red-500");
151+
htmlSubmitButton.classList.add(
152+
"bg-btcgray-800",
153+
"hover:bg-btcgray-700"
154+
);
155+
}
156+
}, 3000);
157+
}
158+
} catch (error) {
159+
console.error("Error submitting form:", error);
160+
htmlSubmitButton.textContent = "Error";
161+
htmlSubmitButton.disabled = false;
162+
htmlSubmitButton.classList.remove(
163+
"bg-btcgray-800",
164+
"hover:bg-btcgray-700",
165+
"bg-green-500"
166+
);
167+
htmlSubmitButton.classList.add("bg-red-500");
168+
169+
setTimeout(() => {
170+
if (htmlSubmitButton.textContent === "Error") {
171+
htmlSubmitButton.textContent = originalButtonText;
172+
htmlSubmitButton.classList.remove("bg-red-500");
173+
htmlSubmitButton.classList.add(
174+
"bg-btcgray-800",
175+
"hover:bg-btcgray-700"
176+
);
177+
}
178+
}, 3000);
179+
}
180+
});
181+
} else {
182+
console.error("Form, email input, or submit button not found.");
183+
}
184+
</script>

0 commit comments

Comments
 (0)