cleanup, start rebuilding model
This commit is contained in:
marlon-erler
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"bloatless-react": "^1.2.5",
|
||||
"bloatless-react": "^1.2.6",
|
||||
"esbuild": "latest",
|
||||
"udn-frontend": "^1.0.7-beta1"
|
||||
},
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import { UDN, isConnected } from "./model";
|
||||
import { decryptString, encryptString } from "../cryptUtility";
|
||||
|
||||
import { senderName } from "./viewModel";
|
||||
import { storageKeys } from "../utility";
|
||||
|
||||
// TYPES
|
||||
// message
|
||||
export interface Message {
|
||||
channel: string;
|
||||
sender: string;
|
||||
body: string;
|
||||
isoDate: string;
|
||||
}
|
||||
|
||||
export class Message {
|
||||
constructor(
|
||||
public channel: string,
|
||||
public sender: string,
|
||||
public body: string,
|
||||
public isoDate: string
|
||||
) {}
|
||||
}
|
||||
|
||||
// chat
|
||||
export class Chat {
|
||||
id: string;
|
||||
|
||||
primaryChannel: React.State<string>;
|
||||
secondaryChannels: React.ListState<string>;
|
||||
|
||||
encryptionKey: React.State<string>;
|
||||
messages: React.ListState<Message>;
|
||||
|
||||
composingMessage: React.State<string>;
|
||||
cannotSendMessage: React.State<boolean>;
|
||||
|
||||
newSecondaryChannelName: React.State<string>;
|
||||
cannotAddSecondaryChannel: React.State<boolean>;
|
||||
|
||||
// init
|
||||
constructor(id: string = React.UUID()) {
|
||||
this.primaryChannel = React.restoreState(
|
||||
storageKeys.primaryChannel(id),
|
||||
""
|
||||
);
|
||||
this.secondaryChannels = React.restoreListState(
|
||||
storageKeys.secondaryChannels(id)
|
||||
);
|
||||
|
||||
this.encryptionKey = React.restoreState(storageKeys.encyptionKey(id), "");
|
||||
this.messages = React.restoreListState(storageKeys.messages(id));
|
||||
|
||||
this.composingMessage = React.restoreState(
|
||||
storageKeys.composingMessage(id),
|
||||
""
|
||||
);
|
||||
this.newSecondaryChannelName = new React.State("");
|
||||
|
||||
this.cannotSendMessage = React.createProxyState(
|
||||
[this.primaryChannel, this.composingMessage, isConnected],
|
||||
() =>
|
||||
this.primaryChannel.value == "" ||
|
||||
this.composingMessage.value == "" ||
|
||||
isConnected.value == false
|
||||
);
|
||||
this.cannotAddSecondaryChannel = React.createProxyState(
|
||||
[this.newSecondaryChannelName],
|
||||
() => this.newSecondaryChannelName.value == ""
|
||||
);
|
||||
}
|
||||
|
||||
// messages
|
||||
async sendMessage(): Promise<void> {
|
||||
if (this.cannotSendMessage.value == true) return;
|
||||
|
||||
// get channels
|
||||
const secondaryChannelNames: string[] = [
|
||||
...this.secondaryChannels.value.values(),
|
||||
].map((channel) => channel);
|
||||
const allChannelNames: string[] = [
|
||||
this.primaryChannel.value,
|
||||
...secondaryChannelNames,
|
||||
];
|
||||
|
||||
// encrypt
|
||||
const encrypted =
|
||||
(await encryptString(
|
||||
this.composingMessage.value,
|
||||
this.encryptionKey.value
|
||||
)) || this.composingMessage.value;
|
||||
if (encrypted == undefined) return;
|
||||
|
||||
// create object
|
||||
const joinedChannelName = allChannelNames.join("/");
|
||||
const messageObject = new Message(
|
||||
joinedChannelName,
|
||||
senderName.value,
|
||||
encrypted,
|
||||
new Date().toISOString()
|
||||
);
|
||||
const messageString = JSON.stringify(messageObject);
|
||||
|
||||
// send
|
||||
UDN.sendMessage(joinedChannelName, messageString);
|
||||
|
||||
// clear
|
||||
this.composingMessage.value = "";
|
||||
}
|
||||
|
||||
clearMessages(): void {
|
||||
this.messages.clear();
|
||||
}
|
||||
|
||||
deleteMessage(message: Message): void {
|
||||
this.messages.remove(message);
|
||||
}
|
||||
|
||||
async decryptReceivedMessage(message: Message): Promise<void> {
|
||||
message.body = await decryptString(message.body, this.encryptionKey.value);
|
||||
this.messages.callSubscriptions();
|
||||
}
|
||||
|
||||
// channel
|
||||
setChannel(): void {}
|
||||
|
||||
addSecondaryChannel(): void {
|
||||
if (this.cannotAddSecondaryChannel.value == true) return;
|
||||
|
||||
this.secondaryChannels.add(this.newSecondaryChannelName.value);
|
||||
this.newSecondaryChannelName.value = "";
|
||||
}
|
||||
|
||||
removeSecondaryChannel(channel: string): void {
|
||||
this.secondaryChannels.remove(channel);
|
||||
}
|
||||
}
|
||||
|
||||
// INIT
|
||||
const chatIds = React.restoreListState<string>("chat-ids");
|
||||
const chatArray = [...chatIds.value.values()].map((id) => new Chat(id));
|
||||
export const chats = new React.ListState<Chat>(chatArray);
|
||||
|
||||
// METHODS
|
||||
export function createChatWithName(name: string): void {
|
||||
const newChat = new Chat();
|
||||
newChat.primaryChannel.value = name;
|
||||
chatIds.add(newChat.id);
|
||||
}
|
||||
|
||||
export function removeChat(chat: Chat): void {
|
||||
Object.values(storageKeys).forEach((cb) => {
|
||||
localStorage.removeItem(cb(chat.id));
|
||||
});
|
||||
|
||||
chats.remove(chat);
|
||||
chatIds.remove(chat.id);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import {
|
||||
arrayToUint8,
|
||||
decrypt,
|
||||
encrypt,
|
||||
generateIV,
|
||||
importKey,
|
||||
uInt8ToArray,
|
||||
} from "../cryptUtility";
|
||||
|
||||
import UDNFrontend from "udn-frontend";
|
||||
import { serverAddress } from "./viewModel";
|
||||
import { translation } from "../translations";
|
||||
|
||||
export const UDN = new UDNFrontend();
|
||||
|
||||
// CONNECTION
|
||||
// state
|
||||
export const isConnected = new React.State(false);
|
||||
export const currentAddress = new React.State("");
|
||||
|
||||
export const cannotDisonnect = React.createProxyState(
|
||||
[isConnected],
|
||||
() => isConnected.value == false
|
||||
);
|
||||
|
||||
export const cannotConnect = React.createProxyState(
|
||||
[serverAddress, currentAddress, isConnected],
|
||||
() =>
|
||||
serverAddress.value == "" ||
|
||||
(currentAddress.value == serverAddress.value && isConnected.value == true)
|
||||
);
|
||||
|
||||
// methods
|
||||
export function connect(): void {
|
||||
if (cannotConnect.value == true) return;
|
||||
currentAddress.value = serverAddress.value;
|
||||
isConnected.value = false;
|
||||
UDN.connect(serverAddress.value);
|
||||
}
|
||||
|
||||
export function disconnect(): void {
|
||||
if (cannotDisonnect.value == true) return;
|
||||
UDN.disconnect();
|
||||
}
|
||||
|
||||
// LISTENERS
|
||||
UDN.onconnect = () => {
|
||||
isConnected.value = true;
|
||||
};
|
||||
|
||||
|
||||
UDN.onmessage = (data) => {
|
||||
|
||||
};
|
||||
|
||||
UDN.ondisconnect = () => {
|
||||
isConnected.value = false;
|
||||
};
|
||||
|
||||
// INIT
|
||||
if (serverAddress.value != "") {
|
||||
connect();
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import { translation } from "../translations";
|
||||
|
||||
// connection
|
||||
export const currentAddress = new React.State("");
|
||||
|
||||
export const serverAddress = React.restoreState("socket-address", "");
|
||||
export const isConnected = new React.State(false);
|
||||
export const connectionMessage = React.createProxyState([serverAddress], () =>
|
||||
translation.connectedTo(serverAddress.value)
|
||||
);
|
||||
|
||||
// misc
|
||||
export const isEncryptionUnavailable = window.crypto.subtle == undefined;
|
||||
export const senderName = React.restoreState("sender-name", "");
|
||||
|
||||
// chat
|
||||
export const newChatPrimaryChannelName = new React.State("");
|
||||
export const newChatSecondaryChannelName = new React.State("");
|
||||
export const newChatSecondaryChannelNames = new React.ListState<string>();
|
||||
@@ -1,6 +1,40 @@
|
||||
const IV_SIZE = 12;
|
||||
const ENCRYPTION_ALG = "AES-GCM";
|
||||
|
||||
// minimal
|
||||
export async function encryptString(
|
||||
plaintext: string,
|
||||
passphrase: string
|
||||
): Promise<string | false> {
|
||||
if (!window.crypto.subtle) return false;
|
||||
|
||||
const iv = generateIV();
|
||||
const key = await importKey(passphrase, "encrypt");
|
||||
const encryptedArray = await encrypt(iv, key, plaintext);
|
||||
|
||||
const encryptionData = {
|
||||
iv: uInt8ToArray(iv),
|
||||
encryptedArray: uInt8ToArray(encryptedArray),
|
||||
};
|
||||
return btoa(JSON.stringify(encryptionData));
|
||||
}
|
||||
|
||||
export async function decryptString(
|
||||
cyphertext: string,
|
||||
passphrase: string
|
||||
): Promise<string> {
|
||||
try {
|
||||
const encrypionData = JSON.parse(atob(cyphertext));
|
||||
const iv = arrayToUint8(encrypionData.iv);
|
||||
const encryptedArray = arrayToUint8(encrypionData.encryptedArray);
|
||||
|
||||
const key = await importKey(passphrase, "decrypt");
|
||||
return await decrypt(iv, key, encryptedArray);
|
||||
} catch {
|
||||
return cyphertext;
|
||||
}
|
||||
}
|
||||
|
||||
// process
|
||||
export function encode(string: string): Uint8Array {
|
||||
return new TextEncoder().encode(string);
|
||||
|
||||
-333
@@ -1,333 +0,0 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import {
|
||||
arrayToUint8,
|
||||
decrypt,
|
||||
encrypt,
|
||||
generateIV,
|
||||
importKey,
|
||||
uInt8ToArray,
|
||||
} from "./cryptUtility";
|
||||
|
||||
import UDNFrontend from "udn-frontend";
|
||||
import { translation } from "./translations";
|
||||
|
||||
const UDN = new UDNFrontend();
|
||||
|
||||
// TYPE
|
||||
export class Channel implements React.Identifiable {
|
||||
id = React.UUID();
|
||||
constructor(public channelName: string) {}
|
||||
}
|
||||
|
||||
export interface Message extends React.Identifiable {
|
||||
channel: string;
|
||||
sender: string;
|
||||
body: string;
|
||||
isoDate: string;
|
||||
}
|
||||
|
||||
export class Message implements React.Identifiable {
|
||||
id = React.UUID();
|
||||
|
||||
constructor(
|
||||
public channel: string,
|
||||
public sender: string,
|
||||
public body: string,
|
||||
public isoDate: string
|
||||
) {}
|
||||
}
|
||||
|
||||
// STATE
|
||||
// connection
|
||||
export const currentAddress = new React.State("");
|
||||
export const serverAddress = React.restoreState("socket-address", "");
|
||||
export const isConnected = new React.State(false);
|
||||
export const connectionMessage = React.createProxyState([serverAddress], () =>
|
||||
translation.connectedTo(serverAddress.value)
|
||||
);
|
||||
|
||||
export const cannotDisonnect = React.createProxyState(
|
||||
[isConnected],
|
||||
() => isConnected.value == false
|
||||
);
|
||||
|
||||
export const cannotConnect = React.createProxyState(
|
||||
[serverAddress, currentAddress, isConnected],
|
||||
() =>
|
||||
serverAddress.value == "" ||
|
||||
(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;
|
||||
|
||||
// channel
|
||||
export const currentPrimaryChannel = new React.State("");
|
||||
export const primaryChannel = React.restoreState("primary-channel", "");
|
||||
|
||||
export const newSecondaryChannelName = new React.State("");
|
||||
export const secondaryChannels =
|
||||
React.restoreListState<Channel>("secondary-channels");
|
||||
|
||||
export const cannotSetChannel = React.createProxyState(
|
||||
[primaryChannel, currentPrimaryChannel, isConnected],
|
||||
() => primaryChannel.value == "" || isConnected.value == false
|
||||
);
|
||||
|
||||
export const cannotLeaveChannel = React.createProxyState(
|
||||
[currentPrimaryChannel, isConnected],
|
||||
() => currentPrimaryChannel.value == "" || isConnected.value == false
|
||||
);
|
||||
|
||||
export const cannotAddSecondaryChannel = React.createProxyState(
|
||||
[newSecondaryChannelName],
|
||||
() => 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],
|
||||
() =>
|
||||
isConnected.value == false ||
|
||||
currentPrimaryChannel.value == "" ||
|
||||
messageBody.value == "" ||
|
||||
senderName.value == ""
|
||||
);
|
||||
|
||||
// receiving
|
||||
export const messages = React.restoreListState<Message>("messages");
|
||||
|
||||
// METHODS
|
||||
// connection
|
||||
export function connect(): void {
|
||||
if (cannotConnect.value == true) return;
|
||||
currentAddress.value = serverAddress.value;
|
||||
isConnected.value = false;
|
||||
UDN.connect(serverAddress.value);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
export function updateMailbox(): void {
|
||||
if (!isMailboxConnected || mailboxId.value == "") return;
|
||||
|
||||
deleteMailbox();
|
||||
requestMailbox();
|
||||
}
|
||||
|
||||
// messages
|
||||
export async function sendMessage(): Promise<void> {
|
||||
if (cannotSendMessage.value == true) return;
|
||||
|
||||
// get channels
|
||||
const secondaryChannelNames: string[] = [
|
||||
...secondaryChannels.value.values(),
|
||||
].map((channel) => channel.channelName);
|
||||
const allChannelNames: string[] = [
|
||||
primaryChannel.value,
|
||||
...secondaryChannelNames,
|
||||
];
|
||||
|
||||
// encrypt
|
||||
const encrypted = await encryptMessage();
|
||||
if (encrypted == undefined) return;
|
||||
|
||||
// create object
|
||||
const joinedChannelName = allChannelNames.join("/");
|
||||
const messageObject = new Message(
|
||||
joinedChannelName,
|
||||
senderName.value,
|
||||
encrypted,
|
||||
new Date().toISOString()
|
||||
);
|
||||
const messageString = JSON.stringify(messageObject);
|
||||
|
||||
// send
|
||||
UDN.sendMessage(joinedChannelName, messageString);
|
||||
|
||||
// clear
|
||||
messageBody.value = "";
|
||||
}
|
||||
|
||||
export function clearMessageHistory(): void {
|
||||
messages.clear();
|
||||
}
|
||||
|
||||
export function deleteMessage(message: Message): void {
|
||||
messages.remove(message);
|
||||
}
|
||||
|
||||
// channels
|
||||
export function setChannel(shouldUpdateMailbox: boolean = true): void {
|
||||
if (cannotSetChannel.value == true) return;
|
||||
|
||||
if (currentPrimaryChannel != undefined) {
|
||||
UDN.unsubscribe(currentPrimaryChannel.value);
|
||||
}
|
||||
UDN.subscribe(primaryChannel.value);
|
||||
|
||||
if (shouldUpdateMailbox) {
|
||||
updateMailbox();
|
||||
}
|
||||
}
|
||||
|
||||
export function leaveChannel(): void {
|
||||
if (cannotLeaveChannel.value == true) return;
|
||||
|
||||
UDN.unsubscribe(currentPrimaryChannel.value);
|
||||
}
|
||||
|
||||
export function addSecondaryChannel(): void {
|
||||
if (cannotAddSecondaryChannel.value == true) return;
|
||||
|
||||
const channelObject = new Channel(newSecondaryChannelName.value);
|
||||
secondaryChannels.add(channelObject);
|
||||
newSecondaryChannelName.value = "";
|
||||
}
|
||||
|
||||
export function removeSecondaryChannel(channel: Channel): void {
|
||||
secondaryChannels.remove(channel);
|
||||
}
|
||||
|
||||
// encryption
|
||||
export async function decryptReceivedMessage(message: Message): Promise<void> {
|
||||
message.body = await decryptMessage(message.body);
|
||||
messages.callSubscriptions();
|
||||
}
|
||||
|
||||
// LISTENERS
|
||||
UDN.onconnect = () => {
|
||||
isConnected.value = true;
|
||||
setChannel(false);
|
||||
|
||||
if (mailboxId.value != "") {
|
||||
UDN.connectMailbox(mailboxId.value);
|
||||
}
|
||||
};
|
||||
|
||||
UDN.onmailboxcreate = (id) => {
|
||||
mailboxId.value = id;
|
||||
UDN.connectMailbox(id);
|
||||
};
|
||||
|
||||
UDN.onmailboxconnect = () => {
|
||||
console.log("connected")
|
||||
isMailboxConnected.value = true;
|
||||
};
|
||||
|
||||
UDN.onmailboxdelete = () => {
|
||||
isMailboxConnected.value = false;
|
||||
mailboxId.value = "";
|
||||
setChannel();
|
||||
};
|
||||
|
||||
UDN.onmessage = (data) => {
|
||||
if (data.subscribed != undefined && data.messageChannel != undefined) {
|
||||
return handleSubscriptionConfirmation(data.messageChannel, data.subscribed);
|
||||
} else if (data.messageBody) {
|
||||
handleMessage(data.messageBody);
|
||||
}
|
||||
};
|
||||
|
||||
UDN.ondisconnect = () => {
|
||||
isConnected.value = false;
|
||||
isMailboxConnected.value = false;
|
||||
};
|
||||
|
||||
// UTILITY
|
||||
function handleSubscriptionConfirmation(
|
||||
channel: string,
|
||||
isSubscribed: boolean
|
||||
): void {
|
||||
if (isSubscribed == true) {
|
||||
currentPrimaryChannel.value = channel;
|
||||
} else {
|
||||
currentPrimaryChannel.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
async function handleMessage(body: string): Promise<void> {
|
||||
try {
|
||||
const object: Message = JSON.parse(body);
|
||||
if (!object.channel || !object.sender || !object.body || !object.isoDate)
|
||||
return;
|
||||
|
||||
const messageObject = new Message(
|
||||
object.channel,
|
||||
object.sender,
|
||||
await decryptMessage(object.body),
|
||||
object.isoDate
|
||||
);
|
||||
messages.add(messageObject);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function encryptMessage(): Promise<string> {
|
||||
if (encryptionKey.value == "") return messageBody.value;
|
||||
|
||||
if (!window.crypto.subtle) return messageBody.value;
|
||||
|
||||
const iv = generateIV();
|
||||
const key = await importKey(encryptionKey.value, "encrypt");
|
||||
const encryptedArray = await encrypt(iv, key, messageBody.value);
|
||||
|
||||
const encryptionData = {
|
||||
iv: uInt8ToArray(iv),
|
||||
encryptedArray: uInt8ToArray(encryptedArray),
|
||||
};
|
||||
return btoa(JSON.stringify(encryptionData));
|
||||
}
|
||||
|
||||
async function decryptMessage(encryptionData: string): Promise<string> {
|
||||
try {
|
||||
const encrypionData = JSON.parse(atob(encryptionData));
|
||||
const iv = arrayToUint8(encrypionData.iv);
|
||||
const encryptedArray = arrayToUint8(encrypionData.encryptedArray);
|
||||
|
||||
const key = await importKey(encryptionKey.value, "decrypt");
|
||||
return await decrypt(iv, key, encryptedArray);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return encryptionData;
|
||||
}
|
||||
}
|
||||
|
||||
// INIT
|
||||
if (serverAddress.value != "") {
|
||||
connect();
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
export const storageKeys = {
|
||||
primaryChannel(id: string): string {
|
||||
return id + "primary-channel";
|
||||
},
|
||||
|
||||
secondaryChannels(id: string): string {
|
||||
return id + "secondary-channels";
|
||||
},
|
||||
|
||||
encyptionKey(id: string): string {
|
||||
return id + "encryption-key";
|
||||
},
|
||||
|
||||
messages(id: string): string {
|
||||
return id + "messages";
|
||||
},
|
||||
|
||||
composingMessage(id: string): string {
|
||||
return id + "composing-message";
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user