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) { + return; } - myWorker = new Worker("app/bg-worker.js"); // Register handler for messages from the background worker @@ -122,17 +124,26 @@ function startWorker() { } } + 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("testFormBtn").setAttribute("formaction", getFrom); + spaShow("testForm"); } function stopWorker() { + if (! myWorker) { + return; + } myWorker.terminate(); myWorker = null; console.log("Worker terminated"); @@ -148,3 +159,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 6c08bb6..a092d5e 100644 --- a/app/spa.js +++ b/app/spa.js @@ -5,20 +5,30 @@ const spaHomePageID = document.querySelector(".spa-page").id; // Assuming first spa-page class is the home / hero page let spaCurrentPageID = spaHomePageID; -{ - const jsAlerts = document.getElementsByClassName("spa-js"); - - for (let el of jsAlerts) { - el.style.display = 'none'; - } +function spaShow(id) { + document.getElementById(id).style.display = 'block'; +} - const pages = document.getElementsByClassName("spa-page"); +function spaHide(id) { + document.getElementById(id).style.display = 'none'; +} - for (let el of pages) { - el.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(); } @@ -27,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 6a7c862..36ed78e 100755 --- a/index.html +++ b/index.html @@ -22,11 +22,9 @@You don't have JavaScript enabled! This page cannot function without it.
+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. Therefrom, as long as this Tab is open in your browser, whenever your users submit the form in your website, your Inbox here + will be populated. You will also be notified via Telegram.
- 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" autocomplete="on">
<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">
+ <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>
Test if everything is working properly with the following sample form. You should get a Telegram message upon clicking Post! Your posted data should also be logged below.
Server logs will be shown here