Overhaul user settings page

svelte/src/user_home/EmbeddingControls.svelte

@@ -0,0 +1,88 @@
+<script>
+import { onMount } from "svelte";
+import LoadingIndicator from "../util/LoadingIndicator.svelte";
+import SuccessMessage from "../util/SuccessMessage.svelte";
+
+let loading = false
+let success_message
+
+// Embedding settings
+let embed_domains = ""
+
+const save_embed = async () => {
+	loading = true
+	const form = new FormData()
+	form.append("domains", embed_domains)
+
+	try {
+		const resp = await fetch(
+			window.api_endpoint+"/user/file_embed",
+			{ method: "PUT", body: form }
+		);
+		if(resp.status >= 400) {
+			let json = await resp.json()
+			console.debug(json)
+			throw json.message
+		}
+
+		success_message.set(true, "Changes saved")
+	} catch(err) {
+		success_message.set(false, err)
+	} finally {
+		loading = false
+	}
+}
+
+onMount(() => {
+	embed_domains = window.user.file_embed_domains
+})
+
+</script>
+
+<LoadingIndicator loading={loading}/>
+
+<section>
+	<h2>Embedding controls</h2>
+	<SuccessMessage bind:this={success_message}></SuccessMessage>
+	{#if !window.user.subscription.file_viewer_branding}
+		<div class="highlight_red">
+			Sharing settings are not available for your account. Subscribe to
+			the Persistence plan or higher to enable these features.
+		</div>
+	{:else if !window.user.hotlinking_enabled}
+		<div class="highlight_red">
+			To use embedding restrictions bandwidth sharing needs to be enabled.
+			Enable bandwidth sharing on the
+			<a href="/user/sharing/bandwidth">bandwidth sharing page</a>.
+		</div>
+	{/if}
+	<p>
+		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.
+	</p>
+	<p>
+		The list should be formatted as a list of domain names separated by a
+		space. Like this: 'pixeldrain.com google.com twitter.com'
+	</p>
+	<form class="form_row" on:submit|preventDefault={save_embed}>
+		<div class="shrink">Domain names:</div>
+		<input class="grow" bind:value={embed_domains} type="text"/>
+		<button class="shrink" action="submit"><i class="icon">save</i> Save</button>
+	</form>
+</section>
+
+<style>
+.form_row {
+	display: inline-flex;
+	flex-direction: row;
+	width: 100%;
+	align-items: center;
+}
+.grow {
+	flex: 1 1 auto;
+}
+.shrink {
+	flex: 0 0 auto;
+}
+</style>