fnx_web/svelte/src/user_home/ConnectApp.svelte

<script>
import { onMount } from "svelte";
import CopyButton from "layout/CopyButton.svelte";
import { loading_finish, loading_start } from "lib/Loading";

let app_name = $state("")
let api_key = $state("")
const create_key = async () => {
	loading_start()
	try {
		let form = new FormData()
		form.append("app_name", app_name)

		const resp = await fetch(
			window.api_endpoint+"/user/session",
			{
				method: "POST",
				body: form,
			}
		);
		if(resp.status >= 400) {
			throw new Error(await resp.text());
		}

		api_key = (await resp.json()).auth_key
	} catch (err) {
		alert("Failed to create new API key! "+err)
	} finally {
		loading_finish()
	}
}

let show_key = $state("")
const toggle_show_key = () => {
	if (show_key === "") {
		show_key = api_key
	} else {
		show_key = ""
	}
}

onMount(() => {
	let app = new URL(window.location.href).searchParams.get("app")
	if (app) {
		app_name = app
	}
})
</script>

<section>
	<!-- Show a back button if an app is selected -->
	{#if app_name}
		<a href="/user/connect_app" class="button">
			<i class="icon">arrow_back</i>
			Back to apps
		</a>
	{/if}

	{#if app_name === "jdownloader"}
		<h2>
			Connect
			<img src="/res/img/jdownloader.png" alt="JDownloader logo" class="app_icon_small"/>
			JDownloader to your Nova account
		</h2>
		<p>
			JDownloader is a software program which makes it easier to download
			things from the web. You can connect JDownloader to your Nova
			account to benefit from faster download speed and other Nova Pro
			features.
		</p>
		<h3>Step 1: Install JDownloader</h3>
		<p>
			Download JDownloader from its website:
			<a href="https://jdownloader.org/download/index" target="_blank"
			rel="noreferrer">jdownloader.org</a>. Open JDownloader from your
			start menu after the installation is complete.
		</p>
		<h3>Step 2: Open the account manager</h3>
		<div class="center">
			<img src="/res/img/jdownloader_account_manager.webp" alt="Go to settings, then Account Manager, click Add account"/>
		</div>
		<h3>Step 3: Generate an app key</h3>
		<p>
			To connect JDownloader to Nova you need to generate an API
			key and enter it in JDownloader's Account Manager.
			<br/>
			<strong>Do not show the generated key to anyone</strong>, it can
			be used to gain access to your Nova account!
		</p>

		{#if !api_key}
			<div class="center">
				<button class="button_highlight" onclick={create_key}>
					<i class="icon">add</i>
					Generate key
				</button>
			</div>
		{:else}
			<h4>Key created</h4>

			<div class="copy_container">
				<CopyButton text={api_key}>Copy key to clipboard</CopyButton>
				<button onclick={toggle_show_key} class="copy_button" class:button_highlight={show_key !== ""}>
					<i class="icon">visibility</i>
					{#if show_key === ""}
						Show key
					{:else}
						Hide key
					{/if}
				</button>
				<input bind:value={show_key} class="copy_textarea" type="text" placeholder="Your key will show up here" disabled={show_key === ""}/>
			</div>
		{/if}

		<h3>Step 4: Add the key to JDownloader</h3>
		<p>
			Paste the key in JDownloader to authenticate the app.
		</p>
		<div class="center">
			<img src="/res/img/jdownloader_add_key.webp" alt="Go to settings, then Account Manager, click Add account"/>
		</div>
		<p>
			Click Save and you're done! You can now download files from
			Nova with JDownloader.
		</p>
	{:else if app_name === "sharex"}
		<h2>
			Connect
			<img src="/res/img/sharex.png" alt="ShareX logo" class="app_icon_small"/>
			ShareX to your Nova account
		</h2>
		<p>
			ShareX is a Screen capture, file sharing and productivity tool.
			Nova is supported as a custom uploader. You can <a
			href="https://getsharex.com/" target="_blank" rel="noreferrer">get
			ShareX here</a>.
		</p>
		<p>
			Here you can download our custom ShareX uploader which uses
			Nova to upload your files. This uploader is configured to
			upload files to your personal Nova account. <strong>Do not
			share the configuration file with anyone</strong>, it contains
			your account credentials.
		</p>

		<div class="center">
			<a href="/misc/sharex/nova.storage.sxcu" class="button button_highlight">
				<i class="icon small">save</i>
				Download ShareX Uploader
			</a>
		</div>

		<h3>Setting Nova as default uploader</h3>
		<p>
			Download the uploader config and choose 'Open file'
			<br/>
			<img src="/res/img/sharex_download.png" style="max-width: 100%;" alt=""/><br/>
			Set nova.storage as active uploader. Choose Yes
			<br/>
			<img src="/res/img/sharex_default.png" style="max-width: 100%;" alt=""/><br/>
		</p>
	{:else}
		<h2>Connect an app to your Nova account</h2>
		<ul>
			<li>
				<a href="?app=jdownloader" class="button">
					<img src="/res/img/jdownloader.png" alt="JDownloader logo" class="app_icon"/>
					Connect JDownloader
				</a>
			</li>
			<li>
				<a href="?app=sharex" class="button">
					<img src="/res/img/sharex.png" alt="ShareX logo" class="app_icon"/>
					Connect ShareX
				</a>
			</li>
		</ul>
	{/if}
</section>

<style>
.app_icon {
	height: 1.6em;
	vertical-align: middle;
}
.app_icon_small {
	height: 1em;
	vertical-align: middle;
}

.center {
	text-align: center;
}
.center > img {
	max-width: 100%;
}
.copy_container {
	display: flex;
}
.copy_textarea {
	flex: 1 1 auto;
}
.copy_button {
	flex: 0 0 auto;
}
</style>