tapiron
e03aa6b87a
All checks were successful
/ pre-commit (push) Successful in 1m4s
I was asked to add the possibility to hide the upload button to avoid users confuse this tool for a file sharing app. This is only on the front. No breaking changes, by default the button is displayed. Co-authored-by: Thibault Piron <thibault.a.piron@gmail.com> Reviewed-on: #25 Reviewed-by: Julien Riou <jriou@monitoring@riou.xyz> Co-authored-by: tapiron <tapiron@monitoring@riou.xyz> Co-committed-by: tapiron <tapiron@monitoring@riou.xyz>
110 lines
No EOL
5 KiB
HTML
110 lines
No EOL
5 KiB
HTML
{{define "index"}}
|
|
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="light">
|
|
|
|
{{block "head" .}}{{end}}
|
|
|
|
<body>
|
|
{{block "header" .}}{{end}}
|
|
|
|
<form id="form" action="/create" method="post" enctype="multipart/form-data">
|
|
<div class="container mb-4">
|
|
<p class="fs-4">New note</p>
|
|
</div>
|
|
<div class="container text-center justify-content-center w-75 mb-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-1">
|
|
<label class="col-form-label col-form-label-sm" for="password">Password</label>
|
|
</div>
|
|
<div class="col">
|
|
<input type="password" pattern="^[a-zA-Z0-9]{16,256}$"
|
|
title="Letters and numbers with length from 16 to 256" class="form-control" id="password"
|
|
name="password">
|
|
</div>
|
|
<div class="col-1">
|
|
<input type="checkbox" class="form-check-input" for="no-password" id="no-password"
|
|
value="no-password" name="no-password">
|
|
<label class="col-form-label col-form-label-sm" for="no-password">No password</label>
|
|
</div>
|
|
<div class="col-1">
|
|
<input type="checkbox" class="form-check-input" for="delete-after-read" id="delete-after-read"
|
|
value="delete-after-read" name="delete-after-read">
|
|
<label class="col-form-label col-form-label-sm" for="delete-after-read">Delete after read</label>
|
|
</div>
|
|
{{if .EnableUploadFileButton}}
|
|
<div class="col">
|
|
<input type="file" class="form-control" for="file" id="file" name="file" accept="text/plain" />
|
|
</div>
|
|
{{end}}
|
|
<div class="col">
|
|
<select class="form-select" aria-label="Expiration" id="expiration" name="expiration">
|
|
<option disabled>Expiration</option>
|
|
{{range $exp := .Expirations}}
|
|
<option {{ if eq $exp $.Expiration }}selected="selected"{{end}} value="{{$exp}}">{{HumanDuration $exp}}</option>
|
|
{{end}}
|
|
</select>
|
|
</div>
|
|
<div class="col">
|
|
<select class="form-select" aria-label="Language" id="language" name="language">
|
|
<option selected="selected" value="" disabled>Language</option>
|
|
{{range .Languages}}
|
|
<option value="{{lower .}}">{{.}}</option>
|
|
{{end}}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mb-4">
|
|
<div class="row">
|
|
<div id="editor" name="editor" class="form-control"
|
|
style="height: 300px; resize: vertical; overflow: auto;"></div>
|
|
<input type="hidden" id="content" />
|
|
</div>
|
|
</div>
|
|
<div class="container mb-4">
|
|
<div class="row text-center justify-content-center">
|
|
<div class="col-1">
|
|
<button type="submit" id="submit" class="btn btn-success">Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/loader.min.js"></script>
|
|
<script>
|
|
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs' } });
|
|
|
|
require(['vs/editor/editor.main'], function () {
|
|
var editor = monaco.editor.create(document.getElementById('editor'), {
|
|
theme: document.documentElement.getAttribute('data-bs-theme') == 'light' ? "vs" : "vs-dark",
|
|
language: document.getElementById("language").value,
|
|
});
|
|
|
|
// Syntax highlighting
|
|
document.getElementById("language").addEventListener("change", (e) => {
|
|
if (e.target.value != "") {
|
|
monaco.editor.setModelLanguage(editor.getModel(), e.target.value);
|
|
}
|
|
});
|
|
|
|
// Dark mode
|
|
document.getElementById("lightSwitch").addEventListener("click", () => {
|
|
if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
|
|
monaco.editor.setTheme("vs")
|
|
} else if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
|
|
monaco.editor.setTheme("vs-dark")
|
|
}
|
|
});
|
|
|
|
// Copy content on submit
|
|
document.getElementById("form").addEventListener("formdata", (e) => {
|
|
e.formData.append('content', editor.getModel().getValue());
|
|
});
|
|
});
|
|
</script>
|
|
</form>
|
|
|
|
{{block "footer" .}}{{end}}
|
|
</body>
|
|
|
|
</html>
|
|
{{end}} |