HTML Form Action URL: ' + getFrom + '
'; - document.getElementById("testFormBtn").setAttribute("formaction", getFrom); - spaShowHide("testForm"); - document.getElementById("config").scrollIntoView(); + const getFrom = relayList[randomIdx] + '/' + uuid; + localStorage.setItem("getFrom", getFrom); + const postTo = 'https://api.telegram.org/bot' + document.getElementById("TGbotKey").value + '/sendMessage'; + localStorage.setItem("postTo", postTo); + spaGoTo("server"); + localStorage.setItem("loggedIn", "true"); } function startWorker() { - if (getFrom === undefined) { - config(); + if (myWorker || sessionStorage.getItem("server")) { + alert('Another server is already running. Only one server can run at a time.'); + return; + } else { + sessionStorage.setItem("server", "live"); } - + myWorker = new Worker("app/bg-worker.js"); // Register handler for messages from the background worker @@ -109,29 +118,40 @@ function startWorker() { const msg = e.data[0]; if (! errLvl) { inbox(msg); - logThis('RECEIVED: ' + msg); + logThis(`RECEIVED: ${msg}`); } else if (errLvl === 1) { stopWorker(); - logThis('FATAL ERROR: ' + msg + ' See console for details.'); + logThis(`FATAL ERROR: ${msg}. See console for details.`); alert('Server stopped due to some critical error'); } else { - logThis('ERROR: ' + msg + ' See console for details.'); + logThis(`ERROR: ${msg}. See console for details.`); } } + const getFrom = localStorage.getItem("getFrom"); + // Communicate key data to the background worker - myWorker.postMessage([getFrom, postTo, TGchatID]); + myWorker.postMessage([getFrom, localStorage.getItem("postTo"), localStorage.getItem("TGchatID")]); toggleServer.value = "Kill Server"; toggleServer.disabled = false; logThis("Server started"); document.getElementById("serverStatus").innerHTML = 'Live '; + + document.getElementById("formActionURL").innerHTML = `HTML Form Action URL: ${getFrom}
`; + document.getElementById("readyForm").href = `./${btoa(getFrom).replace(/\+/g,'_').replace(/\//g,'-')}`; + document.getElementById("testFormBtn").setAttribute("formaction", getFrom); + spaShow("testForm"); } function stopWorker() { + if (! myWorker) { + return; + } myWorker.terminate(); myWorker = null; + sessionStorage.removeItem("server"); console.log("Worker terminated"); toggleServer.value = "Launch Server" logThis("Server stopped"); @@ -145,3 +165,22 @@ function toggleWorker() { startWorker(); } } + +function signout() { + stopWorker(); + localStorage.clear(); + location.reload(); +} + +function main() { + // Enable config if no prior settings found in localStorage + if (localStorage.getItem("loggedIn")) { + startWorker(); + spaGoTo("server"); + } else { + spaGoTo("setup"); + } + +} + +spaHide("jsAlert"); diff --git a/app/spa.js b/app/spa.js index 27b8702..a092d5e 100644 --- a/app/spa.js +++ b/app/spa.js @@ -5,14 +5,30 @@ const spaHomePageID = document.querySelector(".spa-page").id; // Assuming first spa-page class is the home / hero page let spaCurrentPageID = spaHomePageID; -{ - const pages = document.getElementsByClassName("spa-page"); +function spaShow(id) { + document.getElementById(id).style.display = 'block'; +} - for (let el of pages) { - el.style.display = 'none'; +function spaHide(id) { + document.getElementById(id).style.display = 'none'; +} + +function spaToggle(id) { + let x = document.getElementById(id); + if (x.style.display === "none") { + x.style.display = "block"; + } else { + x.style.display = "none"; } } +function spaGoTo(id) { + document.getElementById(spaCurrentPageID).style.display = 'none'; + spaShow(id); + spaCurrentPageID = id; + spaTop(); +} + function spaTop(){ document.getElementById(spaCurrentPageID).scrollIntoView(); } @@ -21,19 +37,11 @@ function spaBottom(){ document.getElementById(spaCurrentPageID).scrollIntoView(false); } -function spaGoTo(id) { - document.getElementById(spaCurrentPageID).style.display = 'none'; - document.getElementById(id).style.display = 'block'; - spaCurrentPageID = id; - spaTop(); -} +{ + const pages = document.getElementsByClassName("spa-page"); -function spaShowHide(id) { - let x = document.getElementById(id); - if (x.style.display === "none") { - x.style.display = "block"; - } else { - x.style.display = "none"; + for (let el of pages) { + el.style.display = 'none'; } } diff --git a/index.html b/index.html index b1f5087..04da7fe 100755 --- a/index.html +++ b/index.html @@ -22,11 +22,9 @@You don't have JavaScript enabled! This page cannot function without it.
+EasyForm gives you a free and easy, self-hosted form backend solution for adding (contact) forms to your static website(s). You don't, however, need - to configure any server or install anything. Your browser becomes your server! -
-Your smartphone or PC is perhaps always connected to the internet, even on the move. So, if you keep your browser open there, and a very - light-weight JavaScript server runs in it, you are essentially "self-hosting" for free. EasyForm capitalizes on this. Also, the ability to run in a - browser makes EasyForm platform-independent! +
EasyForm gives you a free and easy, self-hosted form backend solution that runs in your browser! Just sign up and then embed the following HTML + form in your website. You also get your own contact form URL that you can use if you don't have a website.
- Working with EasyForm is dead simple. All you need to do is the following: -Here is an HTML code snippet you can readily embed as a basic contact form in your website. Just replace FormActionURL with the actual URL.
-<form action="FormActionURL" method="POST" target="hidden_iframe" autocomplete="on">
+<!-- Replace XXXXX with the form action URL given by this app upon sign up` -->
+<form action="XXXXX" method="POST" target="hidden_iframe">
<input type="hidden" name="From" value="sample">
<input type="email" name="Email" placeholder="Your Email">
<input type="text" name="Name" placeholder="Your Name">
- <input type="text" name="Message" placeholder="Your Message" autocomplete="off">
- <input type="submit" value="Submit">
- <input type="reset" value="Reset">
+ <input type="text" name="Message" placeholder="Your Message">
+ <button type="submit">Submit<button>
+ <input type="reset">Reset<button>
</form>
<!-- when the form is submitted, the server response will appear in this iframe, hidden from view -->
<iframe name="hidden_iframe" src="about:blank" hidden></iframe>
As long as this Tab is open in your browser, whenever your users submit the form, your Inbox here will be populated. + You will also be notified via Telegram. +
+ + +Test if everything is working properly with the following sample form (embed in your own website with + ). You should get a Telegram message upon clicking Post! Your posted data + should also be logged below.
+You also get your own contact form URL.