add setting for encryption key

src/Model/chatModel.ts

@@ -61,6 +61,11 @@ export class ChatModel {
     this.storeInfo();
   };
 
+  setEncryptionKey = (key: string): void => {
+    this.info.encryptionKey = key;
+    this.storeInfo();
+  };
+
   setColor = (color: Color): void => {
     this.color = color;
     this.storeColor();

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",
+    },
   },
 };
 

src/ViewModel/chatViewModel.tsx

@@ -21,6 +21,13 @@ export default class ChatViewModel {
   secondaryChannels: React.ListState<string> = new React.ListState();
   newSecondaryChannelInput: React.State<string> = new React.State("");
 
+  encryptionKeyInput: React.State<string> = new React.State("");
+  shouldShowEncryptionKey: React.State<boolean> = new React.State(false);
+  encryptionKeyInputType: React.State<"text" | "password"> =
+    React.createProxyState([this.shouldShowEncryptionKey], () =>
+      this.shouldShowEncryptionKey.value == true ? "text" : "password"
+    );
+
   color: React.State<Color> = new React.State<Color>(Color.Standard);
 
   selectedPage: React.State<ChatPageType> = new React.State<ChatPageType>(
@@ -34,6 +41,7 @@ export default class ChatViewModel {
       this.primaryChannelInput.value == "" ||
       this.primaryChannelInput.value == this.primaryChannel.value
   );
+  cannotSetEncryptionKey: React.State<boolean>;
 
   // sorting
   updateIndex = (): void => {
@@ -74,6 +82,13 @@ export default class ChatViewModel {
     ]);
   };
 
+  setEncryptionKey = (): void => {
+    this.chatModel.setEncryptionKey(this.encryptionKeyInput.value);
+
+    // disable button
+    this.encryptionKeyInput.callSubscriptions();
+  };
+
   setColor = (newColor: Color): void => {
     this.color.value = newColor;
     this.chatModel.setColor(newColor);
@@ -94,7 +109,9 @@ export default class ChatViewModel {
 
   restoreSecondaryChannels = (): void => {
     this.secondaryChannels.clear();
-    for (const secondaryChannel of this.chatModel.info.secondaryChannels.sort(localeCompare)) {
+    for (const secondaryChannel of this.chatModel.info.secondaryChannels.sort(
+      localeCompare
+    )) {
       this.secondaryChannels.add(secondaryChannel);
     }
   };
@@ -108,6 +125,12 @@ export default class ChatViewModel {
     this.primaryChannel.value = chatModel.info.primaryChannel;
     this.primaryChannelInput.value = chatModel.info.primaryChannel;
 
+    this.encryptionKeyInput.value = chatModel.info.encryptionKey;
+    this.cannotSetEncryptionKey = React.createProxyState(
+      [this.encryptionKeyInput],
+      () => this.encryptionKeyInput.value == this.chatModel.info.encryptionKey
+    );
+
     this.color.value = chatModel.color;
 
     this.restoreSecondaryChannels();