forked from postmanlabs/postman-code-generators
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
271 lines (243 loc) · 11.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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>curl2rsc</title>
<!-- Pico CCS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
<!-- Mikrotik Fonts/Graphics -->
<link rel="shortcut icon" type="image/x-icon" href="https://tikoci.github.io/restraml/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Manrope:[email protected]&display=swap"
rel="stylesheet" />
<!-- HTMX -->
<meta name="htmx-config" content='{"selfRequestsOnly":false}' /> <!-- add FQDN for CORS -->
<script src="https://unpkg.com/[email protected]"></script>
<!-- Plausable -->
<script defer data-domain="tikoci.github.io/restraml"
src="https://plausible.io/js/script.tagged-events.js"></script>
<script>window.plausible = window.plausible || function () {
(window.plausible.q = window.plausible.q || []).push(arguments)
}</script>
<!-- Highlight.JS (for diff) -->
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css" />
<script src="https://unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
<script src="https://unpkg.com/@highlightjs/[email protected]/languages/diff.min.js"></script>
<script src="https://unpkg.com/@highlightjs/[email protected]/languages/json.min.js"></script>
<!-- Override CSS to use Mikrotik fonts-->
<style>
:root {
--pico-font-family-sans-serif: Manrope, system-ui, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue",
sans-serif, var(--pico-font-family-emoji);
--pico-font-family-monospace:
"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji);
--pico-font-family: "JetBrains Mono", var(--pico-font-family-sans-serif);
}
</style>
<!-- Dark Mode Support -->
<style>
header nav li a svg {
width: var(--font-size);
height: var(--font-size);
color: var(--contrast);
}
</style>
<!-- Clipboard -->
<script>
async function writeClipboardText(id) {
try {
await
navigator.clipboard.writeText(document.getElementById(id).value);
} catch
(error) { console.error(error.message); }
};
</script>
<script>
const pasteClipboadText = (id) => {
navigator.clipboard.readText().then((clipText) =>
document.getElementById(id).value = clipText).error((error) => {
console.error(error.message);
})
};
</script>
</head>
<body>
<header class="container">
<!-- Hide Curl Resuls -->
<style>
.curlresults:has(.fetchoutput:placeholder-shown) {
display: none;
}
#selectfetchoutput[value=""] {
display: node;
}
</style>
<nav>
<ul>
<h1><small><mark>Experimental!</mark></small>
<code>curl2rsc</code>
</h1>
</ul>
</nav>
</header>
<main class="container">
<section>
<h5>
Converts
<code>curl</code>
to a web service call on Mikrotik's RouterOS, via Postman's codegens.
</h5>
<p>
Most curl commands line options should work, and be converted to
RouterOS scripting commands. But not everything can be converted, such
as file operations. But a lot can! The tool will attempt to convert as
much as it can, even if not in complete fidelity with curl. So use
this page as guide, not a reference.
</p>
<article>
<b>URL may change in future.</b>
Check out
<a href="https://github.com/tikoci/postman-code-generators">tikoci/postman-code-generators</a>
on GitHub for updates.
</article>
</section>
<br /><br />
<section>
<h3>
<kbd>NEW</kbd>
Convert
<code>curl</code>
request to
<code>/tool/fetch</code>
</h3>
<div hx-post="https://curl2rsc.glitch.me/curl" hx-target="#tafetchcmd" hx-swap="innerHTML" hx-include="this"
hx-trigger="change">
<fieldset id="curl2rscfields">
<label>
<code>curl</code>
command line to convert from:
<input name="cmd" hx-post="https://curl2rsc.glitch.me/curl" hx-target="#tafetchcmd"
hx-swap="innerHTML" hx-trigger="keyup changed delay:2s" id="inputcurl" required
value="curl -X GET -G https://wttr.in/@mikrotik.com -d 'format=4'" />
<small>
⚠️ Update any password or sensitive data in <code>curl</code>! <i>e.g.</i> <code>-u</code>/<code>--user</code>
<!--<a href="" onclick="pasteClipboadText('inputcurl'); return false;">Paste from
📋</a>--></small>
</label>
<div id="htmxinflight" hidden aria-busy="true">
<pre id="msghtmxinflight">generating code...</pre>
</div>
<div class="curlresults" id="curlresults" >
<label>
<mark>Generated</mark>
RouterOS
<code>/tool/fetch</code>
command:
<textarea class="fetchoutput" name="tafetchcmd" id="tafetchcmd" spellcheck="false"
placeholder="/tool/fetch url=http://example.com method=get output=user"
readonly></textarea>
<small>
<a href="" onclick="writeClipboardText('tafetchcmd'); return false;">Copy to
📋</a></small>
</label>
</div>
<div class="curloutputstyle">
<label>
Customize code generation:
<select name="style" id="selectfetchoutput" required aria-invalid="true"
hx-post="https://curl2rsc.glitch.me/curl" hx-target="#tafetchcmd" hx-swap="innerHTML"
hx-trigger="change">
<option selected disabled value="">
Select style for use case...
</option>
<option value="plain">Simple</option>
<option value="outputToConsole">Output to terminal</option>
<option value="outputToVariable">Save to global variable</option>
<option value="outputToVariableWithHeaders">Save to variable,
with response headers</option>
<option value="outputToFile">Send output to file</option>
</select>
</label>
</div>
</fieldset>
</div>
</section>
<br /><br />
<section>
<h4>Known Issues:</h4>
<ul>
<li>
The backend service may go to "sleep", so an initial request may take up to 30 seconds to appear.
Future conversion requests should happen within a few seconds, as you type.
</li>
<li>While
<code>--json</code>
is valid in [modern] curl, it is not known the parser, so the content type
must be set using
<code>-H 'Content-Type: application/json'</code>
manually.
</li>
<li>RouterOS does not support handling 3xx redirects, so
<code>-L</code> and <code>--location</code> are ignored.
</li>
</ul>
</section>
<section>
<blockquote>
<h5>* Disclaimer</h5>
<small>This site is not affiliated, associated, authorized, endorsed
by, or in any way officially connected with
<a href="https://mikrotik.com">Mikrotik</a>. All product and company
names are trademarks™ or registered® trademarks of their respective
holders. Use of them does not imply any affiliation with or
endorsement by them.</small>
</blockquote>
</section>
</main>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
console.log("DOM fully loaded and parsed");
htmx.config.selfRequestsOnly = false
// preload glitch.me to "wakeup"
fetch("https://curl2rsc.glitch.me/")
});
</script>
<script>
const selectfetchoutput = document.getElementById('selectfetchoutput')
selectfetchoutput.addEventListener("change", (e) => {
console.log(e)
if (e.target.value === "") {
document.getElementById("inputcurl").setAttribute("aria-invalid", "true");
}
else {
document.getElementById('selectfetchoutput').removeAttribute("aria-invalid");
}
})
document.getElementById("curl2rscfields").addEventListener("htmx:beforeRequest",
function (evt) {
document.getElementById("msghtmxinflight").innerHTML = "generating code..."
document.getElementById("htmxinflight").hidden = false
document.getElementById("htmxinflight").setAttribute("aria-busy", true)
})
document.getElementById("curl2rscfields").addEventListener("htmx:afterRequest",
function (evt) {
document.getElementById("htmxinflight").setAttribute("aria-busy", false)
document.getElementById("htmxinflight").hidden = true
if (evt.detail.successful) {
document.getElementById("inputcurl").removeAttribute("aria-invalid");
document.getElementById("curlresults").hidden = false;
} else {
document.getElementById("inputcurl").setAttribute("aria-invalid", "true");
document.getElementById("curlresults").hidden = true;
console.error(evt)
}
})
</script>
</body>
</html>