2025-03-28 08:09:18 +01:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>OxiCloud - Shared Resources</title>
|
|
|
|
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
|
|
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
2025-03-31 15:01:34 +02:00
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
2025-03-28 08:09:18 +01:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
<!-- Main layout similar to index.html -->
|
|
|
|
|
|
<div class="sidebar">
|
2026-02-13 22:37:31 +01:00
|
|
|
|
<a href="/" class="logo-container" style="text-decoration:none;color:inherit;">
|
2025-03-31 15:01:34 +02:00
|
|
|
|
<div class="logo">
|
|
|
|
|
|
<svg viewBox="0 0 500 500">
|
|
|
|
|
|
<path d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z" fill="#fff"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="app-name">OxiCloud</div>
|
2026-02-13 22:37:31 +01:00
|
|
|
|
</a>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
|
|
|
|
|
|
<div class="nav-menu">
|
2026-02-08 22:44:42 +01:00
|
|
|
|
<a href="/" class="nav-item">
|
2025-03-31 15:01:34 +02:00
|
|
|
|
<i class="fas fa-folder"></i>
|
|
|
|
|
|
<span data-i18n="nav.files">Files</span>
|
2026-02-08 22:44:42 +01:00
|
|
|
|
</a>
|
2026-02-13 22:44:20 +01:00
|
|
|
|
<a href="/shared" class="nav-item active">
|
2025-03-31 15:01:34 +02:00
|
|
|
|
<i class="fas fa-share-alt"></i>
|
|
|
|
|
|
<span data-i18n="nav.shared">Shared</span>
|
2026-02-08 22:44:42 +01:00
|
|
|
|
</a>
|
|
|
|
|
|
<a href="/#recent" class="nav-item">
|
2025-03-31 15:01:34 +02:00
|
|
|
|
<i class="fas fa-clock"></i>
|
|
|
|
|
|
<span data-i18n="nav.recent">Recent</span>
|
2026-02-08 22:44:42 +01:00
|
|
|
|
</a>
|
|
|
|
|
|
<a href="/#favorites" class="nav-item">
|
2025-03-31 15:01:34 +02:00
|
|
|
|
<i class="fas fa-star"></i>
|
|
|
|
|
|
<span data-i18n="nav.favorites">Favorites</span>
|
2026-02-08 22:44:42 +01:00
|
|
|
|
</a>
|
|
|
|
|
|
<a href="/#trash" class="nav-item">
|
2025-03-31 15:01:34 +02:00
|
|
|
|
<i class="fas fa-trash"></i>
|
|
|
|
|
|
<span data-i18n="nav.trash">Trash</span>
|
2026-02-08 22:44:42 +01:00
|
|
|
|
</a>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="storage-container">
|
2026-02-08 22:44:42 +01:00
|
|
|
|
<div class="storage-title"><i class="fas fa-database" style="margin-right:6px;color:#ff5e3a"></i><span data-i18n="storage.title">Storage</span></div>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
<div class="storage-bar">
|
|
|
|
|
|
<div class="storage-fill"></div>
|
|
|
|
|
|
</div>
|
2026-02-03 17:59:04 +01:00
|
|
|
|
<div class="storage-info" data-i18n="storage.calculating">Calculating...</div>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Main Content -->
|
|
|
|
|
|
<div class="main-content">
|
|
|
|
|
|
<!-- Top Bar -->
|
|
|
|
|
|
<div class="top-bar">
|
|
|
|
|
|
<div class="search-container">
|
|
|
|
|
|
<i class="fas fa-search search-icon"></i>
|
|
|
|
|
|
<input type="text" id="shared-search" data-i18n-placeholder="actions.search" placeholder="Search shared items...">
|
2026-02-03 17:59:04 +01:00
|
|
|
|
<button id="shared-search-btn" class="search-button" data-i18n-title="actions.search_btn" title="Search">
|
|
|
|
|
|
<i class="fas fa-search"></i>
|
|
|
|
|
|
</button>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="user-controls">
|
2026-02-03 17:59:04 +01:00
|
|
|
|
<div id="language-selector"></div>
|
2026-02-08 22:44:42 +01:00
|
|
|
|
<div class="user-menu-wrapper">
|
|
|
|
|
|
<div class="user-avatar" id="user-avatar">AD</div>
|
|
|
|
|
|
<div class="user-menu" id="user-menu">
|
|
|
|
|
|
<div class="user-menu-header">
|
|
|
|
|
|
<span class="user-name" id="user-menu-name">Admin</span>
|
|
|
|
|
|
<span class="user-email" id="user-menu-email">admin@oxicloud.local</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="user-menu-divider"></div>
|
|
|
|
|
|
<div class="user-menu-item" id="menu-logout">
|
|
|
|
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
|
|
|
|
<span data-i18n="actions.logout">Log out</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
</div>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-03-31 15:01:34 +02:00
|
|
|
|
<div class="content-area">
|
|
|
|
|
|
<h1 class="page-title" data-i18n="shared.pageTitle">Shared Resources</h1>
|
|
|
|
|
|
<p class="page-description" data-i18n="shared.pageDescription">Manage your shared files and folders</p>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
|
2025-03-31 15:01:34 +02:00
|
|
|
|
<div class="shared-filters">
|
|
|
|
|
|
<div class="filter-group">
|
|
|
|
|
|
<label for="filter-type" data-i18n="shared.filterType">Type:</label>
|
|
|
|
|
|
<select id="filter-type">
|
|
|
|
|
|
<option value="all" data-i18n="shared.filterAll">All</option>
|
|
|
|
|
|
<option value="file" data-i18n="shared.filterFiles">Files</option>
|
|
|
|
|
|
<option value="folder" data-i18n="shared.filterFolders">Folders</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="filter-group">
|
|
|
|
|
|
<label for="sort-by" data-i18n="shared.sortBy">Sort by:</label>
|
|
|
|
|
|
<select id="sort-by">
|
|
|
|
|
|
<option value="name" data-i18n="shared.sortByName">Name</option>
|
|
|
|
|
|
<option value="date" data-i18n="shared.sortByDate">Date shared</option>
|
|
|
|
|
|
<option value="expiration" data-i18n="shared.sortByExpiration">Expiration</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="search-box">
|
|
|
|
|
|
<input type="text" id="shared-search-filter" placeholder="Search shared items...">
|
|
|
|
|
|
<button id="shared-search-filter-btn" class="btn btn-primary" data-i18n="shared.search">Search</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
|
2025-03-31 15:01:34 +02:00
|
|
|
|
<div class="shared-list-container">
|
|
|
|
|
|
<table class="shared-list">
|
|
|
|
|
|
<thead>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<th data-i18n="shared.colName">Name</th>
|
|
|
|
|
|
<th data-i18n="shared.colType">Type</th>
|
|
|
|
|
|
<th data-i18n="shared.colDateShared">Date Shared</th>
|
|
|
|
|
|
<th data-i18n="shared.colExpiration">Expiration</th>
|
|
|
|
|
|
<th data-i18n="shared.colPermissions">Permissions</th>
|
|
|
|
|
|
<th data-i18n="shared.colPassword">Password</th>
|
|
|
|
|
|
<th data-i18n="shared.colActions">Actions</th>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</thead>
|
|
|
|
|
|
<tbody id="shared-items-list">
|
|
|
|
|
|
<!-- Shared items will be loaded here dynamically -->
|
|
|
|
|
|
</tbody>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="empty-shared-state" class="empty-state">
|
|
|
|
|
|
<div class="empty-state-icon">📂</div>
|
|
|
|
|
|
<h3 data-i18n="shared.emptyStateTitle">No shared resources yet</h3>
|
|
|
|
|
|
<p data-i18n="shared.emptyStateDesc">When you share files or folders, they will appear here</p>
|
|
|
|
|
|
<a href="/" class="button primary" data-i18n="shared.goToFiles">Go to Files</a>
|
|
|
|
|
|
</div>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
</div>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
</div>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
|
|
|
|
|
|
<!-- Share Link Dialog (for editing existing shares) -->
|
|
|
|
|
|
<div id="share-dialog" class="dialog">
|
|
|
|
|
|
<div class="dialog-content">
|
|
|
|
|
|
<div class="dialog-header">
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<h3 data-i18n="share.dialogTitle">Share Link</h3>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<button class="close-dialog-btn">×</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="dialog-body">
|
|
|
|
|
|
<div class="share-item-info">
|
|
|
|
|
|
<span id="share-dialog-icon" class="item-icon">📄</span>
|
|
|
|
|
|
<span id="share-dialog-name" class="item-name">filename.ext</span>
|
|
|
|
|
|
</div>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<div class="share-link-section">
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<label for="share-link-url" data-i18n="share.linkLabel">Share Link:</label>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<div class="share-link-container">
|
|
|
|
|
|
<input type="text" id="share-link-url" readonly>
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<button id="copy-link-btn" data-i18n="share.copyLink">Copy</button>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<div class="share-settings">
|
|
|
|
|
|
<div class="share-setting">
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<label data-i18n="share.permissions">Permissions:</label>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<div class="permissions-options">
|
|
|
|
|
|
<label>
|
|
|
|
|
|
<input type="checkbox" id="permission-read" checked>
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<span data-i18n="share.permissionRead">Read</span>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
</label>
|
|
|
|
|
|
<label>
|
|
|
|
|
|
<input type="checkbox" id="permission-write">
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<span data-i18n="share.permissionWrite">Write</span>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
</label>
|
|
|
|
|
|
<label>
|
|
|
|
|
|
<input type="checkbox" id="permission-reshare">
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<span data-i18n="share.permissionReshare">Reshare</span>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
</label>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<div class="share-setting">
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<label for="share-password" data-i18n="share.password">Password Protection:</label>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<div class="password-setting">
|
|
|
|
|
|
<input type="checkbox" id="enable-password">
|
|
|
|
|
|
<input type="password" id="share-password" placeholder="Enter password" disabled>
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<button id="generate-password" data-i18n="share.generatePassword">Generate</button>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<div class="share-setting">
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<label for="share-expiration" data-i18n="share.expiration">Expiration Date:</label>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<div class="expiration-setting">
|
|
|
|
|
|
<input type="checkbox" id="enable-expiration">
|
|
|
|
|
|
<input type="date" id="share-expiration" disabled>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<div class="share-actions">
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<button id="update-share-btn" class="button primary" data-i18n="share.update">Update Share</button>
|
|
|
|
|
|
<button id="remove-share-btn" class="button danger" data-i18n="share.remove">Remove Share</button>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Email Notification Dialog -->
|
|
|
|
|
|
<div id="share-notification-dialog" class="dialog">
|
|
|
|
|
|
<div class="dialog-content">
|
|
|
|
|
|
<div class="dialog-header">
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<h3 data-i18n="share.notifyTitle">Send Notification</h3>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<button class="close-dialog-btn">×</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="dialog-body">
|
|
|
|
|
|
<div class="share-item-info">
|
|
|
|
|
|
<span id="notify-dialog-icon" class="item-icon">📄</span>
|
|
|
|
|
|
<span id="notify-dialog-name" class="item-name">filename.ext</span>
|
|
|
|
|
|
</div>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<div class="notification-form">
|
|
|
|
|
|
<div class="form-group">
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<label for="notification-email" data-i18n="share.notifyEmailLabel">Email Address:</label>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<input type="email" id="notification-email" placeholder="Enter recipient email">
|
|
|
|
|
|
</div>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<div class="form-group">
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<label for="notification-message" data-i18n="share.notifyMessageLabel">Message (optional):</label>
|
2026-02-08 22:44:42 +01:00
|
|
|
|
<textarea id="notification-msg-text" placeholder="Add a personal message" rows="3"></textarea>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<div class="notification-actions">
|
2025-03-28 09:03:04 +01:00
|
|
|
|
<button id="send-notification-btn" class="button primary" data-i18n="share.notifySend">Send Notification</button>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Notification Banner -->
|
|
|
|
|
|
<div id="notification-banner" class="notification-banner">
|
|
|
|
|
|
<span id="notification-message"></span>
|
|
|
|
|
|
<button id="close-notification" class="close-notification-btn">×</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="/js/i18n.js"></script>
|
|
|
|
|
|
<script src="/js/languageSelector.js"></script>
|
|
|
|
|
|
<script src="/js/fileSharing.js"></script>
|
2026-02-08 22:44:42 +01:00
|
|
|
|
<script>
|
|
|
|
|
|
// Auth check — redirect to login if no token
|
|
|
|
|
|
(function() {
|
|
|
|
|
|
const token = localStorage.getItem('oxicloud_token');
|
|
|
|
|
|
if (!token) {
|
2026-02-13 22:44:20 +01:00
|
|
|
|
window.location.href = '/login';
|
2026-02-08 22:44:42 +01:00
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
// Set user avatar initials
|
|
|
|
|
|
const userData = JSON.parse(localStorage.getItem('oxicloud_user') || '{}');
|
|
|
|
|
|
const avatarEl = document.getElementById('user-avatar');
|
|
|
|
|
|
const nameEl = document.getElementById('user-menu-name');
|
|
|
|
|
|
const emailEl = document.getElementById('user-menu-email');
|
|
|
|
|
|
if (userData.username && avatarEl) {
|
|
|
|
|
|
const initials = userData.username.substring(0, 2).toUpperCase();
|
|
|
|
|
|
avatarEl.textContent = initials;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (nameEl) nameEl.textContent = userData.username || 'User';
|
|
|
|
|
|
if (emailEl) emailEl.textContent = userData.email || '';
|
|
|
|
|
|
|
|
|
|
|
|
// User menu toggle
|
|
|
|
|
|
if (avatarEl) {
|
|
|
|
|
|
avatarEl.addEventListener('click', (e) => {
|
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
document.getElementById('user-menu').classList.toggle('active');
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
document.addEventListener('click', () => {
|
|
|
|
|
|
const menu = document.getElementById('user-menu');
|
|
|
|
|
|
if (menu) menu.classList.remove('active');
|
|
|
|
|
|
});
|
|
|
|
|
|
const logoutBtn = document.getElementById('menu-logout');
|
|
|
|
|
|
if (logoutBtn) {
|
|
|
|
|
|
logoutBtn.addEventListener('click', () => {
|
|
|
|
|
|
localStorage.removeItem('oxicloud_token');
|
|
|
|
|
|
localStorage.removeItem('oxicloud_user');
|
2026-02-13 22:44:20 +01:00
|
|
|
|
window.location.href = '/login';
|
2026-02-08 22:44:42 +01:00
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
})();
|
|
|
|
|
|
</script>
|
2025-03-28 08:09:18 +01:00
|
|
|
|
<script src="/js/shared.js"></script>
|
|
|
|
|
|
</body>
|
2025-03-31 15:01:34 +02:00
|
|
|
|
</html>
|
