jr: popup now shows list of keypairs

generate button does not work, that's the next task

jrx/pages/popup.html

@@ -33,8 +33,11 @@
     </table>
 
     <!-- hidden if there are keypairs -->
-    <p id="no-keypairs">You have no keypairs yet. Either generate a new one or
+    <!-- hidden by default -->
-    recover one you already have.</p>
+    <p id="no-keypairs" hidden>
+        No keypairs yet. Either generate one or recover one below using a
+        GajuPhrase.
+    </p>
 
     <!-- keypairs added dynamically from page script -->
     <ul id="keypairs"></ul>
@@ -86,6 +89,6 @@
 -->
 
 
-<script type="module" src="./dist/popup.js"></script>
+<script type="module" src="../dist/popup.js"></script>
 </body>
 </html>

jrx/src/b_lib.ts

@@ -60,11 +60,13 @@ import * as vdk_binary  from './jex_include/local-vdk_binary-0.1.0/dist/vdk_bina
 export type {
     // global types
     // popup script call/return data
+    p_data
 };
 
 
 export {
     // popup script api
+    p_get_data,
     // background script api
     b_main
 };
@@ -92,6 +94,12 @@ let TX_SIGN_TIMEOUT  = 30*GB_MIN;
 //=============================================================================
 //=============================================================================
 
+/**
+ * data that is displayed in the popup window
+ */
+type p_data =
+    {pubkey_ak_strs : Array<string>};
+
 
 //=============================================================================
 //=============================================================================
@@ -99,6 +107,37 @@ let TX_SIGN_TIMEOUT  = 30*GB_MIN;
 //=============================================================================
 //=============================================================================
 
+/**
+ * Called by the popup script to get the data it's supposed to show
+ */
+async function
+p_get_data
+    ()
+    : Promise<p_data>
+{
+    console.log('popup p_data');
+
+    // type bi_state
+    //     = {keypairs: Array<bi_nacl_keypair>};
+    // type bi_nacl_keypair
+    //     = {secretKey : Uint8Array,
+    //        publicKey : Uint8Array};
+    let jr_state : bi_state = await bi_get_state();
+
+    // accumulator
+    let akstrs : Array<string> = [];
+
+    for (let this_keypair of jr_state.keypairs) {
+        let this_pubkey : Uint8Array = this_keypair.publicKey;
+        let this_ak_str : string     = await vdk_aeser.pubkey2ak_str(this_pubkey);
+        akstrs.push(this_ak_str);
+    }
+
+    // type p_data =
+    //     {pubkey_ak_strs : Array<string>};
+    return {pubkey_ak_strs: akstrs};
+}
+
 
 //=============================================================================
 //=============================================================================

jrx/src/popup.ts

@@ -2,6 +2,8 @@
  * This is the script for the popup window
  */
 
+import * as b_lib from './b_lib.js';
+
 p_main();
 
 /**
@@ -28,62 +30,77 @@ p_main
 {
     //let scratch = document.getElementById('scratch')!;
     //scratch.innerText += 'line 17 hello\n';
-
     console.log('popup main');
+    await pi_repop();
 
-    //function onSuccessCase(response_from_bg: any) {
-    //    console.log('jr popup response from background script success', response_from_bg);
-    //}
-    //function onErrorCase(error_from_bg: any) {
-    //    console.log('jr popup response from background script error', error_from_bg);
-    //}
 
-    //browser.runtime
+    // add hooks for each button
-    //    .sendMessage({frum: 'popup',
+    let onclick_generate =
-    //                  data: 'init'})
+            async function () {
-    //    .then(onSuccessCase,
+                console.log('popup p_main onclick_generate');
-    //          onErrorCase);
+                // await b_lib.p_generate_keypair();
-
+                pi_repop();
-    //// add hooks for each button
+            };
-    //document.getElementById('generate-btn')!.addEventListener('click', onclick_generate);
+    document
-    //document.getElementById('faert-btn')!.addEventListener('click', onclick_faert);
+        .getElementById('generate-btn')!
-    ////document.getElementById('seed-btn')!.addEventListener('click', onclick_seed);
+        .addEventListener('click', onclick_generate);
 }
 
 
+/**
+ * query background library for popup display data and populate fields with it
+ */
+async function
+pi_repop
+    ()
+    : Promise<void>
+{
+    console.log('popup pi_repop');
+    let popup_data: b_lib.p_data = await b_lib.p_get_data();
 
-///**
+    // type p_data =
-// * Runs when the user clicks the "generate" button
+    //     {pubkey_ak_strs : Array<string>};
-// */
+
-//async function
+    // show keypairs
-//onclick_generate
+    // step 1: delete the existing list of keypairs
-//    ()
+    let kill_all_children =
-//    : Promise<void>
+            function (elt : HTMLElement) {
-//{
+                // from: https://www.geeksforgeeks.org/remove-all-the-child-elements-of-a-dom-node-in-javascript/
-//    console.log('onclick_generate');
+                // kill the last child repeatedly
-//}
+                let child = elt.lastElementChild;
-//
+                while (child) {
-//
+                    elt.removeChild(child);
-//
+                    child = elt.lastElementChild;
-///**
+                }
-// * Runs when the user clicks the "recover from faert phrase" button
+            };
-// */
+    // get the ul
-//async function
+    let pubkeys_ul = document.getElementById('keypairs')!;
-//onclick_faert
+    // delete the existing list of keypairs
-//    ()
+    // we will repopulate it in a minute
-//    : Promise<void>
+    // this isn't necessary right now but in the future we will add a delete
-//{
+    // keypair function so this is prophylaxis
-//    console.log('onclick_faert');
+    kill_all_children(pubkeys_ul);
-//}
+
-//
+    // keypairs
-//
+    let akstrs       : Array<string> = popup_data.pubkey_ak_strs;
-//
+    let akstrs_empty : boolean       = (0 === akstrs.length);
-/////**
+
-//// * Runs when the user clicks the "recover from seed phrase" button
+    // if the keypairs are empty unhide the "no keypairs" paragraph
-//// */
+    if (akstrs_empty)
-////async function
+        document.getElementById('no-keypairs')!.hidden = false;
-////onclick_seed
+    // if the keypairs are not empty
-////    ()
+    else {
-////{
+        // hide the "no keypairs" paragraph
-////    console.log('onclick_seed');
+        document.getElementById('no-keypairs')!.hidden = true;
-////}
+        // for each keypair
+        // each one of these is an ak_... string
+        for (let this_akstr of akstrs) {
+            // make an li
+            let this_li = document.createElement('li');
+            // make inner text the key
+            this_li.innerHTML = this_akstr;
+            // add it to the list
+            pubkeys_ul.appendChild(this_li);
+        }
+    }
+}