add checkbox to show/hide key

src/Views/chatOptionModal.tsx

@@ -13,6 +13,11 @@ export function ChatOptionModal(chat: Chat, isPresented: React.State<boolean>) {
     closeModal();
   }
 
+  const shouldShowKey = new React.State(false);
+  const inputType = React.createProxyState([shouldShowKey], () =>
+    shouldShowKey.value == true ? "text" : "password"
+  );
+
   const secondaryChannelConverter: React.ListItemConverter<string> = (
     secondaryChannel
   ) => {
@@ -111,9 +116,15 @@ export function ChatOptionModal(chat: Chat, isPresented: React.State<boolean>) {
                 <input
                   placeholder={translation.encryptionKeyPlaceholder}
                   bind:value={chat.encryptionKey}
+                  set:type={inputType}
                 ></input>
               </div>
             </label>
+
+            <label class="inline margin-0">
+              <input type="checkbox" bind:checked={shouldShowKey}></input>
+              {translation.showKey}
+            </label>
           </div>
 
           <hr></hr>

src/translations.ts

@@ -45,6 +45,7 @@ const englishTranslations = {
 
   encryptionKey: "Encryption key",
   encryptionKeyPlaceholder: "n10d2482dg283hg",
+  showKey: "Show key",
 
   removeChat: "Remove chat",
   clearChatMessages: "Clear chat messages",
@@ -108,6 +109,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
 
     encryptionKey: "Clave de cifrado",
     encryptionKeyPlaceholder: "n10d2482dg283hg",
+    showKey: "Mostrar clave",
 
     removeChat: "Eliminar chat",
     clearChatMessages: "Eliminar todos mensajes",
@@ -168,6 +170,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
 
     encryptionKey: "Schlüssel",
     encryptionKeyPlaceholder: "n10d2482dg283hg",
+    showKey: "Schlüssel anzeigen",
 
     removeChat: "Chat löschen",
     clearChatMessages: "Nachrichtenverlauf leeren",