change ui elements from HTML to spectrum and add comments to make the code more verbose

ayanchoudhary · ayanchoudhary · commit d5a700ea8447 · 2021-03-05T00:11:45.000+05:30
diff --git a/secure-storage-sample/index.html b/secure-storage-sample/index.html
@@ -5,23 +5,11 @@
 </head>
 <style>
   body {
-    color: white;
     padding: 0 16px;
   }
-  li:before {
-    content: '• ';
-    width: 3em;
-  }
-
-  #action {
-    display: flex;
-    padding:  16px 16px 0px 16px;
-  }
-  #display {
-    padding: 0px 16px;
-  }
-  div {
-    font-size: 12px;
+  sp-field-label {
+    margin-top: 16px;
+    font-size: 14px;
   }
   sp-button {
     font-size: 12px;
@@ -35,8 +23,9 @@
 <body>
   <sp-heading>Secure Storage Sample</sp-heading>
   <sp-body id="action">
-    <div>Enter Secure Key</div>
-    <div><input type="text" id="secure"></div>
+    <sp-textfield id="secure">
+      <sp-label slot="label">Enter Secure Key</sp-label>
+    </sp-textfield>
   </sp-body>
   <sp-body id="display">
   </sp-body>
diff --git a/secure-storage-sample/index.js b/secure-storage-sample/index.js
@@ -1,19 +1,19 @@
 const secureStorage = require("uxp").storage.secureStorage;
-const app = window.require("photoshop").app;
-
 
 async function saveSecureKey() {
-    const value = document.getElementById("secure").value;
-    await secureStorage.setItem("secure", value);
-    document.getElementById("secure").value = ""
+    const userInput = document.getElementById("secure").value;
+    await secureStorage.setItem("secure", userInput);
+    document.getElementById("secure").value = "";
 }
 
 async function fetchSecureKey() {
-  const value = await secureStorage.getItem("secure");
-  let string = "";
-  for (let i of value) string += String.fromCharCode(i);
-  document.getElementById("display").innerHTML = `
-  <div>Secure Key entered is ${string}</div>`;
+  // We get the stored value from the secureStorage in the form of a uint8Array.
+  const uintArray = await secureStorage.getItem("secure");
+  // We convert the uint8Array to a string to present it to the user.
+  let secureKey = "";
+  for (let i of uintArray) secureKey += String.fromCharCode(i);
+  document.getElementById("display").textContent = `
+  Secure Key entered is ${secureKey}`;
 }
 
 document.getElementById("btnPopulate").addEventListener("click", saveSecureKey);
diff --git a/secure-storage-sample/watch.sh b/secure-storage-sample/watch.sh
