Adds generated URL field

Signed-off-by: Daniel Kastl <daniel@georepublic.de>
Georepublic · Oct 1, 2024 · 7b58b9a · 7b58b9a
1 parent 4cdcc04
commit 7b58b9a
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -30,6 +30,11 @@ <h1>Meshtastic QR Code Generator</h1>
 
   <canvas id="qrcode"></canvas>
 
+  <div>
+    <input type="text" id="generatedUrl" readonly>
+    <button type="button" id="copyUrlButton">Copy URL</button>
+  </div>
+
   <script type="module" src="/src/main.ts"></script>
 </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
@@ -8,8 +8,9 @@ import { fromByteArray } from "base64-js";
  * @returns void
  */
 document.addEventListener('DOMContentLoaded', () => {
-    document.getElementById('generateQRCode')?.addEventListener('click', generateQRCode);
-    document.getElementById('generatePSK')?.addEventListener('click', generatePSK);
+  document.getElementById('generateQRCode')?.addEventListener('click', generateQRCode);
+  document.getElementById('generatePSK')?.addEventListener('click', generatePSK);
+  document.getElementById('copyUrlButton')?.addEventListener('click', copyUrlToClipboard);
 });
 
 /**
@@ -18,14 +19,14 @@ document.addEventListener('DOMContentLoaded', () => {
  * @returns void
  */
 function generatePSK(): void {
-    const pskField = document.getElementById('psk') as HTMLInputElement;
-    const randomBytes = new Uint8Array(16);
-    window.crypto.getRandomValues(randomBytes);
-    let psk = '';
-    for (let i = 0; i < randomBytes.length; i++) {
-        psk += ('0' + randomBytes[i].toString(16)).slice(-2);
-    }
-    pskField.value = psk;
+  const pskField = document.getElementById('psk') as HTMLInputElement;
+  const randomBytes = new Uint8Array(16);
+  window.crypto.getRandomValues(randomBytes);
+  let psk = '';
+  for (let i = 0; i < randomBytes.length; i++) {
+    psk += ('0' + randomBytes[i].toString(16)).slice(-2);
+  }
+  pskField.value = psk;
 }
 
 /**
@@ -34,52 +35,65 @@ function generatePSK(): void {
  * @returns void
  */
 async function generateQRCode(): Promise<void> {
-    const channelName = (document.getElementById('channelName') as HTMLInputElement).value;
-    const psk = (document.getElementById('psk') as HTMLInputElement).value;
-    const region = (document.getElementById('region') as HTMLSelectElement).value;
+  const channelName = (document.getElementById('channelName') as HTMLInputElement).value;
+  const psk = (document.getElementById('psk') as HTMLInputElement).value;
+  const region = (document.getElementById('region') as HTMLSelectElement).value;
 
-    if (psk.length !== 32) {
-        alert("PSK must be exactly 32 characters long.");
-        return;
-    }
+  if (psk.length !== 32) {
+    alert("PSK must be exactly 32 characters long.");
+    return;
+  }
 
-    const loraConfig = new Protobuf.Config.Config_LoRaConfig({
-        region: Protobuf.Config.Config_LoRaConfig_RegionCode[region as keyof typeof Protobuf.Config.Config_LoRaConfig_RegionCode]
-    });
+  const loraConfig = new Protobuf.Config.Config_LoRaConfig({
+    region: Protobuf.Config.Config_LoRaConfig_RegionCode[region as keyof typeof Protobuf.Config.Config_LoRaConfig_RegionCode]
+  });
 
-    const channel = new Protobuf.Channel.ChannelSettings({
-        name: channelName,
-        psk: new TextEncoder().encode(psk)
-    });
+  const channel = new Protobuf.Channel.ChannelSettings({
+    name: channelName,
+    psk: new TextEncoder().encode(psk)
+  });
 
-    const channelSet = new Protobuf.AppOnly.ChannelSet({
-        loraConfig,
-        settings: [channel]
-    });
+  const channelSet = new Protobuf.AppOnly.ChannelSet({
+    loraConfig,
+    settings: [channel]
+  });
 
-    const encoded = channelSet.toBinary();
-    const base64 = fromByteArray(encoded)
-        .replace(/=/g, "")
-        .replace(/\+/g, "-")
-        .replace(/\//g, "_");
+  const encoded = channelSet.toBinary();
+  const base64 = fromByteArray(encoded)
+    .replace(/=/g, "")
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_");
 
-    const meshtasticUrl = `https://meshtastic.org/e/#${base64}`;
+  const meshtasticUrl = `https://meshtastic.org/e/#${base64}`;
 
-    console.log("Generated Meshtastic URL:", meshtasticUrl);
+  const urlField = document.getElementById('generatedUrl') as HTMLInputElement;
+  urlField.value = meshtasticUrl;
 
-    const qrCodeElement = document.getElementById('qrcode') as HTMLCanvasElement;
-    qrCodeElement.innerHTML = "";  // Clear previous QR code
+  console.log("Generated Meshtastic URL:", meshtasticUrl);
 
-    try {
-        await QRCode.toCanvas(qrCodeElement, meshtasticUrl);
-        console.log('QR code generated successfully!');
-    } catch (error) {
-        if (error instanceof Error) {
-            console.error(error.message);
-            alert('QR Code generation failed: ' + error.message);
-        } else {
-            console.error('An unknown error occurred:', error);
-            alert('An unknown error occurred');
-        }
+  const qrCodeElement = document.getElementById('qrcode') as HTMLCanvasElement;
+  qrCodeElement.innerHTML = "";  // Clear previous QR code
+  try {
+    await QRCode.toCanvas(qrCodeElement, meshtasticUrl);
+    console.log('QR code generated successfully!');
+} catch (error) {
+    if (error instanceof Error) {
+      console.error(error.message);
+      alert('QR Code generation failed: ' + error.message);
+    } else {
+      console.error('An unknown error occurred:', error);
+      alert('An unknown error occurred');
     }
+  }
+}
+
+/**
+ * Copy the generated URL to the clipboard.
+ * @returns void
+ */
+function copyUrlToClipboard(): void {
+  const urlField = document.getElementById('generatedUrl') as HTMLInputElement;
+  urlField.select();
+  document.execCommand('copy');
+  alert('URL copied to clipboard!');
 }