PharmaLedger-IMI/epi-workspace#906 my-identities: you can copy your r…

…ecovery code; new account: you can paste a recovery code instead of waiting for access from an administrator

code/assets/skin.css

@@ -128,6 +128,10 @@ dw-subdomains {
     border: none;
 }
 
+.dw-paste::part(base) {
+    color: rgb(var(--sl-color-primary-green));
+}
+
 /*:root .sl-theme-dark {*/
 /*    --webc-primary-color: rgb(var(--sl-color-gray-50));*/
 /*    --sl-input-label-color: rgb(var(--sl-color-gray-50));*/

code/components/dw-clipboard-input/dw-clipboard-input.js

@@ -30,20 +30,35 @@ class DwClipboardInput extends HTMLElement {
     this.onClipboardClick = async (event) => {
       const { inputElement, showToast } = this;
       const { value } = inputElement;
+
       event.stopPropagation();
       inputElement.select();
       inputElement.setSelectionRange(0, value.length);
-      document.execCommand("copy");
+      try {
+        document.execCommand("copy");
+      }
+      catch (err) {
+        // we ignore the error due to the fact that some browsers don't support one of the methods in the try block
+      }
+      try {
+        navigator.clipboard.writeText(inputElement.value).then( () => {}, () => {} );
+      }
+      catch (err) {
+        // we ignore the error due to the fact that some browsers don't support one of the methods in the try block
+      }
+
       inputElement.setSelectionRange(0, 0);
       inputElement.blur();
-      // await showToast(`"${value}" copied to clipboard!`, {
-      //   duration: 1500,
-      // });
+      await showToast(`Copied to clipboard!`, {
+        duration: 1500,
+      });
     };
 
     this.inputElement.updateComplete.then(() => {
       const suffixElement = this.inputElement.shadowRoot.querySelector("[part=suffix]");
-      suffixElement.addEventListener("click", this.onClipboardClick);
+      if (suffixElement) {
+        suffixElement.addEventListener("click", this.onClipboardClick);
+      }
     });
   }
 
@@ -78,6 +93,17 @@ class DwClipboardInput extends HTMLElement {
   get value() {
     return this.inputElement.value;
   }
+
+  set type(value) {
+    if (this.inputElement) {
+      this.inputElement.type = value;
+    }
+  }
+
+  get type() {
+    return this.inputElement.type;
+  }
+
 }
 
 customElements.define("dw-clipboard-input", DwClipboardInput);

code/components/dw-dialog-waiting-approval/dw-dialog-waiting-approval.css

@@ -5,4 +5,51 @@
 .dw-dialog-waiting-approval main {
     padding: var(--sl-spacing-medium);
     margin-bottom: var(--sl-spacing-medium);
-}
+}
+
+.dw-dialog-waiting-approval #did-div {
+    margin-bottom: 16px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid rgb(var(--sl-input-border-color));
+}
+
+.dw-paste::part(base):hover {
+    color: rgb(var(--sl-color-primary-50));
+}
+
+.dw-dialog-waiting-approval #recovery-code-div > sl-input::part(suffix) {
+    cursor: pointer;
+    background-color: transparent;
+}
+
+.dw-dialog-waiting-approval #recovery-code-div .button__label:hover {
+    color: rgb(var(--sl-color-primary-50));
+}
+
+.dw-dialog-waiting-approval #recovery-code-div > sl-input > sl-icon[slot="suffix"] {
+    background-color: rgb(var(--sl-color-primary-green));
+    color: white;
+    height: 26px;
+    width: 26px;
+    padding: 6px;
+}
+
+.dw-dialog-waiting-approval #recovery-code-div > sl-input > sl-icon[slot="suffix"]:hover {
+    background-color: rgb(var(--sl-color-primary-50));
+}
+
+.dw-dialog-waiting-approval #recovery-code-div > sl-input::part(input) {
+    font-family: "courier new", monospace;
+    padding-top: 3px;
+}
+
+.dw-dialog-waiting-approval #recovery-code-div > sl-input > sl-icon::part(base) {
+    color: var(--icon-color);
+}
+
+.dw-dialog-waiting-approval #recovery-code-div > h3 {
+    display: flex;
+    align-items: center;
+    gap: var(--sl-spacing-small);
+    margin-left: 6px;
+}

code/components/dw-dialog-waiting-approval/dw-dialog-waiting-approval.html

@@ -1,15 +1,29 @@
 <link rel="stylesheet" href="components/dw-dialog-waiting-approval/dw-dialog-waiting-approval.css">
-<sl-dialog class="dw-dialog dw-dialog-waiting-approval" no-header>
-    <header>
-        <h3>
-            <sl-icon name="person-bounding-box"></sl-icon>
-            Waiting for administrator to grant access
-        </h3>
-        <sl-icon-button name="x-lg" close></sl-icon-button>
-    </header>
 
+<sl-dialog class="dw-dialog dw-dialog-waiting-approval" no-header>
     <main>
