pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: pixeldrain:f3522f370fc85dc2346b221180a4c96e714ed631
Branches Tags
pixeldrain:master
...
compare: pixeldrain:master
Branches Tags
pixeldrain:master

6 Commits
f3522f370f ... master

Author SHA1 Message Date
Wim Brand
99ab34c76d Fix error popup when canceling a sharing action 
Fix navigator not reloading when saving an edited file
Remove dead links
Remove references to Patreon
 2026-08-05 22:18:57 +02:00
Wim Brand
4c57a363b2 Fix: 
* Breadcrumbs too wide in deeply nested directories
* Sharedialog copies link and calls navigator.share at the same time
* Link copy feedback is not clear
* Show embed code when public read
* Hide hidden files from audio playlist
 2026-08-05 21:54:49 +02:00
Wim Brand
00b40ab900 Add filesystem indexing metrics 2026-08-05 21:52:28 +02:00
Wim Brand
b02e88eb1b Add button to remove peers 2026-08-04 14:38:36 +02:00
Wim Brand
196845d739 Remove unused Go templates 2026-08-04 13:37:59 +02:00
Wim Brand
a12424ef66 Add configurable columns to directory view 2026-08-04 13:37:44 +02:00
26 changed files with 330 additions and 377 deletions
Expand all files Collapse all files

50
res/template/email_confirm.html
View File

@@ -1,50 +0,0 @@
{{define "email_confirm"}}<!DOCTYPE html>
<html lang="en">
<head>
{{template "meta_tags" "E-mail verification"}}
</head>
<body>
{{template "page_top" .}}
{{if eq .Other "success"}}
<header>
<h1>Success!</h1>
</header>
<div id="page_content" class="page_content">
<section>
<p>
Your account's e-mail address has been updated.
</p>
</section>
</div>
{{else if eq .Other "not_found"}}
<header>
<h1>E-mail change failed</h1>
</header>
<div id="page_content" class="page_content">
<section>
<p>
This e-mail change request does not exist or has expired.
Please try again if you still want to change your e-mail
address.
</p>
</section>
</div>
{{else}}
<header>
<h1>Error</h1>
</header>
<div id="page_content" class="page_content">
<section>
<p>
Something went wrong while processing this request. Please
try again later.
</p>
</section>
</div>
{{end}}
{{template "page_bottom" .}}
</body>
</html>
{{end}}

90
res/template/fragments/page_wrap.html
View File

@@ -1,90 +0,0 @@
{{define "menu"}}
<button id="button_toggle_navigation" class="button_toggle_navigation icon" onclick="toggleMenu();">
menu
</button>
<nav id="page_navigation" class="page_navigation">
<a href="/home#">Home</a>
{{if eq .User.Subscription.ID ""}}
<a href="/home#pro">Get Premium</a>
{{end}}
<hr />
{{if .Authenticated}}
<a href="/user">{{.User.Username}}</a>
{{if .User.Subscription.FilesystemAccess}}
<a href="/d/me">Filesystem</a>
{{end}}
{{if .User.IsAdmin}}
<a href="/admin">Admin Panel</a>
{{end}}
<a href="/logout">Log out</a>
{{else}}
<a href="/login">Login</a>
<a href="/register">Register</a>
{{end}}
<hr />
<a href="/about">Questions & Answers</a>
<a href="/apps">Apps</a>
<a href="/appearance">Theme</a>
<a href="/speedtest">Speedtest</a>
<a href="/api">API</a>
<a href="/filesystem">Filesystem Guide</a>
<a href="/acknowledgements">Acknowledgements</a>
<a href="/abuse">DMCA and abuse</a>
<a href="https://stats.uptimerobot.com/p9v2ktzyjm" target="_blank">Server Status</a>
</nav>
<script>
function toggleMenu() {
var nav = document.getElementById("page_navigation");
var body = document.getElementById("page_body");
if (nav.offsetLeft === 0) {
// Menu is visible, hide it
nav.style.left = -nav.offsetWidth + "px";
body.style.marginLeft = "0";
} else {
// Menu is hidden, show it
nav.style.left = "0";
body.style.marginLeft = nav.offsetWidth + "px";
}
}
function resetMenu() {
document.getElementById("page_navigation").style.left = "";
document.getElementById("page_body").style.marginLeft = "";
}
</script>
{{end}}
{{define "footer"}}
<footer>
<div class="footer_content">
<div style="display: inline-block; margin: 0 8px;">
Nova is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
</div>
<br/>
<div style="display: inline-block; margin: 0 8px;">
<a href="https://github.com/Fornaxian" target="_blank">{{template `github.svg` .}} GitHub</a> |
<a href="https://mastodon.social/web/@fornax" target="_blank">{{template `mastodon.svg` .}} Mastodon</a>
</div>
<br/>
<div style="display: inline-block; margin: 0 8px;">
{{$speed := .PixelAPI.GetMiscClusterSpeed}}
Server speed: {{ formatDataBits $speed.ServerTX }}ps |
Cache cluster: {{ formatDataBits $speed.CacheTX }}ps |
Storage cluster: {{ formatDataBits $speed.StorageTX }}ps
</div>
<br/>
<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
page rendered by {{.Hostname}}
</span>
</div>
</footer>
{{end}}
{{define "page_top"}}
{{template "menu" .}}
<div id="page_body" class="page_body">
{{end}}
{{define "page_bottom"}}
{{template "footer" .}}
</div>
{{end}}

40
res/template/user_logout.html
View File

@@ -1,40 +0,0 @@
{{define "logout"}}<!DOCTYPE html>
<html lang="en">
<head>
{{template "meta_tags" "Logging out..."}}
</head>
<body>
{{template "page_top" .}}
<header>
<h1>Logging out of your Nova account</h1>
</header>
<div id="page_content" class="page_content">
<br/>
<form method="POST" action="/logout">
<button role="submit" class="button_highlight">
<i class="icon">logout</i>
Log out of Nova on this computer
</button>
</form>
<br/>
<section>
<h2>Why do I need to confirm my logout?</h2>
<p>
We need you to confirm your action so we can be sure that you
really requested a logout. If we didn't do this, anyone (or any
website) would be able to send you to this page and you would
automatically get logged out of Nova, which would be very
annoying.
</p>
<p>
To prevent this from happening we're verifying that you actually
want to log out by making you click this button. Because this
logout button triggers a different request type than normal
page visit we can confirm that you really want to log out.
</p>
</section>
</div>
{{template "page_bottom" .}}
</body>
</html>
{{end}}

