update, allow disconnecting

dist/index.js

@@ -321,6 +321,7 @@
     }
     // public methods
     connect(address) {
+      this.disconnect();
       this.ws = new WebSocket(address);
       this.ws.addEventListener("open", this.connectionHandler);
       this.ws.addEventListener("close", this.disconnectionHandler);
@@ -330,6 +331,9 @@
         this.messageHandler(data);
       });
     }
+    disconnect() {
+      this.ws?.close();
+    }
     sendMessage(channel, body) {
       const messageObject = {
         messageChannel: channel,
@@ -366,6 +370,7 @@
     serverAddress: "Server Address",
     serverAddressPlaceholder: "wss://192.168.0.69:3000",
     connectToServer: "Connect",
+    disconnect: "Disonnect",
     primaryChannel: "Primary channel",
     leaveChannel: "Leave",
     channelPlaceholder: "my-channel",
@@ -404,6 +409,7 @@
       serverAddress: "Direcci\xF3n del servidor",
       serverAddressPlaceholder: "wss://192.168.0.69:3000",
       connectToServer: "Conectar",
+      disconnect: "Desconectar",
       primaryChannel: "Canal principal",
       leaveChannel: "Salir",
       channelPlaceholder: "mi-canal",
@@ -440,6 +446,7 @@
       serverAddress: "Serveraddresse",
       serverAddressPlaceholder: "wss://192.168.0.69:3000",
       connectToServer: "Verbinden",
+      disconnect: "Trennen",
       primaryChannel: "Hauptkanal",
       leaveChannel: "Verlassen",
       channelPlaceholder: "mein-kanal",
@@ -490,6 +497,10 @@
     [serverAddress],
     () => translation.connectedTo(serverAddress.value)
   );
+  var cannotDisonnect = createProxyState(
+    [isConnected],
+    () => isConnected.value == false
+  );
   var cannotConnect = createProxyState(
     [serverAddress, currentAddress, isConnected],
     () => serverAddress.value == "" || currentAddress.value == serverAddress.value && isConnected.value == true
@@ -515,8 +526,8 @@
     () => newSecondaryChannelName.value == ""
   );
   var cannotSendMessage = createProxyState(
-    [currentPrimaryChannel, messageBody, senderName],
+    [currentPrimaryChannel, messageBody, senderName, isConnected],
-    () => currentPrimaryChannel.value == "" || messageBody.value == "" || senderName.value == ""
+    () => isConnected.value == false || currentPrimaryChannel.value == "" || messageBody.value == "" || senderName.value == ""
   );
   var messages = restoreListState("messages");
   function connect() {
@@ -525,6 +536,10 @@
     isConnected.value = false;
     UDN.connect(serverAddress.value);
   }
+  function disconnect() {
+    if (cannotDisonnect.value == true) return;
+    UDN.disconnect();
+  }
   async function sendMessage() {
     if (cannotSendMessage.value == true) return;
     const secondaryChannelNames = [
@@ -778,6 +793,14 @@
         placeholder: translation.serverAddressPlaceholder
       }
     ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "danger width-50",
+        "on:click": disconnect,
+        "toggle:disabled": cannotDisonnect
+      },
+      translation.disconnect
+    ), /* @__PURE__ */ createElement(
       "button",
       {
         class: "primary width-50",

dist/styles.css

@@ -949,7 +949,10 @@ main {
   text-overflow: ellipsis;
 }
 
-.tile,
+.tile {
+  word-break: normal;
+}
+
 .break-all {
   word-break: break-all;
 }

package.json

@@ -2,7 +2,7 @@
   "dependencies": {
     "bloatless-react": "^1.2.4",
     "esbuild": "latest",
-    "udn-frontend": "^1.0.2"
+    "udn-frontend": "^1.0.3"
   },
   "scripts": {
     "build": "esbuild src/index.tsx --bundle --outdir=dist"

src/Views/connectionSettingsView.tsx

@@ -2,7 +2,9 @@ import * as React from "bloatless-react";
 
 import {
   cannotConnect,
+  cannotDisonnect,
   connect,
+  disconnect,
   serverAddress,
 } from "../model";
 
@@ -23,6 +25,13 @@ export function ConnectionInputView() {
         </div>
       </label>
       <div class="flex-row width-input justify-end">
+        <button
+          class="danger width-50"
+          on:click={disconnect}
+          toggle:disabled={cannotDisonnect}
+        >
+          {translation.disconnect}
+        </button>
         <button
           class="primary width-50"
           on:click={connect}

src/model.ts

@@ -49,6 +49,11 @@ 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],
   () =>
@@ -88,8 +93,9 @@ export const cannotAddSecondaryChannel = React.createProxyState(
 );
 
 export const cannotSendMessage = React.createProxyState(
-  [currentPrimaryChannel, messageBody, senderName],
+  [currentPrimaryChannel, messageBody, senderName, isConnected],
   () =>
+    isConnected.value == false ||
     currentPrimaryChannel.value == "" ||
     messageBody.value == "" ||
     senderName.value == ""
@@ -106,6 +112,11 @@ export function connect() {
   UDN.connect(serverAddress.value);
 }
 
+export function disconnect() {
+  if (cannotDisonnect.value == true) return;
+  UDN.disconnect();
+}
+
 export async function sendMessage(): Promise<void> {
   if (cannotSendMessage.value == true) return;
 

src/translations.ts

@@ -13,6 +13,7 @@ const englishTranslations = {
   serverAddress: "Server Address",
   serverAddressPlaceholder: "wss://192.168.0.69:3000",
   connectToServer: "Connect",
+  disconnect: "Disonnect",
   primaryChannel: "Primary channel",
   leaveChannel: "Leave",
   channelPlaceholder: "my-channel",
@@ -56,6 +57,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     serverAddress: "Dirección del servidor",
     serverAddressPlaceholder: "wss://192.168.0.69:3000",
     connectToServer: "Conectar",
+    disconnect: "Desconectar",
     primaryChannel: "Canal principal",
     leaveChannel: "Salir",
     channelPlaceholder: "mi-canal",
@@ -96,6 +98,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     serverAddress: "Serveraddresse",
     serverAddressPlaceholder: "wss://192.168.0.69:3000",
     connectToServer: "Verbinden",
+    disconnect: "Trennen",
     primaryChannel: "Hauptkanal",
     leaveChannel: "Verlassen",
     channelPlaceholder: "mein-kanal",