improve connection section

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}
-          toggle:disabled={cannotDisonnect}
+          on:click={resetAddressInput}
+          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}