feat(frontend): Send user a registration email on successfully regist…

…ration [2024-11-18]
enmeshed-analytics · Nov 18, 2024 · 2874211 · 2874211
1 parent bb19dfc
commit 2874211
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 33 deletions.
diff --git a/gridwalk-ui/package-lock.json b/gridwalk-ui/package-lock.json
diff --git a/gridwalk-ui/package.json b/gridwalk-ui/package.json
@@ -23,6 +23,7 @@
     "lucide-react": "^0.453.0",
     "maplibre-gl": "^4.7.1",
     "next": "15.0.0",
+    "nodemailer": "^6.9.16",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.5.4",
@@ -31,6 +32,7 @@
   },
   "devDependencies": {
     "@types/node": "^20",
+    "@types/nodemailer": "^6.4.16",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/uuid": "^10.0.0",

diff --git a/gridwalk-ui/src/app/login/components/actions.ts b/gridwalk-ui/src/app/login/components/actions.ts
@@ -1,40 +1,96 @@
-'use server'
+"use server";
+import { cookies } from "next/headers";
+import nodemailer from "nodemailer";
 
-import { cookies } from 'next/headers';
+const transporter = nodemailer.createTransport({
+  host: "smtp.gmail.com",
+  port: 123,
+  auth: {
+    user: "",
+    pass: "",
+  },
+});
+
+async function sendWelcomeEmail(email: string, firstName: string) {
+  await transporter.sendMail({
+    from: "[email protected]",
+    to: email,
+    subject: "GridWalk Registration",
+    html: `
+     <!DOCTYPE html>
+     <html>
+       <head>
+         <style>
+           body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
+           .container { max-width: 600px; margin: 0 auto; padding: 20px; }
+           .header { background-color: #4F46E5; color: white; padding: 30px; text-align: center; border-radius: 8px 8px 0 0; }
+           .content { background-color: #ffffff; padding: 30px; border-radius: 0 0 8px 8px; }
+           .footer { text-align: center; margin-top: 20px; font-size: 12px; color: #666; }
+           .button {
+             background-color: #4F46E5;
+             color: white;
+             padding: 12px 25px;
+             text-decoration: none;
+             border-radius: 5px;
+             display: inline-block;
+             margin: 20px 0;
+           }
+         </style>
+       </head>
+       <body>
+         <div class="container">
+           <div class="header">
+             <h1>Welcome to GridWalk! 🚀</h1>
+           </div>
+           <div class="content">
+             <h2>Hi ${firstName},</h2>
+             <p>Welcome aboard! We're thrilled to have you join the GridWalk community.</p>
+             <p>If you have any questions, feel free to reach out to our support team at <a href="mailto:[email protected]">[email protected]</a>.</p>
+             <p>Best regards,<br>The GridWalk Team</p>
+           </div>
+           <div class="footer">
+             <p>© 2024 GridWalk by Enmeshed. All rights reserved.</p>
+             <p>You're receiving this email because you signed up for a GridWalk account.</p>
+           </div>
+         </div>
+       </body>
+     </html>
+   `,
+  });
+}
 
 interface LoginResponse {
   apiKey: string;
   error?: string;
 }
 
-export async function loginAction(formData: { email: string; password: string }) {
+export async function loginAction(formData: {
+  email: string;
+  password: string;
+}) {
   const response = await fetch(`${process.env.GRIDWALK_API}/login`, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
     },
     body: JSON.stringify(formData),
   });
 
   if (!response.ok) {
     const res = await response.text();
-    throw new Error(res || 'Login failed');
+    throw new Error(res || "Login failed");
   }
 
   const data: LoginResponse = await response.json();
-
   // Set the cookie
   const cookieStore = await cookies();
   cookieStore.set({
-    name: 'sid',
+    name: "sid",
     value: data.apiKey,
-    secure: process.env.NODE_ENV === 'production',
-    path: '/',
-    // TODO: Change after testing
+    secure: process.env.NODE_ENV === "production",
+    path: "/",
     httpOnly: false,
-    sameSite: 'lax',
-    // maxAge: 60 * 60 * 24 * 7, // 1 week
-    // domain: 'your-domain.com',
+    sameSite: "lax",
   });
 }
 
@@ -44,22 +100,30 @@ export async function registerAction(formData: {
   first_name: string;
   last_name: string;
 }) {
-  const response = await fetch(`${process.env.GRIDWALK_API}/register`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(formData),
-  });
+  try {
+    const response = await fetch(`${process.env.GRIDWALK_API}/register`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(formData),
+    });
 
-  if (!response.ok) {
-    const data = await response.json();
-    throw new Error(data.error || 'Registration failed');
-  }
+    if (!response.ok) {
+      const data = await response.json();
+      throw new Error(data.error || "Registration failed");
+    }
 
-  // After successful registration, log the user in
-  return await loginAction({
-    email: formData.email,
-    password: formData.password,
-  });
+    // Send welcome email
+    await sendWelcomeEmail(formData.email, formData.first_name);
+
+    // After successful registration and email, log the user in
+    return await loginAction({
+      email: formData.email,
+      password: formData.password,
+    });
+  } catch (error) {
+    console.error("Registration error:", error);
+    throw error;
+  }
 }