From e54941d6bf1d07d856f5e9be5f573e638d68a345 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Tue, 9 Jul 2024 00:28:07 +0200 Subject: [PATCH] add mailbox --- bun.lockb | Bin 11417 -> 11429 bytes dist/index.js | 151 +++++++++++++++++++++++---- package.json | 2 +- src/Views/connectionSettingsView.tsx | 31 ++++++ src/model.ts | 80 +++++++++++--- src/translations.ts | 15 +++ 6 files changed, 247 insertions(+), 32 deletions(-) diff --git a/bun.lockb b/bun.lockb index 6cc47bde0cefa081d34842e6aee816c13ce326df..04061f2ca04d2e83a171e70aea528d79eec7ea9c 100755 GIT binary patch delta 1051 zcmYLIZAepL6u$3u*KMVC(W3_&h z@x!klttNlGrrTn-MEjO9nv+-e?+$+%`{}xv`LfVmpbIz)ZgCVv#ZZ*5@v5i&!X+=& zK~q#b#9qJzKo?*lV2PB^lHx?bB*-H`!MBaXx)ngdzW^xclT!Q;P!Dmply3oqx^iE= zWT*fX1|OATBcRYg11Jpm0|(Ust^*1K-U15xj1-UaRmg#~=@8l=4OQV^G_Io4v7c6< zR{W8+GI!y;rT8;l#4G}{hgm`tMU{nF9WYTHj^s9g9S^H{3Q}1t3$QYr5>>1KBDQ0cq_h&4ICc=2c+fRq<>7XjD&lJaCi-S0IYuq@ zL&q?ywxS`vR^3M1>Pl^^oy#>{p*D>>IFViH>Q(x;qR#ddZ`}DiT31uF*#BIw=38DJ zUbxrw=Eb+E9V^}RsEnRTp9;2nM;iX|u`wNLrV0Mny*QvR;zxAz2>Wyjbf53j4=6dZ zOQotSPMvPYLZdkF3fnb~tp+xqT-9r(Yry{f@|*&hO}Tj{GewchtS(tPl$@e{A}i~- z&%koz@`IdtdU>HixpRwtb^+_B^WzhnD1}?Juo}^uMoFQ>Xc5UM| zm`~nHuVUi-8Es*wtdrN2tG#jZ>vXk8R$wi3#|v9Cg>f%W!;6{MizPTb@+DR i2gV*0i@CHTF{g7(W|Jk`)7a+D!Ok=XvhV|G^q&9or~n=S delta 1038 zcmYLIT}V@582-NF<~B3d(&IRs=A4ig+VD3hwOOq##9A7ZwtlUNwS=OiMOXukj9557 z%#;*MEc?N-Ll=4zb6$uymENR7L?p-y4Xg~Yp!e*YZ|7W`=Xu}feV_AkzW3{|?yPRL zTFz#CEeNmNpI@@B;EB3~$&NX5`^o)Y!Pj+sU-0LHcepqCu7%vw)%j11Ju%1cS1G(}3a!!hoXwR*t)c3hcxN9>P*cLs#^PBNa?0X=Svy zmP|7?btBAeC*ASIDj*Ir%M__KaR?oZG8Zs=l#y620<1im%T&>hdSFuB5HP8C4VYAS zKuvQ2V27i<5n!@Qe9Q%y)cXOLEZYAIU`ex=T9g)LqcW_vm^plbah72vNL0mDOIX$M4!eL(p8Hz)jDz?&4d(P z-bVkkm$xr1Yqw4+ijSO1<9NEgU!HC { }; disconnectionHandler = () => { }; messageHandler = (data) => { }; - // init + mailboxHandler = (mailboxId2) => { + }; + mailboxConnectionHandler = (mailboxId2) => { + }; + mailboxDeleteHandler = (mailboxId2) => { + }; + // INIT set onconnect(handler) { this.connectionHandler = handler; } @@ -312,28 +318,51 @@ set onmessage(handler) { this.messageHandler = handler; } - // utility methods + set onmailboxcreate(handler) { + this.mailboxHandler = handler; + } + set onmailboxconnect(handler) { + this.mailboxConnectionHandler = handler; + } + set onmailboxdelete(handler) { + this.mailboxDeleteHandler = handler; + } + // UTILITY METHODS send(messageObject) { if (this.ws == void 0) return false; const messageString = JSON.stringify(messageObject); this.ws.send(messageString); return true; } - // public methods + // PUBLIC METHODS + // connection connect(address) { - this.disconnect(); - this.ws = new WebSocket(address); - this.ws.addEventListener("open", this.connectionHandler); - this.ws.addEventListener("close", this.disconnectionHandler); - this.ws.addEventListener("message", (message) => { - const dataString = message.data.toString(); - const data = JSON.parse(dataString); - this.messageHandler(data); - }); + try { + this.disconnect(); + this.ws = new WebSocket(address); + this.ws.addEventListener("open", this.connectionHandler); + this.ws.addEventListener("close", this.disconnectionHandler); + this.ws.addEventListener("message", (message) => { + const dataString = message.data.toString(); + const data = JSON.parse(dataString); + if (data.assignedMailboxId) { + return this.mailboxHandler(data.assignedMailboxId); + } else if (data.connectedMailboxId) { + return this.mailboxConnectionHandler(data.connectedMailboxId); + } else if (data.deletedMailbox) { + return this.mailboxDeleteHandler(data.deletedMailbox); + } else { + this.messageHandler(data); + } + }); + } catch (error) { + console.error(error); + } } disconnect() { this.ws?.close(); } + // message sendMessage(channel, body) { const messageObject = { messageChannel: channel, @@ -341,6 +370,7 @@ }; return this.send(messageObject); } + // subscription subscribe(channel) { const messageObject = { subscribeChannel: channel @@ -353,6 +383,25 @@ }; return this.send(messageObject); } + // mailbox + requestMailbox() { + const messageObject = { + requestingMailboxSetup: true + }; + return this.send(messageObject); + } + connectMailbox(mailboxId2) { + const messageObject = { + requestedMailbox: mailboxId2 + }; + return this.send(messageObject); + } + deleteMailbox(mailboxId2) { + const messageObject = { + deletingMailbox: mailboxId2 + }; + return this.send(messageObject); + } }; // src/translations.ts @@ -382,6 +431,10 @@ showEncryptionKey: "Show encryption key", myName: "My Name", yourNamePlaceholder: "Jane Doe", + mailbox: "Mailbox", + requestMailbox: "Enable", + deleteMailbox: "Disable", + mailboxExplanation: "If you can't receive messages, they will be kept on the server temporarily", // messages messages: "Messages", composerPlaceholder: "Type a message...", @@ -421,6 +474,10 @@ showEncryptionKey: "Mostrar clave de cifrado", myName: "Mi nombre", yourNamePlaceholder: "Juan P\xE9rez", + mailbox: "Buz\xF3n", + requestMailbox: "Activar", + deleteMailbox: "Desactivar", + mailboxExplanation: "Si no puedes recibir mensajes, se guardar\xE1n temporalmente en el servidor", // messages messages: "Mensajes", composerPlaceholder: "Escribe un mensaje...", @@ -458,6 +515,10 @@ showEncryptionKey: "Schl\xFCssel anzeigen", myName: "Mein Name", yourNamePlaceholder: "Max Mustermann", + mailbox: "Briefkasten", + requestMailbox: "Aktivieren", + deleteMailbox: "Deaktivieren", + mailboxExplanation: "Nachrichten werden tempor\xE4r auf dem Server gespeichert, wenn du sie nicht empfangen kannst", // messages messages: "Nachrichten", composerPlaceholder: "Neue Nachricht...", @@ -505,14 +566,22 @@ [serverAddress, currentAddress, isConnected], () => serverAddress.value == "" || currentAddress.value == serverAddress.value && isConnected.value == true ); + var mailboxId = restoreState("mailbox-id", ""); + var isMailboxConnected = new State(false); + var cannotRequestMailbox = createProxyState( + [isConnected, isMailboxConnected], + () => isConnected.value == false || isMailboxConnected.value == true + ); + var cannotDeleteMailbox = createProxyState( + [isConnected, mailboxId, isMailboxConnected], + () => isConnected.value == false || mailboxId.value == "" || isMailboxConnected.value == false + ); var encryptionKey = restoreState("encryption-key", ""); var isEncryptionUnavailable = window.crypto.subtle == void 0; var currentPrimaryChannel = new State(""); var primaryChannel = restoreState("primary-channel", ""); var newSecondaryChannelName = new State(""); var secondaryChannels = restoreListState("secondary-channels"); - var senderName = restoreState("sender-name", ""); - var messageBody = restoreState("message", ""); var cannotSetChannel = createProxyState( [primaryChannel, currentPrimaryChannel, isConnected], () => primaryChannel.value == "" || isConnected.value == false @@ -525,6 +594,8 @@ [newSecondaryChannelName], () => newSecondaryChannelName.value == "" ); + var senderName = restoreState("sender-name", ""); + var messageBody = restoreState("message", ""); var cannotSendMessage = createProxyState( [currentPrimaryChannel, messageBody, senderName, isConnected], () => isConnected.value == false || currentPrimaryChannel.value == "" || messageBody.value == "" || senderName.value == "" @@ -540,6 +611,12 @@ if (cannotDisonnect.value == true) return; UDN.disconnect(); } + function requestMailbox() { + UDN.requestMailbox(); + } + function deleteMailbox() { + UDN.deleteMailbox(mailboxId.value); + } async function sendMessage() { if (cannotSendMessage.value == true) return; const secondaryChannelNames = [ @@ -568,10 +645,6 @@ function deleteMessage(message) { messages.remove(message); } - async function decryptReceivedMessage(message) { - message.body = await decryptMessage(message.body); - messages.callSubscriptions(); - } function setChannel() { if (cannotSetChannel.value == true) return; if (currentPrimaryChannel != void 0) { @@ -592,9 +665,28 @@ function removeSecondaryChannel(channel) { secondaryChannels.remove(channel); } + async function decryptReceivedMessage(message) { + message.body = await decryptMessage(message.body); + messages.callSubscriptions(); + } UDN.onconnect = () => { + UDN.ws?.addEventListener("message", console.log); isConnected.value = true; setChannel(); + if (mailboxId.value != "") { + UDN.connectMailbox(mailboxId.value); + } + }; + UDN.onmailboxcreate = (id) => { + mailboxId.value = id; + UDN.connectMailbox(id); + }; + UDN.onmailboxconnect = () => { + isMailboxConnected.value = true; + }; + UDN.onmailboxdelete = () => { + isMailboxConnected.value = false; + mailboxId.value = ""; }; UDN.onmessage = (data) => { if (data.subscribed != void 0 && data.messageChannel != void 0) { @@ -605,6 +697,7 @@ }; UDN.ondisconnect = () => { isConnected.value = false; + isMailboxConnected.value = false; }; function handleSubscriptionConfirmation(channel, isSubscribed) { if (isSubscribed == true) { @@ -652,6 +745,9 @@ return encryptionData; } } + if (serverAddress.value != "") { + connect(); + } // src/Views/messageComposer.tsx function MessageComposer() { @@ -809,6 +905,23 @@ }, translation.connectToServer, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward") + )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "inbox"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translation.mailbox), /* @__PURE__ */ createElement("span", { class: "secondary" }, translation.mailboxExplanation))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement( + "button", + { + class: "danger width-50", + "on:click": deleteMailbox, + "toggle:disabled": cannotDeleteMailbox + }, + translation.deleteMailbox + ), /* @__PURE__ */ createElement( + "button", + { + class: "primary width-50", + "on:click": requestMailbox, + "toggle:disabled": cannotRequestMailbox + }, + translation.requestMailbox, + /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward") ))); } diff --git a/package.json b/package.json index 7f6dc657..5e9d2059 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "dependencies": { "bloatless-react": "^1.2.4", "esbuild": "latest", - "udn-frontend": "^1.0.3" + "udn-frontend": "^1.0.6" }, "scripts": { "build": "esbuild src/index.tsx --bundle --outdir=dist" diff --git a/src/Views/connectionSettingsView.tsx b/src/Views/connectionSettingsView.tsx index dc616cd2..502b757d 100644 --- a/src/Views/connectionSettingsView.tsx +++ b/src/Views/connectionSettingsView.tsx @@ -2,9 +2,13 @@ import * as React from "bloatless-react"; import { cannotConnect, + cannotDeleteMailbox, cannotDisonnect, + cannotRequestMailbox, connect, + deleteMailbox, disconnect, + requestMailbox, serverAddress, } from "../model"; @@ -41,6 +45,33 @@ export function ConnectionInputView() { arrow_forward + +
+ +
+ inbox +
+ {translation.mailbox} + {translation.mailboxExplanation} +
+
+
+ + +
); } diff --git a/src/model.ts b/src/model.ts index 58955bdc..907773f5 100644 --- a/src/model.ts +++ b/src/model.ts @@ -61,11 +61,28 @@ export const cannotConnect = React.createProxyState( (currentAddress.value == serverAddress.value && isConnected.value == true) ); +// mailbox +export const mailboxId = React.restoreState("mailbox-id", ""); +export const isMailboxConnected = new React.State(false); + +export const cannotRequestMailbox = React.createProxyState( + [isConnected, isMailboxConnected], + () => isConnected.value == false || isMailboxConnected.value == true +); + +export const cannotDeleteMailbox = React.createProxyState( + [isConnected, mailboxId, isMailboxConnected], + () => + isConnected.value == false || + mailboxId.value == "" || + isMailboxConnected.value == false +); + // encryption export const encryptionKey = React.restoreState("encryption-key", ""); export const isEncryptionUnavailable = window.crypto.subtle == undefined; -// sending +// channel export const currentPrimaryChannel = new React.State(""); export const primaryChannel = React.restoreState("primary-channel", ""); @@ -73,10 +90,6 @@ export const newSecondaryChannelName = new React.State(""); export const secondaryChannels = React.restoreListState("secondary-channels"); -export const senderName = React.restoreState("sender-name", ""); - -export const messageBody = React.restoreState("message", ""); - export const cannotSetChannel = React.createProxyState( [primaryChannel, currentPrimaryChannel, isConnected], () => primaryChannel.value == "" || isConnected.value == false @@ -92,6 +105,11 @@ export const cannotAddSecondaryChannel = React.createProxyState( () => newSecondaryChannelName.value == "" ); +// sending +export const senderName = React.restoreState("sender-name", ""); + +export const messageBody = React.restoreState("message", ""); + export const cannotSendMessage = React.createProxyState( [currentPrimaryChannel, messageBody, senderName, isConnected], () => @@ -105,18 +123,29 @@ export const cannotSendMessage = React.createProxyState( export const messages = React.restoreListState("messages"); // METHODS -export function connect() { +// connection +export function connect(): void { if (cannotConnect.value == true) return; currentAddress.value = serverAddress.value; isConnected.value = false; UDN.connect(serverAddress.value); } -export function disconnect() { +export function disconnect(): void { if (cannotDisonnect.value == true) return; UDN.disconnect(); } +// mailbox +export function requestMailbox(): void { + UDN.requestMailbox(); +} + +export function deleteMailbox(): void { + UDN.deleteMailbox(mailboxId.value); +} + +// messages export async function sendMessage(): Promise { if (cannotSendMessage.value == true) return; @@ -158,11 +187,7 @@ export function deleteMessage(message: Message): void { messages.remove(message); } -export async function decryptReceivedMessage(message: Message): Promise { - message.body = await decryptMessage(message.body); - messages.callSubscriptions(); -} - +// channels export function setChannel(): void { if (cannotSetChannel.value == true) return; @@ -190,10 +215,35 @@ export function removeSecondaryChannel(channel: Channel): void { secondaryChannels.remove(channel); } +// encryption +export async function decryptReceivedMessage(message: Message): Promise { + message.body = await decryptMessage(message.body); + messages.callSubscriptions(); +} + // LISTENERS UDN.onconnect = () => { + UDN.ws?.addEventListener("message", console.log) isConnected.value = true; setChannel(); + + if (mailboxId.value != "") { + UDN.connectMailbox(mailboxId.value); + } +}; + +UDN.onmailboxcreate = (id) => { + mailboxId.value = id; + UDN.connectMailbox(id); +}; + +UDN.onmailboxconnect = () => { + isMailboxConnected.value = true; +}; + +UDN.onmailboxdelete = () => { + isMailboxConnected.value = false; + mailboxId.value = ""; }; UDN.onmessage = (data) => { @@ -206,6 +256,7 @@ UDN.onmessage = (data) => { UDN.ondisconnect = () => { isConnected.value = false; + isMailboxConnected.value = false; }; // UTILITY @@ -265,3 +316,8 @@ async function decryptMessage(encryptionData: string): Promise { return encryptionData; } } + +// INIT +if (serverAddress.value != "") { + connect(); +} diff --git a/src/translations.ts b/src/translations.ts index 7adb41a6..8ffdcc64 100644 --- a/src/translations.ts +++ b/src/translations.ts @@ -25,6 +25,11 @@ const englishTranslations = { showEncryptionKey: "Show encryption key", myName: "My Name", yourNamePlaceholder: "Jane Doe", + mailbox: "Mailbox", + requestMailbox: "Enable", + deleteMailbox: "Disable", + mailboxExplanation: + "If you can't receive messages, they will be kept on the server temporarily", // messages messages: "Messages", @@ -69,6 +74,11 @@ const allTranslations: { [key: string]: typeof englishTranslations } = { showEncryptionKey: "Mostrar clave de cifrado", myName: "Mi nombre", yourNamePlaceholder: "Juan Pérez", + mailbox: "Buzón", + requestMailbox: "Activar", + deleteMailbox: "Desactivar", + mailboxExplanation: + "Si no puedes recibir mensajes, se guardarán temporalmente en el servidor", // messages messages: "Mensajes", @@ -110,6 +120,11 @@ const allTranslations: { [key: string]: typeof englishTranslations } = { showEncryptionKey: "Schlüssel anzeigen", myName: "Mein Name", yourNamePlaceholder: "Max Mustermann", + mailbox: "Briefkasten", + requestMailbox: "Aktivieren", + deleteMailbox: "Deaktivieren", + mailboxExplanation: + "Nachrichten werden temporär auf dem Server gespeichert, wenn du sie nicht empfangen kannst", // messages messages: "Nachrichten",