-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·172 lines (164 loc) · 12.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<title>EasyForm</title>
<meta name="description" content="Free, self-hosted, open-source form backend solution. No installation required for hosting. Lightweight server runs in browser. Backend sends form data as a Telegram bot to your Telegram account.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SomajitDey/webtools@0.0.0/prism/prism.min.css">
</head>
<body onload="spaHide('jsAlert'); spaRestore();">
<div class="container-fluid p-5 text-bg-primary text-center">
<h1>Welcome to EasyForm</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 text-bg-secondary text-center pt-5">
<div class="sticky-top">
<div class="d-flex flex-column justify-content-center align-items-center mt-2 mb-3 pb-3">
<button type="button" class="btn btn-primary mt-4" onclick="spaGoTo('inbox'); updateUnreadCount();">Inbox <span id ="unread" class="badge bg-danger">0</span></button>
<button type="button" class="btn btn-primary mt-4" onclick="spaGoTo('server');">Server</button>
<a href="https://github.com/somajitdey/easyform" class="btn btn-primary mt-4">Source</a>
<a href="https://buymeacoffee.com/SomajitDey" class="btn btn-primary mt-4">Donate</a>
<a href="https://github.com/SomajitDey/EasyForm/discussions/1" class="btn btn-primary mt-4">Contact</a>
</div>
<p>Copyright © 2024 Somajit Dey</p>
</div>
</div>
<div class="col-sm-10 bg-light pt-5 pb-4">
<div class="text-bg-light">
<p class="alert alert-danger" id="jsAlert">You don't have JavaScript enabled! This page cannot function without it.</p>
<div class="spa-page" id="about">
<section>
<h3>About</h3>
<p>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.
</p>
<pre><code class="language-html">
<!-- 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">
<button type="submit">Submit</button>
<button 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>
</code></pre>
<p>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.
</p>
<h3>Powered by</h3>
<ul class="nav nav-pills nav-justified">
<li class="nav-item"><a class="nav-link" href="https://github.com/nwtgck/piping-server">piping-server</a></li>
<li class="nav-item"><a class="nav-link" href="https://httprelay.io/">http-relay</a></li>
<li class="nav-item"><a class="nav-link" href="https://core.telegram.org/bots/api">Telegram Bot</a></li>
<li class="nav-item"><a class="nav-link" href="https://jsdelivr.com/">jsdelivr</a></li>
<li class="nav-item"><a class="nav-link" href="https://prismjs.com/">prism</a></li>
<li class="nav-item"><a class="nav-link" href="https://getbootstrap.com/">bootstrap</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.freeformatter.com/html-formatter.html">freeformatter.com</a></li>
<li class="nav-item"><a class="nav-link" href="https://favicon.io/">favicon.io</a></li>
<li class="nav-item"><a class="nav-link" href="https://github.com/twitter/twemoji/blob/master/assets/svg/1f5e8.svg">twemoji</a></li>
</ul>
</section>
</div>
<p class="d-flex justify-content-start"><button type="button" class="btn btn-danger mt-4" onclick="main();" id="login">Let's get started</button></p>
<div class="spa-page" id="setup">
<section>
<h3>Setup</h3>
<form id="config" onsubmit="config(); startWorker(); return false;" target="hidden_iframe">
<p>Setup in just 3 easy steps.</p>
<p>1. Generate or enter your EasyForm Access Key:</p>
<button type="button" onclick="genUUID(); alert('Store this key safely for all future logins. It cannot be recovered if lost.');">Generate New Key</button>
<input type="text" id="uuid" placeholder="Enter Your Key" required>
<br><br>
<label for="TGbotKey" class="form-label">2. Enter your Telegram Bot API Token (available from <a href="https://t.me/botfather">@BotFather</a>):</label>
<input type="text" id="TGbotKey" class="form-control" autocomplete="on" required>
<br>
<p>3. Send any text to the Bot. Then, click Fetch Chat ID.</p>
<button type="button" onclick="fetchChatID();">Fetch Chat ID</button>
<input type="text" id="chatID" placeholder="Chat ID" disabled required>
<br><br>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</section>
</div>
<div class="spa-page" id="server">
<section>
<h3>Server</h3>
<div id="formActionURL"></div>
<div id="testForm">
<p>Test if everything is working properly with the following sample form (embed in your own website with
<button type="button" onclick="spaGoTo('about');">this code</button>). You should get a Telegram message upon clicking Post! Your posted data
should also be logged below.</p>
<p>You also get <a id="readyForm" target="_blank">your own contact form URL</a><span id="EasyFormViewCounter" class="badge bg-danger"></span>.</p>
<form method="POST" target="hidden_iframe">
<input type="hidden" name="From" value="tester">
<div class="row mt-2">
<div class="col">
<input type="email" class="form-control" name="Email" placeholder="Your Email" autocomplete="on" required>
</div>
<div class="col">
<input type="text" class="form-control" name="Name" placeholder="Your Name" autocomplete="on" required>
</div>
<input type="text" class="form-control mt-2" name="Message" placeholder="Your Message" required>
</div>
<button type="submit" id="testFormBtn" class="btn btn-info mt-2" onclick="alert('Thanks for your message!');">Post</button>
<button type="reset" class="btn btn-warning mt-2">Reset</button>
</form>
<iframe name="hidden_iframe" src="about:blank" hidden></iframe>
</div>
<br><br>
<h3>Log</h3>
<input type="button" id="toggleServer" value="Kill Server" disabled=true; onclick="toggleWorker();">
<button type="button" onclick="signout();">Sign out</button>
<button type="button" onclick="spaBottom();">Bottom</button>
<br><br>
<p class="alert alert-success">Only high level logs are shown here. For the more technical low level logs, check console. Reload this Tab to clear the logs.</p>
<div id="logs" class="text-bg-info"></div>
<br><br>
<button type="button" onclick="spaTop();">Top</button>
</section>
</div>
<div class="spa-page" id="inbox">
<section>
<h3>Inbox</h3>
<p class="alert alert-success">This is your storageless Inbox. All data is lost once you close or even reload this Tab.</p>
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead class="table-dark">
<tr id="inboxHeader">
<th>From</th>
<th>Email</th>
<th>Name</th>
<th>Message</th>
<th>Time</th>
</tr>
</thead>
<tbody id="inboxTable">
</tbody>
</table>
</div>
</section>
</div>
<div class="badge bg-warning position-fixed bottom-0 end-0">
Server: <span id="serverStatus">None yet</span>
</div>
</div>
</div>
</div>
</div>
<script defer src="https://cdn.jsdelivr.net/gh/SomajitDey/webtools@0.0.0/spa/spa.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/SomajitDey/webtools@0.0.0/prism/prism.min.js"></script>
<script defer src="app/server.js"></script>
</body>
</html>