web-demo: success indicator

3 files changed, 26 insertions, 26 deletions

diff --git a/examples/web-demo/index.html b/examples/web-demo/index.html
index 7542ec2..66b2650 100644
--- a/examples/web-demo/index.html
+++ b/examples/web-demo/index.html
@@ -11,8 +11,9 @@
     <div>
 
       <div id="notes">
-      <p>This is a demo of ERIS - An Encoding for Robust Immutable Storage.</p>
+        <p>This is a demo of ERIS - An Encoding for Robust Immutable Storage.</p>
 
+        <p>ERIS encodes any content into uniformly sized (4kB) encrypted blocks. The original content can only be decoded with the URN (which contains the encryption key). </p>
 
       </div>
 
@@ -37,7 +38,7 @@
             </button>
 
             <h3>RDF</h3>
-            <p>RDF data is normalized before it is encoded. This means that the same content always gets the same identifier (URN).</p><p>Load some sample RDF data to see how the normalized form looks (it's not pretty).</p>
+            <p>RDF data is normalized before it is encoded. This means that the same content always gets the same identifier (URN).</p><p>Load some sample RDF data, encode it and then decode it to see how the normalized form looks (it's not pretty).</p>
 
             <button id="input-load-sample-vocabulary">
               Load sample vocabulary
@@ -51,7 +52,7 @@
         </div>
 
         <div id="controls">
-          <button id="controls-encode">Encode</button>
+          <button id="controls-encode">Encode →</button>
           <details>
             <summary>input format</summary>
             <select id="controls-input-type" name="input-type" selected="plain-text">
@@ -61,44 +62,35 @@
             </select>
           </details>
           <br>
-          <button id="controls-decode">Decode</button>
+          <button id="controls-decode">← Decode</button>
 
           <br>
           <pre id="controls-error"></pre>
+          <pre id="controls-success"></pre>
         </div>
 
         <div id="encoded">
           <h2>Encoded</h2>
 
           <h3>Read capability</h3>
-          <input id="encoded-eris-read-cap" type="url">
+          <input id="encoded-eris-read-cap" type="url"></input>
 
-          </input>
-
-          <br>
-          <br>
-
-          <details>
-            <summary>encoded data</summary>
-            <pre id="encoded-data"></pre>
-          </details>
+          <div id="blocks">
+            <h3>Blocks</h3>
+            <div id="block-container">
+            </div>
+          </div>
 
         </div>
 
         <div class="break">
         </div>
 
-        <div id="blocks">
-          <h2>Blocks</h2>
-          <div id="block-container">
-          </div>
-        </div>
 
       </main>
 
       <h2>About</h2>
 
-      <p>ERIS encodes any content into uniformly sized (4kB) encrypted blocks. The original content can only be decoded with the URN (which contains the encryption key). </p>
 
       <p>For more information on how ERIS works see TODO.</p>
 
diff --git a/examples/web-demo/src/index.js b/examples/web-demo/src/index.js
index 18a12d0..61815af 100644
--- a/examples/web-demo/src/index.js
+++ b/examples/web-demo/src/index.js
@@ -93,10 +93,9 @@ async function main () {
   const controlsDecode = document.getElementById('controls-decode')
   const controlsInputType = document.getElementById('controls-input-type')
   const controlsError = document.getElementById('controls-error')
+  const controlsSuccess = document.getElementById('controls-success')
 
   const encodedErisReadCap = document.getElementById('encoded-eris-read-cap')
-  const encodedData = document.getElementById('encoded-data')
-
   const blockContainer = document.getElementById('block-container')
 
   // a ContentAddressableStorage based on a JavaScipt Map
@@ -163,7 +162,6 @@ async function main () {
   async function encode () {
     // get input as Uint8Array
     const input = await getInputAsUint8Array()
-    encodedData.innerHTML = utf8Decoder.decode(input)
     return ERIS.put(input, cas)
   }
 
@@ -174,19 +172,22 @@ async function main () {
 
   function setError (err) {
     console.error(err)
+    controlsSuccess.innerText = ''
     controlsError.innerText = err
   }
 
-  function clearError () {
+  function setSuccess (msg) {
     controlsError.innerText = ''
+    controlsSuccess.innerText = msg
   }
 
   controlsEncode.onclick = async function (e) {
-    clearError()
+    setSuccess('')
     try {
       const urn = await encode()
       encodedErisReadCap.value = urn
       renderBlocks(cas)
+      setSuccess('Encoded!')
     } catch (err) {
       console.error(err)
       setError(err)
@@ -194,10 +195,11 @@ async function main () {
   }
 
   controlsDecode.onclick = async function (e) {
-    clearError()
+    setSuccess('')
     try {
       const decoded = await decode()
       inputTextarea.value = utf8Decoder.decode(decoded)
+      setSuccess('Decoded!')
     } catch (err) {
       setError(err)
     }
diff --git a/examples/web-demo/style.css b/examples/web-demo/style.css
index f2693a5..d91edcb 100644
--- a/examples/web-demo/style.css
+++ b/examples/web-demo/style.css
@@ -38,6 +38,12 @@ textarea {
     overflow: auto;
 }
 
+#controls-success {
+    background-color: lightgreen;
+    white-space: pre-wrap;
+    overflow: auto;
+}
+
 #encoded {
     background-color: #EEE;
     flex: 3 0;