johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts" module>
	/** The id the account menu opens this dialog by. */
	export const START_ORG = 'start-org';
</script>

<script lang="ts">
	import { goto } from '$app/navigation';
	import { urlPath } from '#lib/format.ts';
	import Dialog from '#lib/molecules/Dialog.svelte';
	/**
	 * What starting an organization means, for the account `handle`, from
	 * its menu: its own account becomes one, or one made for it does; then
	 * on to its Members tab to invite people.
	 */
	let { handle }: { handle: string } = $props();
	async function start() {
		document.getElementById(START_ORG)?.hidePopover();
		await goto(`/${urlPath(handle)}?tab=members`);
	}
</script>

<Dialog id={START_ORG} class="start-org" title="Start an organization">
	<p class="lead">
		An organization is an account you share. The people you invite work on its repositories with
		you.
	</p>
	<ol class="steps">
		<li>
			<b>This account becomes the organization.</b>
			{`${handle} keeps its name, login and repositories. Nothing moves.`}
		</li>
		<li>
			<b>You invite people by handle.</b>
			{`Once they accept, they can push to every repository ${handle} owns, and read the private ones.`}
		</li>
		<li>
			<b>You choose a role for each.</b> Members push. Admins push and also invite and remove people.
		</li>
		<li>
			<b>Each member chooses who sees it.</b>
			{`Their membership shows on ${handle}'s profile, or only to other members.`}
		</li>
	</ol>
	<p class="aside">
		<b>Want it under its own name?</b> The organization can be any account, not only this one. Make an
		account for it on any PDS, add it with Add account in your menu, switch to it, and start the organization
		there.
	</p>
	<p class="hint">
		{`Changed your mind? Delete the organization in settings. Everyone is taken out and ${handle} is a plain account again.`}
	</p>
	<div class="actions">
		<button class="btn" type="button" popovertarget={START_ORG} popovertargetaction="hide"
			>Cancel</button
		>
		<button class="btn primary" type="button" onclick={start}>Invite people</button>
	</div>
</Dialog>