Feature/nix

index.html

@@ -7,8 +7,16 @@
       local files 
       solside, zeditor
     -->
+
+    <!-- TODO - replace with CDN or other packaged version
+      custom repackaged rdflib used here for import / reuqire compat issues.
+    -->
+    <script src="rdflib.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/solid-file-client@0.5.1/dist/browser/solid-file-client.bundle.js"></script>
 
+    <script src="./nix-sdk.umd.js"></script>
+    <script src="./nix-solid.js"></script>
+
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js"></script>
     <script src="./solid-ide-solidHandler.js"></script>
@@ -31,6 +39,14 @@
               <option value="edOnly">editor only</option>
               <option value="dataOnly">data only</option>
             </select>
+            <span v-if="nixState === 'loaded'">
+              <button id="encryptSelection" v-on:click="fileDisplay.encryptSelection()">
+              encrypt
+              </button>
+              <button id="decryptSelection" v-on:click="fileDisplay.decryptSelection()">
+                decrypt
+              </button>
+            </span>
             <button id="saveEdits" v-on:click="fileDisplay.saveEdits()">
               save edits
             </button>
@@ -130,7 +146,7 @@
 
         <div class="table">
           <div class="tr">
-            <span class="td">logged in as</span>
+            <span v-if="loggedIn" class="td">logged in as</span>
             <span class="td left">
               {{webId}}
               <button v-on:click="setLogState()">{{logState}}</button>
@@ -161,12 +177,55 @@
             </span>
 
           </div></div>
+          <hr>
+            <div> Nix can be used to encrypt and decrypt data. </div>
+          <div v-if="nixState === ''">
+            <div v-if="!loggedIn">
+              <div>Please log in with your webID above before enabling Nix. </div>
+            </div>
+            <div v-if="loggedIn">
+              <div>It is not currently enabled.
+                Please enter a passphrase to protect your</div>
+              <div>local data and enable Nix. If you have used Nix from this webID
+                before, please use the same passphrase.
+              </div>
+              <div class="tr">
+                <span class="td"><input type="password" v-model="nixPass">
+                  <button v-on:click="nixLoad(nixPass)">OK</button>
+                </span>
+              </div>
+              <div class="tr">
+                <span class="td" style="color:#f00">{{nixPassErr}}</span>
+              </div>
+            </div>
+          </div>
+          <div v-if="nixState === 'loading'" class="tr">
+            <span class="td" style="color:#00a">Nix is loading...</span>
+          </div>
+          <div v-if="nixState === 'loaded'" class="tr">
+            <span class="td" style="color:#0a0">Nix is loaded.</span>
+          </div>
           <hr>
           <button v-on:click="storePrefs()">save preferences</button>
           <a type="button" target="_blank" href="mailto:dubzed@gmail.com">send feedback</a>
 
       </div><!-- optionsManager -->
 
+      <!-- Encrypt permissions dialog -->
+      <div v-if="fileDisplay.showPermissions" style="width: 100vw;height:100vh;z-index: 10;position: fixed;top: 0;left:0;margin-left:0;margin-top:0;background: rgba(0, 0, 0, 0.75);">
+        <div style="width: 90vw;height:90vh;margin-left: 5vw;margin-top: 5vh;background: #fff;border: 1px solid #000;">
+          <div style="padding: 5%; width:95%; height:95%">
+            <h1>Permissions</h1>
+            <p>Enter WebIDs that should be allowed to read this encrypted content (separated with whitespace and/or commas).</p>
+            <textarea v-model="fileDisplay.canRead" style="width: 90%"></textarea>
+            <div style="margin=top:1em">
+              <button v-on:click="fileDisplay.completeEncryptSelection()">Encrypt</button>
+              <button v-on:click="fileDisplay.showPermissions=false">Cancel</button>
+            </div>
+          </div>
+        </div>
+    </div>
+
     </div><!-- app -->
 
     <!--