Use jte template engine
This commit is contained in:
0
src/main/jte/.jteroot
Normal file
0
src/main/jte/.jteroot
Normal file
104
src/main/jte/browse.jte
Normal file
104
src/main/jte/browse.jte
Normal file
@@ -0,0 +1,104 @@
|
||||
@import java.util.List
|
||||
@import com.github.russp.bpe.http.FileDto
|
||||
|
||||
@param List<FileDto> files
|
||||
@param List<FileDto> breadcrumbs
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Browser">
|
||||
|
||||
<title>Index of </title>
|
||||
|
||||
<link rel="shortcut icon" href="https://picocss.com/favicon.ico">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
|
||||
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
|
||||
|
||||
<!-- Pico.css -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
|
||||
<!-- Custom template-->
|
||||
<link rel="stylesheet" href="/stylesheet.css">
|
||||
|
||||
<style></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="container">
|
||||
<h5>Browse</h5>
|
||||
<nav>
|
||||
<ul class="breadcrumbs">
|
||||
<li><a href="/"><i class="fa fa-home"></i></a></li>
|
||||
@for(FileDto breadcrumb : breadcrumbs)
|
||||
<li><a href="/?path=${breadcrumb.getFullName()}">${breadcrumb.getName()}</a></li>
|
||||
@endfor
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main -->
|
||||
<main class="container">
|
||||
<!-- Tables -->
|
||||
<section id="tables">
|
||||
<figure>
|
||||
<table role="grid">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Date</th>
|
||||
<th scope="col">Size</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for(FileDto file : files)
|
||||
<tr>
|
||||
<th scope="row">
|
||||
@if(file.isDir())
|
||||
<a href="/?path=${file.getFullName()}">
|
||||
<i class="fa fa-folder"></i>
|
||||
${file.getName()}
|
||||
</a>
|
||||
@else
|
||||
<a href="/edit?path=${file.getFullName()}">
|
||||
<i class="fa fa-file"></i>
|
||||
${file.getName()}
|
||||
</a>
|
||||
@endif
|
||||
</th>
|
||||
<td>${file.getModifiedAt()}</td>
|
||||
<td>${file.getSize()}</td>
|
||||
</tr>
|
||||
@endfor
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
</section><!-- ./ Tables -->
|
||||
|
||||
</main><!-- ./ Main -->
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="container">
|
||||
|
||||
<details role="list">
|
||||
<summary aria-haspopup="listbox" role="button" class="secondary">Theme</summary>
|
||||
<ul role="listbox">
|
||||
<li><a href="#" data-theme-switcher="auto">Auto</a></li>
|
||||
<li><a href="#" data-theme-switcher="light">Light</a></li>
|
||||
<li><a href="#" data-theme-switcher="dark">Dark</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<small>Built with <a href="https://picocss.com">Pico</a> • <a
|
||||
href="https://github.com/picocss/examples/blob/master/basic-template/">Source code</a></small>
|
||||
</footer><!-- ./ Footer -->
|
||||
|
||||
|
||||
<!-- Minimal theme switcher -->
|
||||
<script src="../js/minimal-theme-switcher.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
147
src/main/jte/edit.jte
Normal file
147
src/main/jte/edit.jte
Normal file
@@ -0,0 +1,147 @@
|
||||
@import java.util.List
|
||||
@import org.springframework.security.web.server.csrf.CsrfToken
|
||||
@import com.github.russp.bpe.http.FileDto
|
||||
|
||||
@param String selectedFile
|
||||
@param String selectedFileName
|
||||
@param List<FileDto> breadcrumbs
|
||||
|
||||
@param CsrfToken _csrf
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Browser">
|
||||
|
||||
<meta name="_csrf" content="${_csrf.getToken()}"/>
|
||||
<meta name="_csrf_header" content="${_csrf.getHeaderName()}"/>
|
||||
|
||||
<title>Edit ${selectedFileName}</title>
|
||||
|
||||
<link rel="shortcut icon" href="https://picocss.com/favicon.ico">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
|
||||
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
|
||||
|
||||
<!-- Pico.css -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
|
||||
<!-- Custom template-->
|
||||
<link rel="stylesheet" href="/stylesheet.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="container">
|
||||
<h5>Edit ${selectedFileName}</h5>
|
||||
<nav>
|
||||
<ul class="breadcrumbs">
|
||||
<li><a href="/"><i class="fa fa-home"></i></a></li>
|
||||
@for(FileDto breadcrumb : breadcrumbs)
|
||||
<li><a href="/?path=${breadcrumb.getFullName()}">${breadcrumb.getName()}</a></li>
|
||||
@endfor
|
||||
<li>${selectedFileName}</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="javascript:save()" role="button">Save</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main -->
|
||||
<main class="container">
|
||||
<section id="editor">
|
||||
<figure>
|
||||
<div id="editor"></div>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
</main><!-- ./ Main -->
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="container">
|
||||
<small>Built with <a href="https://picocss.com">Pico</a> • <a
|
||||
href="https://github.com/picocss/examples/blob/master/basic-template/">Source code</a></small>
|
||||
</footer><!-- ./ Footer -->
|
||||
|
||||
|
||||
<!-- Minimal theme switcher -->
|
||||
<script src="../js/minimal-theme-switcher.js"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.12.5/ace.js"
|
||||
integrity="sha512-gLQA+KKlMRzGRNhdvGX+3F5UHojWkIIKvG2lNQk0ZM5QUbdG17/hDobp06zXMthrJrd4U1+boOEACntTGlPjJQ=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.12.5/ext-modelist.min.js"
|
||||
integrity="sha512-gluOZJrbb4P8hFk1M2HREivZlXwZd0Uf1i5LLt6NRHjjnu7+4eE/yaYH/m82kMTU557+Q2xJhMmqtzMBBh8o/g=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.6.2/fetch.min.js"
|
||||
integrity="sha512-1Gn7//DzfuF67BGkg97Oc6jPN6hqxuZXnaTpC9P5uw8C6W4yUNj5hoS/APga4g1nO2X6USBb/rXtGzADdaVDeA=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
|
||||
|
||||
<script>
|
||||
var modelist = require("ace/ext/modelist");
|
||||
var mode = modelist.getModeForPath("${selectedFileName}");
|
||||
var editor = ace.edit("editor",
|
||||
{
|
||||
mode: mode.mode,
|
||||
selectionStyle: "text",
|
||||
theme: "ace/theme/dracula"
|
||||
});
|
||||
document.getElementById('editor').style.fontSize = '1.2em';
|
||||
|
||||
fetch('/content?path=${selectedFile}')
|
||||
.then(function (response) {
|
||||
return response.text()
|
||||
})
|
||||
.then(function (body) {
|
||||
editor.setValue(body);
|
||||
editor.clearSelection();
|
||||
editor.gotoLine(1);
|
||||
});
|
||||
|
||||
function save() {
|
||||
var blob = new Blob([editor.getValue()]);
|
||||
var formData = new FormData();
|
||||
formData.set("file", blob);
|
||||
fetch('/content?path=${selectedFile}', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
"${_csrf.getHeaderName()}": "${_csrf.getToken()}"
|
||||
},
|
||||
body: formData,
|
||||
})
|
||||
.then(function(ok) {
|
||||
Toastify({
|
||||
text: "Saved",
|
||||
duration: 3000,
|
||||
close: true,
|
||||
gravity: "top",
|
||||
position: "right",
|
||||
stopOnFocus: true,
|
||||
style: {
|
||||
background: "green",
|
||||
},
|
||||
onClick: function(){} // Callback after click
|
||||
}).showToast();
|
||||
}).catch(function(ex) {
|
||||
Toastify({
|
||||
text: "Error",
|
||||
duration: 3000,
|
||||
close: true,
|
||||
gravity: "top",
|
||||
position: "right",
|
||||
stopOnFocus: true,
|
||||
style: {
|
||||
background: "red",
|
||||
},
|
||||
onClick: function(){} // Callback after click
|
||||
}).showToast();
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
|
||||
</body>
|
||||
</html>
|
||||
130
src/main/jte/login.jte
Normal file
130
src/main/jte/login.jte
Normal file
@@ -0,0 +1,130 @@
|
||||
@import org.springframework.security.web.server.csrf.CsrfToken
|
||||
|
||||
@param CsrfToken _csrf
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Browser">
|
||||
|
||||
<title>Login</title>
|
||||
|
||||
<link rel="shortcut icon" href="https://picocss.com/favicon.ico">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
|
||||
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
|
||||
|
||||
<!-- Pico.css -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
|
||||
<!-- Custom template-->
|
||||
<!-- <link rel="stylesheet" href="/stylesheet.css">-->
|
||||
<style>
|
||||
|
||||
/* Grid */
|
||||
body > main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: calc(100vh - 7rem);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
article div {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
body > main {
|
||||
padding: 1.25rem 0;
|
||||
}
|
||||
|
||||
article div {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body > main {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
article div {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body > main {
|
||||
padding: 1.75rem 0;
|
||||
}
|
||||
|
||||
article div {
|
||||
padding: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
body > main {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
article div {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
summary[role="link"].secondary:is([aria-current],:hover,:active,:focus) {
|
||||
background-color: transparent;
|
||||
color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.grid > div:nth-of-type(2) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
body > footer {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Main -->
|
||||
<main class="container">
|
||||
<article class="grid">
|
||||
<div>
|
||||
<hgroup>
|
||||
<h1>Sign in</h1>
|
||||
</hgroup>
|
||||
<form method="post">
|
||||
<input type="text" name="username" placeholder="Username" aria-label="Login" autocomplete="nickname" required>
|
||||
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||
<input type="hidden" name="${_csrf.getParameterName()}" value="${_csrf.getToken()}"/>
|
||||
<button type="submit" class="contrast">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
<div></div>
|
||||
</article>
|
||||
</main><!-- ./ Main -->
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="container">
|
||||
|
||||
<small>Built with <a href="https://picocss.com">Pico</a> • <a
|
||||
href="https://github.com/picocss/examples/blob/master/basic-template/">Source code</a></small>
|
||||
</footer><!-- ./ Footer -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user