diff --git a/http/static/css/styles.css b/http/static/css/styles.css
index e8f8879..2c1b08d 100644
--- 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
index f9771da..48584f6 100644
--- a/http/static/index.html
+++ b/http/static/index.html
@@ -1,11 +1,11 @@
-
+
+ name="description">
@@ -35,8 +35,6 @@
-
-
@@ -57,7 +55,7 @@
By continuing, you agree to the terms of service.
-
+
@@ -113,7 +111,13 @@
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
index 0f42b76..020c638 100644
--- 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()
};