pinokiod 3.8.147 → 3.8.149

package/server/public/fscreator.js

@@ -99,7 +99,7 @@ const FSCreator = async (config) => {
           instantUpload: false,
           server: {
             process: {
-              url: '/pinokio/create_folder', // optional if same as above
+              url: '/pinokio/prototype', // optional if same as above
               ondata: (formData) => {
                 // set custom input fields
                 if (config.input) {

package/server/views/network.ejs

@@ -136,6 +136,12 @@ body.dark .browser-options-row {
   color: royalblue;
   text-decoration: none;
 }
+a.ln[href^=https] {
+  color: #56ad00;
+}
+a.ln:hover {
+  color: red !important;
+}
 .line.align-top h3 {
 /*
   align-items: flex-start;
@@ -167,9 +173,8 @@ body.dark .browser-options-row {
   font-weight: bold;
 }
 .header-label-sub {
-  text-align: center;
-  font-size: 14px;
-  padding: 10px;
+  font-size: 16px;
+  padding: 10px 0;
   border-bottom: 1px solid rgba(0,0,0,0.1);
 }
 .header-label-sub .s {
@@ -196,9 +201,11 @@ body.dark .browser-options-row {
 }
 .container-row.current {
 }
+/*
 .container-row.current .header-label-sub {
   color: royalblue;
 }
+*/
 .desc {
 /*
   text-align:center;
@@ -207,7 +214,6 @@ body.dark .browser-options-row {
 }
 .container-row table {
   width: 100%;
-  margin-top: 20px;
 }
 table a {
   text-decoration: none;
@@ -216,19 +222,26 @@ table a {
 td:first-child, th:first-child {
   max-width: 100px;
 }
-.container-row th {
-  text-align: left;
+.container-row th h2 {
   font-size: 18px;
-  padding: 2px;
+  margin: 0;
   text-transform: uppercase;
 }
+.container-row th {
+  border-bottom: 1px solid rgba(0,0,0,0.05);
+  text-align: left;
+  padding: 20px 0;
+  font-weight: normal;
+  font-size: 12px;
+  margin-bottom: 10px;
+}
 .container-row td.title {
   overflow-wrap: break-word;
 }
 .container-row td {
   vertical-align: top;
   font-size: 14px;
-  padding: 2px;
+  padding: 5px 2px;
 }
 
 .config {
@@ -404,41 +417,46 @@ input:checked + .slider:before {
         -->
         <% if (current_host === host) { %>
           <div class='header-label-sub'>
-            <h1><i class="fa-solid fa-podcast"></i> <%=name%></h1>
-            <div class='s'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=platform%> <%=host%> (this machine)</div>
+            <h1><i class="fa-solid fa-podcast"></i> <%=name%> (localhost)</h1>
+            <div class='s'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=platform%> <%=host%></div>
           </div>
         <% } else { %>
           <div class='header-label-sub'>
             <h1><i class="fa-solid fa-wifi"></i> <%=name%></h1>
-            <div class='s'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=platform%> <%=host%> (remote)</div>
+            <div class='s'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=platform%> <%=host%></div>
           </div>
         <% } %>
         <table>
           <tr>
-            <th>Server</th>
-            <th>https</th>
-            <th>http</th>
+            <th><h2>Server</h2><div>Running apps</div></th>
+            <th><h2>Shared</h2><div>Use on any machine on the network</div></th>
+            <th><h2>Local</h2><div>Use on <%=current_host%></div></th>
           </tr>
           <% processes.forEach((item) => { %>
             <tr> 
               <td class='title'><%=item.name%></td>
               <td>
-                <% item.router.forEach((domain) => { %>
+                <% item.external_router.forEach((domain) => { %>
                   <div>
-                    <a target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
+                    <a class='ln' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
                   </div>
                 <% }) %>
-              </td>
-              <td>
-                <div>
-                  <a target="_blank" href="http://localhost:<%=item.port%>">http://localhost:<%=item.port%></a>
-                </div>
                 <% if (item.external_ip) { %>
                   <div>
-                    <a target="_blank" href="http://<%=item.external_ip%>">http://<%=item.external_ip%></a>
+                    <a class='ln' target="_blank" href="http://<%=item.external_ip%>">http://<%=item.external_ip%></a>
                   </div>
                 <% } %>
               </td>
+              <td>
+                <% item.internal_router.forEach((domain) => { %>
+                  <div>
+                    <a class='ln' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
+                  </div>
+                <% }) %>
+                <div>
+                  <a class='ln' target="_blank" href="http://localhost:<%=item.port%>">http://localhost:<%=item.port%></a>
+                </div>
+              </td>
             </tr>
           <% }) %>
         </table>
@@ -696,6 +714,15 @@ if (document.querySelector("#wifi")) {
   })
 }
 <% } %>
+setInterval(() => {
+  fetch("/peer_check").then((res) => {
+    return res.json()
+  }).then((res) => {
+    if (res.updated) {
+      location.href = location.href
+    }
+  })
+}, 2000)
 </script>
 </body>
 </html>

package/server/views/prototypes.ejs

@@ -415,7 +415,7 @@ document.querySelector(".folder-templates").addEventListener("click", async (e)
     target = e.target.closest(".folder")
   }
   let id = target.getAttribute("data-id")
-  let res = await fetch("/pinokio/folder/" + id).then((res) => {
+  let res = await fetch("/pinokio/prototype/" + id).then((res) => {
     return res.json()
   })
   console.log(res)

package/server/views/setup.ejs

@@ -0,0 +1,254 @@
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<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="/markdown.css" rel="stylesheet"/>
+<link href="/noty.css" rel="stylesheet"/>
+<link href="/style.css" rel="stylesheet"/>
+<% if (agent === "electron") { %>
+  <link href="/electron.css" rel="stylesheet"/>
+<% } %>
+<style>
+html {
+  scroll-behavior: smooth;
+  height: 100%;
+  overflow: hidden;
+}
+body.frozen {
+  overflow: auto !important;
+}
+#del-bin {
+  color: royalblue;
+  cursor: pointer;
+}
+body {
+  height: 100%;
+  overflow: auto;
+  /*
+  background: rgb(44, 29, 22);
+  */
+  display: flex;
+  flex-direction: column;
+}
+body {
+/*
+  background: white;
+  background: rgb(44, 29, 22);
+  background: var(--dark-bg);
+  */
+}
+.line2 {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background: rgba(0,0,100,0.04);
+}
+.line2 a {
+  text-decoration: none;
+  color: black;
+}
+.status {
+  padding: 10px;
+  margin: 10px;
+  border-radius: 10px;
+}
+.status.offline {
+  background: silver;
+}
+.status.online {
+  background: yellowgreen;
+}
+.switch {
+  padding: 10px;
+  margin: 10px 0;
+}
+.switch[data-online=true] {
+  color: yellowgreen;
+}
+.button {
+  padding: 10px;
+}
+.on, .off {
+  display: flex;
+  align-items: center;
+}
+.btn {
+  font-weight: normal;
+  display: block;
+}
+.item {
+  display: flex;
+  align-items: flex-start;
+  margin: 10px;
+  background: rgba(0,0,0,0.04);
+}
+.item img {
+  width: 100px;
+}
+.item .title {
+  text-decoration: none;
+  color: royalblue;
+}
+.item .col {
+  padding: 10px;
+}
+.item .col > * {
+  margin: 5px 0;
+}
+.item .stat {
+  color: rgba(0,0,0,0.8);
+  display: flex;
+}
+.item .stat > * {
+  margin-right: 15px;
+}
+.timestamp {
+  color: rgba(0,0,0,0.5);
+}
+</style>
+<script src="/hotkeys.min.js"></script>
+<script src="/sweetalert2.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="/sweetalert2.js"></script>
+<script src="/Socket.js"></script>
+<script src="/install.js"></script>
+<script src="/timeago.min.js"></script>
+<script src="/common.js"></script>
+<script src="/report.js"></script>
+</head>
+<body class='<%=theme%>'>
+<header class='grabbable'>
+<h1>
+<a class='path' href="/"><%-logo%></a>
+<div class='flexible'></div>
+<div class='nav-btns'>
+  <button class='btn2' id='report'><div><i class="fa-solid fa-bug"></i></div><div>Report Bug</div></button>
+  <a class='btn2' href='https://discord.gg/TQdNwadtE4' target="_blank"><div><i class="fa-brands fa-discord"></i></div><div>Discord</div></a>
+  <a class='btn2' href='https://twitter.com/cocktailpeanut' target="_blank"><div><i class="fa-brands fa-twitter"></i></div><div>Twitter</div></a>
+  <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
+  <button id='new-window' title='open a new window' class='btn2'><i class="fa-solid fa-plus"></i></button>
+</div>
+</h1>
+</h1>
+</header>
+<% if (requirements_pending) { %>
+  <div class='requirements'>
+    <div class='content'>
+      <div class='loading'>
+        <i class="fa-solid fa-circle-notch fa-spin"></i>
+      </div>
+    </div>
+  </div>
+<% } else { %>
+  <% if (true || install_required) { %>
+    <div class='requirements'>
+      <div class='content'>
+        <% if (install_required) { %>
+          <div class='title'><i class="fa-solid fa-circle-exclamation"></i> Installation required</div>
+        <% } else { %>
+          <div class='title'><i class="fa-solid fa-circle-exclamation"></i> Installation complete</div>
+        <% } %>
+        <div class='btn-group'>
+          <% requirements.map((r) => { %>
+            <div class='requirement-item'>
+              <% if (r.installed) { %>
+                <div class='name'><%=r.name%></div>
+                <div class='flexible'></div>
+                <div class='label'>Installed</div>
+              <% } else { %>
+                <div class='name highlighted'><%=r.name%></div>
+                <div class='flexible'></div>
+                <div class='label highlighted'>Not Installed</div>
+              <% } %>
+            </div>
+          <% }) %>
+        </div>
+        <% if (!install_required) { %>
+          <a class='btn' href="/">Return home</a>
+        <% } %>
+        <form class="<%= install_required ? '' : 'hidden'%>" id='install-form' method="post" action="/pinokio/install">
+          <input type='hidden' name="requirements" value="<%=JSON.stringify(requirements)%>">
+          <input type='hidden' name='callback' value="<%=current%>">
+          <button class='btn'>Install</button>
+        </form>
+        <div class='item'>
+          <div class='d'>Not working? <a id='del-bin'>Try a fresh install</a></div>
+          <div class='reset-bin-loading hidden'>
+            <i class="fa-solid fa-circle-notch fa-spin"></i> Stand by. Do not close this window..
+          </div>
+        </div>
+      </div>
+    </div>
+  <% } else { %>
+    <main>
+      <div id='terminal'>all installed</div>
+      <a href="/" class='btn'>Home</a>
+    </main>
+  <% } %>
+<% } %>
+<script>
+document.addEventListener("DOMContentLoaded", async () => {
+  Reporter()
+  <% if (error) { %>
+    document.querySelector(".requirements .content").innerHTML = '<div class="loading"><i class="fa-solid fa-circle-exclamation"></i> <%=error%></div>'
+  <% } %>
+  <% if (requirements_pending) { %>
+    await new Promise((resolve, reject) => {
+      let interval = setInterval(() => {
+        fetch("/pinokio/requirements_ready").then((res) => {
+          return res.json()
+        }).then((res) => {
+          console.log(res)
+          if (res.error) {
+            alert(res.error)
+            clearInterval(interval)
+          } else if (!res.requirements_pending) {
+            clearInterval(interval)
+            resolve()
+          }
+        })
+      }, 500)
+    })
+    location.href = location.href
+  <% } %>
+  if (document.querySelector("#del-bin")) {
+    document.querySelector("#del-bin").addEventListener("click", async (e) => {
+      console.log("del-bin")
+      let proceed = confirm("Are you sure you wish to delete the bin folder?")
+      if (proceed) {
+        document.querySelector(".reset-bin-loading").classList.remove("hidden")
+        document.querySelector("#del-bin").classList.add("hidden")
+        let res = await fetch("/pinokio/delete", {
+          method: "post",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ type: "bin" })
+        }).then((res) => {
+          return res.json()
+        })
+        console.log(res)
+        document.querySelector(".reset-bin-loading").classList.add("hidden")
+        if (res.error) {
+          alert(res.error)
+        } else {
+          //location.href = location.href
+          document.querySelector("#install-form").submit()
+        }
+      }
+    })
+  }
+})
+</script>
+</body>
+</html>

package/server/views/setup_home.ejs

@@ -0,0 +1,181 @@
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<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="/markdown.css" rel="stylesheet"/>
+<link href="/noty.css" rel="stylesheet"/>
+<link href="/style.css" rel="stylesheet"/>
+<% if (agent === "electron") { %>
+  <link href="/electron.css" rel="stylesheet"/>
+<% } %>
+<style>
+html {
+  scroll-behavior: smooth;
+  height: 100%;
+  overflow: hidden;
+}
+body {
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.line2 {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background: rgba(0,0,100,0.04);
+}
+.line2 a {
+  text-decoration: none;
+  color: black;
+}
+.status {
+  padding: 10px;
+  margin: 10px;
+  border-radius: 10px;
+}
+.status.offline {
+  background: silver;
+}
+.status.online {
+  background: yellowgreen;
+}
+.switch {
+  padding: 10px;
+  margin: 10px 0;
+}
+.switch[data-online=true] {
+  color: yellowgreen;
+}
+.button {
+  padding: 10px;
+}
+.on, .off {
+  display: flex;
+  align-items: center;
+}
+.btn {
+  margin: 5px;
+  width: 100px;
+  text-align: center;
+  padding: 10px;
+  background: black;
+  color: white;
+  text-decoration: none;
+  font-weight: normal;
+}
+.item {
+  display: flex;
+  align-items: flex-start;
+  margin: 10px;
+  background: rgba(0,0,0,0.04);
+}
+.item img {
+  width: 100px;
+}
+.item .title {
+  text-decoration: none;
+  color: royalblue;
+}
+.item .col {
+  padding: 10px;
+}
+.item .col > * {
+  margin: 5px 0;
+}
+.item .stat {
+  color: rgba(0,0,0,0.8);
+  display: flex;
+}
+.item .stat > * {
+  margin-right: 15px;
+}
+.timestamp {
+  color: rgba(0,0,0,0.5);
+}
+main {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.setup-items {
+  display: flex;
+  justify-content: center;
+}
+.head {
+  padding: 80px;
+  text-align: center;
+}
+.head .desc {
+  opacity: 0.7;
+  padding: 10px;
+}
+.head h3 {
+  font-size: 50px;
+  margin: 0;
+}
+body.dark .card {
+  color: white;
+}
+.card {
+  text-decoration: none;
+  width: 200px;
+  color: rgba(0,0,0,0.9);
+  text-align: center;
+  height: 400px;
+  margin: 20px;
+}
+.card:hover {
+  color: royalblue !important;
+}
+.card .desc {
+  text-align: left;
+  opacity: 0.7;
+}
+.card h3 {
+  font-size: 30px;
+  letter-spacing: -1px;
+}
+.card i {
+  font-size: 50px;
+}
+</style>
+</head>
+<body class='<%=theme%>'>
+<header class='grabbable'>
+<h1>
+<a class='path' href="/"><%-logo%></a>
+<div class='flexible'></div>
+<div class='nav-btns'>
+  <button class='btn2' id='report'><div><i class="fa-solid fa-bug"></i></div><div>Report Bug</div></button>
+  <a class='btn2' href='https://discord.gg/TQdNwadtE4' target="_blank"><div><i class="fa-brands fa-discord"></i></div><div>Discord</div></a>
+  <a class='btn2' href='https://twitter.com/cocktailpeanut' target="_blank"><div><i class="fa-brands fa-twitter"></i></div><div>Twitter</div></a>
+  <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
+  <button id='new-window' title='open a new window' class='btn2'><i class="fa-solid fa-plus"></i></button>
+</div>
+</h1>
+</h1>
+</header>
+<main>
+  <div class='head'>
+    <h3>Setup</h3>
+    <div class='desc'>Select a setup option (You can set up multiple options).</div>
+  </div>
+  <div class='setup-items'>
+    <% items.forEach((item) => { %>
+      <a class='card' href="/setup/<%=item.id%>">
+        <i class="<%=item.icon%>"></i>
+        <h3><%=item.title%></h3>
+        <div class='desc'><%=item.description%></div>
+      </a>
+    <% }) %>
+  </div>
+</main>
+</body>
+</html>