Improve Room Feature

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 .DS_Store
 fqdn.env
-/docker/certs
+/docker/certs
+qrcode-svg/

client/index.html

@@ -54,6 +54,16 @@
                 <use xlink:href="#enter" />
             </svg>
         </a>
+        <a id="share-room-url" class="icon-button" title="Copy Permanent Link To Room" hidden>
+            <svg class="icon">
+                <use xlink:href="#shareroomurl" />
+            </svg>
+        </a>
+        <a id="invite-user" class="icon-button" title="Invite To Room Via Room Key" hidden>
+            <svg class="icon">
+                <use xlink:href="#inviteuser" />
+            </svg>
+        </a>
         <a id="messages" style="display: none;" class="icon-button" title="Show Received Messages" >
             <svg class="icon">
                 <use xlink:href="#clipboard" />
@@ -83,24 +93,47 @@ <h2 placeholder="&nbsp;"></h2>
             <use xlink:href="#wifi-tethering" />
         </svg>
         <div id="displayName" placeholder="&nbsp;"></div>
+        <div id="roomId" placeholder="&nbsp;" hidden></div>
         <div id="displayNote" class="font-body2" placeholder="&nbsp;"></div>
     </footer>
     <!-- JoinRoom Dialog -->
     <x-dialog id="joinRoomDialog">
         <form action="#">
             <x-background class="full center">
                 <x-paper shadow="2">
-                    <h3>Room Number (6 Digits)</h3>
-                    <div class="font-subheading">Note: No need to input to create a room.</div>
-                    <input type="tel" id="roomInput" class="textarea" autocomplete="off" maxlength="6" oninput="value=value.replace(/\D/g,'');let btn=$('joinRoomDialog').querySelector('button');if(value.length==6){btn.textContent='Join';}else{btn.textContent='Create';}" autofocus contenteditable>
+                    <h3>Room Key (6 Digits)</h3>
+                    <div class="font-subheading">Create new room or enter key to join.</div>
+                    <input type="tel" id="roomInput" class="textarea" autocomplete="off" maxlength="6" autofocus contenteditable>
                     <div class="row-reverse">
-                        <button class="button" type="submit" close>Create</button>
+                        <button class="button" type="submit">Create</button>
                         <a class="button" close>Cancel</a>
                     </div>
                 </x-paper>
             </x-background>
         </form>
     </x-dialog>
+    <!-- inviteUserToRoomDialog -->
+    <x-dialog id="inviteUserToRoomDialog">
+        <form action="#">
+            <x-background class="full center">
+                <x-paper shadow="2">
+                    <h3 class="center">Input room key on other devices</h3>
+                    <div class="font-subheading center">
+                        <div id="room-key-expires">
+                            Expires in:
+                            <span id="room-key-expires-time">10:00</span>
+                        </div>
+                    </div>
+                    <h1 class="center" id="room-key"></h1>
+                    <div class="center" id="room-key-qr-code"></div>
+                    <div class="row-reverse">
+                        <a class="button" id="dialog-share-room-url">Copy Temporary Link</a>
+                        <a class="button" id="delete-key-room" close>Cancel</a>
+                    </div>
+                </x-paper>
+            </x-background>
+        </form>
+    </x-dialog>
     <!-- Received Messages Dialog -->
     <x-dialog id="receivedMsgsDialog">
         <x-background class="full center">
@@ -260,6 +293,13 @@ <h1>Snapdrop</h1>
         <symbol id="exit" viewBox="-170 -150 1229 1229">
             <path d="M640 768H384V192L128 64h512v192h64V0H0v832l384 192V832h320V512h-64V768zM1024 384L768 192v128H512v128h256v128L1024 384z"/>
         </symbol>
+        <symbol id="shareroomurl" viewBox="-1 -2 20 20">
+            <path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z"/>
+        </symbol>
+        <symbol id="inviteuser" viewBox="0 0 640 512">
+            <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+            <path d="M352 128c0 70.7-57.3 128-128 128s-128-57.3-128-128S153.3 0 224 0s128 57.3 128 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312V248H440c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V136c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H552v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/>
+        </symbol>
         <symbol id="clipboard" viewBox="-3 -2 22 22">
             <path d="M13,0H3C1.35,0,0,1.35,0,3v12c0,1.65,1.35,3,3,3h10c1.65,0,3-1.35,3-3V3C16,1.35,14.65,0,13,0z M5,2h6v1c0,0.55-0.45,1-1,1H6C5.45,4,5,3.55,5,3V2z M14,15c0,0.55-0.45,1-1,1H3c-0.55,0-1-0.45-1-1V3c0-0.55,0.45-1,1-1h1 c0,0.26,0,0.6,0,1c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2c0-0.4,0-0.74,0-1h1c0.55,0,1,0.45,1,1V15z M12,14H4c-0.28,0-0.5-0.22-0.5-0.5 S3.72,13,4,13h8c0.28,0,0.5,0.22,0.5,0.5S12.28,14,12,14z M12,11H4c-0.28,0-0.5-0.22-0.5-0.5S3.72,10,4,10h8 c0.28,0,0.5,0.22,0.5,0.5S12.28,11,12,11z M12,8H4C3.72,8,3.5,7.78,3.5,7.5S3.72,7,4,7h8c0.28,0,0.5,0.22,0.5,0.5S12.28,8,12,8z"/>
         </symbol>
