chore: fix seo and added ws retry feature

forscht · Apr 22, 2023 · 8f6cf8d · 8f6cf8d
1 parent 5c7ac55
commit 8f6cf8d
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 35 deletions.
diff --git a/http/static/css/styles.css b/http/static/css/styles.css
@@ -51,3 +51,7 @@ button {
 #email-li {
     font-size: 1rem;
 }
+
+#inbox-section {
+    display: none;
+}
diff --git a/http/static/index.html b/http/static/index.html
@@ -1,11 +1,11 @@
 <!doctype html>
-<html>
+<html lang="en">
 <meta content="text/html;charset=UTF-8" http-equiv="content-type"/>
 <head>
     <meta charset="utf-8">
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
     <meta content="{{serviceName}} is a free and open-source temporary email service that provides ad-free and fast email addresses for temporary use."
-          name="Description">
+          name="description">
     <meta content="Darshan H." name="author">
 
     <meta content="index.html" property="og:url">
@@ -35,8 +35,6 @@
     <meta name="msapplication-config" content="favicon/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
 
-
-
     <link href="css/styles.css" rel="stylesheet" type="text/css">
 </head>
 <body>
@@ -57,7 +55,7 @@ <h1><a href="index.html">{{serviceName}}</a></h1>
 <p id="term-service">By continuing, you agree to the <a href="terms.html">terms of service.</a></p>
 
 <!--New section to load inbox dynamically-->
-<section id="inbox-section" style="display:none;">
+<section id="inbox-section">
 </section>
 
 <script src="js/index.js"></script>
@@ -113,7 +111,13 @@ <h1><a href="index.html">{{serviceName}}</a></h1>
 
     createInboxButton.addEventListener('click', function () {
         const addressInput = document.getElementById('address-input');
-        const address = addressInput.value.toLowerCase();
+        let address = addressInput.value.toLowerCase();
+
+        const domain = '{{domain}}';
+        const addressParts = address.split('@');
+        if (addressParts.length === 1) {
+            address = `${address}@${domain}`;
+        }
 
         if (!validateEmail(address)) {
             alert('Invalid email address.\nPlease enter a valid email address ending with "{{domain}}".');

diff --git a/http/static/js/index.js b/http/static/js/index.js
@@ -1,5 +1,5 @@
 function validateEmail(email) {
-    const domain = '{{domain}}'
+    const domain = '{{domain}}';
     const regex = new RegExp(`^[\\w-.]+@${domain}$`);
     return regex.test(email);
 }
@@ -27,41 +27,87 @@ function copyTextToClipboardFallback(text) {
     document.body.removeChild(textArea);
 }
 
+function WsRetry(url, onMessageCallback, onOpenCallback, onCloseCallback, logEnabled = false) {
+    this.url = url;
+    this.onMessageCallback = onMessageCallback;
+    this.onOpenCallback = onOpenCallback;
+    this.onCloseCallback = onCloseCallback;
+    this.logEnabled = logEnabled
+
+    this.reconnectInterval = 2000;
+    this.maxReconnectAttempts = 100;
+    this.reconnectAttemptCount = 0;
+
+    this.websocket = undefined;
+
+    this.connect = () => {
+        this.websocket = new WebSocket(this.url);
+        this.websocket.onopen = () => {
+            if (logEnabled) console.log('WebSocket connected');
+            this.onOpenCallback();
+            this.reconnectAttemptCount = 0;
+        };
+        this.websocket.onmessage = (event) => {
+            this.onMessageCallback(event);
+        };
+        this.websocket.onclose = () => {
+            if (this.logEnabled) console.warn('WebSocket disconnected');
+            this.onCloseCallback();
+            if (this.reconnectAttemptCount < this.maxReconnectAttempts) {
+                setTimeout(() => {
+                    if (this.logEnabled) console.log('WebSocket reconnecting...');
+                    this.reconnectAttemptCount++;
+                    this.connect();
+                }, this.reconnectInterval);
+            } else {
+                if (this.logEnabled) console.error('WebSocket reconnect attempts exceeded');
+            }
+        };
+    };
+
+    this.send = (message) => {
+        if (this.websocket.readyState === WebSocket.OPEN) {
+            this.websocket.send(message);
+        } else {
+            if (this.logEnabled) console.log('WebSocket not connected');
+        }
+    };
+
+    this.disconnect = () => {
+        if (this.websocket.readyState !== WebSocket.CLOSED) {
+            this.websocket.close();
+        }
+    };
+}
 
 function Inbox(section, address) {
     this.section = section // section element
     this.address = address; // string
     this.ws = undefined;
+    this.destroyed = false
+    this.connected = false
+
+    // Crate inbox title
+    this.title = document.createElement('h3')
+    // Create inbox ul to store emails
+    this.list = document.createElement('ul')
+    // Add elements to inbox section
+    this.section.appendChild(this.title)
+    this.section.appendChild(this.list)
 }
 
 Inbox.prototype.wsUrl = function () {
     // Get current URL
-    const url = window.location.href;
+    const url = window.location.origin;
     // Check if the current protocol is https or http
     const wsProtocol = (window.location.protocol === 'https:') ? 'wss' : 'ws';
     // Add WebSocket protocol
-    return `${wsProtocol}://${url.split('//')[1]}sync/${this.address}`;
+    return `${wsProtocol}://${url.split('//')[1]}/sync/${this.address}`;
 };
 
 Inbox.prototype.connect = function () {
 
-    // Create new websocket connection
-    this.ws = new WebSocket(this.wsUrl());
-
-    // Handle websocket onopen event
-    this.ws.onopen = () => {
-        // Crate inbox title
-        this.title = document.createElement('h3')
-        this.title.innerText = `Waiting for mails from: ${this.address}`
-        // Create inbox ul to store emails
-        this.list = document.createElement('ul')
-        // Add elements to inbox section
-        this.section.appendChild(this.title)
-        this.section.appendChild(this.list)
-    };
-
-    // Handle new message event
-    this.ws.onmessage = (event) => {
+    const eventHandler = (event) => {
         // Parse email
         const email = JSON.parse(event.data);
         // Add email to list
@@ -70,21 +116,30 @@ Inbox.prototype.connect = function () {
         emailLink.innerText = 'From: ' + email.From + ', Subject: ' + email.Subject;
         emailLink.href = `/${email.ID}`
         emailLink.target = '_blank'
-        // listItem.classList.add("email-li")
         listItem.appendChild(emailLink)
         this.list.appendChild(listItem);
-    };
+    }
 
-    // Handle onclose event
-    this.ws.onclose = () => {
-        this.title.innerText = `${this.title.innerText} (Disconnected)`;
-    };
+    const onConn = () => {
+        this.title.innerText = `Waiting for mails from: ${this.address}`
+        // Clean the email list
+        while (this.list.firstChild) {
+            this.list.removeChild(this.list.firstChild);
+        }
+    }
+
+    const onConnClose = () => {
+        if (!this.title.innerText.includes('Disconnected'))
+            this.title.innerText = `${this.title.innerText} (Disconnected)`;
+    }
+
+    this.ws = new WsRetry(this.wsUrl(), eventHandler.bind(this), onConn.bind(this), onConnClose.bind(this))
+
+    this.ws.connect()
 };
 
 Inbox.prototype.destroy = function () {
-    if (this.ws.readyState !== WebSocket.CLOSED) {
-        this.ws.close();
-    }
+    this.ws.disconnect()
     this.title.remove()
     this.list.remove()
 };