add setting for encryption key

src/View/ChatPages/settingsPage.tsx

@@ -21,6 +21,7 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
       </div>
       <div class="content">
         <label class="tile flex-no">
+          <span class="icon">forum</span>
           <div>
             <span>{translations.chatPage.settings.primaryChannelLabel}</span>
             <input
@@ -77,6 +78,41 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
 
         <hr></hr>
 
+        <label class="tile flex-no">
+          <span class="icon">key</span>
+          <div>
+            <span>{translations.chatPage.settings.encryptionKeyLabel}</span>
+            <input
+              bind:value={chatViewModel.encryptionKeyInput}
+              on:enter={chatViewModel.setEncryptionKey}
+              set:type={chatViewModel.encryptionKeyInputType}
+            ></input>
+          </div>
+        </label>
+        <div class="flex-row justify-end width-input">
+          <button
+            class="width-50"
+            aria-label={
+              translations.chatPage.settings.setEncryptionKeyButtonAudioLabel
+            }
+            on:click={chatViewModel.setEncryptionKey}
+            toggle:disabled={chatViewModel.cannotSetEncryptionKey}
+          >
+            {translations.general.setButton}
+            <span class="icon">check</span>
+          </button>
+        </div>
+
+        <label class="inline">
+          <input
+            type="checkbox"
+            bind:checked={chatViewModel.shouldShowEncryptionKey}
+          ></input>
+          {translations.chatPage.settings.showEncryptionKey}
+        </label>
+
+        <hr></hr>
+
         <div class="flex-row gap width-input">
           {...Object.values(Color).map((color) => {
             const isSelected = React.createProxyState(

src/View/translations.ts

@@ -2,7 +2,7 @@ const englishTranslations = {
   general: {
     closeButtonAudioLabel: "close",
     deleteItemButtonAudioLabel: "delete item",
-    
+
     setButton: "Set",
   },
 
@@ -91,7 +91,11 @@ const englishTranslations = {
       newSecondaryChannelPlaceholder: "Add secondary channel",
       newSecondaryChannelAudioLabel: "name of new secondary channel",
       addSecondaryChannelButtonAudioLabel: "add secondary channel",
-    }
+
+      encryptionKeyLabel: "Encryption key",
+      setEncryptionKeyButtonAudioLabel: "set encryption key",
+      showEncryptionKey: "Show encryption key",
+    },
   },
 };