Feature/save signs (#2127)
* apply fix * Fixes empty th:action * Update build.gradle * fix * formatting * Save signatures * Fix code scanning alert no. 42: Uncontrolled data used in path expression Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * fix UserServiceInterface * Merge branch 'feature/saveSigns' of git@github.com:Stirling-Tools/Stirling-PDF.git into feature/saveSigns * 0.31.0 bump and further csrf * formatting * preview name * add * sign doc * Update translation files (#2128) Signed-off-by: GitHub Action <action@github.com> Co-authored-by: GitHub Action <action@github.com> --------- Signed-off-by: GitHub Action <action@github.com> Co-authored-by: Dimitrios Kaitantzidis <james_k23@hotmail.gr> Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> Co-authored-by: a <a> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
Anthony Stirling
@@ -384,7 +384,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<script th:src="@{'/js/fetch-utils.js'}"></script>
|
||||
<script th:inline="javascript">
|
||||
|
||||
/*<![CDATA[*/
|
||||
@@ -398,7 +398,7 @@
|
||||
});
|
||||
/*]]>*/
|
||||
function setAnalytics(enabled) {
|
||||
fetch('api/v1/settings/update-enable-analytics', {
|
||||
fetchWithCsrf('api/v1/settings/update-enable-analytics', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
|
||||
<!-- pdf selector -->
|
||||
<div th:replace="~{fragments/common :: fileSelector(name='pdf-upload', multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
|
||||
<div th:replace="~{fragments/common :: fileSelector(name='pdf-upload', disableMultipleFiles=true, multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
|
||||
<script type="module" th:src="@{'/pdfjs-legacy/pdf.mjs'}"></script>
|
||||
<script>
|
||||
let originalFileName = '';
|
||||
@@ -46,7 +46,7 @@
|
||||
</script>
|
||||
|
||||
<div class="tab-group show-on-file-selected">
|
||||
<div th:replace="~{fragments/common :: fileSelector(name='image-upload', multipleInputsForSingleRequest=true, accept='image/*', inputText=#{imgPrompt})}"></div>
|
||||
<div th:replace="~{fragments/common :: fileSelector(name='image-upload', disableMultipleFiles=true, multipleInputsForSingleRequest=true, accept='image/*', inputText=#{imgPrompt})}"></div>
|
||||
<script>
|
||||
const imageUpload = document.querySelector('input[name=image-upload]');
|
||||
imageUpload.addEventListener('change', e => {
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
<span class="tool-header-text" th:text="#{compress.header}"></span>
|
||||
</div>
|
||||
<form action="#" th:action="@{'/api/v1/misc/compress-pdf'}" method="post" enctype="multipart/form-data">
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
|
||||
<div
|
||||
th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}">
|
||||
</div>
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
<!-- Button to download the JSON -->
|
||||
<a href="#" id="downloadJS" class="btn btn-primary mt-3" style="display: none;" th:text="#{showJS.downloadJS}">Download JSON</a>
|
||||
</div>
|
||||
<script th:src="@{'/js/fetch-utils.js'}"></script>
|
||||
<script>
|
||||
document.querySelector('#pdfInfoForm').addEventListener('submit', function(event){
|
||||
event.preventDefault();
|
||||
@@ -46,7 +47,7 @@
|
||||
// Fetch the formData
|
||||
const formData = new FormData(event.target);
|
||||
|
||||
fetch('api/v1/misc/show-javascript', {
|
||||
fetchWithCsrf('api/v1/misc/show-javascript', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}).then(response => response.text())
|
||||
|
||||
@@ -192,6 +192,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script th:src="@{'/js/fetch-utils.js'}"></script>
|
||||
<script th:src="@{'/js/pipeline.js'}"></script>\
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -31,12 +31,16 @@
|
||||
<a href="#" id="downloadJson" class="btn btn-primary mt-3" style="display: none;" th:text="#{getPdfInfo.downloadJson}">Download JSON</a>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
import { fetchWithCsrf } from 'js/fetch-utils.js';
|
||||
|
||||
|
||||
document.getElementById("pdfInfoForm").addEventListener("submit", function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = new FormData(event.target);
|
||||
|
||||
fetch('api/v1/security/get-info-on-pdf', {
|
||||
fetchWithCsrf('api/v1/security/get-info-on-pdf', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}).then(response => response.json()).then(data => {
|
||||
|
||||
@@ -43,6 +43,53 @@
|
||||
</div>
|
||||
<script type="module" th:src="@{'/pdfjs-legacy/pdf.mjs'}"></script>
|
||||
<script>
|
||||
let currentPreviewSrc = null;
|
||||
|
||||
function toggleSignatureView() {
|
||||
const gridView = document.getElementById('gridView');
|
||||
const listView = document.getElementById('listView');
|
||||
const gridText = document.querySelector('.grid-view-text');
|
||||
const listText = document.querySelector('.list-view-text');
|
||||
|
||||
if (gridView.style.display !== 'none') {
|
||||
gridView.style.display = 'none';
|
||||
listView.style.display = 'block';
|
||||
gridText.style.display = 'none';
|
||||
listText.style.display = 'inline';
|
||||
} else {
|
||||
gridView.style.display = 'block';
|
||||
listView.style.display = 'none';
|
||||
gridText.style.display = 'inline';
|
||||
listText.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function previewSignature(element) {
|
||||
const src = element.dataset.src;
|
||||
currentPreviewSrc = src;
|
||||
|
||||
// Extract filename from the data source path
|
||||
const filename = element.querySelector('.signature-list-name').textContent;
|
||||
|
||||
// Update preview modal
|
||||
const previewImage = document.getElementById('previewImage');
|
||||
const previewFileName = document.getElementById('previewFileName');
|
||||
|
||||
previewImage.src = src;
|
||||
previewFileName.textContent = filename;
|
||||
|
||||
const modal = new bootstrap.Modal(document.getElementById('signaturePreview'));
|
||||
modal.show();
|
||||
}
|
||||
|
||||
function addSignatureFromPreview() {
|
||||
if (currentPreviewSrc) {
|
||||
DraggableUtils.createDraggableCanvasFromUrl(currentPreviewSrc);
|
||||
bootstrap.Modal.getInstance(document.getElementById('signaturePreview')).hide();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let originalFileName = '';
|
||||
document.querySelector('input[name=pdf-upload]').addEventListener('change', async (event) => {
|
||||
const file = event.target.files[0];
|
||||
@@ -68,7 +115,7 @@
|
||||
<div class="tab-group show-on-file-selected">
|
||||
<div class="tab-container" th:title="#{sign.upload}">
|
||||
<div
|
||||
th:replace="~{fragments/common :: fileSelector(name='image-upload', multipleInputsForSingleRequest=true, accept='image/*', inputText=#{imgPrompt})}">
|
||||
th:replace="~{fragments/common :: fileSelector(name='image-upload', disableMultipleFiles=true, multipleInputsForSingleRequest=true, accept='image/*', inputText=#{imgPrompt})}">
|
||||
</div>
|
||||
<script>
|
||||
const imageUpload = document.querySelector('input[name=image-upload]');
|
||||
@@ -165,6 +212,126 @@
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="tab-container" th:title="#{sign.saved}">
|
||||
<div class="saved-signatures-section" th:if="${not #lists.isEmpty(signatures)}">
|
||||
<!-- View Toggle Button -->
|
||||
<div class="view-toggle mb-3">
|
||||
<button class="btn btn-outline-secondary btn-sm" onclick="toggleSignatureView()">
|
||||
<span class="material-symbols-rounded grid-view-text">view_list</span>
|
||||
<span class="material-symbols-rounded list-view-text" style="display: none;">grid_view</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Preview Modal -->
|
||||
<div class="modal fade" id="signaturePreview" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><span id="previewFileName"></span></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<img id="previewImage" src="" alt="Signature Preview" style="max-width: 100%;">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}"></button>
|
||||
<button type="button" class="btn btn-primary" onclick="addSignatureFromPreview()" th:text="#{addToDoc}">Add to Document</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid View -->
|
||||
<div id="gridView">
|
||||
<!-- Personal Signatures -->
|
||||
<div class="signature-category" th:if="${not #lists.isEmpty(signatures.?[category == 'Personal'])}">
|
||||
<h5 th:text="#{sign.personalSigs}"></h5>
|
||||
<div class="signature-grid">
|
||||
<div th:each="sig : ${signatures}" th:if="${sig.category == 'Personal'}" class="signature-item">
|
||||
<img th:src="@{'/api/v1/general/sign/' + ${sig.fileName}}"
|
||||
th:alt="${sig.fileName}"
|
||||
th:data-filename="${sig.fileName}"
|
||||
style="max-width: 200px; cursor: pointer;"
|
||||
onclick="DraggableUtils.createDraggableCanvasFromUrl(this.src)"/>
|
||||
<div class="signature-name" th:text="${sig.fileName}"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shared Signatures -->
|
||||
<div class="signature-category" th:if="${not #lists.isEmpty(signatures.?[category == 'Shared'])}">
|
||||
<h5 th:text="#{sign.sharedSigs}"></h5>
|
||||
<div class="signature-grid">
|
||||
<div th:each="sig : ${signatures}" th:if="${sig.category == 'Shared'}" class="signature-item">
|
||||
<img th:src="@{'/api/v1/general/sign/' + ${sig.fileName}}"
|
||||
th:alt="${sig.fileName}"
|
||||
th:data-filename="${sig.fileName}"
|
||||
style="max-width: 200px; cursor: pointer;"
|
||||
onclick="DraggableUtils.createDraggableCanvasFromUrl(this.src)"/>
|
||||
<div class="signature-name" th:text="${sig.fileName}"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List View (Initially Hidden) -->
|
||||
<div id="listView" style="display: none;">
|
||||
<!-- Personal Signatures -->
|
||||
<div class="signature-category" th:if="${not #lists.isEmpty(signatures.?[category == 'Personal'])}">
|
||||
<h5 th:text="#{sign.personalSigs}"></h5>
|
||||
<div class="signature-list">
|
||||
<div th:each="sig : ${signatures}" th:if="${sig.category == 'Personal'}"
|
||||
class="signature-list-item"
|
||||
th:data-src="@{'/api/v1/general/sign/' + ${sig.fileName}}"
|
||||
onclick="previewSignature(this)">
|
||||
<div class="signature-list-info">
|
||||
<span th:text="${sig.fileName}" class="signature-list-name"></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shared Signatures -->
|
||||
<div class="signature-category" th:if="${not #lists.isEmpty(signatures.?[category == 'Shared'])}">
|
||||
<h5 th:text="#{sign.sharedSigs}"></h5>
|
||||
<div class="signature-list">
|
||||
<div th:each="sig : ${signatures}" th:if="${sig.category == 'Shared'}"
|
||||
class="signature-list-item"
|
||||
th:data-src="@{'/api/v1/general/sign/' + ${sig.fileName}}"
|
||||
onclick="previewSignature(this)">
|
||||
<div class="signature-list-info">
|
||||
<span th:text="${sig.fileName}" class="signature-list-name"></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:if="${#lists.isEmpty(signatures)}" class="text-center p-3">
|
||||
<p th:text="#{sign.noSavedSigs}">No saved signatures found</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="tab-container" th:title="#{sign.text}">
|
||||
<label class="form-check-label" for="sigText" th:text="#{text}"></label>
|
||||
<textarea class="form-control" id="sigText" name="sigText" rows="3"></textarea>
|
||||
|
||||
Reference in New Issue
Block a user