update, allow disconnecting

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",