From 71a34fc88168df0954cd1a61ac45c3b15ec45cc9 Mon Sep 17 00:00:00 2001 From: Fornax Date: Tue, 18 Oct 2022 14:30:50 +0200 Subject: [PATCH] Overhaul user settings page --- ...Reporters.svelte => EmailReporters.svelte} | 1 + svelte/src/admin_panel/Home.svelte | 4 + svelte/src/admin_panel/Router.svelte | 129 +++----- ...criptions.svelte => UserManagement.svelte} | 12 +- .../user_file_manager/DirectoryElement.svelte | 8 +- svelte/src/user_home/BandwidthSharing.svelte | 135 ++++++++ svelte/src/user_home/DepositCredit.svelte | 154 ++++++++++ svelte/src/user_home/EmbeddingControls.svelte | 88 ++++++ ...ingSettings.svelte => PageBranding.svelte} | 70 +---- svelte/src/user_home/Router.svelte | 190 +++++------- svelte/src/user_home/Subscription.svelte | 288 +++++------------- svelte/src/user_home/Transactions.svelte | 192 +++--------- svelte/src/util/Chart.svelte | 1 - svelte/src/util/TabMenu.svelte | 107 +++++++ webcontroller/web_controller.go | 7 +- 15 files changed, 751 insertions(+), 635 deletions(-) rename svelte/src/admin_panel/{AbuseReporters.svelte => EmailReporters.svelte} (99%) rename svelte/src/admin_panel/{Subscriptions.svelte => UserManagement.svelte} (99%) create mode 100644 svelte/src/user_home/BandwidthSharing.svelte create mode 100644 svelte/src/user_home/DepositCredit.svelte create mode 100644 svelte/src/user_home/EmbeddingControls.svelte rename svelte/src/user_home/{SharingSettings.svelte => PageBranding.svelte} (80%) create mode 100644 svelte/src/util/TabMenu.svelte diff --git a/svelte/src/admin_panel/AbuseReporters.svelte b/svelte/src/admin_panel/EmailReporters.svelte similarity index 99% rename from svelte/src/admin_panel/AbuseReporters.svelte rename to svelte/src/admin_panel/EmailReporters.svelte index 8140fc6..df49a28 100644 --- a/svelte/src/admin_panel/AbuseReporters.svelte +++ b/svelte/src/admin_panel/EmailReporters.svelte @@ -178,6 +178,7 @@ onMount(get_reporters); on:delete={e => delete_reporter(e.detail)}> +
diff --git a/svelte/src/user_home/DepositCredit.svelte b/svelte/src/user_home/DepositCredit.svelte new file mode 100644 index 0000000..4d02a7c --- /dev/null +++ b/svelte/src/user_home/DepositCredit.svelte @@ -0,0 +1,154 @@ + + + + +
+

Deposit credits

+

+ You can deposit credit on your pixeldrain account with Bitcoin, + Lightning network (node info) and Dogecoin. You must pay the full + amount as stated on the invoice, else your payment will fail. +

+

+ Do note that it is not possible to withdraw coins from your + pixeldrain account. It's not a wallet. Any amount of money you + deposit has to be used up. +

+
+ Deposit amount € + +
+ Pay with:
+ + + +
+ +

Open invoices

