propose for new community application wrapper

.gitignore

@@ -1 +1,2 @@
 .idea/
+node_modules/

hosted/.gitkeep

@@ -0,0 +1,2 @@
+// place wrapped app in this directory
+// BEWARE: this is unsafe location, everything placed here is accessible outside

index.html

@@ -12,12 +12,10 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
           integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
-            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
-            crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
-            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
-            crossorigin="anonymous"></script>
+    <script
+        src="https://code.jquery.com/jquery-3.5.1.min.js"
+        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
+        crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
             integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
             crossorigin="anonymous"></script>
@@ -44,14 +42,10 @@
 
         #safety {
             text-align: center;
+            height: 100vh;
             /*font-size: 21px;*/
         }
 
-        #securespeak {
-            width: 125%;
-            margin-left: -5em;
-        }
-
         #reference-list {
             list-style: none;
         }
@@ -90,9 +84,8 @@
     </div>
 
     <!-- Landing popup content -->
-    <div id="safety" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-      <div class="modal-dialog modal-lg">
-        <div id="securespeak" class="modal-content">
+    <div id="safety">
+        <div id="securespeak">
 
                 <!-- NuCypher SVG Logo -->
                 <svg class="mt-3 ml-3" height="100" viewBox="0 0 757 666" fill="none"
@@ -116,7 +109,7 @@
                     <path d="M505.752 0.195423L457.487 23.0953C457.242 23.2111 457.022 23.3741 456.839 23.5751C456.657 23.7762 456.516 24.0112 456.424 24.2668C456.333 24.5223 456.293 24.7935 456.306 25.0646C456.32 25.3357 456.387 25.6014 456.503 25.8467L529.908 180.584C557.183 238.148 549.878 281.814 508.408 301.547C474.848 317.474 445.878 306.362 423.275 267.559L336.363 84.3358C301.119 10.0622 253.115 -9.62392 196.17 17.3911C159.124 34.9663 137.636 66.3811 138.063 106.251C138.071 106.722 137.918 107.182 137.629 107.554C137.339 107.926 136.932 108.188 136.473 108.296C136.014 108.404 135.533 108.352 135.108 108.148C134.683 107.945 134.34 107.602 134.137 107.176L115.164 67.1993C115.048 66.9538 114.885 66.7336 114.684 66.5515C114.482 66.3694 114.247 66.2291 113.991 66.1387C113.735 66.0482 113.464 66.0095 113.193 66.0246C112.922 66.0397 112.657 66.1085 112.412 66.2269L64.1596 89.0557C63.6758 89.2893 63.3029 89.7033 63.1211 90.2089C62.9392 90.7145 62.963 91.2713 63.1872 91.7596L196.478 372.82C196.715 373.314 197.136 373.694 197.651 373.879C198.167 374.063 198.734 374.036 199.23 373.805L247.494 350.905C247.74 350.789 247.96 350.626 248.143 350.425C248.325 350.224 248.466 349.989 248.557 349.733C248.649 349.478 248.689 349.207 248.675 348.935C248.662 348.664 248.595 348.399 248.479 348.153L177.125 197.744C148.06 136.456 153.574 92.139 198.139 70.9943C232.339 54.771 258.926 65.6814 282.798 107.248C282.83 107.296 282.858 107.348 282.881 107.402L368.939 288.846C402.143 358.815 453.716 382.841 508.183 357C550.281 337.03 567.737 306.967 566.717 267.428C566.706 266.956 566.857 266.495 567.146 266.12C567.434 265.746 567.842 265.483 568.301 265.373C568.761 265.263 569.244 265.314 569.67 265.518C570.096 265.722 570.439 266.065 570.643 266.492L589.806 306.896C589.922 307.141 590.085 307.361 590.286 307.544C590.487 307.726 590.722 307.867 590.978 307.959C591.233 308.05 591.504 308.09 591.775 308.077C592.046 308.063 592.312 307.996 592.557 307.88L640.822 284.98C641.068 284.864 641.288 284.701 641.47 284.5C641.652 284.299 641.792 284.063 641.883 283.807C641.973 283.551 642.012 283.28 641.997 283.009C641.982 282.738 641.913 282.473 641.794 282.229L508.503 1.17973C508.267 0.686051 507.845 0.305631 507.33 0.121286C506.815 -0.06306 506.248 -0.0364116 505.752 0.195423Z"
                           fill="#1E65F3"></path>
                 </svg>
