From 424e5377c6840f1426fb5cef0f4abcfa4a00179f Mon Sep 17 00:00:00 2001
From: Aaron Dalton <aaron@daltons.ca>
Date: Sat, 30 Jul 2022 12:12:10 -0600
Subject: [PATCH] Peer ID no longer displays by default. This is to make it
 safer to stream. 1.3.2 release.

---
 CHANGELOG.md          |  6 ++++
 package.json          |  2 +-
 src/lib/Status.svelte | 67 +++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ababc15..956cc4c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.2] - 2022-07-30
+
+### Changed
+
+* Your ID code no longer displays by default. You can click to copy it to clipboard or to show/hide it. This is to make it safer to stream. You typically do not want to show the code to the global Internet, or else anyone could join your lobby.
+
 ## [1.3.1] - 2022-07-22
 
 ### Fixed
diff --git a/package.json b/package.json
index 382f99e..87c8d25 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@abstractplay/zendo",
   "private": true,
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A peer-to-peer, synchronous client for playing Zendo online",
   "author": "Aaron Dalton <aaron@daltons.ca> (https://www.perlkonig.com)",
   "license": "MIT",
diff --git a/src/lib/Status.svelte b/src/lib/Status.svelte
index 8531318..b32d009 100644
--- a/src/lib/Status.svelte
+++ b/src/lib/Status.svelte
@@ -180,6 +180,45 @@
         }
         $peer.destroy();
     };
+
+    let showCode = false;
+    let modalShow = "";
+    // From StackOverflow: https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
+    const fallbackCopyTextToClipboard = (text: string) => {
+        var textArea = document.createElement("textarea");
+        textArea.value = text;
+
+        // Avoid scrolling to bottom
+        textArea.style.top = "0";
+        textArea.style.left = "0";
+        textArea.style.position = "fixed";
+
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+
+        try {
+            var successful = document.execCommand('copy');
+            var msg = successful ? 'successful' : 'unsuccessful';
+            // console.log('Fallback: Copying text command was ' + msg);
+        } catch (err) {
+            // console.error('Fallback: Oops, unable to copy', err);
+        }
+
+        document.body.removeChild(textArea);
+    };
+
+    const copyTextToClipboard = (text: string) => {
+        if (!navigator.clipboard) {
+            fallbackCopyTextToClipboard(text);
+            return;
+        }
+        navigator.clipboard.writeText(text).then(function() {
+            console.log('Async: Copying to clipboard was successful!');
+        }, function(err) {
+            console.error('Async: Could not copy text: ', err);
+        });
+    };
 </script>
 
 <svelte:window on:beforeunload={shutdown}/>
@@ -188,7 +227,11 @@
     <div class="level-left">
         <div class="level-item">
         {#if id.length > 0}
-            <p>Your ID is <code>{id}</code></p>
+            {#if showCode}
+                <p>Your ID is <code>{id}</code> <a href="{'#'}" target="_self" on:click={() => showCode = false}><span class="clickTarget">(click to hide)</span></a></p>
+            {:else}
+                <p>Connection established <a href="{'#'}" target="_self" on:click={() => copyTextToClipboard(id)}><span class="clickTarget">(click to copy ID)</span></a> <a href="{'#'}" target="_self" on:click={() => modalShow = "is-active"}><span class="clickTarget">(click to show ID)</span></a></p>
+            {/if}
         {:else}
             <p>Connecting to brokering server. Refresh to retry.</p>
         {/if}
@@ -204,4 +247,24 @@
     </div>
 </div>
 
-<style></style>
+<div class="modal {modalShow}" id="confirmDelete">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <p class="modal-card-title">Show Code?</p>
+        </header>
+        <section class="modal-card-body">
+            <p>Do not show your code if you are streaming. Once the code is revealed, anyone on the Internet can then connect to your lobby. Use the "copy to clipboard" link instead to share your code with friends.</p>
+        </section>
+        <footer class="modal-card-foot">
+            <button class="button is-success" on:click="{() => {showCode = true; modalShow = "";}}">Show Code</button>
+            <button class="button" on:click="{() => {modalShow = ""}}">Cancel</button>
+        </footer>
+    </div>
+</div>
+
+<style>
+    .clickTarget {
+        font-size: smaller;
+    }
+</style>