+
+ + + + + + + + + + + {#each invoices as row (row.id)} + {#if row.status === "New" || + row.status === "InvoiceCreated" || + row.status === "InvoiceProcessing" || + show_expired + } + + + + + + + {/if} + {/each} + +
CreatedAmountStatus
{formatDate(row.time, true, true, false)} + {#if row.status === "InvoiceCreated"} + New (waiting for payment) + {:else if row.status === "InvoiceProcessing"} + Payment received, waiting for confirmations + {:else if row.status === "InvoiceSettled"} + Paid + {:else if row.status === "InvoiceExpired"} + Expired + {:else} + {row.status} + {/if} + + {#if row.status === "New" || row.status === "InvoiceCreated"} + + paid Pay + + {/if} +
+
+ +
+
+
diff --git a/svelte/src/user_home/EmbeddingControls.svelte b/svelte/src/user_home/EmbeddingControls.svelte new file mode 100644 index 0000000..db422d9 --- /dev/null +++ b/svelte/src/user_home/EmbeddingControls.svelte @@ -0,0 +1,88 @@ + + + + +
+

Embedding controls

+ + {#if !window.user.subscription.file_viewer_branding} +
+ Sharing settings are not available for your account. Subscribe to + the Persistence plan or higher to enable these features. +
+ {:else if !window.user.hotlinking_enabled} +
+ To use embedding restrictions bandwidth sharing needs to be enabled. + Enable bandwidth sharing on the + bandwidth sharing page. +
+ {/if} +

+ Here you can control which websites are allowed to embed your files in + their web pages. If a website that is not on this list tries to embed + one of your files the request will be blocked. +

+

+ The list should be formatted as a list of domain names separated by a + space. Like this: 'pixeldrain.com google.com twitter.com' +

+
+
Domain names:
+ + +
+
+ + diff --git a/svelte/src/user_home/SharingSettings.svelte b/svelte/src/user_home/PageBranding.svelte similarity index 80% rename from svelte/src/user_home/SharingSettings.svelte rename to svelte/src/user_home/PageBranding.svelte index d3dfb7e..c85e39c 100644 --- a/svelte/src/user_home/SharingSettings.svelte +++ b/svelte/src/user_home/PageBranding.svelte @@ -1,10 +1,10 @@
-

Sharing settings

+

File viewer branding

{#if !window.user.subscription.file_viewer_branding}
Sharing settings are not available for your account. Subscribe to @@ -130,13 +100,13 @@ onMount(() => {
{:else if !window.user.hotlinking_enabled}
- To use the sharing settings bandwidth sharing needs to be enabled. - Enable bandwidth sharing on the - subscription page. + To use custom file viewer branding bandwidth sharing needs to be + enabled. Enable bandwidth sharing on the + bandwidth sharing page.
{/if} -

File viewer branding

+

You can change the appearance of your file viewer pages. The images you choose here will be loaded each time someone visits one of your files. @@ -148,7 +118,7 @@ onMount(() => { should use APNG or WebP. Avoid using animated GIFs as they are very slow to load.

-

Theme

+

Theme

Choose a theme for your download pages. This theme will override the theme preference of the person viewing the file. Set to 'None' to let @@ -159,7 +129,7 @@ onMount(() => { on:theme_change={e => {theme = e.detail; save()}}> -

Header image

+

Header image

Will be shown above the file. Maximum height is 90px. Will be shrunk if larger. You can also add a link to open when the visitor clicks the @@ -174,8 +144,8 @@ onMount(() => { Remove
+ Header image link:

-
Header image link:
@@ -186,7 +156,7 @@ onMount(() => { {/if} -

Background image

+

Background image

This image will be shown behind the file which is being viewed. I recommend choosing something dark and not too distracting. Try to keep @@ -207,7 +177,7 @@ onMount(() => { {/if} -

Footer image

+

Footer image

Will be shown below the file. Maximum height is 90px. Will be shrunk if larger. @@ -221,8 +191,8 @@ onMount(() => { Remove
+ Footer image link:

-
Footer image link:
@@ -231,22 +201,6 @@ onMount(() => { {/if} -
-

Embedding controls

-

- Here you can control which websites are allowed to embed your files in - their web pages. If a website that is not on this list tries to embed - one of your files the request will be blocked. -

-

- The list should be formatted as a list of domain names separated by a - space. Like this: 'pixeldrain.com google.com twitter.com' -

-
-
Domain names:
- - -
-import { onMount } from "svelte"; import Home from "./Home.svelte"; import AccountSettings from "./AccountSettings.svelte"; import APIKeys from "./APIKeys.svelte"; @@ -7,116 +6,85 @@ import Transactions from "./Transactions.svelte"; import Subscription from "./Subscription.svelte"; import ConnectApp from "./ConnectApp.svelte"; import ActivityLog from "./ActivityLog.svelte"; -import SharingSettings from "./SharingSettings.svelte"; -import Footer from "../layout/Footer.svelte"; +import DepositCredit from "./DepositCredit.svelte"; +import TabMenu from "../util/TabMenu.svelte"; +import BandwidthSharing from "./BandwidthSharing.svelte"; +import EmbeddingControls from "./EmbeddingControls.svelte"; +import PageBranding from "./PageBranding.svelte"; -let page = "" - -let navigate = (path, title) => { - page = path - window.document.title = title+" ~ pixeldrain" - window.history.pushState( - {}, window.document.title, "/user/"+path - ) -} - -let get_page = () => { - let newpage = window.location.pathname.substring(window.location.pathname.lastIndexOf("/")+1) - if (newpage === "user") { - newpage = "home" - } - - page = newpage -} - -onMount(() => { - get_page() -}) +let pages = [ + { + path: "/user/home", + title: "My Home", + icon: "home", + component: Home, + }, { + path: "/user/settings", + title: "Settings", + icon: "settings", + component: AccountSettings, + }, { + path: "/user/sharing", + title: "Sharing", + icon: "share", + subpages: [ + { + path: "/user/sharing/bandwidth", + title: "Bandwidth Sharing", + icon: "share", + component: BandwidthSharing, + }, { + path: "/user/sharing/branding", + title: "Page Branding", + icon: "palette", + component: PageBranding, + }, { + path: "/user/sharing/embedding", + title: "Embedding Controls", + icon: "code", + component: EmbeddingControls, + }, + ], + }, { + path: "/user/connect_app", + title: "Apps", + icon: "app_registration", + component: ConnectApp, + }, { + path: "/user/api_keys", + title: "API Keys", + icon: "vpn_key", + component: APIKeys, + }, { + path: "/user/activity", + title: "Activity Log", + icon: "list", + component: ActivityLog, + }, { + path: "/user/prepaid", + title: "Prepaid", + icon: "receipt_long", + hidden: window.user.subscription.type === "patreon", + subpages: [ + { + path: "/user/prepaid/deposit", + title: "Deposit credit", + icon: "account_balance_wallet", + component: DepositCredit, + }, { + path: "/user/prepaid/subscriptions", + title: "Subscriptions", + icon: "shopping_cart", + component: Subscription, + }, { + path: "/user/prepaid/transactions", + title: "Transactions", + icon: "receipt", + component: Transactions, + }, + ], + }, +] - - -
-

Welcome home, {window.user.username}!

- -
- {navigate("home", "My home")}}> - home
- My home - - {navigate("settings", "Settings")}}> - settings
- Settings - - {navigate("sharing", "Sharing")}}> - share
- Sharing - - {navigate("connect_app", "Apps")}}> - app_registration
- Apps - - {navigate("api_keys", "API keys")}}> - vpn_key
- Keys - - {navigate("activity", "Activity log")}}> - list
- Activity log - - {navigate("subscription", "Subscription")}}> - shopping_cart
- Subscription - - {#if window.user.subscription.type !== "patreon"} - {navigate("transactions", "Transactions")}}> - receipt_long
- Transactions - - {/if} -
-
-
- {#if page === "home"} - - {:else if page === "settings"} - - {:else if page === "sharing"} - - {:else if page === "api_keys"} - - {:else if page === "activity"} - - {:else if page === "connect_app"} - - {:else if page === "transactions"} - - {:else if page === "subscription"} - - {/if} -
-