pinokiod 1.3.96 → 1.3.98

package/kernel/api/cloudflare/index.js

@@ -16,6 +16,7 @@ class C {
       => cloudflared tunnel --url http://localhost:8080
     */
 
+    console.log("*tunnel", req.params)
 
     let pipe_uri
     if (req.params.passcode) {

package/kernel/api/local/index.js

@@ -64,6 +64,7 @@ class Local {
     */
 
     let current_env = await Environment.get2(req.parent.path, kernel)
+    console.log({ current_env })
 
     // if the key at current_env.PINOKIO_SHARE_VAR (by default it's 'url') is the variable being set, trigger the share logic
     if (current_env.PINOKIO_SHARE_VAR && current_env.PINOKIO_SHARE_VAR in req.params) {

package/kernel/environment.js

@@ -293,10 +293,12 @@ const init_folders = async (homedir) => {
 
 // Get the actual environment variable at specific path
 const get2 = async (filepath, kernel) => {
+  console.log("Get2")
   let api_path = Util.api_path(filepath, kernel)
   let default_env = await get(kernel.homedir)
   let api_env = await get(api_path)
-  let current_env = Object.assign(process.env, default_env, api_env)
+  console.log({ api_path, default_env, api_env, process_env: process.env })
+  let current_env = Object.assign({}, process.env, default_env, api_env)
   return current_env
 }
 const get = async (homedir) => {

package/kernel/shell.js

@@ -736,7 +736,8 @@ class Shell {
 # index: ${this.index}
 # cmd: ${this.cmd}
 # timestamp: ${time}
-# ${infoYAML.replaceAll("\n", "\n# ")}
+
+${infoYAML}
 
 `
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "1.3.96",
+  "version": "1.3.98",
   "description": "",
   "main": "index.js",
   "scripts": {

package/pipe/index.js

@@ -1,4 +1,5 @@
 const { createProxyMiddleware } = require('http-proxy-middleware');
+const { yellow, green, blue  } = require('kleur');
 
 const path = require('path')
 const { createHttpTerminator } = require('http-terminator')
@@ -16,17 +17,12 @@ class Pipe {
     if (req.session.authenticated) {
       next();
     } else {
-      console.log("not authenticated. redirect /pionkio/login")
       res.redirect('/pinokio/login');
     }
   }
   // a pipe server for creating publicly shareable endpoints
   async start(url, scriptPath, passcode, config) {
-
-    if (!config) config = {}
-    if (config.icon) {
-    }
-
+    console.log("pipe.start", { url, scriptPath, passcode, config })
 
     let port = await this.kernel.port()
     let app = express();
@@ -49,7 +45,34 @@ class Pipe {
       const { password } = req.body;
       
       //if (await bcrypt.compare(password, hashedPassword)) {
-      if (password === passcode) {
+
+      // multiple passcode options supported (comma separated)
+      let passcode_options = passcode.split(",")
+      if (passcode_options.includes(password)) {
+        const ip = req.headers['x-forwarded-for'] || req.socket.remoteAddress;
+        const agent = req.headers['user-agent']
+        let event = {
+          time: `${new Date().toLocaleString()}`,
+          ip,
+          agent
+        }
+        let log = `\r\n[${event.time}] Login from ${event.ip} | ${event.agent}\r\n`
+        console.log(log)
+//        this.kernel.api.ondata({
+//          id: scriptPath,
+//          type: "notify",
+//          data: {
+//            html: `<div><h6>${event.time}</h6><div>IP: ${event.ip}</div>`
+//          }
+//        })
+        this.kernel.api.ondata({
+          type: "stream",
+          kernel: true,
+          id: scriptPath,
+          data: {
+            raw: yellow(log)
+          }
+        })
         req.session.authenticated = true;
         res.redirect('/');
       } else {

package/pipe/views/login.ejs

@@ -15,7 +15,7 @@ body {
   color: white;
 }
 main {
-  max-width: 500px;
+  max-width: 300px;
   width: 100%;
   text-align: center;
   text-transform: lowercase;
@@ -35,8 +35,8 @@ main input {
   /*
   background: rgba(0,0,0,0.06);
   */
-  font-size: 14px;
-  border-radius: 0;
+  font-size: 16px;
+  border-radius: 10px 0 0 10px;
 
 }
 main button {
@@ -45,6 +45,8 @@ main button {
   padding: 10px;
   box-sizing: border-box;
   border: none;
+  font-size: 16px;
+  border-radius: 0 10px 10px 0;
 }
 .error {
   border-left: 3px solid red;
@@ -67,7 +69,7 @@ h1 {
   -->
   <h1>PINOKIO</h1>
   <form method="POST" action="/pinokio/login">
-    <input placeholder="enter passcode" type="password" name="password" required>
+    <input autofocus placeholder="Enter passcode" type="password" name="password" required>
     <button type="submit">Login</button>
   </form>
   <% if (error) { %>

package/server/views/env_editor.ejs

@@ -173,6 +173,7 @@ h1 {
   font-size: 50px;
   font-family: georgia;
   font-style: italic;
+  padding-bottom: 20px;
 }
 footer {
   background: none;
@@ -263,6 +264,7 @@ document.addEventListener("DOMContentLoaded", async () => {
       </header>
     <% } %>
     <div id='editor' class='<%=init ? "hidden" : ''%>'>
+      <h1>Configure</h1>
       <% items.forEach((item) => { %>
         <% if (item.type === "comment") { %>
           <div class='comment'><%=item.val.replaceAll(/^[ #]+/g, "")%></div>

package/server/views/fullscreen_editor.ejs

@@ -104,21 +104,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   <% if (error) { %>
     document.querySelector(".requirements .content").innerHTML = '<div class="loading"><i class="fa-solid fa-circle-exclamation"></i> <%=error%></div>'
   <% } %>
-  <% if (!install_required) { %>
-  /*
-    document.querySelector("footer").addEventListener("click", (e) => {
-      if (e.target.classList.contains("toggle-expand") || e.target.closest(".toggle-expand")) {
-        let el = document.querySelector("footer .toggle-expand i")
-        if (el.classList.contains("fa-circle-chevron-up")) {
-          el.className = "fa-solid fa-circle-chevron-down"
-        } else if (el.classList.contains("fa-circle-chevron-down")) {
-          el.className = "fa-solid fa-circle-chevron-up"
-        }
-        document.querySelector("footer").classList.toggle("expanded")
-      }
-    })
-    */
-  <% } %>
   <% if (requirements_pending) { %>
     await new Promise((resolve, reject) => {
       let interval = setInterval(() => {
@@ -641,34 +626,29 @@ document.addEventListener("DOMContentLoaded", async () => {
         }
       });
 
-      document.querySelector(".stop").addEventListener("click", async (e) => {
-        await rpc.stop()
-    //    socket.run({
-    //      id: location.pathname,
-    //      method: "kernel.api.stop"
-    //    }, (stream) => {
-    //      console.log("#", stream)
-    //    })
-        document.querySelector(".run .play").classList.remove("hidden")
-        document.querySelector(".run .starting").classList.add("hidden")
-        document.querySelector(".run .stop").classList.add("hidden")
-      })
-      document.querySelector(".play").addEventListener("click", async (e) => {
-        document.querySelector(".run .play").classList.add("hidden")
-        document.querySelector(".run .starting").classList.remove("hidden")
-        await rpc.run()
-      })
+      if (document.querySelector(".stop")) {
+        document.querySelector(".stop").addEventListener("click", async (e) => {
+          await rpc.stop()
+      //    socket.run({
+      //      id: location.pathname,
+      //      method: "kernel.api.stop"
+      //    }, (stream) => {
+      //      console.log("#", stream)
+      //    })
+          document.querySelector(".run .play").classList.remove("hidden")
+          document.querySelector(".run .starting").classList.add("hidden")
+          document.querySelector(".run .stop").classList.add("hidden")
+        })
+      }
+      if (document.querySelector(".play")) {
+        document.querySelector(".play").addEventListener("click", async (e) => {
+          document.querySelector(".run .play").classList.add("hidden")
+          document.querySelector(".run .starting").classList.remove("hidden")
+          await rpc.run()
+        })
+      }
     <% } %>
 
-    /*
-    document.querySelector("#save").addEventListener("click", async (e) => {
-      console.log("SAVE")
-      await rpc.save()
-      n.Noty({
-        text: `saved`,
-      })
-    })
-    */
     <% if (stop) { %>
       await rpc.stop()
       document.querySelector(".run .play").classList.remove("hidden")
@@ -685,74 +665,18 @@ document.addEventListener("DOMContentLoaded", async () => {
       <% } %>
     <% } %>
   <% } %>
-  /*
-  document.querySelector("#explore").addEventListener("click", async (e) => {
-    e.preventDefault()
-    e.stopPropagation()
-    location.href = "/?mode=explore"
-  })
-  Reporter()
-  */
 
-
-
-//  document.querySelector(".memory").addEventListener("click", async (e) => {
-//    let target = e.target.classList.contains("tunnel") ? e.target : e.target.closest(".tunnel")
-//    let target2 = e.target.classList.contains("tunnel-stop") ? e.target : e.target.closest(".tunnel-stop")
-//    if (target) {
-//      e.preventDefault()
-//      e.stopPropagation()
-//      let url = target.getAttribute("data-url")
-//      const token = prompt("Enter an Ngrok auth token to expose your machine to the public Internet https://ngrok.com/")
-//      if (token && token.length > 0) {
-//        let response = await fetch("/pinokio/tunnel", {
-//          method: "POST",
-//          headers: {
-//            "Content-Type": "application/json"
-//          },
-//          body: JSON.stringify({ url, action: "start", token })
-//        }).then((res) => {
-//          return res.json()
-//        })
-//        await reloadMemory()
-//      }
-//    } else if (target2) {
-//      console.log("target2", target2)
-//      e.preventDefault()
-//      e.stopPropagation()
-//      let url = target2.getAttribute("data-url")
-//      let response = await fetch("/pinokio/tunnel", {
-//        method: "POST",
-//        headers: {
-//          "Content-Type": "application/json"
-//        },
-//        body: JSON.stringify({ url, action: "stop" })
-//      }).then((res) => {
-//        return res.json()
-//      })
-//      await reloadMemory()
-//    }
-//  })
-  /*
-  document.querySelector("#source").addEventListener("click", (e) => {
-    refreshParent({
-      id: "<%=filepath%>",
-      action: {
-        "type": "newtab",
-        "url": e.target.getAttribute("data-editor-url")
+  if (document.querySelector("#lv")) {
+    document.querySelector("#lv").addEventListener("click", (e) => {
+      let m = e.target.closest(".memory")
+      m.classList.toggle("collapsed")
+      if (m.classList.contains("collapsed")) {
+        m.querySelector("i").className = "fa-solid fa-sort-down"
+      } else {
+        m.querySelector("i").className = "fa-solid fa-sort-up"
       }
     })
-  })
-  */
-  document.querySelector("#lv").addEventListener("click", (e) => {
-    let m = e.target.closest(".memory")
-    m.classList.toggle("collapsed")
-    if (m.classList.contains("collapsed")) {
-      m.querySelector("i").className = "fa-solid fa-sort-down"
-    } else {
-      m.querySelector("i").className = "fa-solid fa-sort-up"
-    }
-  })
+  }
 })
 const reloadMemory = async () => {
   let url = "/pinokio/memory?filepath=<%=encodedFilePath%>"

package/server/views/share_editor.ejs

@@ -74,9 +74,10 @@ td.key {
   
 }
 #editor {
+  margin: 0 auto;
   box-sizing: border-box;
   max-width: 800px;
-  padding: 20px;
+  padding: 50px;
 }
 header .runner {
   padding: 10px 0 0;
@@ -137,7 +138,6 @@ hr {
   height: 1px;
 }
 .shared {
-  margin-left: 30px;
 }
 .shared a {
   display: block;
@@ -145,19 +145,96 @@ hr {
 }
 .shared img {
   width: 200px;
+  border: 1px solid rgba(0,0,0,0.1);
+}
+.shared h2 {
+  margin: 0;
+  letter-spacing: -1px;
+}
+.passcode ol {
+  padding-inline-start: 15px;
+  margin: 5px 0 10px;
+}
+body.dark .passcode {
+  border: 1px solid rgba(255,255,255,0.1); 
+}
+.passcode {
+  margin-left: 30px;
+  padding: 20px !important;
+  box-sizing: border-box;
+  border: 1px solid rgba(0,0,0,0.1);
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.passcode h2 {
+  margin: 0;
+  font-size: 20px;
+  letter-spacing: -1px;
+}
+.passcode div {
+  padding: 0 0 10px;
+}
+.passcode .row {
+  display: flex;
+  padding: 0;
+}
+body.dark .passcode .row input {
+  background: white;
+}
+.passcode .row input {
+  border-radius: 0;
+  flex-grow: 1;
+  padding: 10px;
+  box-sizing: border-box;
+  border: none;
+  background: rgba(0,0,100,0.1);
+}
+body.dark .passcode button {
+  background: royalblue;
+}
+.passcode button {
+  border-radius: 0; 
+}
+body.dark .cloudflare-running {
+  border: 1px solid rgba(255,255,255,0.1);
+}
+.cloudflare-running {
+  margin-left: 30px;
+  padding: 20px !important;
+  box-sizing: border-box;
+  border: 1px solid rgba(0,0,0,0.1);
+}
+h1 {
+  font-size: 50px;
+  font-family: georgia;
+  font-style: italic;
+  padding-bottom: 10px;
 }
 
 </style>
 <script>
 document.addEventListener("DOMContentLoaded", async () => {
   const n = new N()
+  document.querySelector("#reveal").addEventListener("click", async (e) => {
+    let el = document.querySelector("#passcode")
+    if (el.type === "password") {
+      el.type = "text"
+    } else {
+      el.type = "password"
+    }
+  })
   document.querySelector("#save").addEventListener("click", async (e) => {
     // save
     const vals = {}
     const els = document.querySelectorAll(".env-item input[type=checkbox]")
     for(let el of els) {
-      vals[el.id] = el.checked
+      let id = el.getAttribute("data-id")
+      vals[id] = el.checked
     }
+
+    const passcode_el = document.querySelector("#passcode")
+    vals.PINOKIO_SHARE_PASSCODE = passcode_el.value
+
     let res = await fetch("/env", {
       method: "POST",
       headers: {
@@ -165,7 +242,7 @@ document.addEventListener("DOMContentLoaded", async () => {
       },
       body: JSON.stringify({
         filepath: "api/" + location.pathname.slice(7),
-        vals
+        vals,
       })
     }).then((res) => {
       return res.json()
@@ -185,23 +262,41 @@ document.addEventListener("DOMContentLoaded", async () => {
       <hr>
       <div class='env-item'>
         <% if (config.PINOKIO_SHARE_CLOUDFLARE.toString() === "true") { %>
-          <input type="checkbox" id="PINOKIO_SHARE_CLOUDFLARE" name="cloudflare" checked />
+          <input type="checkbox" data-id="PINOKIO_SHARE_CLOUDFLARE" name="cloudflare" checked />
         <% } else { %>
-          <input type="checkbox" id="PINOKIO_SHARE_CLOUDFLARE" name="cloudflare" />
+          <input type="checkbox" data-id="PINOKIO_SHARE_CLOUDFLARE" name="cloudflare" />
         <% } %>
         <label for="cloudflare"><i class="fa-brands fa-cloudflare"></i> Run a Public Node</label>
         <ul>
           <li>This will let you share your local Pinokio app to the public internet, which anyone with a URL can access.</li>
           <li>Powered by <a href="https://www.cloudflare.com/products/tunnel/" target="_blank" features="browser">Cloudflare Tunnel</a></li>
           <li>You can manually configure this in through the Configure menu (set PINOKIO_SHARE_CLOUDFLARE to true)</li>
-          <li>You can add <strong>authentication</strong> by adding a passcode (set PINOKIO_SHARE_PASSCODE in the <strong>Configure</strong> tab)</li>
         </ul>
-        <% cloudflare_links.forEach((link) => { %>
-          <div class='shared'>
-            <a href="<%=link.url%>" target="_blank" features="browser"><%=link.url%></a>
-            <img src="<%=link.qr%>">
+        <div class='passcode'>
+          <h2>Passcode (optional)</h2>
+          <ol>
+            <li><strong>No passcode:</strong> Anyone with the URL can use the app</li>
+            <li><strong>Passcode:</strong> Users will need to authenticate with the passcode before using the app.</li>
+            <li>To allow multiple passcodes, separate the passode by commas (Example: ab12zd3,D3ad3a,df3d9Fa).</li>
+          </ol>
+          <div class='row'>
+            <input id='passcode' type='password' value="<%=config.PINOKIO_SHARE_PASSCODE || ''%>"/>
+            <button class='btn' id='reveal'><i class="fa-solid fa-eye"></i></button>
           </div>
-        <% }) %>
+        </div>
+        <% if (cloudflare_links.length > 0) { %>
+          <div class='cloudflare-running'>
+            <div class='shared'>
+              <h2><i class="fa-solid fa-circle-notch fa-spin"></i> Running</h2>
+            </div>
+            <% cloudflare_links.forEach((link) => { %>
+              <div class='shared'>
+                <a href="<%=link.url%>" target="_blank" features="browser"><%=link.url%></a>
+                <img src="<%=link.qr%>">
+              </div>
+            <% }) %>
+          </div>
+        <% } %>
       </div>
       <div class='env-item'>
         <% if (config.PINOKIO_SHARE_LOCAL.toString() === "true") { %>