19
svelte/src/admin_panel/HostMetrics.svelte
View File

@@ -26,7 +26,26 @@ const groups: {
{metric: "api_error_400", data_type: "number"}, {metric: "api_error_400", data_type: "number"},
{metric: "api_error_500", data_type: "number"}, {metric: "api_error_500", data_type: "number"},
{metric: "api_panic", data_type: "number"}, {metric: "api_panic", data_type: "number"},
{metric: "api_user_register", data_type: "number"},
{metric: "api_user_login", data_type: "number"},
{metric: "api_user_delete", data_type: "number"},
], ],
}, {
title: "Filesystem API", expanded: false,
graphs: [
{metric: "filesystem_write", data_type: "number"},
{metric: "filesystem_write_size", data_type: "bytes"},
{metric: "filesystem_read", data_type: "number"},
{metric: "filesystem_read_size", data_type: "bytes"},
{metric: "filesystem_index_update", data_type: "number"},
{metric: "filesystem_index_update_duration", data_type: "duration"},
{
metric: "filesystem_index_update_duration_avg",
agg_base: "filesystem_index_update_duration",
agg_divisor: "filesystem_index_update",
data_type: "duration",
},
]
}, { }, {
title: "Task scheduler", expanded: false, title: "Task scheduler", expanded: false,
graphs: [ graphs: [

34
svelte/src/admin_panel/PeerTable.svelte
View File

@@ -2,6 +2,8 @@
import { flip } from "svelte/animate"; import { flip } from "svelte/animate";
import { formatDataVolume } from "util/Formatting"; import { formatDataVolume } from "util/Formatting";
import SortButton from "layout/SortButton.svelte"; import SortButton from "layout/SortButton.svelte";
import { loading_run } from "lib/Loading";
import { admin_decommission_node } from "lib/AdminAPI";
let { let {
peers = $bindable([]) peers = $bindable([])
@@ -33,6 +35,11 @@ let {
}[] }[]
} = $props(); } = $props();
// If not all peers are online we show the decommission button
let all_reachable = $derived(peers.reduce((acc, val) => {
return val.reachable ? acc : false
}, true))
$effect(() => { $effect(() => {
for (let peer of peers) { for (let peer of peers) {
peer.avg_network_total = peer.avg_network_tx + peer.avg_network_rx peer.avg_network_total = peer.avg_network_tx + peer.avg_network_rx
@@ -74,6 +81,16 @@ let sort = (field: string) => {
}) })
peers = peers peers = peers
} }
const decommission = (id: string) => {
loading_run(async () => {
try {
await admin_decommission_node(id)
} catch (err) {
alert(JSON.stringify(err))
}
})
}
</script> </script>
<div class="table_scroll"> <div class="table_scroll">
@@ -92,16 +109,17 @@ let sort = (field: string) => {
<td><SortButton field="cache_threshold" active_field={sort_field} asc={asc} sort_func={sort}>CThresh</SortButton></td> <td><SortButton field="cache_threshold" active_field={sort_field} asc={asc} sort_func={sort}>CThresh</SortButton></td>
<td><SortButton field="free_space" active_field={sort_field} asc={asc} sort_func={sort}>Free</SortButton></td> <td><SortButton field="free_space" active_field={sort_field} asc={asc} sort_func={sort}>Free</SortButton></td>
<td><SortButton field="min_free_space" active_field={sort_field} asc={asc} sort_func={sort}>Min free</SortButton></td> <td><SortButton field="min_free_space" active_field={sort_field} asc={asc} sort_func={sort}>Min free</SortButton></td>
{#if !all_reachable}<td></td>{/if}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each peers as peer (peer.ip)} {#each peers as peer (peer.id)}
<tr style="border: none;" <tr style="border: none;"
class:highlight_red={!peer.reachable} class:highlight_red={!peer.reachable}
class:highlight_yellow={peer.free_space < peer.min_free_space / 2} class:highlight_yellow={peer.free_space < peer.min_free_space / 2}
class:highlight_blue={peer.free_space < peer.min_free_space} class:highlight_blue={peer.free_space < peer.min_free_space}
class:highlight_green={peer.reachable} class:highlight_green={peer.reachable}
animate:flip={{duration: 1000}} animate:flip={{duration: 500}}
> >
<td>{peer.hostname}</td> <td>{peer.hostname}</td>
<td>{peer.unreachable_count}</td> <td>{peer.unreachable_count}</td>
@@ -115,6 +133,13 @@ let sort = (field: string) => {
<td>{formatDataVolume(peer.cache_threshold, 3)}</td> <td>{formatDataVolume(peer.cache_threshold, 3)}</td>
<td>{formatDataVolume(peer.free_space, 3)}</td> <td>{formatDataVolume(peer.free_space, 3)}</td>
<td>{formatDataVolume(peer.min_free_space, 3)}</td> <td>{formatDataVolume(peer.min_free_space, 3)}</td>
{#if !all_reachable}
<td>
<button class="button flat delete" onclick={() => decommission(peer.id)}>
<i class="icon small">delete</i>
</button>
</td>
{/if}
</tr> </tr>
{/each} {/each}
@@ -135,6 +160,7 @@ let sort = (field: string) => {
<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.cache_threshold, 0), 4)}</td> <td>{formatDataVolume(peers.reduce((acc, val) => acc += val.cache_threshold, 0), 4)}</td>
<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.free_space, 0), 4)}</td> <td>{formatDataVolume(peers.reduce((acc, val) => acc += val.free_space, 0), 4)}</td>
<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.min_free_space, 0), 3)}</td> <td>{formatDataVolume(peers.reduce((acc, val) => acc += val.min_free_space, 0), 3)}</td>
{#if !all_reachable}<td></td>{/if}
</tr> </tr>
<tr> <tr>
<td>Average</td> <td>Average</td>
@@ -153,6 +179,7 @@ let sort = (field: string) => {
<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.cache_threshold, 0) / peers.length, 4)}</td> <td>{formatDataVolume(peers.reduce((acc, val) => acc += val.cache_threshold, 0) / peers.length, 4)}</td>
<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.free_space, 0) / peers.length, 4)}</td> <td>{formatDataVolume(peers.reduce((acc, val) => acc += val.free_space, 0) / peers.length, 4)}</td>
<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.min_free_space, 0) / peers.length, 3)}</td> <td>{formatDataVolume(peers.reduce((acc, val) => acc += val.min_free_space, 0) / peers.length, 3)}</td>
{#if !all_reachable}<td></td>{/if}
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -167,4 +194,7 @@ let sort = (field: string) => {
tr { tr {
text-align: initial; text-align: initial;
} }
.delete {
margin: 0;
}
</style> </style>

5
svelte/src/filesystem/Breadcrumbs.svelte
View File

@@ -36,7 +36,7 @@ onMount(() => {
{:else if node.is_shared()} {:else if node.is_shared()}
<i class="icon small">share</i> <i class="icon small">share</i>
{/if} {/if}
<div class="node_name" class:base={$nav.base_index === i}> <div class="node_name" class:base={$nav.base_index === i} class:small={$nav.path.length > 10}>
{node.name} {node.name}
</div> </div>
</a> </a>
@@ -64,6 +64,9 @@ onMount(() => {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.small {
max-width: 10vw;
}
.base { .base {
/* The base name uses all available space */ /* The base name uses all available space */
max-width: unset; max-width: unset;

39
svelte/src/filesystem/DetailsWindow.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { run } from 'svelte/legacy';
import Chart from "util/Chart.svelte"; import Chart from "util/Chart.svelte";
import { formatDataVolume, formatDate, formatThousands } from "util/Formatting"; import { formatDataVolume, formatDate, formatThousands } from "util/Formatting";
import Modal from "util/Modal.svelte"; import Modal from "util/Modal.svelte";
@@ -19,12 +18,13 @@ let {
export const toggle = () => visible = !visible export const toggle = () => visible = !visible
const visibility_change = visible => { $effect(() => {
// Only update the chart if the details modal is open. Else the chart is
// rendered for nothing
if (visible) { if (visible) {
update_chart(nav.base, 0, 0) update_chart($nav.base, chart_timespan, chart_interval)
} }
} })
let chart: Chart = $state() let chart: Chart = $state()
let chart_timespan = $state(0) let chart_timespan = $state(0)
@@ -134,15 +134,9 @@ let update_chart = async (base: FSNode, timespan: number, interval: number) => {
console.error("Failed to get time series data:", err) console.error("Failed to get time series data:", err)
} }
} }
run(() => {
visibility_change(visible)
});
let direct_url = $derived($nav.base.path ? window.location.origin+fs_path_url($nav.base.path) : "") let direct_url = $derived($nav.base.path ? window.location.origin+fs_path_url($nav.base.path) : "")
let share_url = $derived(fs_share_url($nav.path)) let share_url = $derived(fs_share_url($nav.path))
let direct_share_url = $derived(fs_share_hotlink_url($nav.path)) let direct_share_url = $derived(fs_share_hotlink_url($nav.path))
run(() => {
update_chart($nav.base, chart_timespan, chart_interval)
});
</script> </script>
<Modal bind:visible={visible} title="Details" width={($nav.base.type === "file" ? 1000 : 750) + "px"}> <Modal bind:visible={visible} title="Details" width={($nav.base.type === "file" ? 1000 : 750) + "px"}>
@@ -172,13 +166,6 @@ run(() => {
<td>Mode</td> <td>Mode</td>
<td>{$nav.base.mode_string}</td> <td>{$nav.base.mode_string}</td>
</tr> </tr>
<tr>
<td>Node ID</td>
<td>
<CopyButton text={$nav.base.id}>Copy</CopyButton>
<a href="/d/{$nav.base.id}">{$nav.base.id}</a>
</td>
</tr>
{#if $nav.base.type === "file"} {#if $nav.base.type === "file"}
<tr> <tr>
<td>File type</td> <td>File type</td>
@@ -201,7 +188,23 @@ run(() => {
</td> </td>
</tr> </tr>
<tr><td>SHA256 sum</td><td>{$nav.base.sha256_sum}</td></tr> <tr><td>SHA256 sum</td><td>{$nav.base.sha256_sum}</td></tr>
{:else if $nav.base.type === "dir"}
<tr>
<td>Total directory size</td>
<td>{formatDataVolume($nav.base.recursive_size, 4)}</td>
</tr>
<tr>
<td>Total directory children</td>
<td>{formatThousands($nav.base.recursive_children)}</td>
</tr>
{/if} {/if}
<tr>
<td>Node ID</td>
<td>
<CopyButton text={$nav.base.id}>Copy</CopyButton>
<a href="/d/{$nav.base.id}">{$nav.base.id}</a>
</td>
</tr>
<tr> <tr>
<td>Direct link</td> <td>Direct link</td>
<td> <td>

6
svelte/src/filesystem/ErrorPage.svelte
View File

@@ -39,6 +39,12 @@ onMount(() => {
<p> <p>
This content has been removed for breaking the law. This content has been removed for breaking the law.
</p> </p>
{:else if $nav.navigation_error === "out_of_transfer"}
<h1>Traffic limit exceeded</h1>
<p>
The host user has exceeded the traffic limit of their subscription.
They need to upgrade to a higher subscription tier.
</p>
{:else} {:else}
<h1>Unknown error code</h1> <h1>Unknown error code</h1>
<p> <p>

11
svelte/src/filesystem/FSNavigator.ts
View File

@@ -270,9 +270,14 @@ const sort_children = (children: FSNode[], field: string, asc: boolean) => {
[a, b] = [b, a] [a, b] = [b, a]
} }
// If the two values are equal then we force sort by name, since names if (field === "size") {
// are always unique // When doing a size comparison we also take the recursive directory
if (a[field] === b[field]) { // size into account
return (a.type === "dir" ? a.recursive_size : a.file_size) -
(b.type === "dir" ? b.recursive_size : b.file_size)
} else if (a[field] === b[field]) {
// If the two values are equal then we force sort by name, since
// names are always unique
return a.name.localeCompare(b.name, undefined, { numeric: true }) return a.name.localeCompare(b.name, undefined, { numeric: true })
} else if (typeof (a[field]) === "number") { } else if (typeof (a[field]) === "number") {
// Sort ints from high to low // Sort ints from high to low

55
svelte/src/filesystem/ShareDialog.svelte
View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import type { FSNavigator } from "./FSNavigator"; import type { FSNavigator } from "./FSNavigator";
import { fs_check_is_error, fs_node_icon, fs_share_hotlink_url, fs_share_url, fs_update, type FSNode, type FSPermissions } from "lib/FilesystemAPI.svelte"; import { fs_check_is_error, fs_node_icon, fs_share_hotlink_url, fs_share_url, fs_update, type FSNode, type FSPermissions } from "lib/FilesystemAPI.svelte";
import { copy_text } from "util/Util";
import CopyButton from "layout/CopyButton.svelte"; import CopyButton from "layout/CopyButton.svelte";
import Dialog from "layout/Dialog.svelte"; import Dialog from "layout/Dialog.svelte";
import { fade } from "svelte/transition"; import { fade } from "svelte/transition";
import { get_user } from "lib/NovaAPI"; import { get_user } from "lib/NovaAPI";
import Button from "layout/Button.svelte";
let { nav }: { let { nav }: {
nav: FSNavigator; nav: FSNavigator;
@@ -13,10 +13,8 @@ let { nav }: {
let path: FSNode[] let path: FSNode[]
let base: FSNode = $state() let base: FSNode = $state()
let toast = $state("")
let share_url = $state("") let share_url = $state("")
let direct_share_url = $state("") let direct_share_url = $state("")
let is_parent = $state(false)
let parent_node: FSNode = $state() let parent_node: FSNode = $state()
let dialog: Dialog = $state() let dialog: Dialog = $state()
@@ -71,15 +69,19 @@ const make_public = async () => {
} }
} }
let share_parent = $state(false)
let navigator_share = $state(false)
const share = async () => { const share = async () => {
// If the base node does not have a public ID then the file is shared // If the base node is not shared then the file is shared through a parent
// through a parent node. In that case we ask the user if it was their // node. In that case we ask the user if it was their intention to share the
// intention to share the parent directory // parent directory
is_parent = base.id === undefined share_parent = !base.is_shared()
if (is_parent) { navigator_share = navigator.share !== undefined
if (!base.is_shared()) {
// Walk path backwards looking for the last public ID // Walk path backwards looking for the last public ID
for (let i = path.length - 1; i >= 0; i--) { for (let i = path.length - 1; i >= 0; i--) {
if (path[i].id !== undefined && path[i].id !== "me") { if (path[i].is_shared()) {
parent_node = path[i] parent_node = path[i]
break break
} }
@@ -88,25 +90,17 @@ const share = async () => {
share_url = fs_share_url(path) share_url = fs_share_url(path)
direct_share_url = fs_share_hotlink_url(path) direct_share_url = fs_share_hotlink_url(path)
}
try { const nav_share = async (url: string) => {
await navigator.share({ await navigator.share({
title: base.name, title: base.name,
text: "I would like to share '" + base.name + "' with you", text: "I would like to share '" + base.name + "' with you",
url: share_url, url: url,
}) })
} catch(_) {
if (copy_text(share_url)) {
toast = "Link copied to clipboard"
setTimeout(() => {toast = ""}, 10000)
} else {
alert("Could not copy text")
}
}
} }
</script> </script>
<Dialog bind:this={dialog_not_allowed}> <Dialog bind:this={dialog_not_allowed}>
<div class="dialog_inner"> <div class="dialog_inner">
<div class="highlight_yellow" transition:fade> <div class="highlight_yellow" transition:fade>
@@ -118,15 +112,13 @@ const share = async () => {
<Dialog bind:this={dialog}> <Dialog bind:this={dialog}>
<div class="dialog_inner"> <div class="dialog_inner">
{#if toast !== ""}
<div class="highlight_green" transition:fade>{toast}</div>
<div class="separator" transition:fade></div>
{/if}
<div>Sharing link</div> <div>Sharing link</div>
<div class="link_copy"> <div class="link_copy">
<div class="button_container"> <div class="button_container">
<CopyButton text={share_url}>Copy</CopyButton> <CopyButton text={share_url}>Copy</CopyButton>
{#if navigator_share}
<Button icon="share" label="Share" click={() => {nav_share(share_url)}}/>
{/if}
</div> </div>
<a href="{share_url}">{share_url}</a> <a href="{share_url}">{share_url}</a>
</div> </div>
@@ -135,11 +127,14 @@ const share = async () => {
<div class="link_copy"> <div class="link_copy">
<div class="button_container"> <div class="button_container">
<CopyButton text={direct_share_url}>Copy</CopyButton> <CopyButton text={direct_share_url}>Copy</CopyButton>
{#if navigator_share}
<Button icon="share" label="Share" click={() => {nav_share(direct_share_url)}}/>
{/if}
</div> </div>
<a href="{direct_share_url}">{direct_share_url}</a> <a href="{direct_share_url}">{direct_share_url}</a>
</div> </div>
{#if is_parent} {#if share_parent}
<div class="separator"></div> <div class="separator"></div>
<div> <div>
This link also gives access to This link also gives access to

7
svelte/src/filesystem/Toolbar.svelte
View File

@@ -40,7 +40,6 @@ export const copy_link = () => {
<FileStats nav={nav} bind:expanded={toolbar_expanded}/> <FileStats nav={nav} bind:expanded={toolbar_expanded}/>
<div class="grid" class:hide={!toolbar_expanded}> <div class="grid" class:hide={!toolbar_expanded}>
<div class="button_row"> <div class="button_row">
<button onclick={() => {nav.open_sibling(-1)}}> <button onclick={() => {nav.open_sibling(-1)}}>
<i class="icon">skip_previous</i> <i class="icon">skip_previous</i>
@@ -73,7 +72,11 @@ export const copy_link = () => {
{#if path_is_shared($nav.path)} {#if path_is_shared($nav.path)}
<button onclick={copy_link} class:button_highlight={link_copied}> <button onclick={copy_link} class:button_highlight={link_copied}>
<i class="icon">content_copy</i> <i class="icon">content_copy</i>
<span><u>C</u>opy link</span> {#if link_copied}
<span>Link copied!</span>
{:else}
<span><u>C</u>opy link</span>
{/if}
</button> </button>
{/if} {/if}

33
svelte/src/filesystem/edit_window/EditWindow.svelte
View File

@@ -6,7 +6,7 @@ import { branding_from_props } from "./Branding";
import FileOptions from "./FileOptions.svelte"; import FileOptions from "./FileOptions.svelte";
import SharingOptions from "./SharingOptions.svelte"; import SharingOptions from "./SharingOptions.svelte";
import type { FSNavigator } from "filesystem/FSNavigator"; import type { FSNavigator } from "filesystem/FSNavigator";
import { loading_finish, loading_start } from "lib/Loading"; import { loading_run } from "lib/Loading";
let file: FSNode = $state({} as FSNode) let file: FSNode = $state({} as FSNode)
let options: NodeOptions = $state({} as NodeOptions) let options: NodeOptions = $state({} as NodeOptions)
@@ -72,23 +72,22 @@ const save = async (e: SubmitEvent) => {
e.preventDefault() e.preventDefault()
console.debug("Saving file", file.path) console.debug("Saving file", file.path)
let new_file: FSNode
try { try {
loading_start() await loading_run(async () => {
options.branding_enabled = JSON.stringify(branding_enabled) options.branding_enabled = JSON.stringify(branding_enabled)
new_file = await fs_update(file.path, options) await fs_update(file.path, options)
if (new_name !== file.name) { // If the file name has changed we need to call fs_rename. This is a
let parent = file.path.slice(0, -file.name.length) // separate operation because a rename also moves the file
console.log("Moving", file.path, "to", parent+new_name) if (new_name !== file.name) {
let parent = file.path.slice(0, -file.name.length)
console.log("Moving", file.path, "to", parent+new_name)
await fs_rename(file.path, parent+new_name) await fs_rename(file.path, parent+new_name)
file.path = parent+new_name file.path = parent+new_name
}
new_file.name = new_name })
new_file.path = file.path
}
} catch (err) { } catch (err) {
if (err.message) { if (err.message) {
alert(err.message) alert(err.message)
@@ -97,11 +96,11 @@ const save = async (e: SubmitEvent) => {
alert(err) alert(err)
} }
return return
} finally {
loading_finish()
} }
if (open_after_edit) { // The navigate call will be debounced if the new path is equal to the
// current path. So we call reload() instead if that's the case
if (open_after_edit && $nav.base.path !== file.path) {
nav.navigate(file.path, false) nav.navigate(file.path, false)
} else { } else {
nav.reload() nav.reload()

27
svelte/src/filesystem/edit_window/SharingOptions.svelte
View File

@@ -4,7 +4,6 @@ import CopyButton from "layout/CopyButton.svelte";
import { formatDate } from "util/Formatting"; import { formatDate } from "util/Formatting";
import { type FSNode, type NodeOptions } from "lib/FilesystemAPI.svelte"; import { type FSNode, type NodeOptions } from "lib/FilesystemAPI.svelte";
import AccessControl from "./AccessControl.svelte"; import AccessControl from "./AccessControl.svelte";
import { onMount } from 'svelte';
import { user } from "lib/UserStore"; import { user } from "lib/UserStore";
let { let {
@@ -15,27 +14,24 @@ let {
options: NodeOptions; options: NodeOptions;
} = $props(); } = $props();
let embed_html: string = $state() let is_shared = $derived(file.is_shared() || options.link_permissions?.read)
let preview_area: HTMLDivElement = $state() let embed_html: string = $derived.by(() => {
if (!is_shared) {
const embed_iframe = (file: FSNode, options: NodeOptions) => { return "File is not shared, can't generate embed code"
if (!file.is_shared()) {
example = false
embed_html = "File is not shared, can't generate embed code"
return
} }
let url = domain_url()+"/d/"+file.id let url = domain_url()+"/d/"+file.id
embed_html = `<iframe ` + return `<iframe ` +
`src="${url}" ` + `src="${url}" ` +
`style="border: none; width: 100%; max-width 90vw; height: 800px; max-height: 75vh; border-radius: 6px;" ` + `style="border: none; width: 100%; max-width 90vw; height: 800px; max-height: 75vh; border-radius: 6px;" ` +
`allowfullscreen` + `allowfullscreen` +
`></iframe>` `></iframe>`
} })
let preview_area: HTMLDivElement = $state()
let example = $state(false) let example = $state(false)
const toggle_example = () => { const toggle_example = () => {
if (file.is_shared()) { if (is_shared) {
example = !example example = !example
if (example) { if (example) {
preview_area.innerHTML = embed_html preview_area.innerHTML = embed_html
@@ -46,9 +42,6 @@ const toggle_example = () => {
} }
let share_link = $derived(window.location.protocol+"//"+window.location.host+"/d/"+file.id) let share_link = $derived(window.location.protocol+"//"+window.location.host+"/d/"+file.id)
onMount(() => {
embed_iframe(file, options)
});
</script> </script>
{#if $user.subscription.file_sharing === false} {#if $user.subscription.file_sharing === false}
@@ -93,8 +86,8 @@ onMount(() => {
<div class="center"> <div class="center">
<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea> <textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
<br/> <br/>
<CopyButton text={embed_html}>Copy HTML</CopyButton> <CopyButton text={embed_html} disabled={!is_shared}>Copy HTML</CopyButton>
<button onclick={toggle_example} class:button_highlight={example} disabled={!file.is_shared()}> <button onclick={toggle_example} class:button_highlight={example} disabled={!is_shared}>
<i class="icon">visibility</i> Show example <i class="icon">visibility</i> Show example
</button> </button>
</div> </div>

8
svelte/src/filesystem/edit_window/ThemePresets.svelte
View File

@@ -86,6 +86,14 @@ const themes = [
brand_background_color: "#1e1e2e", brand_background_color: "#1e1e2e",
brand_body_color: "#181825", brand_body_color: "#181825",
brand_card_color: "#313244", brand_card_color: "#313244",
}, {
name: "Dracula",
brand_input_color: "#424450",
brand_highlight_color: "#50FA7B",
brand_danger_color: "#FF5555",
brand_background_color: "#191A21",
brand_body_color: "#21222C",
brand_card_color: "#343746",
}, { }, {
name: "Nova", name: "Nova",
brand_input_color: "#28033f", brand_input_color: "#28033f",

15
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -101,21 +101,6 @@ const navigate_back = () => {
// Deletion function // Deletion function
const delete_selected = async () => { const delete_selected = async () => {
let count = nav.children.reduce((acc, cur) => {
if (cur.fm_selected) {
acc++
}
return acc
}, 0)
let confirmSingle = `Are you sure you want to delete this file? This action is irreversible.`
let confirmMulti = `Are you sure you want to delete these ${count} files? This action is irreversible.`
if (count === 0 ||
(count === 1 && !confirm(confirmSingle)) ||
(count > 1 && !confirm(confirmMulti))) {
return
}
try { try {
loading_start() loading_start()

123
svelte/src/filesystem/filemanager/ListView.svelte
View File

@@ -1,9 +1,13 @@
<script lang="ts"> <script lang="ts">
import { formatDataVolume } from "util/Formatting"; import { formatDataVolume, formatDate, formatThousands } from "util/Formatting";
import { fs_encode_path, fs_node_icon } from "lib/FilesystemAPI.svelte" import { fs_encode_path, fs_node_icon } from "lib/FilesystemAPI.svelte"
import type { FSNavigator } from "filesystem/FSNavigator"; import type { FSNavigator } from "filesystem/FSNavigator";
import SortButton from "layout/SortButton.svelte"; import SortButton from "layout/SortButton.svelte";
import { FileAction, type FileActionHandler } from "./FileManagerLib"; import { FileAction, type FileActionHandler } from "./FileManagerLib";
import Dialog from "layout/Dialog.svelte";
import Button from "layout/Button.svelte";
import { onMount } from "svelte";
import CopyButton from "layout/CopyButton.svelte";
let { let {
nav, nav,
@@ -20,23 +24,70 @@ let {
hide_edit?: boolean hide_edit?: boolean
hide_branding?: boolean hide_branding?: boolean
} = $props(); } = $props();
let dialog: Dialog = $state()
const columns: {field: string, label: string}[] = [
{field: "modified", label: "Modified on"},
{field: "created", label: "Created on"},
{field: "created_by", label: "Created by"},
{field: "mode", label: "Mode"},
{field: "recursive_children", label: "Children"},
{field: "file_type", label: "File type"},
{field: "size", label: "Size"},
{field: "id", label: "Node ID"},
]
let config: {
modified?: boolean
created?: boolean
created_by?: boolean
mode?: boolean
recursive_children?: boolean
file_type?: boolean
size?: boolean
id?: boolean
} = $state({
size: true, // Only size is visible by default
})
const prevent = (e: MouseEvent) => {
e.stopPropagation()
}
const submit_settings = (e: SubmitEvent) => {
e.preventDefault()
dialog.close()
}
const save_settings = () => {
window.localStorage.setItem("list_view_columns", JSON.stringify(config))
}
const load_settings = () => {
let item = window.localStorage.getItem("list_view_columns")
if (item !== null) {
config = JSON.parse(item)
}
}
onMount(load_settings)
</script> </script>
<table class="directory"> <table class="directory">
<thead> <thead>
<tr> <tr class="header_row">
<td></td> <td></td>
<td> <td>
<SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field="name"> <SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field="name">
Name Name
</SortButton> </SortButton>
</td> </td>
<td class="hide_small"> {#each columns as col}
<SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field="file_size"> <td class="hide_small" class:hidden={!config[col.field]}>
Size <SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field={col.field}>
</SortButton> {col.label}
</SortButton>
</td>
{/each}
<td class="node_icons icons_wrap">
<Button flat icon="settings" click={e => dialog.open(e)} />
</td> </td>
<td></td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -56,11 +107,35 @@ let {
{child.name} {child.name}
</a> </a>
</td> </td>
<td class="node_size hide_small"> <td class="node_size hide_small" class:hidden={!config.modified}>
{formatDate(child.modified, true, true, false)}
</td>
<td class="node_size hide_small" class:hidden={!config.created}>
{formatDate(child.created, true, true, false)}
</td>
<td class="node_size hide_small" class:hidden={!config.created_by}>
{child.created_by}
</td>
<td class="node_size hide_small" class:hidden={!config.mode}>
{child.mode_string}
</td>
<td class="node_size hide_small" class:hidden={!config.recursive_children}>
{formatThousands(child.recursive_children)}
</td>
<td class="node_size hide_small" class:hidden={!config.file_type}>
{child.file_type}
</td>
<td class="node_size hide_small" class:hidden={!config.size}>
{#if child.type === "file"} {#if child.type === "file"}
{formatDataVolume(child.file_size, 3)} {formatDataVolume(child.file_size, 3)}
{:else if child.type === "dir"}
{formatDataVolume(child.recursive_size, 3)}
{/if} {/if}
</td> </td>
<td class="node_size hide_small" class:hidden={!config.id}>
<CopyButton text={$nav.base.id} onclick={prevent} />
<a href="/d/{child.id}" onclick={prevent}>{child.id}</a>
</td>
<td class="node_icons"> <td class="node_icons">
<div class="icons_wrap"> <div class="icons_wrap">
{#if child.abuse_type !== undefined} {#if child.abuse_type !== undefined}
@@ -91,15 +166,39 @@ let {
</tbody> </tbody>
</table> </table>
<Dialog bind:this={dialog} onclose={save_settings}>
<form class="column_config" onsubmit={submit_settings}>
{#each columns as col}
<div>
<input type="checkbox" id="show_{col.field}" name="show_{col.field}" bind:checked={config[col.field]}/>
<label for="show_{col.field}">{col.label}</label>
</div>
{/each}
<button type="submit">
<i class="icon">save</i>
Save
</button>
</form>
</Dialog>
<style> <style>
.directory { .directory {
background: var(--body_background); background: var(--body_background);
border-collapse: collapse; border-collapse: collapse;
/* backdrop-filter: blur(4px); */ backdrop-filter: blur(4px);
max-width: 1200px; max-width: 1200px;
margin: auto; /* center */ margin: auto; /* center */
} }
td { td {
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
}
.header_row {
white-space: nowrap;
}
.node_icons {
padding: 0; padding: 0;
} }
.node { .node {
@@ -151,6 +250,12 @@ td {
display: none; display: none;
} }
.column_config {
display: flex;
flex-direction: column;
white-space: nowrap;
}
/* Large icon mode only supported on wide screens */ /* Large icon mode only supported on wide screens */
@media (min-width: 500px) { @media (min-width: 500px) {
.node_icon.large_icons { .node_icon.large_icons {

22
svelte/src/filesystem/viewers/Audio.svelte
View File

@@ -91,16 +91,18 @@ onMount(() => {
</div> </div>
<h2>Tracklist</h2> <h2>Tracklist</h2>
{#each siblings as sibling (sibling.path)} {#each siblings as sibling (sibling.id)}
<a href={"/d"+fs_encode_path(sibling.path)} class="node" class:playing={sibling.path === $nav.base.path}> {#if !sibling.is_hidden()}
{#if sibling.path === $nav.base.path} <a href={"/d"+fs_encode_path(sibling.path)} class="node" class:playing={sibling.path === $nav.base.path}>
<i class="play_arrow icon">play_arrow</i> {#if sibling.path === $nav.base.path}
{:else} <i class="play_arrow icon">play_arrow</i>
<img src={fs_node_icon(sibling, 64, 64)} class="node_icon" alt="icon"/> {:else}
{/if} <img src={fs_node_icon(sibling, 64, 64)} class="node_icon" alt="icon"/>
<span>{sibling.name}</span> {/if}
<br/> <span>{sibling.name}</span>
</a> <br/>
</a>
{/if}
{/each} {/each}
</TextBlock> </TextBlock>
</div> </div>

14
svelte/src/layout/CopyButton.svelte
View File

@@ -6,20 +6,24 @@ let {
style = "", style = "",
large_icon = false, large_icon = false,
small_icon = false, small_icon = false,
children disabled = false,
children,
onclick,
}: { }: {
text?: string; text?: string;
style?: string; style?: string;
large_icon?: boolean; large_icon?: boolean;
small_icon?: boolean; small_icon?: boolean;
disabled?: boolean;
children?: import('svelte').Snippet; children?: import('svelte').Snippet;
onclick?: (e: MouseEvent) => void;
} = $props(); } = $props();
let failed = $state(false) let failed = $state(false)
let success = $state(false) let success = $state(false)
// Exported so it can be called manually // Exported so it can be called manually
export const copy = () => { export const copy = (e: MouseEvent) => {
try { try {
copy_text(text) copy_text(text)
success = true success = true
@@ -32,6 +36,10 @@ export const copy = () => {
success = false success = false
failed = false failed = false
}, 10000) }, 10000)
if (onclick !== undefined) {
onclick(e)
}
} }
</script> </script>
@@ -44,7 +52,7 @@ export const copy = () => {
class:large_icon class:large_icon
class:small_icon class:small_icon
title="Copy text to clipboard" title="Copy text to clipboard"
disabled={text === ""} disabled={disabled}
> >
<i class="icon">content_copy</i> <i class="icon">content_copy</i>
<span> <span>

14
svelte/src/layout/Dialog.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
let { children }: { let { children, onclose }: {
children?: import('svelte').Snippet; children?: import('svelte').Snippet;
onclose?: () => void
} = $props(); } = $props();
let dialog: HTMLDialogElement = $state() let dialog: HTMLDialogElement = $state()
@@ -8,12 +9,12 @@ export const open = (origin: DOMRect|MouseEvent) => {
// Show the window so we can get the location // Show the window so we can get the location
dialog.showModal() dialog.showModal()
const edge_offset = 2 const edge_offset = 10
// Get the egdes of the screen, so the window does not spawn off-screen // Get the egdes of the screen, so the window does not spawn off-screen
const dialog_rect = dialog.getBoundingClientRect() const dialog_rect = dialog.getBoundingClientRect()
const max_left = window.innerWidth - dialog_rect.width - edge_offset const max_left = document.documentElement.clientWidth - dialog_rect.width - edge_offset
const max_top = window.innerHeight - dialog_rect.height - edge_offset const max_top = document.documentElement.clientHeight - dialog_rect.height - edge_offset
let min_left: number, min_top: number let min_left: number, min_top: number
if (origin instanceof DOMRect) { if (origin instanceof DOMRect) {
@@ -35,6 +36,9 @@ export const open = (origin: DOMRect|MouseEvent) => {
export const close = () => { export const close = () => {
dialog.close() dialog.close()
if (onclose !== undefined) {
onclose()
}
} }
// Attach a click handler so that the dialog is closed when the user clicks // Attach a click handler so that the dialog is closed when the user clicks
@@ -44,7 +48,7 @@ export const close = () => {
const click = (e: MouseEvent) => { const click = (e: MouseEvent) => {
if (e.target === dialog) { if (e.target === dialog) {
e.preventDefault() e.preventDefault()
dialog.close() close()
} }
} }
</script> </script>

6
svelte/src/layout/SortButton.svelte
View File

@@ -4,7 +4,7 @@ let {
active_field = "", active_field = "",
asc = true, asc = true,
sort_func, sort_func,
children children,
}: { }: {
field?: string; field?: string;
active_field?: string; active_field?: string;
@@ -14,7 +14,7 @@ let {
} = $props(); } = $props();
</script> </script>
<button onclick={() => sort_func(field)}> <button onclick={() => sort_func(field)} class="button flat">
{#if active_field === field} {#if active_field === field}
{#if asc}↓{:else}↑{/if} {#if asc}↓{:else}↑{/if}
{/if} {/if}
@@ -25,8 +25,6 @@ let {
button { button {
display: block; display: block;
margin: 0; margin: 0;
line-height: 1em;
width: 100%; width: 100%;
text-align: initial;
} }
</style> </style>

14
svelte/src/lib/AdminAPI.ts
View File

@@ -1,5 +1,5 @@
import { countries } from "country-data-list" import { countries } from "country-data-list"
import { check_response, get_endpoint } from "./NovaAPI" import { check_response, get_endpoint, type GenericResponse } from "./NovaAPI"
export const country_name = (country: string) => { export const country_name = (country: string) => {
if (country !== "" && countries[country] !== undefined) { if (country !== "" && countries[country] !== undefined) {
@@ -27,3 +27,15 @@ export const get_admin_invoices = async (year: number, month: number) => {
) )
) as Invoice[] ) as Invoice[]
}; };
export const admin_decommission_node = async (peer_id: string) => {
let form = new FormData()
form.set("peer_id", peer_id)
return await check_response(
await fetch(
get_endpoint() + "/admin/decommission_node",
{ method: "POST", body: form }
)
) as GenericResponse
};

4
svelte/src/lib/FilesystemAPI.svelte.ts
View File

@@ -34,6 +34,8 @@ export class FSNode {
mode_string: string mode_string: string
mode_octal: string mode_octal: string
created_by: string created_by: string
recursive_size: number
recursive_children: number
abuse_type?: string abuse_type?: string
abuse_report_time?: string abuse_report_time?: string
@@ -188,7 +190,7 @@ export const fs_get_node = async (path: string) => {
// - shared, boolean. If true the node will receive a public ID // - shared, boolean. If true the node will receive a public ID
// //
// Returns the modified filesystem node object // Returns the modified filesystem node object
export const fs_update = async (path: string, opts: NodeOptions) => { export const fs_update = async (path: string, opts: NodeOptions): Promise<FSNode> => {
const form = new FormData() const form = new FormData()
form.append("action", "update") form.append("action", "update")

4
svelte/src/user_home/HotlinkProgressBar.svelte
View File

@@ -37,7 +37,7 @@ let frac = $derived(used / total)
{#if $user !== null && $user.monthly_transfer_cap > 0} {#if $user !== null && $user.monthly_transfer_cap > 0}
<p> <p>
You have a billshock limit configured. <a You have a billshock limit configured. <a
href="/user/sharing/bandwidth">increase or disable the limit</a> to href="/user/sharing">increase or disable the limit</a> to
continue sharing files. continue sharing files.
</p> </p>
{/if} {/if}
@@ -59,7 +59,7 @@ let frac = $derived(used / total)
{#if $user !== null && $user.monthly_transfer_cap > 0} {#if $user !== null && $user.monthly_transfer_cap > 0}
<p> <p>
You have a billshock limit configured. <a You have a billshock limit configured. <a
href="/user/sharing/bandwidth">increase or disable the limit</a> to href="/user/sharing">increase or disable the limit</a> to
continue sharing files. continue sharing files.
</p> </p>
{/if} {/if}

59
svelte/src/user_home/Subscription.svelte
View File

@@ -7,7 +7,6 @@ import { user } from "lib/UserStore";
import { put_user } from "lib/NovaAPI"; import { put_user } from "lib/NovaAPI";
let subscription: string = $state($user === null ? "" : $user.subscription.id) let subscription: string = $state($user === null ? "" : $user.subscription.id)
let subscription_type: string = $state($user === null ? "" : $user.subscription.type)
let success_message: SuccessMessage = $state() let success_message: SuccessMessage = $state()
const update = async (plan: string) => { const update = async (plan: string) => {
@@ -71,13 +70,6 @@ const update = async (plan: string) => {
<p> <p>
Here you can switch between different subscription plans. Here you can switch between different subscription plans.
</p> </p>
<p>
The Patreon subscription is managed by Patreon. Nova cannot modify
or end your subsciption. If you would like to cancel your Patreon plan
you can do that <a
href="https://www.patreon.com/settings/memberships/nova"
target="_blank">on Patreon</a>.
</p>
<p> <p>
The Prepaid subscription is charged daily based on usage. When you reach The Prepaid subscription is charged daily based on usage. When you reach
negative balance the subscription will automatically end. You need at negative balance the subscription will automatically end. You need at
@@ -91,41 +83,6 @@ const update = async (plan: string) => {
<SuccessMessage bind:this={success_message}/> <SuccessMessage bind:this={success_message}/>
<div class="feat_table"> <div class="feat_table">
<div>
<div class="feat_label" class:feat_highlight={subscription_type === "patreon"}>
Patreon<br/>
{#if subscription_type === "patreon"}
Currently active<br/>
<a class="button" href="https://www.patreon.com/settings/memberships/nova" target="_blank">
<i class="icon">settings</i>
Manage
</a>
{:else}
<a class="button" href="/api/patreon_auth/start">
<i class="icon">add_link</i>
Link Patreon
</a>
{/if}
</div>
<div class="feat_normal round_tr" class:feat_highlight={subscription_type === "patreon"}>
<p>
This subscription is managed by Patreon. You will need to <a
href="https://www.patreon.com/nova/membership"
target="_blank">purchase a plan on Patreon</a> before you
can activate this subscription. After your purchase you can
click the "Link Patreon" button and your account will be
upgraded.
</p>
<ul>
<li>€4 per month</li>
<li>No storage limit for file sharing</li>
<li>4 TB transfer limit (higher plans available)</li>
<li>Access to the <a href="/filesystem">filesystem</a></li>
<li>2 TB filesytem storage limit (higher plans available)</li>
</ul>
</div>
</div>
<div> <div>
<div class="feat_label" class:feat_highlight={subscription === "prepaid"}> <div class="feat_label" class:feat_highlight={subscription === "prepaid"}>
Prepaid<br/> Prepaid<br/>
@@ -141,11 +98,7 @@ const update = async (plan: string) => {
<div class="feat_normal round_tr" class:feat_highlight={subscription === "prepaid"}> <div class="feat_normal round_tr" class:feat_highlight={subscription === "prepaid"}>
<p> <p>
You will need a positive account balance to activate this You will need a positive account balance to activate this
plan. If you currently have a Patreon subscription active, plan. The plan deactivates when your credit runs out.
then enabling prepaid will not cancel that subscription. You
can end your subscription <a
href="https://www.patreon.com/settings/memberships/nova"
target="_blank">on Patreon.com</a>.
</p> </p>
<ul> <ul>
<li> <li>
@@ -157,12 +110,12 @@ const update = async (plan: string) => {
</li> </li>
<li> <li>
€1 per TB for data transfer (with <a €1 per TB for data transfer (with <a
href="/user/sharing/bandwidth">hotlinking</a> href="/user/sharing">hotlinking</a>
enabled) enabled)
</li> </li>
<li> <li>
File <a href="/user/sharing/embedding">embedding File <a href="/user/sharing">embedding control</a>
control</a> options options
</li> </li>
</ul> </ul>
</div> </div>
@@ -177,8 +130,8 @@ const update = async (plan: string) => {
</div> </div>
<div class="feat_normal round_br" class:feat_highlight={subscription === ""}> <div class="feat_normal round_br" class:feat_highlight={subscription === ""}>
<ul> <ul>
<li>Standard free plan, files expire after 120 days.</li> <li>Storage limit: 50 GB</li>
<li>Download limit of 6 GB per day</li> <li>Download limit: 50 GB per 30 days (sliding window)</li>
</ul> </ul>
</div> </div>
</div> </div>

2
svelte/src/user_home/dashboard/CardUsage.svelte
View File

@@ -58,6 +58,6 @@ onMount(async () => {
<br/><br/> <br/><br/>
Egress used (30 days): Egress used (30 days):
(<a href="/user/sharing/bandwidth">set custom limit</a>) (<a href="/user/sharing">set custom limit</a>)
<HotlinkProgressBar used={transfer_used} total={transfer_cap}></HotlinkProgressBar> <HotlinkProgressBar used={transfer_used} total={transfer_cap}></HotlinkProgressBar>
{/if} {/if}

6
svelte/src/user_home/dashboard/Dashboard.svelte
View File

@@ -32,7 +32,7 @@ const min_card_size = 0
const def_card_size = 1 const def_card_size = 1
const max_card_size = 3 const max_card_size = 3
const expand = i => { const expand = (i: number) => {
if (cards[i].size === undefined) { if (cards[i].size === undefined) {
cards[i].size = def_card_size cards[i].size = def_card_size
} }
@@ -41,7 +41,7 @@ const expand = i => {
} }
save() save()
} }
const shrink = i => { const shrink = (i: number) => {
if (cards[i].size === undefined) { if (cards[i].size === undefined) {
cards[i].size = def_card_size cards[i].size = def_card_size
} }
@@ -51,7 +51,7 @@ const shrink = i => {
save() save()
} }
const swap_card = (idx1, idx2) => { const swap_card = (idx1: number, idx2: number) => {
const card1 = cards[idx1] const card1 = cards[idx1]
cards[idx1] = cards[idx2] cards[idx1] = cards[idx2]
cards[idx2] = card1 cards[idx2] = card1