VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup, add button to resend messages

Browse Source
This commit is contained in:
marlon-erler
2024-07-10 15:08:06 +02:00
parent 62ce36e017
commit dd8e86688b
6 changed files with 76 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.js
Vendored
+34 -11
View File
@@ -260,7 +260,7 @@
var IV_SIZE = 12;
var ENCRYPTION_ALG = "AES-GCM";
async function encryptString(plaintext, passphrase) {
if (!window.crypto.subtle) return false;
if (!window.crypto.subtle) return plaintext;
const iv = generateIV();
const key = await importKey(passphrase, "encrypt");
const encryptedArray = await encrypt(iv, key, plaintext);
@@ -360,6 +360,7 @@
newSecondaryChannelName;
primaryChannelInput;
cannotSendMessage;
cannotResendMessage;
cannotAddSecondaryChannel;
cannotSetChannel;
cannotUndoChannel;
@@ -392,6 +393,10 @@
],
() => this.primaryChannel.value == "" || this.composingMessage.value == "" || senderName.value == "" || this.isSubscribed.value == false || isConnected.value == false
);
this.cannotResendMessage = createProxyState(
[this.primaryChannel, this.isSubscribed, isConnected, senderName],
() => this.primaryChannel.value == "" || senderName.value == "" || this.isSubscribed.value == false || isConnected.value == false
);
this.cannotAddSecondaryChannel = createProxyState(
[this.newSecondaryChannelName],
() => this.newSecondaryChannelName.value == ""
@@ -439,8 +444,16 @@
this.messages.add(chatMessage);
};
// messages
sendMessage = async () => {
sendNewMessage = async () => {
if (this.cannotSendMessage.value == true) return;
this.sendMessageText(this.composingMessage.value);
this.composingMessage.value = "";
};
resendMessage = (message) => {
if (this.cannotResendMessage.value == true) return;
this.sendMessageText(message.body);
};
sendMessageText = async (messageText) => {
const secondaryChannelNames = [
...this.secondaryChannels.value.values()
];
@@ -448,10 +461,7 @@
this.primaryChannel.value,
...secondaryChannelNames
];
const encrypted = this.encryptionKey.value == "" ? this.composingMessage.value : await encryptString(
this.composingMessage.value,
this.encryptionKey.value
) || this.composingMessage.value;
const encrypted = this.encryptionKey.value == "" ? messageText : await encryptString(messageText, this.encryptionKey.value);
const joinedChannelName = allChannelNames.join("/");
const messageObject = {
channel: joinedChannelName,
@@ -461,7 +471,6 @@
};
const messageString = JSON.stringify(messageObject);
UDN.sendMessage(joinedChannelName, messageString);
this.composingMessage.value = "";
};
clearMessages = () => {
this.messages.clear();
@@ -775,6 +784,7 @@
noChatSelected: "No chat selected",
composerPlaceholder: "Type a message...",
sendMessage: "Send",
resendMessage: "Resend message",
decryptMessage: "Decrypt message",
copyMessage: "Copy message",
deleteMessage: "Delete message"
@@ -821,6 +831,7 @@
noChatSelected: "Selecciona un chat",
composerPlaceholder: "Escribe un mensaje...",
sendMessage: "Enviar",
resendMessage: "Enviar de nuevo",
decryptMessage: "Descifrar mensaje",
copyMessage: "Copiar mensaje",
deleteMessage: "Eliminar este mensaje"
@@ -865,6 +876,7 @@
noChatSelected: "Kein Chat ausgew\xE4hlt",
composerPlaceholder: "Neue Nachricht...",
sendMessage: "Senden",
resendMessage: "Erneut senden",
decryptMessage: "Nachricht entschl\xFCsseln",
copyMessage: "Nachricht kopieren",
deleteMessage: "Nachricht l\xF6schen"
@@ -981,13 +993,13 @@
style: "max-width: unset",
placeholder: translation.composerPlaceholder,
"bind:value": chat.composingMessage,
"on:enter": chat.sendMessage
"on:enter": chat.sendNewMessage
}
), /* @__PURE__ */ createElement(
"button",
{
class: "primary",
"on:click": chat.sendMessage,
"on:click": chat.sendNewMessage,
"toggle:disabled": chat.cannotSendMessage
},
/* @__PURE__ */ createElement("span", { class: "icon" }, "send")
@@ -997,6 +1009,9 @@
// src/Views/threadView.tsx
function ThreadView(chat) {
const messageConverter = (message) => {
function resendMessage() {
chat.resendMessage(message);
}
function copyMessage() {
navigator.clipboard.writeText(message.body);
}
@@ -1010,7 +1025,15 @@
[chat.messages],
() => message.body
);
return /* @__PURE__ */ createElement("div", { class: "tile width-100 flex-no padding-0" }, /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("div", { class: "flex-row justify-apart align-center secondary" }, /* @__PURE__ */ createElement("span", { class: "padding-h ellipsis" }, /* @__PURE__ */ createElement("b", { class: "info" }, message.sender), " - ", message.channel), /* @__PURE__ */ createElement("span", { class: "flex-row" }, /* @__PURE__ */ createElement(
return /* @__PURE__ */ createElement("div", { class: "tile width-100 flex-no padding-0" }, /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("div", { class: "flex-row justify-apart align-center secondary" }, /* @__PURE__ */ createElement("span", { class: "padding-h ellipsis" }, /* @__PURE__ */ createElement("b", { class: "info" }, message.sender)), /* @__PURE__ */ createElement("span", { class: "flex-row" }, /* @__PURE__ */ createElement(
"button",
{
"aria-label": translation.resendMessage,
"on:click": resendMessage,
"toggle:disabled": chat.cannotResendMessage
},
/* @__PURE__ */ createElement("span", { class: "icon" }, "replay")
), /* @__PURE__ */ createElement(
"button",
{
"aria-label": translation.copyMessage,
@@ -1024,7 +1047,7 @@
"on:click": decrypt2
},
/* @__PURE__ */ createElement("span", { class: "icon" }, "key")
), /* @__PURE__ */ createElement("button", { "aria-label": translation.deleteMessage, "on:click": remove }, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("div", { class: "flex-column padding-h padding-bottom" }, /* @__PURE__ */ createElement("b", { class: "break-word", "subscribe:innerText": messageBody }), /* @__PURE__ */ createElement("span", { class: "secondary" }, new Date(message.isoDate).toLocaleString()))));
), /* @__PURE__ */ createElement("button", { "aria-label": translation.deleteMessage, "on:click": remove }, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("div", { class: "flex-column padding-h padding-bottom" }, /* @__PURE__ */ createElement("b", { class: "break-word", "subscribe:innerText": messageBody }), /* @__PURE__ */ createElement("span", { class: "secondary" }, /* @__PURE__ */ createElement("b", null, new Date(message.isoDate).toLocaleString()), " - ", message.channel))));
};
const listElement = /* @__PURE__ */ createElement(
"div",
src/Model/chatModel.ts
+22 -9
View File
@@ -38,6 +38,7 @@ export class Chat {
primaryChannelInput: React.State<string>;
cannotSendMessage: React.State<boolean>;
cannotResendMessage: React.State<boolean>;
cannotAddSecondaryChannel: React.State<boolean>;
cannotSetChannel: React.State<boolean>;
cannotUndoChannel: React.State<boolean>;
@@ -84,6 +85,14 @@ export class Chat {
this.isSubscribed.value == false ||
isConnected.value == false
);
this.cannotResendMessage = React.createProxyState(
[this.primaryChannel, this.isSubscribed, isConnected, senderName],
() =>
this.primaryChannel.value == "" ||
senderName.value == "" ||
this.isSubscribed.value == false ||
isConnected.value == false
);
this.cannotAddSecondaryChannel = React.createProxyState(
[this.newSecondaryChannelName],
() => this.newSecondaryChannelName.value == ""
@@ -141,9 +150,19 @@ export class Chat {
};
// messages
sendMessage = async (): Promise<void> => {
sendNewMessage = async (): Promise<void> => {
if (this.cannotSendMessage.value == true) return;
this.sendMessageText(this.composingMessage.value);
this.composingMessage.value = "";
};
resendMessage = (message: ChatMessage) => {
if (this.cannotResendMessage.value == true) return;
this.sendMessageText(message.body);
};
sendMessageText = async (messageText: string): Promise<void> => {
// get channels
const secondaryChannelNames: string[] = [
...this.secondaryChannels.value.values(),
@@ -156,11 +175,8 @@ export class Chat {
// encrypt
const encrypted =
this.encryptionKey.value == ""
? this.composingMessage.value
: (await encryptString(
this.composingMessage.value,
this.encryptionKey.value
)) || this.composingMessage.value;
? messageText
: await encryptString(messageText, this.encryptionKey.value);
// create object
const joinedChannelName = allChannelNames.join("/");
@@ -174,9 +190,6 @@ export class Chat {
// send
UDN.sendMessage(joinedChannelName, messageString);
// clear
this.composingMessage.value = "";
};
clearMessages = (): void => {
src/Views/messageComposer.tsx
+2 -2
View File
@@ -12,11 +12,11 @@ export function MessageComposer(chat: Chat) {
style="max-width: unset"
placeholder={translation.composerPlaceholder}
bind:value={chat.composingMessage}
on:enter={chat.sendMessage}
on:enter={chat.sendNewMessage}
></input>
<button
class="primary"
on:click={chat.sendMessage}
on:click={chat.sendNewMessage}
toggle:disabled={chat.cannotSendMessage}
>
<span class="icon">send</span>
src/Views/threadView.tsx
+13 -4
View File
@@ -6,6 +6,10 @@ import { translation } from "../translations";
export function ThreadView(chat: Chat) {
const messageConverter: React.ListItemConverter<ChatMessage> = (message) => {
function resendMessage() {
chat.resendMessage(message);
}
function copyMessage() {
navigator.clipboard.writeText(message.body);
}
@@ -28,9 +32,16 @@ export function ThreadView(chat: Chat) {
<div class="flex-column">
<div class="flex-row justify-apart align-center secondary">
<span class="padding-h ellipsis">
<b class="info">{message.sender}</b> - {message.channel}
<b class="info">{message.sender}</b>
</span>
<span class="flex-row">
<button
aria-label={translation.resendMessage}
on:click={resendMessage}
toggle:disabled={chat.cannotResendMessage}
>
<span class="icon">replay</span>
</button>
<button
aria-label={translation.copyMessage}
on:click={copyMessage}
@@ -50,9 +61,7 @@ export function ThreadView(chat: Chat) {
</div>
<div class="flex-column padding-h padding-bottom">
<b class="break-word" subscribe:innerText={messageBody}></b>
<span class="secondary">
{new Date(message.isoDate).toLocaleString()}
</span>
<span class="secondary"><b>{new Date(message.isoDate).toLocaleString()}</b> - {message.channel}</span>
</div>
</div>
</div>
src/cryptUtility.ts
+2 -2
View File
@@ -5,8 +5,8 @@ const ENCRYPTION_ALG = "AES-GCM";
export async function encryptString(
plaintext: string,
passphrase: string
): Promise<string | false> {
if (!window.crypto.subtle) return false;
): Promise<string> {
if (!window.crypto.subtle) return plaintext;
const iv = generateIV();
const key = await importKey(passphrase, "encrypt");
src/translations.ts
+3
View File
@@ -55,6 +55,7 @@ const englishTranslations = {
composerPlaceholder: "Type a message...",
sendMessage: "Send",
resendMessage: "Resend message",
decryptMessage: "Decrypt message",
copyMessage: "Copy message",
deleteMessage: "Delete message",
@@ -119,6 +120,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
composerPlaceholder: "Escribe un mensaje...",
sendMessage: "Enviar",
resendMessage: "Enviar de nuevo",
decryptMessage: "Descifrar mensaje",
copyMessage: "Copiar mensaje",
deleteMessage: "Eliminar este mensaje",
@@ -180,6 +182,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
composerPlaceholder: "Neue Nachricht...",
sendMessage: "Senden",
resendMessage: "Erneut senden",
decryptMessage: "Nachricht entschlüsseln",
copyMessage: "Nachricht kopieren",
deleteMessage: "Nachricht löschen",