<script lang="ts">
	import { auth, login, t } from "./app.svelte.js";
	import Modal from "./Modal.svelte";

	let server = $state(""),
		user = $state(""),
		password = $state("");
</script>

<Modal open={!auth.ok} title={t("login")} closable={false}>
	<form
		onsubmit={(e) => {
			e.preventDefault();
			login(server, user, password);
		}}
	>
		<input
			bind:value={server}
			placeholder={t("server_placeholder")}
			required
			autocomplete="url"
		/>
		<input
			bind:value={user}
			placeholder={t("username_placeholder")}
			required
			autocomplete="username"
		/>
		<input
			bind:value={password}
			type="password"
			placeholder={t("password_placeholder")}
			autocomplete="current-password"
		/>
		<button type="submit" disabled={auth.busy}
			>{auth.busy ? t("busy") : t("login")}</button
		>
		<p class="err">
			<a
				target="_blank"
				href="https://tangled.org/devins.page/tinysub#i-cant-log-in"
				class="auth-notice">{t("login_notice")}</a
			>
		</p>
		{#if auth.err}<p class="err">{auth.err}</p>{/if}
	</form>
</Modal>

<style>
	form {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		width: 18rem;
	}
	.err {
		color: red;
		margin: 0;
	}
	:global(body.is-tauri) .auth-notice {
		display: none;
	}
</style>
