Add firebase

.gitignore

@@ -6,6 +6,7 @@
 .pnp.js
 
 /main/*.js
+*.js
 
 # testing
 /coverage

common/firebase.ts

@@ -0,0 +1,28 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import {
+  getFirestore,
+  type DocumentData,
+  CollectionReference,
+  collection,
+} from "firebase/firestore";
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyBwD3AM0XKRsHnA0YU-CKTSSD4xcfDu9wU",
+  authDomain: "upscayl.firebaseapp.com",
+  projectId: "upscayl",
+  storageBucket: "upscayl.appspot.com",
+  messagingSenderId: "1096660154086",
+  appId: "1:1096660154086:web:ec1872e9ceb11dad686d27",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+export const db = getFirestore(app);
+
+const createCollection = <T = DocumentData>(collectionName: string) => {
+  return collection(db, collectionName) as CollectionReference<T>;
+};
+
+export const waitlistCollection = createCollection("waitlist");

package.json

@@ -177,6 +177,7 @@
     "electron-log": "^5.0.0-beta.16",
     "electron-next": "^3.1.5",
     "electron-updater": "^6.1.1",
+    "firebase": "^10.3.0",
     "jimp": "^0.22.8",
     "jotai": "^2.2.2",
     "react-compare-slider": "^2.2.0",

renderer/components/UpscaylCloudModal.tsx

@@ -1,14 +1,22 @@
-import Image from "next/image";
-import Link from "next/link";
+import { doc, setDoc } from "@firebase/firestore";
+import { useState } from "react";
+import { waitlistCollection } from "@common/firebase";
+
+const nameRegex = /^[A-Za-z\s.'-]+$/;
+const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
 export const UpscaylCloudModal = ({ show, setShow }) => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+
   return (
     <dialog className={`modal ${show && "modal-open"}`}>
       <div className="modal-box flex flex-col text-center items-center gap-4">
         <p className="badge badge-neutral text-xs">Coming soon!</p>
         <p className="text-2xl font-semibold">Introducing Upscayl Cloud!</p>
         <p className="w-9/12 font-medium text-lg">
-          No more hardware issues, quality compromises or long loading times!
+          No more errors, hardware issues, quality compromises or long loading
+          times!
         </p>
 
         <div className="flex flex-col gap-2 text-start">
@@ -22,12 +30,47 @@ export const UpscaylCloudModal = ({ show, setShow }) => {
           <p>😴 Upscayl while you sleep</p>
         </div>
 
-        <Link href="https://www.upscayl.org/join" target="_blank">
-          <button className="bg-success text-success-content rounded-2xl px-4 py-2">
-            Join the waitlist
-          </button>
-        </Link>
+        <div className="gap-2 flex">
+          <input
+            type="text"
+            className="input input-bordered"
+            placeholder="Name"
+          />
+          <input
+            type="text"
+            className="input input-bordered"
+            placeholder="Email"
+          />
+        </div>
+        <button
+          className="bg-success text-success-content rounded-2xl px-4 py-2"
+          onClick={async () => {
+            if (
+              name &&
+              email &&
+              nameRegex.test(name) &&
+              emailRegex.test(email)
+            ) {
+              try {
+                const result = await setDoc(doc(waitlistCollection, email), {
+                  name,
+                  email,
+                });
+              } catch (error) {
+                alert("Error joining the waitlist. Please try again later...");
+                return;
+              }
+              alert(
+                "Thank you for joining the waitlist! We will notify you when Upscayl Cloud is ready for you."
+              );
+            } else {
+              alert("Please fill in all the fields correctly.");
+            }
+          }}>
+          Join the waitlist
+        </button>
       </div>
+
       <form method="dialog" className="modal-backdrop">
         <button onClick={() => setShow(false)}>close</button>
       </form>

renderer/tsconfig.json

@@ -13,7 +13,11 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@common/*": ["../common/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "../app.module.ts"],
   "exclude": ["node_modules"]

tsconfig.json

@@ -26,7 +26,7 @@
 
     /* Modules */
     "module": "commonjs" /* Specify what module code is generated. */,
-    "rootDir": "./electron" /* Specify the root folder within your source files. */,
+    "rootDir": "./" /* Specify the root folder within your source files. */,
     // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */