adding ui sharing
This commit is contained in:
DioCrafts
@@ -0,0 +1,469 @@
|
||||
/**
|
||||
* OxiCloud Shared Resources Page
|
||||
* Manages the display and interaction with shared files and folders
|
||||
*/
|
||||
|
||||
// Authentication check function
|
||||
function checkAuthentication() {
|
||||
// Names of variables from auth.js
|
||||
const TOKEN_KEY = 'oxicloud_token';
|
||||
const TOKEN_EXPIRY_KEY = 'oxicloud_token_expiry';
|
||||
const USER_DATA_KEY = 'oxicloud_user';
|
||||
|
||||
const token = localStorage.getItem(TOKEN_KEY);
|
||||
const tokenExpiry = localStorage.getItem(TOKEN_EXPIRY_KEY);
|
||||
|
||||
if (!token || !tokenExpiry || new Date(tokenExpiry) < new Date()) {
|
||||
// No token or expired token
|
||||
window.location.href = '/login.html';
|
||||
return;
|
||||
}
|
||||
|
||||
// Display username in notification if available
|
||||
const userData = JSON.parse(localStorage.getItem(USER_DATA_KEY) || '{}');
|
||||
if (userData.username) {
|
||||
console.log(`Authenticated as ${userData.username}`);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize i18n
|
||||
initializeI18n();
|
||||
|
||||
// Elements
|
||||
const sharedItemsList = document.getElementById('shared-items-list');
|
||||
const emptySharedState = document.getElementById('empty-shared-state');
|
||||
const filterType = document.getElementById('filter-type');
|
||||
const sortBy = document.getElementById('sort-by');
|
||||
const sharedSearch = document.getElementById('shared-search');
|
||||
const sharedSearchBtn = document.getElementById('shared-search-btn');
|
||||
const goToFilesBtn = document.getElementById('go-to-files');
|
||||
|
||||
// Share dialog elements
|
||||
const shareDialog = document.getElementById('share-dialog');
|
||||
const shareDialogCloseBtn = shareDialog.querySelector('.close-dialog-btn');
|
||||
const shareDialogIcon = document.getElementById('share-dialog-icon');
|
||||
const shareDialogName = document.getElementById('share-dialog-name');
|
||||
const shareLinkUrl = document.getElementById('share-link-url');
|
||||
const copyLinkBtn = document.getElementById('copy-link-btn');
|
||||
const enablePassword = document.getElementById('enable-password');
|
||||
const sharePassword = document.getElementById('share-password');
|
||||
const generatePasswordBtn = document.getElementById('generate-password');
|
||||
const enableExpiration = document.getElementById('enable-expiration');
|
||||
const shareExpiration = document.getElementById('share-expiration');
|
||||
const permissionRead = document.getElementById('permission-read');
|
||||
const permissionWrite = document.getElementById('permission-write');
|
||||
const permissionReshare = document.getElementById('permission-reshare');
|
||||
const updateShareBtn = document.getElementById('update-share-btn');
|
||||
const removeShareBtn = document.getElementById('remove-share-btn');
|
||||
|
||||
// Notification dialog elements
|
||||
const notificationDialog = document.getElementById('share-notification-dialog');
|
||||
const notificationCloseBtn = notificationDialog.querySelector('.close-dialog-btn');
|
||||
const notifyDialogIcon = document.getElementById('notify-dialog-icon');
|
||||
const notifyDialogName = document.getElementById('notify-dialog-name');
|
||||
const notificationEmail = document.getElementById('notification-email');
|
||||
const notificationMessage = document.getElementById('notification-message');
|
||||
const sendNotificationBtn = document.getElementById('send-notification-btn');
|
||||
|
||||
// Notification banner
|
||||
const notificationBanner = document.getElementById('notification-banner');
|
||||
const notificationBannerMessage = document.getElementById('notification-message');
|
||||
const closeNotificationBtn = document.getElementById('close-notification');
|
||||
|
||||
// Current state
|
||||
let currentSharedItem = null;
|
||||
let allSharedItems = [];
|
||||
let filteredItems = [];
|
||||
|
||||
// Initialize the page
|
||||
loadSharedItems();
|
||||
|
||||
// Event listeners
|
||||
filterType.addEventListener('change', filterAndSortItems);
|
||||
sortBy.addEventListener('change', filterAndSortItems);
|
||||
sharedSearchBtn.addEventListener('click', filterAndSortItems);
|
||||
sharedSearch.addEventListener('keyup', (e) => {
|
||||
if (e.key === 'Enter') filterAndSortItems();
|
||||
});
|
||||
goToFilesBtn.addEventListener('click', () => window.location.href = '/');
|
||||
|
||||
// Check authentication before loading
|
||||
checkAuthentication();
|
||||
|
||||
// Share dialog event listeners
|
||||
shareDialogCloseBtn.addEventListener('click', () => closeShareDialog());
|
||||
copyLinkBtn.addEventListener('click', copyShareLink);
|
||||
enablePassword.addEventListener('change', () => {
|
||||
sharePassword.disabled = !enablePassword.checked;
|
||||
if (enablePassword.checked) sharePassword.focus();
|
||||
});
|
||||
generatePasswordBtn.addEventListener('click', generatePassword);
|
||||
enableExpiration.addEventListener('change', () => {
|
||||
shareExpiration.disabled = !enableExpiration.checked;
|
||||
if (enableExpiration.checked) shareExpiration.focus();
|
||||
});
|
||||
updateShareBtn.addEventListener('click', updateSharedItem);
|
||||
removeShareBtn.addEventListener('click', removeSharedItem);
|
||||
|
||||
// Notification dialog event listeners
|
||||
notificationCloseBtn.addEventListener('click', () => closeNotificationDialog());
|
||||
sendNotificationBtn.addEventListener('click', sendNotification);
|
||||
|
||||
// Notification banner event listeners
|
||||
closeNotificationBtn.addEventListener('click', () => {
|
||||
notificationBanner.classList.remove('active');
|
||||
});
|
||||
|
||||
/**
|
||||
* Loads all shared items and displays them
|
||||
*/
|
||||
function loadSharedItems() {
|
||||
// Get shared links from storage
|
||||
allSharedItems = getSharedLinks();
|
||||
|
||||
// Display items
|
||||
filterAndSortItems();
|
||||
}
|
||||
|
||||
/**
|
||||
* Filters and sorts the shared items based on current filters
|
||||
*/
|
||||
function filterAndSortItems() {
|
||||
const type = filterType.value;
|
||||
const sort = sortBy.value;
|
||||
const searchTerm = sharedSearch.value.toLowerCase();
|
||||
|
||||
// Filter items
|
||||
filteredItems = allSharedItems.filter(item => {
|
||||
// Filter by type
|
||||
if (type !== 'all' && item.type !== type) return false;
|
||||
|
||||
// Filter by search term
|
||||
const nameMatch = item.name.toLowerCase().includes(searchTerm);
|
||||
return nameMatch;
|
||||
});
|
||||
|
||||
// Sort items
|
||||
filteredItems.sort((a, b) => {
|
||||
if (sort === 'name') {
|
||||
return a.name.localeCompare(b.name);
|
||||
} else if (sort === 'date') {
|
||||
return new Date(b.dateShared) - new Date(a.dateShared);
|
||||
} else if (sort === 'expiration') {
|
||||
// Handle null expiration dates (items without expiration come last)
|
||||
if (!a.expiration && !b.expiration) return 0;
|
||||
if (!a.expiration) return 1;
|
||||
if (!b.expiration) return -1;
|
||||
return new Date(a.expiration) - new Date(b.expiration);
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Display filtered and sorted items
|
||||
displaySharedItems();
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays the filtered and sorted shared items
|
||||
*/
|
||||
function displaySharedItems() {
|
||||
// Clear the list
|
||||
sharedItemsList.innerHTML = '';
|
||||
|
||||
// Show empty state if no items
|
||||
if (filteredItems.length === 0) {
|
||||
emptySharedState.style.display = 'flex';
|
||||
document.querySelector('.shared-list-container').style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
// Hide empty state and show table
|
||||
emptySharedState.style.display = 'none';
|
||||
document.querySelector('.shared-list-container').style.display = 'block';
|
||||
|
||||
// Add items to the list
|
||||
filteredItems.forEach(item => {
|
||||
const row = document.createElement('tr');
|
||||
|
||||
// Icon and name
|
||||
const nameCell = document.createElement('td');
|
||||
nameCell.className = 'shared-item-name';
|
||||
const icon = document.createElement('span');
|
||||
icon.className = 'item-icon';
|
||||
icon.textContent = item.type === 'file' ? '📄' : '📁';
|
||||
const name = document.createElement('span');
|
||||
name.textContent = item.name;
|
||||
nameCell.appendChild(icon);
|
||||
nameCell.appendChild(name);
|
||||
|
||||
// Type
|
||||
const typeCell = document.createElement('td');
|
||||
typeCell.textContent = item.type === 'file' ? translate('shared_typeFile', 'File') : translate('shared_typeFolder', 'Folder');
|
||||
|
||||
// Date shared
|
||||
const dateCell = document.createElement('td');
|
||||
dateCell.textContent = formatDate(item.dateShared);
|
||||
|
||||
// Expiration
|
||||
const expirationCell = document.createElement('td');
|
||||
expirationCell.textContent = item.expiration ? formatDate(item.expiration) : translate('shared_noExpiration', 'No expiration');
|
||||
|
||||
// Permissions
|
||||
const permissionsCell = document.createElement('td');
|
||||
const permissions = [];
|
||||
if (item.permissions.read) permissions.push(translate('share_permissionRead', 'Read'));
|
||||
if (item.permissions.write) permissions.push(translate('share_permissionWrite', 'Write'));
|
||||
if (item.permissions.reshare) permissions.push(translate('share_permissionReshare', 'Reshare'));
|
||||
permissionsCell.textContent = permissions.join(', ');
|
||||
|
||||
// Password
|
||||
const passwordCell = document.createElement('td');
|
||||
passwordCell.textContent = item.password ? translate('shared_hasPassword', 'Yes') : translate('shared_noPassword', 'No');
|
||||
|
||||
// Actions
|
||||
const actionsCell = document.createElement('td');
|
||||
actionsCell.className = 'shared-item-actions';
|
||||
|
||||
// Edit button
|
||||
const editBtn = document.createElement('button');
|
||||
editBtn.className = 'action-btn edit-btn';
|
||||
editBtn.innerHTML = '<span class="action-icon">✏️</span>';
|
||||
editBtn.title = translate('shared_editShare', 'Edit Share');
|
||||
editBtn.addEventListener('click', () => openShareDialog(item));
|
||||
|
||||
// Notify button
|
||||
const notifyBtn = document.createElement('button');
|
||||
notifyBtn.className = 'action-btn notify-btn';
|
||||
notifyBtn.innerHTML = '<span class="action-icon">📧</span>';
|
||||
notifyBtn.title = translate('shared_notifyShare', 'Notify Someone');
|
||||
notifyBtn.addEventListener('click', () => openNotificationDialog(item));
|
||||
|
||||
// Copy link button
|
||||
const copyBtn = document.createElement('button');
|
||||
copyBtn.className = 'action-btn copy-btn';
|
||||
copyBtn.innerHTML = '<span class="action-icon">📋</span>';
|
||||
copyBtn.title = translate('shared_copyLink', 'Copy Link');
|
||||
copyBtn.addEventListener('click', () => {
|
||||
navigator.clipboard.writeText(item.url)
|
||||
.then(() => showNotification(translate('shared_linkCopied', 'Link copied to clipboard!')))
|
||||
.catch(err => showNotification(translate('shared_linkCopyFailed', 'Failed to copy link'), 'error'));
|
||||
});
|
||||
|
||||
// Remove button
|
||||
const removeBtn = document.createElement('button');
|
||||
removeBtn.className = 'action-btn remove-btn';
|
||||
removeBtn.innerHTML = '<span class="action-icon">🗑️</span>';
|
||||
removeBtn.title = translate('shared_removeShare', 'Remove Share');
|
||||
removeBtn.addEventListener('click', () => {
|
||||
currentSharedItem = item;
|
||||
removeSharedItem();
|
||||
});
|
||||
|
||||
actionsCell.appendChild(editBtn);
|
||||
actionsCell.appendChild(notifyBtn);
|
||||
actionsCell.appendChild(copyBtn);
|
||||
actionsCell.appendChild(removeBtn);
|
||||
|
||||
// Add cells to row
|
||||
row.appendChild(nameCell);
|
||||
row.appendChild(typeCell);
|
||||
row.appendChild(dateCell);
|
||||
row.appendChild(expirationCell);
|
||||
row.appendChild(permissionsCell);
|
||||
row.appendChild(passwordCell);
|
||||
row.appendChild(actionsCell);
|
||||
|
||||
// Add row to table
|
||||
sharedItemsList.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens the share dialog for the given item
|
||||
*/
|
||||
function openShareDialog(item) {
|
||||
currentSharedItem = item;
|
||||
|
||||
// Set dialog content
|
||||
shareDialogIcon.textContent = item.type === 'file' ? '📄' : '📁';
|
||||
shareDialogName.textContent = item.name;
|
||||
shareLinkUrl.value = item.url;
|
||||
|
||||
// Set permissions
|
||||
permissionRead.checked = item.permissions.read;
|
||||
permissionWrite.checked = item.permissions.write;
|
||||
permissionReshare.checked = item.permissions.reshare;
|
||||
|
||||
// Set password
|
||||
enablePassword.checked = !!item.password;
|
||||
sharePassword.disabled = !enablePassword.checked;
|
||||
sharePassword.value = item.password || '';
|
||||
|
||||
// Set expiration
|
||||
enableExpiration.checked = !!item.expiration;
|
||||
shareExpiration.disabled = !enableExpiration.checked;
|
||||
shareExpiration.value = item.expiration ? new Date(item.expiration).toISOString().split('T')[0] : '';
|
||||
|
||||
// Show dialog
|
||||
shareDialog.classList.add('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes the share dialog
|
||||
*/
|
||||
function closeShareDialog() {
|
||||
shareDialog.classList.remove('active');
|
||||
currentSharedItem = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens the notification dialog for the given item
|
||||
*/
|
||||
function openNotificationDialog(item) {
|
||||
currentSharedItem = item;
|
||||
|
||||
// Set dialog content
|
||||
notifyDialogIcon.textContent = item.type === 'file' ? '📄' : '📁';
|
||||
notifyDialogName.textContent = item.name;
|
||||
notificationEmail.value = '';
|
||||
notificationMessage.value = '';
|
||||
|
||||
// Show dialog
|
||||
notificationDialog.classList.add('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes the notification dialog
|
||||
*/
|
||||
function closeNotificationDialog() {
|
||||
notificationDialog.classList.remove('active');
|
||||
currentSharedItem = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Copies the current share link to clipboard
|
||||
*/
|
||||
function copyShareLink() {
|
||||
navigator.clipboard.writeText(shareLinkUrl.value)
|
||||
.then(() => showNotification(translate('shared_linkCopied', 'Link copied to clipboard!')))
|
||||
.catch(err => showNotification(translate('shared_linkCopyFailed', 'Failed to copy link'), 'error'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a random password for the share
|
||||
*/
|
||||
function generatePassword() {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';
|
||||
let password = '';
|
||||
for (let i = 0; i < 12; i++) {
|
||||
password += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
sharePassword.value = password;
|
||||
enablePassword.checked = true;
|
||||
sharePassword.disabled = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the current shared item with new settings
|
||||
*/
|
||||
function updateSharedItem() {
|
||||
if (!currentSharedItem) return;
|
||||
|
||||
// Get updated settings
|
||||
const permissions = {
|
||||
read: permissionRead.checked,
|
||||
write: permissionWrite.checked,
|
||||
reshare: permissionReshare.checked
|
||||
};
|
||||
|
||||
const password = enablePassword.checked ? sharePassword.value : null;
|
||||
const expiration = enableExpiration.checked ? shareExpiration.value : null;
|
||||
|
||||
// Update the shared link
|
||||
updateSharedLink(currentSharedItem.id, {
|
||||
permissions,
|
||||
password,
|
||||
expiration: expiration ? new Date(expiration).toISOString() : null
|
||||
});
|
||||
|
||||
// Reload items and close dialog
|
||||
loadSharedItems();
|
||||
closeShareDialog();
|
||||
|
||||
// Show notification
|
||||
showNotification(translate('shared_itemUpdated', 'Share settings updated successfully'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the current shared item
|
||||
*/
|
||||
function removeSharedItem() {
|
||||
if (!currentSharedItem) return;
|
||||
|
||||
// Remove the shared link
|
||||
removeSharedLink(currentSharedItem.id);
|
||||
|
||||
// Reload items and close dialog if open
|
||||
loadSharedItems();
|
||||
closeShareDialog();
|
||||
|
||||
// Show notification
|
||||
showNotification(translate('shared_itemRemoved', 'Share removed successfully'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Sends a notification email for the current shared item
|
||||
*/
|
||||
function sendNotification() {
|
||||
if (!currentSharedItem) return;
|
||||
|
||||
const email = notificationEmail.value.trim();
|
||||
const message = notificationMessage.value.trim();
|
||||
|
||||
// Validate email
|
||||
if (!email || !validateEmail(email)) {
|
||||
showNotification(translate('shared_invalidEmail', 'Please enter a valid email address'), 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Send notification
|
||||
sendShareNotification(currentSharedItem.id, email, message)
|
||||
.then(() => {
|
||||
closeNotificationDialog();
|
||||
showNotification(translate('shared_notificationSent', 'Notification sent successfully'));
|
||||
})
|
||||
.catch(error => {
|
||||
showNotification(translate('shared_notificationFailed', 'Failed to send notification'), 'error');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows a notification banner with the given message
|
||||
*/
|
||||
function showNotification(message, type = 'success') {
|
||||
notificationBannerMessage.textContent = message;
|
||||
notificationBanner.className = 'notification-banner active ' + type;
|
||||
|
||||
// Auto-hide after 5 seconds
|
||||
setTimeout(() => {
|
||||
notificationBanner.classList.remove('active');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates an email address
|
||||
*/
|
||||
function validateEmail(email) {
|
||||
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return re.test(email);
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats a date string to a user-friendly format
|
||||
*/
|
||||
function formatDate(dateString) {
|
||||
const options = { year: 'numeric', month: 'short', day: 'numeric' };
|
||||
return new Date(dateString).toLocaleDateString(undefined, options);
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user