add option to randomize keys

src/Model/Utility/crypto.ts

@@ -1,7 +1,14 @@
+import cryptoRandomString from "crypto-random-string";
+
 const IV_SIZE = 12;
 const ENCRYPTION_ALG = "AES-GCM";
 
-// minimal
+// random
+export function random(length: number): string {
+    return cryptoRandomString({length})
+}
+
+// encrypt 
 export async function encryptString(
     plaintext: string,
     passphrase: string,

src/View/ChatPages/settingsPage.tsx

@@ -137,7 +137,16 @@ export function SettingsPage(
                                 ></input>
                             </div>
                         </label>
-                        <div class="flex-row justify-end width-input">
+                        <div class="flex-row width-input">
+                            <button
+                                class="width-50"
+                                on:click={
+                                    settingsPageViewModel.randomizeKey
+                                }
+                            >
+                                {coreViewModel.translations.chatPage.settings.randomizeKey}
+                                <span class="icon">shuffle</span>
+                            </button>
                             <button
                                 class="width-50"
                                 aria-label={
@@ -167,7 +176,7 @@ export function SettingsPage(
                                 coreViewModel.translations.chatPage.settings
                                     .showEncryptionKey
                             }
-                        </label>
+			</label>
 
                         <hr></hr>
 

src/View/translations.ts

@@ -236,6 +236,7 @@ const englishTranslations = {
             encryptionKeyLabel: "Encryption key",
             setEncryptionKeyButtonAudioLabel: "set encryption key",
             showEncryptionKey: "Show encryption key",
+	    randomizeKey: "Randomize",
 
             setColorButtonAudioLabel: "set color",
 
@@ -605,6 +606,7 @@ export const allTranslations: {
 		encryptionKeyLabel: "Schlüssel",
 		setEncryptionKeyButtonAudioLabel: "Schlüssel festlegen",
 		showEncryptionKey: "Schlüssel anzeigen",
+		randomizeKey: "Zufällig generieren",
 
 		setColorButtonAudioLabel: "Farbe festlegen",
 
@@ -948,6 +950,7 @@ export const allTranslations: {
 		setEncryptionKeyButtonAudioLabel:
 		"establecer clave de encriptación",
 		showEncryptionKey: "Mostrar clave de encriptación",
+		randomizeKey: "Aleatorizar",
 
 		setColorButtonAudioLabel: "establecer color",
 

src/ViewModel/Pages/settingsPageViewModel.ts

@@ -2,6 +2,7 @@ import CoreViewModel, { Context } from "../Global/coreViewModel";
 import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
 import * as React from "../../react";
 import { Colors } from "../../colors";
+import {random} from "../../Model/Utility/crypto";
 
 export default class SettingsPageViewModel extends Context {
     // state
@@ -73,6 +74,11 @@ export default class SettingsPageViewModel extends Context {
         this.encryptionKeyInput.callSubscriptions();
     };
 
+    randomizeKey = (): void => {
+	this.encryptionKeyInput.value = random(24);
+	this.setEncryptionKey();
+    }
+
     applyColor = (): void => {
         this.chatViewModel.setColor(this.color.value);
         this.appliedColor.value = this.color.value;