feat: add public share page with download support (#253)
Share links now point to /s/{token} (was /api/s/{token}) and render a
proper HTML page instead of raw JSON.
Changes:
- static/share.html: standalone public share page
- static/css/views/share-public.css: share page styles
- static/js/views/public/publicShare.js: client-side logic that fetches
share metadata via /api/s/{token}, handles password-protected shares,
and renders file download / folder info
- build.rs: include share.html in the HTML embed pipeline
- web/mod.rs: serve /s/{token} route (unauthenticated)
- share_dto.rs: generate URLs as /s/{token} instead of /api/s/{token}
- share_handler.rs: new download_shared_file() handler that validates the
share token and streams file content without requiring authentication
- routes.rs: mount GET /api/s/{token}/download (public, uses AppState)
This commit is contained in:
Diocrafts
@@ -0,0 +1,132 @@
|
||||
/* share-public.css — stand-alone styles for the public share page */
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background: var(--color-bg-hover);
|
||||
color: var(--color-text-heading);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.share-card {
|
||||
background: var(--color-bg-surface);
|
||||
border-radius: var(--radius, 12px);
|
||||
box-shadow: 0 4px 24px var(--color-shadow-sm);
|
||||
padding: 2.5rem;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.share-logo {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.share-logo h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.share-logo span {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* States */
|
||||
.share-state { }
|
||||
.hidden { display: none !important; }
|
||||
|
||||
h2 {
|
||||
font-size: 1.15rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
p.subtitle {
|
||||
color: var(--color-text-gray);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
/* Spinner */
|
||||
.spinner {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 3px solid var(--color-border);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 1rem;
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* Icons */
|
||||
.share-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* Password form */
|
||||
#password-form {
|
||||
text-align: left;
|
||||
}
|
||||
#password-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1rem;
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
background: var(--color-bg-surface);
|
||||
color: var(--color-text-heading);
|
||||
transition: border-color 0.2s;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
#password-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.error-text {
|
||||
color: var(--color-error, #e53935);
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* Primary button */
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* File view */
|
||||
#file-name {
|
||||
word-break: break-word;
|
||||
}
|
||||
#file-meta {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Folder view */
|
||||
.folder-list {
|
||||
text-align: left;
|
||||
margin-top: 1rem;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 500px) {
|
||||
.share-card { padding: 1.5rem; }
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
/**
|
||||
* publicShare.js — Client-side logic for the public share page (/s/{token}).
|
||||
*
|
||||
* Fetches share metadata from the API, handles password-protected shares,
|
||||
* and renders file download or folder info.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// ── DOM refs ───────────────────────────────────────────────────
|
||||
const $loading = document.getElementById('share-loading');
|
||||
const $password = document.getElementById('share-password');
|
||||
const $expired = document.getElementById('share-expired');
|
||||
const $file = document.getElementById('share-file');
|
||||
const $folder = document.getElementById('share-folder');
|
||||
|
||||
const $pwForm = document.getElementById('password-form');
|
||||
const $pwInput = document.getElementById('password-input');
|
||||
const $pwError = document.getElementById('password-error');
|
||||
|
||||
const $fileName = document.getElementById('file-name');
|
||||
const $fileMeta = document.getElementById('file-meta');
|
||||
const $fileDl = document.getElementById('file-download');
|
||||
const $folderName = document.getElementById('folder-name');
|
||||
const $expiredMsg = document.getElementById('expired-message');
|
||||
|
||||
// ── Extract token from URL path (/s/{token}) ──────────────────
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
const tokenIdx = pathParts.indexOf('s');
|
||||
const TOKEN = tokenIdx !== -1 ? pathParts[tokenIdx + 1] : null;
|
||||
|
||||
if (!TOKEN) {
|
||||
showState('expired');
|
||||
$expiredMsg.textContent = 'Invalid share link.';
|
||||
return;
|
||||
}
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────
|
||||
function showState(name) {
|
||||
[$loading, $password, $expired, $file, $folder].forEach(function (el) {
|
||||
el.classList.add('hidden');
|
||||
});
|
||||
var target = {
|
||||
loading: $loading,
|
||||
password: $password,
|
||||
expired: $expired,
|
||||
file: $file,
|
||||
folder: $folder,
|
||||
}[name];
|
||||
if (target) target.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function formatSize(bytes) {
|
||||
if (!bytes || bytes === 0) return '';
|
||||
var units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
var i = 0;
|
||||
var size = bytes;
|
||||
while (size >= 1024 && i < units.length - 1) { size /= 1024; i++; }
|
||||
return size.toFixed(i === 0 ? 0 : 1) + ' ' + units[i];
|
||||
}
|
||||
|
||||
// ── Render share data ─────────────────────────────────────────
|
||||
function renderShare(data) {
|
||||
if (data.item_type === 'folder') {
|
||||
$folderName.textContent = data.item_name || 'Shared Folder';
|
||||
showState('folder');
|
||||
} else {
|
||||
$fileName.textContent = data.item_name || 'Shared File';
|
||||
$fileMeta.textContent = data.item_name
|
||||
? 'Shared file'
|
||||
: '';
|
||||
$fileDl.href = '/api/s/' + TOKEN + '/download';
|
||||
showState('file');
|
||||
}
|
||||
}
|
||||
|
||||
// ── Fetch share metadata ──────────────────────────────────────
|
||||
function fetchShare() {
|
||||
fetch('/api/s/' + encodeURIComponent(TOKEN))
|
||||
.then(function (res) {
|
||||
if (res.ok) return res.json();
|
||||
if (res.status === 401) {
|
||||
return res.json().then(function (body) {
|
||||
if (body && body.requiresPassword) {
|
||||
showState('password');
|
||||
return null;
|
||||
}
|
||||
throw new Error('Unauthorized');
|
||||
});
|
||||
}
|
||||
if (res.status === 410) {
|
||||
showState('expired');
|
||||
return null;
|
||||
}
|
||||
throw new Error('HTTP ' + res.status);
|
||||
})
|
||||
.then(function (data) {
|
||||
if (data) renderShare(data);
|
||||
})
|
||||
.catch(function () {
|
||||
showState('expired');
|
||||
$expiredMsg.textContent = 'This share link is no longer available.';
|
||||
});
|
||||
}
|
||||
|
||||
// ── Password form ─────────────────────────────────────────────
|
||||
$pwForm.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
$pwError.classList.add('hidden');
|
||||
|
||||
var password = $pwInput.value;
|
||||
if (!password) return;
|
||||
|
||||
fetch('/api/s/' + encodeURIComponent(TOKEN) + '/verify', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ password: password }),
|
||||
})
|
||||
.then(function (res) {
|
||||
if (res.ok) return res.json();
|
||||
if (res.status === 401) {
|
||||
$pwError.textContent = 'Incorrect password. Please try again.';
|
||||
$pwError.classList.remove('hidden');
|
||||
return null;
|
||||
}
|
||||
throw new Error('HTTP ' + res.status);
|
||||
})
|
||||
.then(function (data) {
|
||||
if (data) renderShare(data);
|
||||
})
|
||||
.catch(function () {
|
||||
$pwError.textContent = 'An error occurred. Please try again.';
|
||||
$pwError.classList.remove('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
// ── Init ──────────────────────────────────────────────────────
|
||||
fetchShare();
|
||||
})();
|
||||
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OxiCloud — Shared</title>
|
||||
<script src="/js/core/theme-init.js"></script>
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/views/share-public.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="share-card" id="share-card">
|
||||
|
||||
<div class="share-logo">
|
||||
<h1><span>Oxi</span>Cloud</h1>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div id="share-loading" class="share-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading shared content…</p>
|
||||
</div>
|
||||
|
||||
<!-- Password prompt -->
|
||||
<div id="share-password" class="share-state hidden">
|
||||
<h2>Password Required</h2>
|
||||
<p class="subtitle">This shared content is protected. Enter the password to continue.</p>
|
||||
<form id="password-form" autocomplete="off">
|
||||
<input type="password" id="password-input" placeholder="Password" required />
|
||||
<div id="password-error" class="error-text hidden"></div>
|
||||
<button type="submit" class="btn-primary">Unlock</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Expired / error -->
|
||||
<div id="share-expired" class="share-state hidden">
|
||||
<div class="share-icon expired-icon">🚫</div>
|
||||
<h2>Link Unavailable</h2>
|
||||
<p class="subtitle" id="expired-message">This share link has expired or is no longer available.</p>
|
||||
</div>
|
||||
|
||||
<!-- File share view -->
|
||||
<div id="share-file" class="share-state hidden">
|
||||
<div class="share-icon file-icon" id="file-type-icon">📄</div>
|
||||
<h2 id="file-name"></h2>
|
||||
<p class="subtitle" id="file-meta"></p>
|
||||
<a id="file-download" class="btn-primary" download>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Folder share view -->
|
||||
<div id="share-folder" class="share-state hidden">
|
||||
<h2 id="folder-name"></h2>
|
||||
<p class="subtitle" id="folder-meta">Shared folder</p>
|
||||
<div id="folder-contents" class="folder-list">
|
||||
<p class="subtitle">Folder browsing is not yet available. Use a WebDAV client for full access.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="/js/views/public/publicShare.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user