Overhaul user settings page

svelte/src/admin_panel/EmailReporters.svelte

@@ -178,6 +178,7 @@ onMount(get_reporters);
 		on:delete={e => delete_reporter(e.detail)}>
 	</AbuseReporterTable>
 </div>
+<br/>
 
 <style>
 .toolbar {

svelte/src/admin_panel/Home.svelte

@@ -187,6 +187,10 @@ onDestroy(() => {
 <br/>
 <ServerDiagnostics running_since={status.cpu_profile_running_since} on:refresh={() => getStats(lastOrder)}/>
 <br/>
+<a class="button" href="/admin/globals">
+	<i class="icon">edit</i>
+	Global settings
+</a>
 
 <section>
 	<table>

svelte/src/admin_panel/Router.svelte

@@ -1,98 +1,45 @@
 <script>
-import AbuseReporters from "./AbuseReporters.svelte"
 import AbuseReports from "./AbuseReports.svelte"
-import IpBans from "./IPBans.svelte"
+import IPBans from "./IPBans.svelte"
 import Home from "./Home.svelte"
-import { onMount } from "svelte";
 import BlockFiles from "./BlockFiles.svelte";
-import Subscriptions from "./Subscriptions.svelte";
-import Footer from "../layout/Footer.svelte";
+import TabMenu from "../util/TabMenu.svelte";
+import UserManagement from "./UserManagement.svelte";
+import EmailReporters from "./EmailReporters.svelte";
 
-let page = ""
-
-let navigate = (path, title) => {
-	page = path
-	window.document.title = title+" ~ pixeldrain"
-	window.history.pushState(
-		{}, window.document.title, "/admin/"+path
-	)
-}
-
-onMount(() => {
-	let newpage = window.location.pathname.substring(window.location.pathname.lastIndexOf("/")+1)
-	if (newpage === "admin") {
-		newpage = "status"
-	}
-	page = newpage
-})
+let pages = [
+	{
+		path: "/admin",
+		title: "Status",
+		icon: "home",
+		component: Home,
+	}, {
+		path: "/admin/block_files",
+		title: "Block Files",
+		icon: "block",
+		component: BlockFiles,
+	}, {
+		path: "/admin/abuse_reports",
+		title: "User Reports",
+		icon: "flag",
+		component: AbuseReports,
+	}, {
+		path: "/admin/email_reporters",
+		title: "E-mail Reporters",
+		icon: "email",
+		component: EmailReporters,
+	}, {
+		path: "/admin/ip_bans",
+		title: "IP Bans",
+		icon: "remove_circle",
+		component: IPBans,
+	}, {
+		path: "/admin/user_management",
+		title: "User Management",
+		icon: "person",
+		component: UserManagement,
+	},
+]
 </script>
 
-<header>
-	<h1>Admin Panel</h1>
-
-	<div class="tab_bar">
-		<a class="button"
-			href="/admin"
-			class:button_highlight={page === "status"}
-			on:click|preventDefault={() => {navigate("status", "Status")}}>
-			<i class="icon">home</i><br/>
-			Status
-		</a>
-		<a class="button"
-			href="/admin/block_files"
-			class:button_highlight={page === "block_files"}
-			on:click|preventDefault={() => {navigate("block_files", "Block files")}}>
-			<i class="icon">block</i><br/>
-			Block files
-		</a>
-		<a class="button"
-			href="/admin/abuse_reports"
-			class:button_highlight={page === "abuse_reports"}
-			on:click|preventDefault={() => {navigate("abuse_reports", "Abuse reports")}}>
-			<i class="icon">flag</i><br/>
-			User reports
-		</a>
-		<a class="button"
-			href="/admin/abuse_reporters"
-			class:button_highlight={page === "abuse_reporters"}
-			on:click|preventDefault={() => {navigate("abuse_reporters", "Abuse reporters")}}>
-			<i class="icon">email</i><br/>
-			E-mail reporters
-		</a>
-		<a class="button"
-			href="/admin/ip_bans"
-			class:button_highlight={page === "ip_bans"}
-			on:click|preventDefault={() => {navigate("ip_bans", "IP bans")}}>
-			<i class="icon">remove_circle</i><br/>
-			IP bans
-		</a>
-		<a class="button"
-			href="/admin/subscriptions"
-			class:button_highlight={page === "subscriptions"}
-			on:click|preventDefault={() => {navigate("subscriptions", "Subscriptions")}}>
-			<i class="icon">receipt_long</i><br/>
-			Subscriptions
-		</a>
-		<a class="button" href="/admin/globals">
-			<i class="icon">edit</i><br/>
-			Global settings
-		</a>
-	</div>
-</header>
-
-<div id="page_content" class="page_content">
-	{#if page === "status"}
-		<Home></Home>
-	{:else if page === "block_files"}
-		<BlockFiles></BlockFiles>
-	{:else if page === "abuse_reports"}
-		<AbuseReports></AbuseReports>
-	{:else if page === "abuse_reporters"}
-		<AbuseReporters></AbuseReporters>
-	{:else if page === "ip_bans"}
-		<IpBans></IpBans>
-	{:else if page === "subscriptions"}
-		<Subscriptions></Subscriptions>
-	{/if}
-</div>
-<Footer/>
+<TabMenu pages={pages} title="Admin Panel"/>

svelte/src/admin_panel/UserManagement.svelte

@@ -1,7 +1,7 @@
 <script>
 import { onMount } from "svelte";
 import Euro from "../util/Euro.svelte";
-import Form from "./../util/Form.svelte";
+import Form from "../util/Form.svelte";
 import LoadingIndicator from "../util/LoadingIndicator.svelte";
 
 let loading = true
@@ -176,6 +176,11 @@ onMount(get_coupons)
 <LoadingIndicator loading={loading}/>
 
 <section>
+	<h2>Impersonate user</h2>
+	<div class="highlight_shaded">
+		<Form config={impersonate_form}></Form>
+	</div>
+
 	<h2>Give user credit</h2>
 	<p>
 		This adds credit to a user's account. You only need to enter one of
@@ -185,11 +190,6 @@ onMount(get_coupons)
 		<Form config={credit_form}></Form>
 	</div>
 
-	<h2>Impersonate user</h2>
-	<div class="highlight_shaded">
-		<Form config={impersonate_form}></Form>
-	</div>
-
 	<h2>Create coupon codes</h2>
 	<div class="highlight_shaded">
 		<Form config={coupon_form}></Form>