-        <h4>Copy this DID and give it to the right administrator.</h4>
-        <dw-clipboard-input value="@did" readonly></dw-clipboard-input>
+        <div id="did-div">
+            <h3>
+                <sl-icon name="person-bounding-box"></sl-icon>
+                Waiting for administrator to grant access
+            </h3>
+            <br>
+            <h4>Copy this DID and give it to the right administrator.</h4>
+            <dw-clipboard-input value="@did" readonly></dw-clipboard-input>
+        </div>
+        <webc-container controller="DwDialogWaitingApprovalController" id="recovery-code-div">
+            <h3>
+                <sl-icon name="clipboard-check"></sl-icon>
+                Or go ahead and
+            </h3>
+            <br>
+            <h4>Paste your recovery code here to gain access.</h4>
+            <sl-input name="recovery-code" placeholder="recovery code" id="add-member-input" type="password" required clearable>
+                <sl-button slot="suffix" type="text" data-tag="paste-from-clipboard" class="dw-paste">
+                    Paste
+                </sl-button>
+                <sl-icon slot="suffix" name="arrow-right-short" data-tag="continue"></sl-icon>
+            </sl-input>
+        </webc-container>
     </main>
-</sl-dialog>
+</sl-dialog>

code/pages/my-identities.html

@@ -4,4 +4,14 @@
     <dw-title>Current identity</dw-title>
 
     <dw-clipboard-input value="@did" readonly></dw-clipboard-input>
+
+    <dw-title>Recovery Code</dw-title>
+    <div data-if="@notAuthorized">
+        <div slot="true">
+            <p>Not able to display recovery code since the user hasn't been authorized.</p>
+        </div>
+        <div slot="false">
+            <dw-clipboard-input type="password" value="@sharedEnclaveKeySSI" disabled="@notAuthorized" readonly></dw-clipboard-input>
+        </div>
+    </div>
 </webc-container>

code/scripts/controllers/BootingIdentityController.js

@@ -50,7 +50,7 @@ class BootingIdentityController extends DwController {
             },
             {
               parentElement: this.element,
-              disableClosing: true,
+              disableClosing: false,
             }
           );
           await $$.promisify(w3cDID.createIdentity)("ssi:name", didDomain, publicName);

code/scripts/controllers/DwDialogWaitingApprovalController.js

@@ -0,0 +1,44 @@
+const {DwController} = WebCardinal.controllers;
+
+export default class DwDialogWaitingApprovalController extends DwController {
+    constructor(...props) {
+        super(...props);
+
+        this.tagClickListeners();
+    }
+
+    tagClickListeners() {
+        this.onTagClick("paste-from-clipboard", () => {
+            navigator.clipboard.readText()
+                .then((clipText) => (document.getElementById("add-member-input").value = clipText))
+                .catch(err => console.log(err));
+        });
+        this.onTagClick("continue", async () => {
+            if (document.getElementById("add-member-input").value === "") {
+                return;
+            }
+            this.setSharedEnclaveKeySSI().then().catch(err => {
+                console.log(err);
+            });
+
+            this.ui.enableMenu();
+            this.navigateToPageTag("quick-actions");
+        });
+    }
+
+    async setSharedEnclaveKeySSI() {
+        const openDSU = require("opendsu");
+        const scAPI = openDSU.loadAPI("sc");
+        const enclaveAPI = openDSU.loadAPI("enclave");
+        const recoveryCode = document.getElementById("add-member-input").value;
+
+        const sharedEnclave = enclaveAPI.initialiseWalletDBEnclave(recoveryCode);
+        sharedEnclave.on("initialised", async () => {
+            try {
+                await $$.promisify(scAPI.setSharedEnclave)(sharedEnclave);
+            } catch (e) {
+                throw ("Failed to set shared enclave " + e);
+            }
+        });
+    }
+}

code/scripts/controllers/MyIdentitiesController.js

@@ -8,8 +8,22 @@ class MyIdentitiesController extends DwController {
     this.model = {
       did: this.did,
       domain: this.domain,
+      sharedEnclaveKeySSI: "",
+      notAuthorized: false
     };
 
+    this.getSharedEnclaveKeySSI().then( sharedEnclave => {
+          if (typeof sharedEnclave === "undefined") {
+            console.log("user not authorized yet");
+            this.model.notAuthorized = true;
+            return;
+          }
+          this.model.sharedEnclaveKeySSI = sharedEnclave;
+        }
+    ).catch(err => {
+      console.log(err);
+    })
+
     console.log(JSON.stringify(this.model, null, 1));
 
     this.onTagEvent("did-component", "did-generate", async (readOnlyModel) => {
@@ -19,6 +33,19 @@ class MyIdentitiesController extends DwController {
       // await ui.showToast(`New DID created: '${didDocument.getIdentifier()}'`);
     });
   }
+
+  async getSharedEnclaveKeySSI() {
+    const openDSU = require("opendsu");
+    const scAPI = openDSU.loadAPI("sc");
+
+    let sharedEnclave;
+    try {
+      sharedEnclave = await $$.promisify(scAPI.getSharedEnclave)();
+    } catch (e) {
+      throw ("Failed to get shared enclave " + err);
+    }
+    return sharedEnclave.getKeySSIAsync();
+  }
 }
 
 export default MyIdentitiesController;