[rolodex] Recovery key button downloads recovery.yaml with username a…

…nd readkey info
shovelers · Sep 25, 2023 · 00bbc4c · 00bbc4c
1 parent e2d7c40
commit 00bbc4c
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 3 deletions.
diff --git a/apps/rolodex/src/odd.js b/apps/rolodex/src/odd.js
@@ -1,4 +1,6 @@
 import * as odd from "@oddjs/odd";
+import { retrieve } from '@oddjs/odd/common/root-key';
+import * as uint8arrays from 'uint8arrays';
 
 async function getProgram() {
   const appInfo = { creator: "Shovel", name: "Rolod" }
@@ -186,4 +188,35 @@ async function producerChallengeProcessor(challenge, userInput) {
   }
 }
 
-export { signup, getProfile, updateProfile, getContacts, addContact, editContact, deleteContact, signout, getSession, getProgram, producerChallengeProcessor, filterContacts, renderTable};
+async function generateRecoveryKit(username){
+  console.log("I am here")
+  var program = await getProgram();
+  var crypto = program.components.crypto;
+  var accountDID = await program.accountDID(username);
+  var readKey  = await retrieve({ crypto, accountDID });
+  const encodedReadKey = uint8arrays.toString(readKey, 'base64pad');
+  console.log(encodedReadKey);
+  const content = `
+  # This is your recovery kit. (It's a yaml text file)
+  # Store this somewhere safe.
+  # Anyone with this file will have read access to your private files.
+  # Losing it means you won't be able to recover your account
+  # in case you lose access to all your linked devices.
+  
+  # To use this file, go to ${window.location.origin}/recover/
+  
+  username: ${username}
+  key: ${encodedReadKey}
+  `;
+
+  const data = new Blob([content], { type: 'text/plain' })
+  var fileURL = window.URL.createObjectURL(data);
+  var tempLink = document.createElement('a');
+  tempLink.href = fileURL;
+  tempLink.setAttribute('download', 'rolodex-recovery-kit.yaml');
+  tempLink.click();
+  window.URL.revokeObjectURL(fileURL);
+  alert('your file has downloaded!'); 
+}
+
+export { signup, getProfile, updateProfile, getContacts, addContact, editContact, deleteContact, signout, getSession, getProgram, producerChallengeProcessor, filterContacts, renderTable, generateRecoveryKit};
diff --git a/apps/rolodex/views/pages/app.ejs b/apps/rolodex/views/pages/app.ejs
@@ -10,7 +10,7 @@
 
   <body class="antialiased bg-base-100">
     <script type="module">
-      import { getProfile, updateProfile, getContacts, addContact, editContact, signout, deleteContact, getProgram, getSession, producerChallengeProcessor, filterContacts, renderTable} from '/dist/odd.js';
+      import { getProfile, updateProfile, getContacts, addContact, editContact, signout, deleteContact, getProgram, getSession, producerChallengeProcessor, filterContacts, renderTable, generateRecoveryKit } from '/dist/odd.js';
       window.updateProfile = updateProfile;
       window.addContact = addContact;
       window.editContact = editContact;
@@ -20,6 +20,7 @@
       window.getContacts = getContacts;
       window.filterContacts = filterContacts;
       window.renderTable = renderTable;
+      window.generateRecoveryKit = generateRecoveryKit;
 
       var program = await getProgram();
       var session = await getSession(program);

diff --git a/apps/rolodex/views/pages/link.ejs b/apps/rolodex/views/pages/link.ejs
@@ -23,6 +23,7 @@
         if (approved) {
           console.log(`Successfully authenticated as ${username}`)
           var session = await program.auth.session()
+          console.log("program: ", program)
           console.log("session: ", session)
           console.log(getContacts())
           //window.location.href = `/app`

diff --git a/apps/rolodex/views/partials/app/sidebar.ejs b/apps/rolodex/views/partials/app/sidebar.ejs
@@ -18,7 +18,7 @@
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <g fill="currentColor"> <path d="M4.715 6.542L3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199a2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" /><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" /></g></svg>
     Link Device
   </button>
-  <button class="btn btn-outline btn-sm w-2/3">
+  <button class="btn btn-outline btn-sm w-2/3" onclick="generateRecoveryKit(document.querySelector('#handle').innerHTML)">
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill="currentColor"><path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647l.646-.647a.5.5 0 0 1 .708 0l.646.647l.646-.647a.5.5 0 0 1 .708 0l.646.647l.793-.793l-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z" /><path d="M4 8a1 1 0 1 1-2 0a1 1 0 0 1 2 0z" /></g></svg>
     Recovery Key
   </button>