email verfication after account creation, password component, added password special characters

backend/services/emailService.js

@@ -35,6 +35,7 @@ class EmailService {
       const templateFiles = [
         "conditionCheckReminder.html",
         "rentalConfirmation.html",
+        "emailVerification.html",
         "lateReturnCS.html",
         "damageReportCS.html",
         "lostItemCS.html",
@@ -231,6 +232,18 @@ class EmailService {
         <p>Thank you for using RentAll!</p>
       `
       ),
+
+      emailVerification: baseTemplate.replace(
+        "{{content}}",
+        `
+        <p>Hi {{recipientName}},</p>
+        <h2>Verify Your Email Address</h2>
+        <p>Thank you for registering with RentAll! Please verify your email address by clicking the button below.</p>
+        <p><a href="{{verificationUrl}}" class="button">Verify Email Address</a></p>
+        <p>If the button doesn't work, copy and paste this link into your browser: {{verificationUrl}}</p>
+        <p><strong>This link will expire in 24 hours.</strong></p>
+      `
+      ),
     };
 
     return (
@@ -295,6 +308,24 @@ class EmailService {
     );
   }
 
+  async sendVerificationEmail(user, verificationToken) {
+    const frontendUrl = process.env.FRONTEND_URL || "http://localhost:3000";
+    const verificationUrl = `${frontendUrl}/verify-email?token=${verificationToken}`;
+
+    const variables = {
+      recipientName: user.firstName || "there",
+      verificationUrl: verificationUrl,
+    };
+
+    const htmlContent = this.renderTemplate("emailVerification", variables);
+
+    return await this.sendEmail(
+      user.email,
+      "Verify Your Email - RentAll",
+      htmlContent
+    );
+  }
+
   async sendTemplateEmail(toEmail, subject, templateName, variables = {}) {
     const htmlContent = this.renderTemplate(templateName, variables);
     return await this.sendEmail(toEmail, subject, htmlContent);