coolify/src/routes/register/index.svelte

<script lang="ts">
	export let userCount: number;

	import { browser } from '$app/env';
	import { goto } from '$app/navigation';
	import { session } from '$app/stores';
	import { post } from '$lib/api';
	import { errorNotification } from '$lib/form';
	import { onMount } from 'svelte';

	let loading = false;
	let emailEl;
	let email, password, passwordCheck;

	if (browser && $session.userId) {
		goto('/');
	}
	onMount(() => {
		emailEl.focus();
	});
	async function handleSubmit() {
		if (password !== passwordCheck) {
			return errorNotification('Passwords do not match.');
		}
		loading = true;
		try {
			await post(`/login.json`, {
				email: email.toLowerCase(),
				password,
				isLogin: false
			});
			return window.location.replace('/');
		} catch ({ error }) {
			return errorNotification(error);
		} finally {
			loading = false;
		}
	}
</script>

<div class="icons fixed top-0 left-0 m-3 cursor-pointer" on:click={() => goto('/')}>
	<svg
		xmlns="http://www.w3.org/2000/svg"
		class="h-6 w-6"
		viewBox="0 0 24 24"
		stroke-width="1.5"
		stroke="currentColor"
		fill="none"
		stroke-linecap="round"
		stroke-linejoin="round"
	>
		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
		<line x1="5" y1="12" x2="19" y2="12" />
		<line x1="5" y1="12" x2="11" y2="18" />
		<line x1="5" y1="12" x2="11" y2="6" />
	</svg>
</div>
<div class="flex h-screen flex-col items-center justify-center">
	{#if $session.userId}
		<div class="flex justify-center px-4 text-xl font-bold">Already logged in...</div>
	{:else}
		<div class="flex justify-center px-4">
			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
				<div class="text-6xl font-bold border-gradient w-48 mx-auto border-b-4">Coolify</div>
				<div class="text-xs text-center font-bold pb-10">v{$session.version}</div>
				<input
					type="email"
					name="email"
					placeholder="Email"
					autocomplete="off"
					required
					bind:this={emailEl}
					bind:value={email}
				/>
				<input
					type="password"
					name="password"
					placeholder="Password"
					bind:value={password}
					required
				/>
				<input
					type="password"
					name="passwordCheck"
					placeholder="Password again"
					bind:value={passwordCheck}
					required
				/>

				<div class="flex space-x-2 h-8 items-center justify-center pt-8">
					<button type="submit" class="hover:bg-coollabs-100 text-white bg-coollabs"
						>Register</button
					>
				</div>
			</form>
		</div>
		{#if userCount === 0}
			<div class="pt-5">
				You are registering the first user. It will be the administrator of your Coolify instance.
			</div>
		{/if}
	{/if}
</div>