@@ -272,6 +312,7 @@ <h1>Snapdrop</h1>
     <script src="scripts/ui.js"></script>
     <script src="scripts/theme.js" async></script>
     <script src="scripts/clipboard.js" async></script>
+    <script src="scripts/qrcode.js" async></script>
     <!-- Sounds -->
     <audio id="blop" autobuffer="true">
         <source src="/sounds/blop.mp3" type="audio/mpeg">

client/scripts/network.js

@@ -8,12 +8,19 @@ class ServerConnection {
         Events.on('beforeunload', e => this._disconnect());
         Events.on('pagehide', e => this._disconnect());
         document.addEventListener('visibilitychange', e => this._onVisibilityChange());
+        Events.on('reconnect', e => this._reconnect());
     }
 
     _connect() {
         clearTimeout(this._reconnectTimer);
         if (this._isConnected() || this._isConnecting()) return;
-        const ws = new WebSocket(this._endpoint() + "?peerid=" + this._peerId() + "&code=" + this._peerCode()+ "&roomid=" + this._roomId());
+        let ws_url = new URL(this._endpoint());
+        ws_url.searchParams.append("peerid", this._peerId());
+        ws_url.searchParams.append("code", this._peerCode());
+        ws_url.searchParams.append("roomid", this._roomId());
+        ws_url.searchParams.append("roomkey", this._roomKey());
+        console.debug(ws_url.toString());
+        const ws = new WebSocket(ws_url.toString());
         ws.binaryType = 'arraybuffer';
         ws.onopen = e => console.log('WS: server connected');
         ws.onmessage = e => this._onMessage(e.data);
@@ -44,6 +51,24 @@ class ServerConnection {
             case 'display-name':
                 Events.fire('display-name', msg);
                 break;
+            case 'key-room-created':
+                Events.fire('key-room-created', msg);
+                break;
+            case 'key-room-full':
+                Events.fire('key-room-full', msg);
+                break;
+            case 'key-room-room-id':
+                Events.fire('key-room-room-id', msg);
+                break;
+            case 'key-room-room-id-received':
+                Events.fire('key-room-room-id-received', msg);
+                break;
+            case 'key-room-deleted':
+                Events.fire('key-room-deleted', msg);
+                break;
+            case 'key-room-invalid-room-key':
+                Events.fire('key-room-invalid-room-key', msg);
+                break;
             default:
                 console.error('WS: unkown message type', msg);
         }
@@ -82,7 +107,7 @@ class ServerConnection {
         return peerId;
     }
 
-    _randomNum(length = 1) {
+    static _randomNum(length = 1) {
         let numStr = '';
         for (let i = 0; i < length; i++) {
             numStr += Math.floor(Math.random() * 10);
@@ -93,19 +118,18 @@ class ServerConnection {
     _peerCode() {
         let peerCode = sessionStorage.getItem("peerCode");
         if (!peerCode) {
-            peerCode = this._randomNum(4);
+            peerCode = ServerConnection._randomNum(4);
             sessionStorage.setItem("peerCode", peerCode);
         }
         return peerCode;
     }
 
     _roomId() {
-        let roomId = sessionStorage.getItem("roomId");
-        //if (!roomId) {
-        //    roomId = this._randomNum(6);
-        //    sessionStorage.setItem("roomId", roomId);
-        //}
-        return roomId;
+        return sessionStorage.getItem("roomId");
+    }
+
+    _roomKey() {
+        return sessionStorage.getItem("roomKey");
     }
 
     _endpoint() {
@@ -141,6 +165,11 @@ class ServerConnection {
     _isConnecting() {
         return this._socket && this._socket.readyState === this._socket.CONNECTING;
     }
+
+    _reconnect() {
+        this._disconnect();
+        this._connect();
+    }
 }
 
 class Peer {