Add coupon management functions

svelte/src/admin_panel/Subscriptions.svelte

@@ -1,7 +1,10 @@
 <script>
 import { onMount } from "svelte";
-
+import Euro from "../util/Euro.svelte";
 import Form from "./../util/Form.svelte";
+import Spinner from "../util/Spinner.svelte";
+
+let loading = true
 
 let credit_form = {
 	name: "give_credit",
@@ -54,17 +57,140 @@ let credit_form = {
 		return {success: true, message: "Success: Granted user "+fields.credit+" credits"}
 	},
 }
+
+let coupon_form = {
+	name: "make_coupon",
+	fields: [
+		{
+			name: "id",
+			label: "Code",
+			type: "text",
+			default_value: "",
+		}, {
+			name: "credit",
+			label: "Credit",
+			type: "decimal",
+			default_value: 0,
+		}, {
+			name: "uses",
+			label: "Uses",
+			type: "number",
+			default_value: "",
+		},
+	],
+	submit_label: `<i class="icon">send</i> Create`,
+	on_submit: async fields => {
+		const form = new FormData()
+		form.append("id", fields.id)
+		form.append("credit", fields.credit*1e6)
+		form.append("uses", fields.uses)
+
+		const resp = await fetch(
+			window.api_endpoint+"/coupon",
+			{ method: "POST", body: form }
+		);
+		if(resp.status >= 400) {
+			return {error_json: await resp.json()}
+		}
+
+		get_coupons()
+		return {success: true, message: "Success: Coupon created"}
+	},
+}
+
+let coupons = []
+const get_coupons = async () => {
+	loading = true;
+	try {
+		const resp = await fetch(window.api_endpoint+"/coupon");
+		if(resp.status >= 400) {
+			throw new Error(resp.text());
+		}
+		coupons = await resp.json()
+		coupons.sort((a, b) => {
+			return a.id.localeCompare(b.id)
+		});
+	} catch (err) {
+		alert(err);
+	} finally {
+		loading = false;
+	}
+};
+const delete_coupon = async (id) => {
+	if (!confirm("Delete this coupon code?\n\n"+id)) {
+		return
+	}
+
+	try {
+		const resp = await fetch(
+			window.api_endpoint+"/coupon/"+encodeURI(id),
+			{ method: "DELETE" }
+		);
+		if(resp.status >= 400) {
+			throw new Error(await resp.text());
+		}
+	} catch (err) {
+		alert("Failed to delete ban! "+err)
+	}
+
+	get_coupons();
+}
+onMount(get_coupons)
+
 </script>
 
-<div>
-	<div class="limit_width">
-		<h2>Give user credit</h2>
-		<p>
-			This adds credit to a user's account. You only need to enter one of
-			the user id, username or email.
-		</p>
-		<div class="highlight_dark">
-			<Form config={credit_form}></Form>
+<div class="limit_width">
+	{#if loading}
+		<div class="spinner_container">
+			<Spinner />
 		</div>
+	{/if}
+	<h2>Give user credit</h2>
+	<p>
+		This adds credit to a user's account. You only need to enter one of
+		the user id, username or email.
+	</p>
+	<div class="highlight_dark">
+		<Form config={credit_form}></Form>
+	</div>
+
+	<h2>Create coupon codes</h2>
+	<div class="highlight_dark">
+		<Form config={coupon_form}></Form>
+	</div>
+
+	<h3>Active coupon codes</h3>
+	<div class="table_scroll">
+		<table style="text-align: left;">
+			<tr>
+				<td>ID</td>
+				<td>Uses</td>
+				<td>Credit</td>
+				<td></td>
+			</tr>
+			{#each coupons as row (row.id)}
+				<tr>
+					<td>{row.id}</td>
+					<td>{row.uses}</td>
+					<td><Euro amount={row.credit}></Euro></td>
+					<td>
+						<button on:click|preventDefault={() => {delete_coupon(row.id)}} class="button button_red round">
+							<i class="icon">delete</i>
+						</button>
+					</td>
+				</tr>
+			{/each}
+		</table>
 	</div>
 </div>
+
+<style>
+.spinner_container {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	height: 100px;
+	width: 100px;
+	z-index: 1000;
+}
+</style>

svelte/src/file_viewer/EmbedWindow.svelte

@@ -164,6 +164,14 @@ const example = () => {
 				Deep sea
 			</button>
 		</div>
+	{:else}
+		<h3>Direct link</h3>
+		<p>
+			You can directly download the file from this link without using the
+			file viewer:
+			<br/>
+			{domain_url()}{file.get_href}
+		</p>
 	{/if}
 
 	<h3>Code</h3>
@@ -171,7 +179,7 @@ const example = () => {
 		Put this code in your website to embed the file.
 	</p>
 	<div class="center">
-		<textarea bind:value={embed_html} style="width: 95%; height: 4em;"></textarea>
+		<textarea bind:value={embed_html} style="width: 96%; height: 4em;"></textarea>
 		<br/>
 		<button on:click={copy} class:button_highlight={copy_status === "success"} class:button_red={copy_status === "error"}>
 			<i class="icon">content_copy</i>