windmill/frontend/src/routes/user/create_workspace@user.svelte

<script lang="ts">
	import { goto } from '$app/navigation'

	import { UserService, WorkspaceService } from '$lib/gen'
	import { sendUserToast } from '$lib/utils'
	import { logoutWithRedirect } from '$lib/logout'

	import { page } from '$app/stores'
	import { usersWorkspaceStore, workspaceStore } from '$lib/stores'
	import CenteredModal from '$lib/components/CenteredModal.svelte'

	let id = ''
	let name = ''
	let username = ''
	let domain = ''

	let errorId = ''
	let errorUser = ''

	$: id = name.toLowerCase().replace(/\s/gi, '-')

	$: validateName(id)
	$: validateUsername(username)

	async function validateName(id: string): Promise<void> {
		let exists = await WorkspaceService.existsWorkspace({ requestBody: { id } })
		if (exists) {
			errorId = 'id already exists'
		} else if (id != '' && !/^\w+(-\w+)*$/.test(id)) {
			errorId = 'id can only contain letters, numbers and dashes and must not finish by a dash'
		} else {
			errorId = ''
		}
	}

	async function validateUsername(username: string): Promise<void> {
		if (username != '' && !/^\w+$/.test(username)) {
			errorUser = 'username can only contain letters and numbers'
		} else {
			errorUser = ''
		}
	}

	async function createWorkspace(): Promise<void> {
		await WorkspaceService.createWorkspace({
			requestBody: {
				id,
				name,
				username,
				domain
			}
		})
		sendUserToast(`Successfully created workspace id: ${id}`)
		usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces())
		workspaceStore.set(id)
		goto('/')
	}

	function handleKeyUp(event: KeyboardEvent) {
		const key = event.key || event.keyCode
		if (key === 13 || key === 'Enter') {
			event.preventDefault()
			createWorkspace()
		}
	}

	async function loadWorkspaces() {
		if (!$usersWorkspaceStore) {
			try {
				usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces())
			} catch {}
		}
		if (!$usersWorkspaceStore) {
			logoutWithRedirect($page.url.pathname + $page.url.search)
		}
	}

	loadWorkspaces()

	UserService.globalWhoami().then((x) => {
		if (x.name) {
			username = x.name.split(' ')[0]
		} else {
			username = x.email.split('@')[0]
		}
		username = username.toLowerCase()
	})
</script>

<CenteredModal title="Create a new workspace">
	{#if $page.url.hostname != 'app.windmill.dev'}
		<div class="bg-blue-100 border-l-4 border-blue-600 text-blue-700 p-4 m-4" role="alert">
			<p class="font-bold">
				More than 1 user-created workspace for self-hosted will require a team or enterprise license
				- Unlimited during beta
			</p>
		</div>
	{/if}

	<label class="block pb-2">
		<span class="text-gray-700">workspace name:</span>
		<input bind:value={name} class="default-input" />
	</label>
	<label class="block pb-2">
		<span class="text-gray-700">workspace id:</span>
		{#if errorId}
			<span class="text-red-500 text-xs">{errorId}</span>
		{/if}
		<input bind:value={id} class="default-input" class:input-error={errorId != ''} />
	</label>
	<label class="block pb-2">
		<span class="text-gray-700">your username in that workspace:</span>
		{#if errorUser}
			<span class="text-red-500 text-xs">{errorId}</span>
		{/if}
		<input bind:value={username} on:keyup={handleKeyUp} class="default-input" />
	</label>
	<div class="flex flex-row justify-between pt-4">
		<a href="/user/workspaces">&leftarrow; Back to workspaces</a>
		<button
			disabled={errorId != '' || errorUser != '' || !name || !username || !id}
			class="default-button"
			type="button"
			on:click={createWorkspace}
		>
			Create workspace
		</button>
	</div>
</CenteredModal>