Revise the email subscription mechanism using emailjs not php

Author: Phillweston

.gitignore

@@ -0,0 +1 @@
+config.json

README.md

@@ -13,3 +13,74 @@ In the current cryptocurrency market, fraud and chaos are rampant, greatly damag
 When the market is highly volatile and confidence is low, the system will automatically execute intelligent trading strategies to prevent a vicious cycle caused by panic selling; as market confidence gradually recovers, trading will be gradually opened to restore normal market liquidity. In this way, our project can achieve steady growth of the K-line, alleviate market volatility in a controlled manner, and create a more stable and predictable trading environment for users.
 
 Our goal is to reduce uncertainty in trading through technological means, establish a trust-first cryptocurrency ecosystem, provide a safer and more reliable investment experience for the majority of investors, and strive to become a leader in enhancing market confidence.
+
+## Setting Up for Mail Subscription Service
+
+Here is the detailed step about how to configure the backend mail server for GitHub Pages (or other web services that only support frontend pages).
+
+1. Generate HTML Mail Template (Postcards)
+    
+    [Postcards - Designmodo](https://designmodo.com/postcards/app/)
+    
+    After editing the contents, export as a ZIP file with the images and HTML files together.
+    
+2. Domain Email Account Registration and SMTP Server Setting
+    
+    [GoDaddy Webmail](https://email.godaddy.com/)
+    
+3. Use EmailJS for Email Backend Service
+    
+    Basic Setting
+    
+    [Send email directly from your code | EmailJS](https://www.emailjs.com/)
+    
+    REST API Documentation
+    
+    [/send API | EmailJS](https://www.emailjs.com/docs/rest-api/send/)
+    
+    Note: 
+    
+    - SMTP.js only supports elasticemail as its backend SMTP mail server, no third-party SMTP server is supported.
+    - The limitation of the content body of EmailJS is no more than 50kb, be sure the size of the HTML file is less than the threshold.
+    - We can use the following website to shrink the size of the HTML file by removing the unnecessary characters (like white space, etc)
+        
+        [HTML Compressor - Reduce the size of HTML, CSS, JavaScript, PHP and Smarty code.](https://htmlcompressor.com/compressor/)
+        
+4. Backblaze B2 OBS Bucket for Image Storage
+    
+    We need to upload the images extracted from the downloaded ZIP file to the OBS bucket and replace all of the image paths from the relative path to the HTTPS path, which can be obtained through the detailed property of the file in the OBS bucket.
+
+## Setting Up `config.json` for Local Deployment
+
+To successfully deploy and run the project locally, you need to create a `config.json` file in the root directory of the project. This file contains essential configuration details needed for the application to interact with the blockchain network.
+
+### Step-by-Step Guide
+
+1. **Create the File:**
+   - In the root directory of your project, create a file named `config.json`.
+
+2. **Add Basic Structure:**
+   - Open the file in a text editor and add the following JSON structure:
+     ```json
+     {
+         "emailToken": "Your_Email_Token",
+         "emailServiceID": "Your_Email_Service_ID",
+         "emailTemplate": "Your_Email_Template"
+     }
+     ```
+   - Replace `Your_Email_Token` with the token for sending emails.
+   - Replace `Your_Email_Service_ID` with the service ID for sending emails, for example: `lotso_email`.
+   - Replace `Your_Email_Template` with the email template name, for example: `chubgame_email_template`.
+
+3. **Save the File:**
+   - Save your changes to `config.json`.
+
+4. **Important Notes:**
+   - The `config.json` file is crucial for the application's interaction with the blockchain. Ensure that the details are correct.
+   - If you are working in a team or planning to push this code to a public repository, **do not** include sensitive information like private keys or secret tokens in the `config.json` file. Instead, use environment variables or other secure methods to handle sensitive data.
+
+5. **.gitignore:**
+   - If you are using Git, make sure to add `config.json` to your `.gitignore` file to prevent accidentally pushing it to a public repository:
+     ```bash
+     echo "config.json" >> .gitignore
+     ```

js/script.js

@@ -1,5 +1,27 @@
 (function ($) {
    "use strict";
+
+   const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+
+   function loadConfig() {
+       if (isLocal) {
+           return fetch('../config.json')
+               .then(response => response.json())
+               .then(config => {
+                   return {
+                       EMAIL_SERVICE_ID: config.EMAIL_SERVICE_ID,
+                       EMAIL_TEMPLATE: config.EMAIL_TEMPLATE,
+                       EMAIL_TOKEN: config.EMAIL_TOKEN
+                   };
+               });
+       } else {
+           return Promise.resolve({
+               EMAIL_SERVICE_ID: process.env.EMAIL_SERVICE_ID,
+               EMAIL_TEMPLATE: process.env.EMAIL_TEMPLATE,
+               EMAIL_TOKEN: process.env.EMAIL_TOKEN
+           });
+       }
+   }
 
 //   Pace.on("start", function () {
 //      $("#preloader").show();
@@ -81,6 +103,40 @@
          });
       });
 
+      function sendSubscriptionEmail(userEmail) {
+         return loadConfig()
+             .then(config => {
+                 return fetch('../email/index.html')
+                     .then(response => response.text())
+                     .then(htmlBody => {
+                         const templateParams = {
+                             to_email: userEmail,
+                             reply_to: userEmail,
+                             message_html: htmlBody
+                         };
+                 
+                         return fetch('https://api.emailjs.com/api/v1.0/email/send', {
+                             method: 'POST',
+                             headers: {
+                                 'Content-Type': 'application/json'
+                             },
+                             body: JSON.stringify({
+                                 service_id: config.EMAIL_SERVICE_ID,
+                                 template_id: config.EMAIL_TEMPLATE,
+                                 user_id: config.EMAIL_TOKEN,
+                                 template_params: templateParams,
+                             })
+                         });
+                     })
+                     .then(response => {
+                         if (!response.ok) {
+                             throw new Error('Failed to send email');
+                         }
+                         return response;
+                     });
+             });
+      }
+
       function checkForm() {
          if ($(".form-holder").length > 0) {
 
@@ -93,17 +149,24 @@
 
                //  triggers contact form validation
 
-               if (formStatus.errorList.length === 0)
-               {
-                  $(".form-holder form").fadeOut(function () {
-                     $('#loading').css('visibility', 'visible');
-                     $.post('submit.php', $(".form-holder form").serialize(),
-                             function (data) {
-                                $('.message-box').html(data);
-                                $('#loading').css('visibility', 'hidden');
-                             }
-                     );
-                  });
+               if (formStatus.errorList.length === 0) {
+                   $(".form-holder form").fadeOut(function () {
+                       $('#loading').css('visibility', 'visible');
+
+                       const userEmail = $(".form-holder form").find('input[name="email"]').val();
+
+                       sendSubscriptionEmail(userEmail)
+                           .then(() => {
+                               $('.message-box').html("<div class='alert alert-success'>Your Message Sent!</div>");
+                           })
+                           .catch((error) => {
+                               $('.message-box').html("<div class='alert alert-error'>Error Occurred: " + error.message + "</div>");
+                           })
+                           .finally(() => {
+                               $('#loading').css('visibility', 'hidden');
+                               $(".form-holder form").fadeIn();
+                           });
+                   });
                }
             });
          }