-
+                <br />
                 <strong>Be safe with your crypto assets!</strong>
                 <pre>
 This application is a community maintained project.
@@ -141,39 +134,21 @@
                 <a class="list-group-item" href="https://etherscan.io/address/0xbbD3C0C794F40c4f993B03F65343aCC6fcfCb2e2">StakingEscrow (Dispatcher) - 0xbbD3C0C794F40c4f993B03F65343aCC6fcfCb2e2</a>
             </div>
         </div>
+        <div>
+          <button id="agree" class="btn btn-primary">Agree</button>
+        </div>
         </div>
       </div>
-    </div>
-
-     <!-- Community Application Frame -->
-    <iframe class="embed-responsive-item h100"
-            id="content_iframe"
-            style="left:0px; width: 100%; min-height:100%; height: 100%; position: absolute;"
-            src="https://{{ SUBDOMAIN }}.nucypher.community" allowfullscreen></iframe>
-
 </div>
 <script>
-    // Landing Popup
-    $('#safety').modal()
-</script>
-<script>
-  $(document).ready(function() {
-    const triggerEventOnContentIframe = function(eventName) {
-      const iframe = $('#content_iframe');
-      if (iframe.length) {
-        iframe[0].contentWindow.postMessage({ event: eventName }, '*');
-      }
-    };
-    window.ethereum.enable();
-    if (window.ethereum) {
-      window.ethereum.on('accountsChanged', function (accounts) {
-        triggerEventOnContentIframe('accountsChanged');
-      });
-
-      window.ethereum.on('chainChanged', function (accounts) {
-        triggerEventOnContentIframe('chainChanged');
+  $(document).ready(() => {
+    $('#agree').on('click', () => {
+      $.post('/api/agree', (data) => {
+        if (data.status === 'OK') {
+          window.location.reload();
+        }
       });
-    }
+    });
   });
 </script>
 </body>

index.js

@@ -0,0 +1,35 @@
+const express = require('express');
+const app = express();
+const cookieParser = require('cookie-parser');
+const port = process.env.PORT || 3000;
+const agrees = [];
+
+app.use(cookieParser());
+
+app.post('/api/agree', (req, res) => {
+  const agreeGenerated = Math.random().toString(36).substring(2, 15);
+  agrees.push(agreeGenerated);
+  res.status(200).cookie('token', agreeGenerated, {
+    expires: new Date(Date.now() + (8 * 60 * 60 * 1000)) // agree for 8 hours
+  }).send({
+    status: 'OK'
+  });
+});
+
+const staticMiddleware = express.static('hosted');
+app.use('/', (req, res, next) => {
+  const sendFileOptions = {
+    root: __dirname,
+    dotfiles: 'deny'
+  };
+  const tokenCookie = req.cookies['token'];
+  if (tokenCookie && agrees.indexOf(tokenCookie) >= 0) {
+    staticMiddleware(req, res, next);
+  } else {
+    res.sendFile('./index.html', sendFileOptions);
+  }
+});
+
+app.listen(port, () => {
+  console.log(`App running on ${port}`);
+});

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "nucypher-community-wrapper",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "[email protected]:nucypher/nucypher-community-wrapper.git",
+  "license": "MIT",
+  "dependencies": {
+    "cookie-parser": "^1.4.5",
+    "express": "^4.17.1"
+  }
+}