From 11132854b2de8fd546cbc58d5ac6993a8afd10fe Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Tue, 21 Sep 2021 21:39:28 +0200 Subject: [PATCH] Rewrite user home page in svelte --- res/include/style/layout.css | 19 +- res/template/account/user_home_svelte.html | 27 ++ res/template/admin.html | 1 + res/template/home.html | 19 +- svelte/rollup.config.js | 1 + svelte/src/admin_panel/AdminPanel.svelte | 74 ++--- svelte/src/user_home.js | 8 + svelte/src/user_home/AccountSettings.svelte | 126 +++++++++ svelte/src/user_home/Home.svelte | 286 ++++++++++++++++++++ svelte/src/user_home/Router.svelte | 50 ++++ svelte/src/util/Chart.svelte | 2 +- svelte/src/util/Form.svelte | 229 ++++++++++++++++ webcontroller/ad_click.go | 2 +- webcontroller/file_preview.go | 2 +- webcontroller/file_viewer.go | 4 +- webcontroller/misc.go | 4 +- webcontroller/templates.go | 7 +- webcontroller/web_controller.go | 8 +- 18 files changed, 817 insertions(+), 52 deletions(-) create mode 100644 res/template/account/user_home_svelte.html create mode 100644 svelte/src/user_home.js create mode 100644 svelte/src/user_home/AccountSettings.svelte create mode 100644 svelte/src/user_home/Home.svelte create mode 100644 svelte/src/user_home/Router.svelte create mode 100644 svelte/src/util/Form.svelte diff --git a/res/include/style/layout.css b/res/include/style/layout.css index 0314d46..93b60e9 100644 --- a/res/include/style/layout.css +++ b/res/include/style/layout.css @@ -145,7 +145,7 @@ body, .checkers { display: inline-block; width: 100%; height: auto; - padding: 20px 0 20px 0; + padding: 0 0 20px 0; background-color: #212121; background-color: var(--layer_2_color); box-shadow: 1px 1px 20px 0 #000000; @@ -498,6 +498,23 @@ select:disabled , select.disabled { .round { border-radius: 32px; } +.tab { + margin: 0 0 10px 8px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.tab:last-child { + margin-right: 8px; +} +.tab_bar { + display: block; + width: 100%; + overflow-x: auto; + overflow-y: hidden; + white-space: nowrap; + box-sizing: border-box; + text-align: center; +} /* Dropdown list of the select tag */ option{ diff --git a/res/template/account/user_home_svelte.html b/res/template/account/user_home_svelte.html new file mode 100644 index 0000000..35cdc28 --- /dev/null +++ b/res/template/account/user_home_svelte.html @@ -0,0 +1,27 @@ +{{define "user_home_svelte"}} + + + {{template "meta_tags" .User.Username}} + {{template "user_style" .}} + + + + + + + + {{template "page_top" .}} + +

Welcome home, {{.User.Username}}!

+ +
+ + {{template "page_bottom" .}} + {{template "analytics"}} + + +{{end}} diff --git a/res/template/admin.html b/res/template/admin.html index b98be4f..7903a7f 100644 --- a/res/template/admin.html +++ b/res/template/admin.html @@ -15,6 +15,7 @@ {{template "page_top" .}} +

Admin Panel

{{template "page_bottom" .}} diff --git a/res/template/home.html b/res/template/home.html index f63ea16..8faa20c 100644 --- a/res/template/home.html +++ b/res/template/home.html @@ -55,8 +55,8 @@ font-weight: bold; } .feat_table > div > .cell_background { - flex: 0 0 30%; - min-width: 30%; + flex: 0 0 33%; + min-width: 33%; border-top-left-radius: 0.5em; border-bottom-left-radius: 0.5em; background-position: center; @@ -101,7 +101,7 @@
-
+

What is pixeldrain?

@@ -212,6 +212,19 @@ 1 terabyte
+
+
+ Bandwidth priority +
+
+ Download speed will be throttled during busy periods +
+
+ High priority + bandwidth for files you download and files on your + account +
+
Online file previews diff --git a/svelte/rollup.config.js b/svelte/rollup.config.js index 3a31903..95832cc 100644 --- a/svelte/rollup.config.js +++ b/svelte/rollup.config.js @@ -32,6 +32,7 @@ export default [ "file_viewer", "filesystem", "modal", + "user_home", "user_buckets", "user_file_manager", "admin_panel", diff --git a/svelte/src/admin_panel/AdminPanel.svelte b/svelte/src/admin_panel/AdminPanel.svelte index a344d02..a024bcd 100644 --- a/svelte/src/admin_panel/AdminPanel.svelte +++ b/svelte/src/admin_panel/AdminPanel.svelte @@ -25,42 +25,44 @@ onMount(() => {
- {navigate("status", "Status")}}> - home - Status - - - block - Block files - - {navigate("abuse_reports", "Abuse reports")}}> - flag - User abuse reports - - {navigate("abuse_reporters", "Abuse reporters")}}> - report - E-mail abuse reporters - - {navigate("ip_bans", "IP bans")}}> - remove_circle - IP bans - - - edit - Update global settings - +
+ {navigate("status", "Status")}}> + home + Status + + + block + Block files + + {navigate("abuse_reports", "Abuse reports")}}> + flag + User abuse reports + + {navigate("abuse_reporters", "Abuse reporters")}}> + report + E-mail abuse reporters + + {navigate("ip_bans", "IP bans")}}> + remove_circle + IP bans + + + edit + Update global settings + +
{#if page === "status"} diff --git a/svelte/src/user_home.js b/svelte/src/user_home.js new file mode 100644 index 0000000..7956dc9 --- /dev/null +++ b/svelte/src/user_home.js @@ -0,0 +1,8 @@ +import App from './user_home/Router.svelte'; + +const app = new App({ + target: document.getElementById("page_content"), + props: {} +}); + +export default app; diff --git a/svelte/src/user_home/AccountSettings.svelte b/svelte/src/user_home/AccountSettings.svelte new file mode 100644 index 0000000..ee62a83 --- /dev/null +++ b/svelte/src/user_home/AccountSettings.svelte @@ -0,0 +1,126 @@ + + +
+
+

Change password

+
+
+
+ +

Change e-mail address

+
+
+
+ +

Change name

+
+
+
+
+
+ + diff --git a/svelte/src/user_home/Home.svelte b/svelte/src/user_home/Home.svelte new file mode 100644 index 0000000..ed92575 --- /dev/null +++ b/svelte/src/user_home/Home.svelte @@ -0,0 +1,286 @@ + + +
+
+

Account information

+
    +
  • Username: {window.user.username}
    • +
  • E-mail address: {window.user.email}
    • +
  • + Supporter level: {window.user.subscription.name} + {#if window.user.subscription.type === "patreon"} + (Manage subscription) + {/if} +
      +
    • + Advertisements when viewing files: + {#if window.user.subscription.disable_ad_display}No{:else}Yes{/if} +
      • +
    • + Advertisements on your uploaded files: + {#if window.user.subscription.disable_ads_on_files}No{:else}Yes{/if} +
      • + {#if window.user.subscription.file_expiry_days > 0} +
    • Files expire after {window.user.subscription.file_expiry_days} days
      • + {:else} +
    • Files never expire
      • + {/if} +
    +
    • +
+ + Storage: + {formatDataVolume(storage_space_used, 3)} + out of + {formatDataVolume(window.user.subscription.storage_space, 3)} +
+
+
+
+
+ Direct link bandwidth: + {formatDataVolume(direct_link_bandwidth_used, 3)} + out of + {formatDataVolume(window.user.subscription.direct_linking_bandwidth, 3)} + (More information about direct linking) +
+
+
+
+ +

Exports

+ + +

Statistics

+

+ Here you can see how often your files are viewed, downloaded + and how much bandwidth they consume. The buttons at the top + can be pressed to adjust the timeframe. If you choose 'Day' + the statistics will be updated periodically. No need to + refresh the page. +

+
+
+ + + + + + + +
+ Total usage from {time_start} to {time_end}
+ {formatThousands(total_views)} views, + {formatThousands(total_downloads)} downloads, + {formatDataVolume(total_bandwidth, 3)} bandwidth and + {formatDataVolume(total_direct_link, 3)} direct link bandwidth +
+
+

Views

+

+ A view is counted when someone visits the download page of one + of your files. Views are unique per user per file. +

+
+ +
+

Downloads

+

+ Downloads are counted when a user clicks the download button + on one of your files. It does not matter whether the + download is completed or not, only the start of the download + is counted. +

+
+ +
+

Bandwidth

+

+ This is how much bandwidth your files are using in total. + Bandwidth is used when a file is tranferred from a + pixeldrain server to a user who is downloading the file. + When a 5 MB file is downloaded 8 times it has used 40 MB of + bandwidth. +

+
+ +
+

Direct link bandwidth

+

+ When a file is downloaded without going through pixeldrain's + download page it counts as a direct download. Because direct + downloads cost us bandwidth and don't generate any ad + revenue we have to limit them. When your direct link + bandwidth runs out people will be asked to do a test before + they can download your files. See our + subscription options to get more direct + linking bandwidth. +

+
+ +
+ + diff --git a/svelte/src/user_home/Router.svelte b/svelte/src/user_home/Router.svelte new file mode 100644 index 0000000..61539e7 --- /dev/null +++ b/svelte/src/user_home/Router.svelte @@ -0,0 +1,50 @@ + + +
+ {navigate("", "My home")}}> + home + My home + + {navigate("settings", "Account settings")}}> + settings + Account settings + +
+ + {#if page === ""} + + {:else if page === "settings"} + + {/if} +
+ + diff --git a/svelte/src/util/Chart.svelte b/svelte/src/util/Chart.svelte index b35e789..dcc8b6b 100644 --- a/svelte/src/util/Chart.svelte +++ b/svelte/src/util/Chart.svelte @@ -15,7 +15,7 @@ export const update = () => { return chart_object.update() } -Chart.defaults.global.defaultFontColor = "#b3b3b3"; +Chart.defaults.global.defaultFontColor = "#cccccc"; Chart.defaults.global.defaultFontSize = 15; Chart.defaults.global.defaultFontFamily = "system-ui, sans-serif"; Chart.defaults.global.maintainAspectRatio = false; diff --git a/svelte/src/util/Form.svelte b/svelte/src/util/Form.svelte new file mode 100644 index 0000000..0f34d16 --- /dev/null +++ b/svelte/src/util/Form.svelte @@ -0,0 +1,229 @@ + + +
+ {#if loading} + + {/if} + {#if submitted} + {#if submit_result.messages} +
+ Something went wrong, please correct these errors before continuing:
+
    + {#each submit_result.messages as message} +
  • {message}
    • + {/each} +
+
+ {:else} +
+ {submit_result.message} +
+ {/if} + {/if} + + + + {#each config.fields as field} + + + {#if field.type === "text"} + + {:else if field.type === "number"} + + {:else if field.type === "username"} + + {:else if field.type === "email"} + + {:else if field.type === "current_password"} + + {:else if field.type === "new_password"} + + {:else if field.type === "captcha"} + +
+ {:else if field.type === "radio"} + {#each field.radio_values as val} + +
+ {/each} + {:else if field.type === "description"} + {field.default_value} + {/if} + + {#if field.description} + + + + {/if} + {#if field.separator} + + + + {/if} + {/each} + + + + + +
{field.label}
+ {field.description} +
+
+
+ {#if config.submit_red} + + {:else} + + {/if} +
+
+ + diff --git a/webcontroller/ad_click.go b/webcontroller/ad_click.go index 5eecc59..9bfc068 100644 --- a/webcontroller/ad_click.go +++ b/webcontroller/ad_click.go @@ -16,7 +16,7 @@ func (wc *WebController) serveAdClick(w http.ResponseWriter, r *http.Request, p // The Real IP is used in the API server to determine that the view is not // fake - var api = wc.api.RealIP(util.RemoteAddress(r)) + var api = wc.api.RealIP(util.RemoteAddress(r)).RealAgent(r.UserAgent()) // Log a view on the file if err := api.PostFileView(p.ByName("id"), wc.viewTokenOrBust()); err != nil { diff --git a/webcontroller/file_preview.go b/webcontroller/file_preview.go index 888f863..571c3a2 100644 --- a/webcontroller/file_preview.go +++ b/webcontroller/file_preview.go @@ -21,7 +21,7 @@ func (wc *WebController) serveFilePreview(w http.ResponseWriter, r *http.Request } apiKey, _ := wc.getAPIKey(r) - api := wc.api.Login(apiKey).RealIP(util.RemoteAddress(r)) + api := wc.api.Login(apiKey).RealIP(util.RemoteAddress(r)).RealAgent(r.UserAgent()) file, err := api.GetFileInfo(p.ByName("id")) // TODO: Error handling if err != nil { diff --git a/webcontroller/file_viewer.go b/webcontroller/file_viewer.go index 24a3a6b..d6e3376 100644 --- a/webcontroller/file_viewer.go +++ b/webcontroller/file_viewer.go @@ -78,8 +78,8 @@ func (vd *viewerData) adType(files []pixelapi.ListFile) { adMavenFloat = 3 // Popunders - clickAduPopup = 1 - propellerPopup = 2 + // clickAduPopup = 1 + // propellerPopup = 2 ) // Intn returns a number up to n, but never n itself. So to get a random 0 diff --git a/webcontroller/misc.go b/webcontroller/misc.go index dc35fdc..693a8cd 100644 --- a/webcontroller/misc.go +++ b/webcontroller/misc.go @@ -44,7 +44,7 @@ func (wc *WebController) serveShareXConfig(w http.ResponseWriter, r *http.Reques )), ))) } else { - w.Write([]byte(fmt.Sprintf( + w.Write([]byte( `{ "Version": "12.4.1", "DestinationType": "ImageUploader, TextUploader, FileUploader", @@ -56,6 +56,6 @@ func (wc *WebController) serveShareXConfig(w http.ResponseWriter, r *http.Reques "ThumbnailURL": "https://pixeldrain.com/api/file/$json:id$/thumbnail" } `, - ))) + )) } } diff --git a/webcontroller/templates.go b/webcontroller/templates.go index 0b80b61..3615da4 100644 --- a/webcontroller/templates.go +++ b/webcontroller/templates.go @@ -52,7 +52,7 @@ func (wc *WebController) newTemplateData(w http.ResponseWriter, r *http.Request) APIEndpoint: template.URL(wc.apiURLExternal), // Use the user's IP address for making requests - PixelAPI: wc.api.RealIP(util.RemoteAddress(r)), + PixelAPI: wc.api.RealIP(util.RemoteAddress(r)).RealAgent(r.UserAgent()), Hostname: template.HTML(wc.hostname), URLQuery: r.URL.Query(), @@ -70,7 +70,7 @@ func (wc *WebController) newTemplateData(w http.ResponseWriter, r *http.Request) if err.Error() == "authentication_required" || err.Error() == "authentication_failed" { // Disable API authentication - t.PixelAPI = wc.api.RealIP(util.RemoteAddress(r)) + t.PixelAPI = wc.api.RealIP(util.RemoteAddress(r)).RealAgent(r.UserAgent()) // Remove the authentication cookie log.Debug("Deleting invalid API key") @@ -163,6 +163,9 @@ func (tm *TemplateManager) ParseTemplates(silent bool) { // Parse static resources var file []byte if err = filepath.Walk(tm.resourceDir+"/include", func(path string, f os.FileInfo, err error) error { + if err != nil { + return fmt.Errorf("walk err: %w", err) + } if f == nil || f.IsDir() { return nil } diff --git a/webcontroller/web_controller.go b/webcontroller/web_controller.go index f5ee60e..94050f8 100644 --- a/webcontroller/web_controller.go +++ b/webcontroller/web_controller.go @@ -159,7 +159,8 @@ func New( {PST, "password_reset" /* */, wc.serveForm(wc.passwordResetForm, handlerOpts{NoEmbed: true})}, {GET, "logout" /* */, wc.serveTemplate("logout", handlerOpts{Auth: true, NoEmbed: true})}, {PST, "logout" /* */, wc.serveLogout}, - {GET, "user" /* */, wc.serveTemplate("user_home", handlerOpts{Auth: true})}, + {GET, "user_old" /* */, wc.serveTemplate("user_home", handlerOpts{Auth: true})}, + {GET, "user" /* */, wc.serveTemplate("user_home_svelte", handlerOpts{Auth: true})}, {GET, "user/files" /* */, wc.serveTemplate("user_files", handlerOpts{Auth: true})}, {GET, "user/lists" /* */, wc.serveTemplate("user_lists", handlerOpts{Auth: true})}, {GET, "user/buckets" /* */, wc.serveTemplate("user_buckets", handlerOpts{Auth: true})}, @@ -168,8 +169,9 @@ func New( {GET, "user/export/lists" /**/, wc.serveUserExportLists}, // User account settings - {GET, "user/settings" /* */, wc.serveUserSettings}, - {PST, "user/settings" /* */, wc.serveUserSettings}, + {GET, "user/settings" /* */, wc.serveTemplate("user_home_svelte", handlerOpts{Auth: true})}, + {GET, "user/settings_old" /* */, wc.serveUserSettings}, + {PST, "user/settings_old" /* */, wc.serveUserSettings}, {GET, "user/confirm_email" /* */, wc.serveEmailConfirm}, {GET, "user/password_reset_confirm" /**/, wc.serveForm(wc.passwordResetConfirmForm, handlerOpts{NoEmbed: true})}, {PST, "user/password_reset_confirm" /**/, wc.serveForm(wc.passwordResetConfirmForm, handlerOpts{NoEmbed: true})},