mirror of
https://github.com/StarFleetCPTN/GoMFT.git
synced 2026-09-19 13:00:50 +02:00
feat: Implement storage provider management functionality
- Added new routes and handlers for managing storage providers, including creation, editing, and deletion. - Introduced a new StorageProvider form component for user input. - Enhanced the database schema to support storage provider references in transfer configurations. - Implemented encryption for sensitive fields in storage provider data. - Added tests for storage provider API endpoints and integration with the database. - Updated frontend components to support storage provider selection and testing.
This commit is contained in:
StarFleetCPTN
@@ -0,0 +1,168 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Show test modal when the test button is clicked
|
||||
document.querySelectorAll('.test-provider-btn').forEach(button => {
|
||||
button.addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
const providerId = button.dataset.providerId;
|
||||
const providerName = button.dataset.providerName;
|
||||
const testModal = document.getElementById('test-provider-modal');
|
||||
|
||||
// Show the modal and add classes to make it visible
|
||||
testModal.classList.remove('hidden');
|
||||
testModal.classList.add('flex');
|
||||
|
||||
// Create loading indicator
|
||||
testModal.innerHTML = `
|
||||
<div class="relative p-4 w-full max-w-md max-h-full mx-auto">
|
||||
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
||||
<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Testing Connection: ${providerName}
|
||||
</h3>
|
||||
<button type="button" class="close-modal text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
|
||||
<i class="fas fa-times"></i>
|
||||
<span class="sr-only">Close modal</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-4 md:p-5" id="test-result">
|
||||
<div class="flex items-center justify-center p-8">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
|
||||
<span class="ml-3">Testing connection...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add event listener for close button
|
||||
testModal.querySelector('.close-modal').addEventListener('click', () => {
|
||||
testModal.classList.add('hidden');
|
||||
testModal.classList.remove('flex');
|
||||
});
|
||||
|
||||
try {
|
||||
// Make API call to test the provider
|
||||
const response = await fetch(`/storage-providers/${providerId}/test`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
});
|
||||
|
||||
// Get the HTML response directly
|
||||
const htmlResult = await response.text();
|
||||
|
||||
// Replace the test result container with the server-rendered HTML
|
||||
document.getElementById('test-result').innerHTML = htmlResult;
|
||||
} catch (err) {
|
||||
console.error('Error testing provider:', err);
|
||||
document.getElementById('test-result').innerHTML = `
|
||||
<div class="text-center">
|
||||
<i class="fas fa-times-circle text-red-500 text-5xl mb-4"></i>
|
||||
<h3 class="mb-2 text-lg font-semibold text-red-500 dark:text-red-400">Connection Failed</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400 mb-4">
|
||||
Network error: Failed to connect to server
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Handle delete confirmation
|
||||
document.querySelectorAll('.delete-provider-btn').forEach(button => {
|
||||
button.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const dialogId = button.dataset.dialogId;
|
||||
const providerId = button.dataset.providerId;
|
||||
|
||||
// Clone the template
|
||||
const templateContent = document.getElementById('delete-dialog-template').content.cloneNode(true);
|
||||
const dialog = document.createElement('div');
|
||||
dialog.setAttribute('id', dialogId);
|
||||
dialog.classList.add('fixed', 'top-0', 'right-0', 'left-0', 'z-50', 'flex', 'justify-center', 'items-center', 'w-full', 'md:inset-0', 'h-[calc(100%-1rem)]', 'max-h-full');
|
||||
dialog.appendChild(templateContent);
|
||||
document.body.appendChild(dialog);
|
||||
|
||||
// Add event listeners
|
||||
dialog.querySelector('.delete-confirm-btn').addEventListener('click', async () => {
|
||||
try {
|
||||
const response = await fetch(`/storage-providers/${providerId}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-HTTP-Method-Override': 'DELETE'
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// Reload the page to show updated list
|
||||
window.location.reload();
|
||||
} else {
|
||||
const data = await response.json();
|
||||
showToast('error', `Failed to delete provider: ${data.message || response.statusText}`);
|
||||
dialog.remove();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error deleting provider:', err);
|
||||
showToast('error', `Network error: ${err.message || 'Failed to connect to server'}`);
|
||||
dialog.remove();
|
||||
}
|
||||
});
|
||||
|
||||
dialog.querySelector('.cancel-btn').addEventListener('click', () => {
|
||||
dialog.remove();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Helper function to show toast messages
|
||||
function showToast(type, message) {
|
||||
const toastContainer = document.getElementById('toast-container');
|
||||
if (!toastContainer) {
|
||||
console.error('Toast container not found');
|
||||
return;
|
||||
}
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 ${type === 'error' ? 'border-l-4 border-red-500' : 'border-l-4 border-green-500'}`;
|
||||
|
||||
let icon = '';
|
||||
if (type === 'error') {
|
||||
icon = `<svg class="w-5 h-5 text-red-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.5 13H7v-2h6.5v2Zm.5-6.5a1 1 0 0 1-1 1H8a1 1 0 0 1 0-2h5a1 1 0 0 1 1 1Z"/>
|
||||
</svg>`;
|
||||
} else {
|
||||
icon = `<svg class="w-5 h-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
toast.innerHTML = `
|
||||
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-${type === 'error' ? 'red' : 'green'}-500 bg-${type === 'error' ? 'red' : 'green'}-100 rounded-lg dark:bg-${type === 'error' ? 'red' : 'green'}-800 dark:text-${type === 'error' ? 'red' : 'green'}-200">
|
||||
${icon}
|
||||
</div>
|
||||
<div class="ml-3 text-sm font-normal">${message}</div>
|
||||
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" aria-label="Close">
|
||||
<span class="sr-only">Close</span>
|
||||
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
`;
|
||||
|
||||
toastContainer.appendChild(toast);
|
||||
|
||||
// Remove toast after 5 seconds
|
||||
setTimeout(() => {
|
||||
toast.remove();
|
||||
}, 5000);
|
||||
|
||||
// Handle close button
|
||||
const closeButton = toast.querySelector('button');
|
||||
closeButton.addEventListener('click', () => {
|
||||
toast.remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user