improve connection section

dist/index.js

@@ -580,9 +580,13 @@
 
   // src/Model/model.ts
   var UDN = new UDNFrontend();
-  var currentAddress = new State("");
   var isConnected = new State(false);
   var serverAddressInput = restoreState("socket-address", "");
+  var didRequestConnection = restoreState(
+    "did-request-connection",
+    false
+  );
+  var currentAddress = restoreState("current-address", "");
   var cannotDisonnect = createProxyState(
     [isConnected],
     () => isConnected.value == false
@@ -591,16 +595,25 @@
     [serverAddressInput, currentAddress, isConnected],
     () => serverAddressInput.value == "" || currentAddress.value == serverAddressInput.value && isConnected.value == true
   );
+  var cannotResetAddress = createProxyState(
+    [serverAddressInput, currentAddress],
+    () => serverAddressInput.value == currentAddress.value
+  );
   function connect() {
     if (cannotConnect.value == true) return;
     currentAddress.value = serverAddressInput.value;
     isConnected.value = false;
+    didRequestConnection.value = true;
     UDN.connect(serverAddressInput.value);
   }
   function disconnect() {
+    didRequestConnection.value = false;
     if (cannotDisonnect.value == true) return;
     UDN.disconnect();
   }
+  function resetAddressInput() {
+    serverAddressInput.value = currentAddress.value;
+  }
   UDN.onconnect = () => {
     isConnected.value = true;
   };
@@ -644,7 +657,7 @@
   var isEncryptionUnavailable = window.crypto.subtle == void 0;
   var senderName = restoreState("sender-name", "");
   var selectedChat = new State(void 0);
-  if (serverAddressInput.value != "") {
+  if (serverAddressInput.value != "" && didRequestConnection.value == true) {
     connect();
   }
 
@@ -879,7 +892,7 @@
     ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement(
       "button",
       {
-        class: "danger width-100 flex-1",
+        class: "danger width-100 flex-1 justify-center",
         "aria-label": translation.disconnect,
         "on:click": disconnect,
         "toggle:disabled": cannotDisonnect
@@ -888,16 +901,16 @@
     ), /* @__PURE__ */ createElement(
       "button",
       {
-        class: "width-100 flex-1",
+        class: "width-100 flex-1 justify-center",
         "aria-label": translation.resetAddress,
-        "on:click": disconnect,
+        "on:click": resetAddressInput,
-        "toggle:disabled": cannotDisonnect
+        "toggle:disabled": cannotResetAddress
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "undo")
     ), /* @__PURE__ */ createElement(
       "button",
       {
-        class: "primary width-100 flex-1",
+        class: "primary width-100 flex-1 justify-center",
         "aria-label": translation.connectToServer,
         "on:click": connect,
         "toggle:disabled": cannotConnect

src/Model/model.ts

@@ -8,10 +8,14 @@ export const UDN = new UDNFrontend();
 
 // CONNECTION
 // state
-export const currentAddress = new React.State("");
 export const isConnected = new React.State(false);
 
 export const serverAddressInput = React.restoreState("socket-address", "");
+export const didRequestConnection = React.restoreState(
+  "did-request-connection",
+  false
+);
+export const currentAddress = React.restoreState("current-address", "");
 
 export const cannotDisonnect = React.createProxyState(
   [isConnected],
@@ -26,21 +30,31 @@ export const cannotConnect = React.createProxyState(
       isConnected.value == true)
 );
 
+export const cannotResetAddress = React.createProxyState(
+  [serverAddressInput, currentAddress],
+  () => serverAddressInput.value == currentAddress.value
+);
+
 // methods
 export function connect(): void {
   if (cannotConnect.value == true) return;
+  
   currentAddress.value = serverAddressInput.value;
+
   isConnected.value = false;
+  didRequestConnection.value = true;
+
   UDN.connect(serverAddressInput.value);
 }
 
 export function disconnect(): void {
+  didRequestConnection.value = false;
   if (cannotDisonnect.value == true) return;
   UDN.disconnect();
 }
 
 export function resetAddressInput(): void {
-  this.serverAddressInput.value = this.serverAddress.value;
+  serverAddressInput.value = currentAddress.value;
 }
 
 // listeners
@@ -84,16 +98,16 @@ export function deleteMailbox(): void {
 UDN.onmailboxcreate = (id) => {
   mailboxId.value = id;
   UDN.connectMailbox(id);
-}
+};
 
 UDN.onmailboxconnect = () => {
   isMailboxActive.value = true;
-}
+};
 
 UDN.onmailboxdelete = () => {
   isMailboxActive.value = false;
   mailboxId.value = "";
-}
+};
 
 // MISC
 export const isEncryptionUnavailable = window.crypto.subtle == undefined;
@@ -102,6 +116,6 @@ export const senderName = React.restoreState("sender-name", "");
 export const selectedChat = new React.State<Chat | undefined>(undefined);
 
 // INIT
-if (serverAddressInput.value != "") {
+if (serverAddressInput.value != "" && didRequestConnection.value == true) {
   connect();
 }

src/Views/connectionSection.tsx

@@ -5,10 +5,12 @@ import {
   cannotDeleteMailbox,
   cannotDisonnect,
   cannotRequestMailbox,
+  cannotResetAddress,
   connect,
   deleteMailbox,
   disconnect,
   requestMailbox,
+  resetAddressInput,
   serverAddressInput,
 } from "../Model/model";
 
@@ -30,7 +32,7 @@ export function ConnectionSection() {
       </label>
       <div class="flex-row width-input justify-end">
         <button
-          class="danger width-100 flex-1"
+          class="danger width-100 flex-1 justify-center"
           aria-label={translation.disconnect}
           on:click={disconnect}
           toggle:disabled={cannotDisonnect}
@@ -38,15 +40,15 @@ export function ConnectionSection() {
           <span class="icon">close</span>
         </button>
         <button
-          class="width-100 flex-1"
+          class="width-100 flex-1 justify-center"
           aria-label={translation.resetAddress}
-          on:click={disconnect}
+          on:click={resetAddressInput}
-          toggle:disabled={cannotDisonnect}
+          toggle:disabled={cannotResetAddress}
         >
           <span class="icon">undo</span>
         </button>
         <button
-          class="primary width-100 flex-1"
+          class="primary width-100 flex-1 justify-center"
           aria-label={translation.connectToServer}
           on:click={connect}
           toggle:disabled={cannotConnect}