pinokiod 2.15.20 → 2.15.22

package/kernel/api/fs/index.js

@@ -38,6 +38,23 @@ class FS {
     let data = await fs.promises.readFile(filepath, req.params.encoding)
     return data
   }
+  async cat(req, ondata, kernel) {
+    /*
+      params := {
+        path: <filepath>,
+      }
+    */
+    let cwd = (req.cwd ? req.cwd : kernel.api.userdir)
+    let filepath = kernel.api.filePath(req.params.path, cwd)
+    //let filepath = path.resolve(cwd, req.params.path)
+    let data = await fs.promises.readFile(filepath, "utf8")
+    ondata({
+      raw: data.replace(/\n/g, "\r\n")
+    })
+    ondata({
+      raw: "\r\n"
+    })
+  }
 //  async unzip(req, ondata, kernel) {
 //    /*
 //    params := {

package/kernel/api/index.js

@@ -520,7 +520,6 @@ class Api {
 
   }
   async step (request, rawrpc, input, i, total, args) {
-    console.log("STEP")
 
     await this.init()
 
@@ -531,8 +530,6 @@ class Api {
 
     let { cwd, script } = await this.resolveScript(request.path)
 
-    console.log("RESOLVED SCRIPT", script)
-
     let memory = {
       script: this.kernel.script,
       input,
@@ -558,25 +555,17 @@ class Api {
     // get fully resolved env
     let env = await Environment.get2(request.path, this.kernel)
     // set template
-    this.kernel.template.update({ env })
+    this.kernel.template.update({ envs: env, env })
 
     // render until `{{ }}` pattern does not exist
     // 1. render once
     let rpc = rawrpc
     let pass = 0;
-    console.log("PARSE START")
     while(true) {
-      console.log("rpc", rpc)
-      console.log("memory", memory)
       rpc = this.kernel.template.render(rpc, memory)
-      console.log("parsed rpc", rpc)
-      console.log(this.kernel.template.istemplate.toString())
-      console.log("isteamplate = ", this.kernel.template.istemplate(rpc))
       let test = this.kernel.template.istemplate(rpc)
-      console.log({ test })
       if (this.kernel.template.istemplate(rpc)) {
         pass++;
-        console.log("PASS", pass)
         if (pass >= 4) {
           // only try 4 times
           break;
@@ -587,13 +576,10 @@ class Api {
         break;
       }
     }
-    console.log("rpc before", { rpc })
 
     // replace {{{ }}} with {{ }}
     rpc = this.kernel.template.flatten(rpc)
 
-    console.log("rpc after", { rpc })
-
     // 6. rpc must have method names
     if (rpc.method) {
 
@@ -1226,7 +1212,6 @@ class Api {
 //      }
 //    }
 //    script = Object.assign(script, merge)
-    console.log("SCRIPT", script)
 
     return { cwd, script }
   }

package/kernel/api/rm/index.js

@@ -3,8 +3,31 @@ const fs = require('fs')
 const rm = (old, keys) => {
   for (let key of keys) {
     try {
-      let fun = new Function('old', 'key', `delete old.${key}; return old;`);
-      old = fun(old, key);
+//      let fun = new Function('old', 'key', `delete old.${key}; return old;`);
+//      old = fun(old, key);
+      let keypath = String(key).split(".")
+      // multiple keys. check if that path exists.
+      // if not, create the path
+      let next = old
+      for(let i=0; i<keypath.length; i++) {
+        if (i === keypath.length-1) {
+          // last
+          let path_key = keypath[i]
+          if (/^[0-9]+$/.test(path_key)) {
+            if (Array.isArray(next)) {
+              // array index
+              let index = Number(path_key)
+              next.splice(index, 1)
+            }
+          } else {
+            // key
+            delete next[path_key]
+          }
+        } else {
+          const key = keypath[i];
+          next = next[key];
+        }
+      }
     } catch (e) {
     }
   }

package/kernel/api/set/index.js

@@ -1,62 +1,64 @@
 const path = require('path')
 const fs = require('fs')
 const set = async (old, kv, kernel, req, ondata) => {
-  console.log("SET", { old, kv })
-  for (let key in kv) {
-    try {
-      if (key.startsWith('[')) {
-        // array
-        let fun = new Function(
-          'old',
-          'key',
-          'val',
-          `old${key} = val; return old;`
-        );
-        old = fun(old, key, kv[key]);
-      } else {
-
-        let keypath = key.split(".")
-        // multiple keys. check if that path exists.
-        // if not, create the path
-        let next = old
-        for(let i=0; i<keypath.length; i++) {
-          console.log("turn", { i, path: keypath[i], next })
-          if (i === keypath.length-1) {
-            // last
-            next[keypath[i]] = kv[key]
-          } else {
-            const key = keypath[i];
-            if (!(key in next)) {
-              next[key] = {}
+  if (Array.isArray(kv)) {
+    old = kv
+  } else {
+    for (let key in kv) {
+      try {
+        if (key.startsWith('[')) {
+          // array
+          let fun = new Function(
+            'old',
+            'key',
+            'val',
+            `old${key} = val; return old;`
+          );
+          old = fun(old, key, kv[key]);
+        } else {
+
+          let keypath = key.split(".")
+          // multiple keys. check if that path exists.
+          // if not, create the path
+          let next = old
+          for(let i=0; i<keypath.length; i++) {
+            if (i === keypath.length-1) {
+              // last
+              next[keypath[i]] = kv[key]
+            } else {
+              const key = keypath[i];
+              if (!(key in next)) {
+                next[key] = {}
+              }
+              next = next[key];
             }
-            next = next[key];
           }
-        }
 
-//        let fun = new Function(
-//          'old',
-//          'key',
-//          'val',
-//          //`old.${key} = val; return old;`
-//          `old["${key}"] = val; return old;`
-//        );
-//        old = fun(old, key, kv[key]);
-      }
+  //        let fun = new Function(
+  //          'old',
+  //          'key',
+  //          'val',
+  //          //`old.${key} = val; return old;`
+  //          `old["${key}"] = val; return old;`
+  //        );
+  //        old = fun(old, key, kv[key]);
+        }
 
 
-//      // reserved variable: "url"
-//      if (key === "url") {
-//        // start proxy
-//        ondata({
-//          raw: `\r\n[Start proxy] ${kv[key]}\r\n`
-//        })
-//        let response = await kernel.api.startProxy(req.parent.path, kv[key], "Shared")
-//        console.log("Response", response)
-//        ondata({
-//          raw: `Proxy Started ${JSON.stringify(response)}\r\n`
-//        })
-//      }
-    } catch (e) {
+  //      // reserved variable: "url"
+  //      if (key === "url") {
+  //        // start proxy
+  //        ondata({
+  //          raw: `\r\n[Start proxy] ${kv[key]}\r\n`
+  //        })
+  //        let response = await kernel.api.startProxy(req.parent.path, kv[key], "Shared")
+  //        console.log("Response", response)
+  //        ondata({
+  //          raw: `Proxy Started ${JSON.stringify(response)}\r\n`
+  //        })
+  //      }
+      } catch (e) {
+      }
     }
   }
   return old
@@ -109,8 +111,6 @@ module.exports = async (req, ondata, kernel) => {
 //      }
     }
   }
-  console.log("kernel.memory", kernel.memory)
-
   // set self => save to the file
 
 /*

package/kernel/index.js

@@ -359,6 +359,7 @@ class Kernel {
           platform: this.platform,
           arch: this.arch,
           env: this.envs,
+          envs: this.envs,
           proxy: (port) => {
             return this.api.get_proxy_url("/proxy", port)
           },

package/package.json

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

package/server/index.js

@@ -215,6 +215,34 @@ class Server {
     let app_path = this.kernel.path("api", name, "pinokio.js")
     let rawpath = "/api/" + name
     let config  = (await this.kernel.loader.load(app_path)).resolved
+
+
+
+//    let requires_instantiation = false
+//    console.log("## CONFIG", config)
+//    if (config && config.pre) {
+//      let env = await Environment.get2(app_path, this.kernel)
+//      for(let item of config.pre) {
+//        console.log("ITEM" , item)
+//        if (item.env) {
+//          if (env[item.env]) {
+//            
+//          } else {
+//            requires_instantiation = true
+//            break;
+//          }
+//        }
+//      }
+//    }
+//    console.log({ requires_instantiation })
+//    if (requires_instantiation) {
+//      // redirect to pre
+//      res.redirect("/required_env/api/" + name)
+//      return
+//    }
+
+
+
     if (config && config.menu) {
       if (typeof config.menu === "function") {
         if (config.menu.constructor.name === "AsyncFunction") {
@@ -865,52 +893,82 @@ class Server {
         let editorUrl = edu.pathname + edu.search
 
         let referer = req.get("Referer")
-        console.log({ referer })
 
         let prev = null
         if (/\/env\/api\/.+/.test(new URL(referer).pathname)) {
           prev = referer 
         }
 
-        const result = {
-          prev,
-          error,
-          memory: mem,
-//          memory: mem,
-          logo: this.logo,
-          theme: this.theme,
-          //run: (req.query && req.query.run ? true : false),
-          //run: true,    // run mode by default
-          run: (req.query && req.query.mode === "source" ? false : true),
-          stop: (req.query && req.query.stop ? true : false),
-          pinokioPath,
-          runnable,
-          agent: this.agent,
-          rawpath,
-          gitRemote,
-          filename,
-          filepath,
-          encodedFilePath: encodeURIComponent(filepath),
-          schemaPath,
-          uri,
-          mod,
-          json,
-          js,
-          content,
-          paths,
-          requirements,
-          requirements_pending,
-          install_required,
-          //current: encodeURIComponent(req.originalUrl),
-          current: req.originalUrl,
-          editorUrl,
-          execUrl: "~" + req.originalUrl.replace(/^\/_api/, "\/api"),
-          proxies: this.kernel.api.proxies[filepath],
+
+        let requires_instantiation = false
+        let pre_items = []
+        if (resolved && resolved.pre) {
+          let env = await Environment.get2(filepath, this.kernel)
+          for(let item of resolved.pre) {
+            if (item.env) {
+              if (env[item.env]) {
+                item.val = env[item.env]
+              } else {
+                requires_instantiation = true
+              }
+              pre_items.push(item)
+            }
+          }
+        }
+        if (requires_instantiation) {
+          let p = Util.api_path(filepath, this.kernel)
+          res.render("required_env_editor", {
+            agent: this.agent,
+            theme: this.theme,
+            filename,
+            filepath: p,
+            items: pre_items
+          })
+        } else {
+          const result = {
+            prev,
+            error,
+            memory: mem,
+  //          memory: mem,
+            logo: this.logo,
+            theme: this.theme,
+            //run: (req.query && req.query.run ? true : false),
+            //run: true,    // run mode by default
+            run: (req.query && req.query.mode === "source" ? false : true),
+            stop: (req.query && req.query.stop ? true : false),
+            pinokioPath,
+            runnable,
+            agent: this.agent,
+            rawpath,
+            gitRemote,
+            filename,
+            filepath,
+            encodedFilePath: encodeURIComponent(filepath),
+            schemaPath,
+            uri,
+            mod,
+            json,
+            js,
+            content,
+            paths,
+            requirements,
+            requirements_pending,
+            install_required,
+            //current: encodeURIComponent(req.originalUrl),
+            current: req.originalUrl,
+            editorUrl,
+            execUrl: "~" + req.originalUrl.replace(/^\/_api/, "\/api"),
+            proxies: this.kernel.api.proxies[filepath],
+          }
+
+          res.render(template, result)
         }
 
-        console.log({ result })
 
-        res.render(template, result)
+
+
+
+
       } else {
         res.render("frame", {
           logo: this.logo,
@@ -2405,6 +2463,23 @@ class Server {
           str: configStr
         })
       } else {
+
+        let requires_instantiation = false
+        let pre_items = {}
+        if (config && config.pre) {
+          let env = await Environment.get2(filepath, this.kernel)
+          for(let item of config.pre) {
+            if (item.env) {
+              if (env[item.env]) {
+                
+              } else {
+                requires_instantiation = true
+              }
+            }
+          }
+        }
+        console.log({ requires_instantiation })
+
         res.render("env_editor", {
           home: null,
           config,
@@ -2415,6 +2490,8 @@ class Server {
           theme: this.theme,
           filepath,
           agent: this.agent,
+          pre_items,
+          requires_instantiation,
         })
       }
       //res.render("env_editor", {
@@ -2431,17 +2508,22 @@ class Server {
     }))
     this.app.get("/pre/api/:name", ex(async (req, res) => {
       let p = path.resolve(this.kernel.homedir, "api", req.params.name, "pinokio.js")
+      let p2 = path.resolve(this.kernel.homedir, "api", req.params.name)
       let config  = (await this.kernel.loader.load(p)).resolved
       if (config && config.pre) {
         config.pre.forEach((item) => {
-          item.icon = `/api/${req.params.name}/${item.icon}?raw=true`
+          if (item.icon) {
+            item.icon = `/api/${req.params.name}/${item.icon}?raw=true`
+          }
         })
+        let env = await Environment.get2(p2, this.kernel)
         res.render("pre", {
           name: req.params.name,
           theme: this.theme,
           agent: this.agent,
           name: req.params.name,
-          items: config.pre
+          items: config.pre,
+          env
         })
       } else {
         res.redirect("/env/" + req.params.name + "?init=true")

package/server/public/style.css

@@ -954,7 +954,10 @@ body.dark .line:hover {
 .line {
   text-decoration: none;
   display: block;
+  /*
   padding: 15px 15px;
+  */
+  padding: 10px;
   border-bottom: 1px solid var(--light-thin);
 }
 .thick.line {
@@ -1002,8 +1005,12 @@ body.dark .line i {
   text-align: center;
 }
 .line img {
+/*
   width: 60px;
   height: 60px;
+  */
+  width: 40px;
+  height: 40px;
   border-radius: 10px;
 }
 body.dark .line .btn {

package/server/views/env_editor.ejs

@@ -123,9 +123,16 @@ body.dark .env-item label {
   font-weight: bold;
   font-size: 18px;
 }
+.env-item.highlighted {
+  border: 5px solid red;
+}
 .env-item {
+/*
   padding-top: 10px;
   padding-bottom: 30px;
+  */
+  padding: 10px;
+  margin-bottom: 20px;
 }
 body.dark .comment {
   border-left: 2px solid white;
@@ -206,6 +213,12 @@ footer .btn.go-home {
 #editor {
   height: auto;
 }
+.env-title {
+  font-weight: bold;
+}
+.env-description {
+  margin-bottom: 10px;
+}
 </style>
 <script>
 document.addEventListener("DOMContentLoaded", async () => {
@@ -292,7 +305,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         </h1>
       </header>
     <% } %>
-    <div id='editor' class='<%=init ? "hidden" : ''%>'>
+    <div id='editor' class='<%=init && !requires_instantiation ? "hidden" : ''%>'>
       <!--
       <h1>Configure</h1>
       -->
@@ -300,10 +313,23 @@ document.addEventListener("DOMContentLoaded", async () => {
         <% if (item.type === "comment") { %>
           <div class='comment'><%=item.val.replaceAll(/^[ #]+/g, "")%></div>
         <% } else { %>
-          <div class='env-item'>
-            <label for="<%=item.key%>"><%=item.key%></label>
-            <input id="<%=item.key%>" type="text" value="<%=item.val%>">
-          </div>
+          <% if(pre_items[item.key]) { %>
+            <div class='env-item highlighted'>
+              <label for="<%=item.key%>"><%=item.key%></label>
+              <% if (pre_items[item.key].title) { %>
+                <div class='env-title'><%=pre_items[item.key].title%></div>
+              <% } %>
+              <% if (pre_items[item.key].description) { %>
+                <div class='env-description'><%=pre_items[item.key].description%></div>
+              <% } %>
+              <input id="<%=item.key%>" type="text" value="<%=item.val%>">
+            </div>
+          <% } else { %>
+            <div class='env-item'>
+              <label for="<%=item.key%>"><%=item.key%></label>
+              <input id="<%=item.key%>" type="text" value="<%=item.val%>">
+            </div>
+          <% } %>
         <% } %>
       <% }) %>
     </div>

package/server/views/index.ejs

@@ -312,9 +312,16 @@ body.dark .browser-options-row {
             <% if (item.icon) { %>
               <img src="<%=item.icon%>">
             <% } else { %>
+              <% if (theme === 'dark') { %>
+                <img src="/pinokio-white.png">
+              <% } else { %>
+                <img src="/pinokio-black.png">
+              <% } %>
+              <!--
               <div class='avatar'>
                 <i class="fa-regular fa-circle-dot"></i>
               </div>
+              -->
             <% } %>
             <div class='col'>
               <div class='uri'><i class="fa-regular fa-folder"></i><%=item.url%></div>
@@ -366,9 +373,16 @@ body.dark .browser-options-row {
             <% if (item.icon) { %>
               <img src="<%=item.icon%>">
             <% } else { %>
+            <!--
               <div class='avatar'>
                 <i class="fa-regular fa-circle-dot"></i>
               </div>
+              -->
+              <% if (theme === 'dark') { %>
+                <img src="/pinokio-white.png">
+              <% } else { %>
+                <img src="/pinokio-black.png">
+              <% } %>
             <% } %>
             <div class='col'>
               <div class='uri'><i class="fa-regular fa-folder"></i><%=item.url%></div>

package/server/views/pre.ejs

@@ -55,6 +55,9 @@ h1 {
   margin: 10px 0;
 
 }
+.item .title {
+  font-weight: bold;
+}
 .item .btn {
   width: 50px;
   text-align: center;
@@ -78,6 +81,22 @@ footer a.btn {
 .e {
   padding: 5px 0;
 }
+.env {
+  padding: 10px;
+  border-left: 2px solid black;
+  margin-top: 10px;
+}
+.env label {
+  font-weight: bold;
+  font-size: 12px;
+  display: block;
+  margin-bottom: 5px;
+}
+.env input[type=text] {
+  padding: 5px;
+  box-sizing: border-box;
+  width: 100%;
+}
 </style>
 </head>
 <body class='columns <%=theme%>'>
@@ -91,14 +110,29 @@ footer a.btn {
     </div>
     <div class='items'>
       <% items.forEach((item) => { %>
-        <div class='item'>
-          <img src="<%=item.icon%>">
+        <% if (item.href) { %>
+          <div class='item'>
+            <% if (item.icon) { %>
+              <img src="<%=item.icon%>">
+            <% } %>
+            <div class='col'>
+              <div class='title'><%=item.title%></div>
+              <div class='description'><%=item.description%></div>
+            </div>
+            <a target="_blank" features="browser" href='<%=item.href%>' class='btn'>Get</a>
+          </div>
+        <% } else if (item.env) { %>
+        <!--
           <div class='col'>
             <div class='title'><%=item.title%></div>
             <div class='description'><%=item.description%></div>
+            <div class='env'>
+              <label><%=item.env%></label>
+              <input type='text' value="<%=env[item.env] ? env[item.env] : ''%>" />
+            </div>
           </div>
-          <a target="_blank" features="browser" href='<%=item.href%>' class='btn'>Get</a>
-        </div>
+          -->
+        <% } %>
       <% }) %>
     </div>
     <footer>

package/server/views/required_env_editor.ejs

@@ -0,0 +1,275 @@
+<html class='columns'>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<script src="/hotkeys.min.js"></script>
+<script src="/ace/ace.js"></script>
+<script src="/noty.js"></script>
+<script src="/notyq.js"></script>
+<script src="/xterm.js"></script>
+<script src="/xterm-addon-fit.js"></script>
+<script src="/xterm-addon-web-links.js"></script>
+<script src="/xterm-theme.js"></script>
+<script src="/xterm-addon-search.js"></script>
+<script src="/xterm-addon-search-bar.js"></script>
+<script src="/sweetalert2.js"></script>
+<script src="/Socket.js"></script>
+<script src="/common.js"></script>
+<script src="/he.js"></script>
+<script src="/opener.js"></script>
+<script src="/nav.js"></script>
+<script src="/autoexpand.js"></script>
+<script src="/modalinput.js"></script>
+<script src="/simplemodal.js"></script>
+<script src="/waitmodal.js"></script>
+<script src="/notifyinput.js"></script>
+<script src="/report.js"></script>
+<link href="/xterm.min.css" rel="stylesheet" />
+<link href="/css/fontawesome.min.css" rel="stylesheet">
+<link href="/css/solid.min.css" rel="stylesheet">
+<link href="/css/regular.min.css" rel="stylesheet">
+<link href="/css/brands.min.css" rel="stylesheet">
+<link href="/style.css" rel="stylesheet"/>
+<link href="/noty.css" rel="stylesheet"/>
+<% if (agent === "electron") { %>
+  <link href="/electron.css" rel="stylesheet"/>
+<% } %>
+<style>
+body.frozen {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+#table > table {
+  border-left: 2px solid black;
+  padding-left: 5px;
+  margin: 10px 0;
+}
+.highlight {
+  background: yellow;
+  width: 100px;
+}
+th {
+  background: rgba(0,0,0,0.1);
+  padding: 10px;
+  font-size: 12px;
+}
+td {
+  font-size: 12px;
+  padding: 10px;
+}
+td.val {
+  background: rgba(0,0,0,0.06);
+}
+td.key {
+  background: rgba(0,0,0,0.1);
+}
+.button {
+  cursor: pointer; 
+  background: rgba(0,0,0,0.8);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+}
+.button:hover {
+  
+}
+main {
+  width: 100%;
+  box-sizing: border-box;
+  max-width: 600px;
+  padding: 20px;
+  margin: 0 auto;
+}
+
+header .btn {
+  font-family: Sans-serif;
+  display: block;
+  margin-left: 10px;
+  font-style: normal;
+  font-size: 12px;
+  font-weight: normal;
+  padding: 5px 10px;
+}
+.disabled {
+  opacity: 0.7;
+}
+body.dark .env-item input[type=text] {
+  background: white;
+}
+.env-item input[type=text] {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  border: none;
+  background: rgba(0,0,100, 0.1);
+}
+body.dark .env-item label {
+  color: cornflowerblue;
+}
+.env-item label {
+  color: royalblue;
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+  font-size: 18px;
+}
+.env-item.highlighted {
+  border: 5px solid red;
+}
+.env-item {
+/*
+  padding-top: 10px;
+  padding-bottom: 30px;
+  */
+  padding: 10px;
+  margin-bottom: 20px;
+}
+body.dark .comment {
+  border-left: 2px solid white;
+}
+.comment {
+  opacity: 0.8;
+  border-left: 2px solid black;
+  padding-left: 10px;
+}
+#save {
+  background: royalblue;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+}
+a#customize {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.e {
+  padding: 10px 0;
+}
+#editor {
+  padding: 20px 0;
+}
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+body {
+  display: block;
+}
+.card {
+  display: flex;
+  padding: 10px 0;
+  box-sizing: border-box;
+}
+.card img {
+  width: 100px;
+  border-radius: 10px;
+}
+.card .description {
+  opacity: 0.8;
+}
+.card .title {
+  font-weight: bold;
+  font-size: 30px;
+  letter-spacing: -1px;
+}
+.card .col {
+  padding-left: 10px;
+}
+h1 {
+  text-align: center;
+  font-size: 50px;
+  padding-bottom: 20px;
+}
+footer {
+  background: none;
+  padding: 0;
+  text-align: right;
+  display: flex;
+  margin: 10px 0 20px 0;
+}
+footer .btn {
+  margin-left: 10px;
+  display: inline-block;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+
+}
+footer .btn.go-home {
+  margin-left: 0px;
+}
+.btn.home-button {
+  background: none !important;
+  margin: 0 !important;
+  font-size: 16px !important;
+}
+#editor {
+  height: auto;
+}
+.env-title {
+  font-weight: bold;
+}
+.env-description {
+  margin-bottom: 10px;
+}
+.subtitle {
+  text-align: center;
+}
+</style>
+<script>
+document.addEventListener("DOMContentLoaded", async () => {
+  const n = new N()
+  document.querySelector("#save").addEventListener("click", async (e) => {
+    // save
+    const vals = {}
+    const els = document.querySelectorAll(".env-item")
+    for(let el of els) {
+      let input = el.querySelector("input[type=text]")
+      vals[input.id] = input.value
+    }
+    console.log("vals", vals)
+    let res = await fetch("/env", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        filepath: "<%=filepath%>",
+        vals
+      })
+    }).then((res) => {
+      return res.json()
+    })
+    console.log("res" ,res)
+    location.href = location.href
+  })
+})
+</script>
+</head>
+<body class='<%=theme%> center'>
+  <main>
+    <div>
+      <h1><%=filename%></h1>
+      <div class='subtitle'>Please enter the required values to continue.</div>
+    </div>
+    <div id='editor'>
+      <% items.forEach((item) => { %>
+        <div class='env-item'>
+          <label for="<%=item.env%>"><%=item.env%></label>
+          <% if (item.title) { %>
+            <div class='env-title'><%=item.title%></div>
+          <% } %>
+          <% if (item.description) { %>
+            <div class='env-description'><%=item.description%></div>
+          <% } %>
+          <input id="<%=item.env%>" type="text" value="<%=item.val%>">
+        </div>
+      <% }) %>
+      <div id='save' class='btn'>
+        <span class='save'><i class="fa-solid fa-check"></i> Done</span>
+      </div>
+    </div>
+  </main>
+</body>
+</html>