johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type * as deleteOrg from '#lib/lexicons/dev/knotless/deleteOrg.ts';
	import { goto, invalidateAll } from '$app/navigation';
	import { call } from '#lib/data.ts';
	import { urlPath } from '#lib/format.ts';
	import Dialog from '#lib/molecules/Dialog.svelte';
	/**
	 * Ending the organization the account `handle` is, once its handle is
	 * typed, as `knotless org delete` does: every member taken out, every
	 * invitation withdrawn, and the account a plain one again.
	 */
	let { handle }: { handle: string } = $props();
	const home = $derived(`/${urlPath(handle)}`);
	let typed = $state('');
	let problem = $state('');
	let busy = $state(false);
	async function end(e: SubmitEvent) {
		e.preventDefault();
		busy = true;
		problem = '';
		try {
			await call<typeof deleteOrg.main>('dev.knotless.deleteOrg', {});
			await goto(home);
			await invalidateAll();
		} catch (err) {
			problem = (err as Error).message;
		}
		busy = false;
	}
</script>

<div class="org-settings">
	<section class="setting">
		<h2>Members</h2>
		<p class="hint">
			Invite people, change their roles and remove them on <a href="{home}?tab=members"
				>your Members tab</a
			>.
		</p>
	</section>

	<section class="setting danger">
		<h2>Danger zone</h2>
		<div class="danger-row">
			<div>
				<h3>Delete organization</h3>
				<p class="hint">
					Takes out every member and withdraws every invitation. They can no longer push to your
					repositories or read the private ones, except any shared with them directly. Your account
					and repositories stay.
				</p>
			</div>
			<button class="btn danger" type="button" popovertarget="delete-org">Delete</button>
		</div>
	</section>
</div>

<Dialog id="delete-org" title="Delete organization">
	<form onsubmit={end}>
		<label for="delete-org-typed">{`To confirm, type ${handle}`}</label>
		<input
			id="delete-org-typed"
			name="confirm"
			autocapitalize="none"
			autocomplete="off"
			spellcheck="false"
			bind:value={typed}
		/>
		{#if problem}<p class="problem" role="alert">{problem}</p>{/if}
		<button
			class="btn danger solid"
			type="submit"
			disabled={busy || typed !== handle}
			aria-busy={busy}>{busy ? 'Deleting…' : 'Delete organization'}</button
		>
	</form>
</Dialog>