Add signup page

Related to #2

src/App.svelte

@@ -12,6 +12,7 @@
 	import NewDatabase from "./routes/NewDatabase.svelte"
 	import { AYB_WEB_VERSION } from "./lib/consts"
 	import Support from "./routes/docs/Support.svelte"
+	import Signup from "./routes/Signup.svelte";
 </script>
 
 <Router>
@@ -39,6 +40,7 @@
 			{:else}
 				<Route path="/"><Redirect to="/auth/login" /></Route>
 				<Route path="/auth/login"><Login /></Route>
+				<Route path="/auth/signup"><Signup /></Route>
 				<Route path="/auth/confirm"><Confirm token={undefined} /></Route>
 				<Route path="/auth/confirm/:token" let:params>
 					<Confirm token={params.token} />

src/lib/api/index.ts

@@ -74,6 +74,17 @@ export async function login(entity: string, auth: UserInstanceData) {
 	})
 }
 
+export async function register(username: string, email: string, auth: UserInstanceData) {
+	await request("/v1/register", auth, {
+		headers: {
+			"entity-type": "user",
+			"entity": username,
+			"email-address": email,
+		},
+		method: "POST",
+	})
+}
+
 export async function confirm(token: string, auth: UserInstanceData) {
 	return request<UserToken>("/v1/confirm", auth, {
 		headers: {
@@ -83,7 +94,6 @@ export async function confirm(token: string, auth: UserInstanceData) {
 	})
 }
 
-// TODO(sofiaritz): Check method
 export async function createDatabase(
 	entity: string,
 	slug: string,

src/routes/Home.svelte

@@ -50,11 +50,11 @@
 				<Link
 					to="/database/new"
 					role="button"
-					class="flex h-60 w-full flex-col items-center justify-center gap-3 rounded border border-gray-300 p-2 text-black no-underline hover:text-black"
+					class="flex h-60 w-full flex-col items-center justify-center gap-3 rounded border border-gray-300 dark:border-gray-800 p-2 text-black no-underline hover:text-black"
 				>
-					<span class="text-4xl">+</span>
-					<h2 class="text-xl font-bold">Create a new database</h2>
-					<span class="block text-gray-500"
+					<span class="text-4xl dark:text-white">+</span>
+					<h2 class="text-xl font-bold dark:text-white">Create a new database</h2>
+					<span class="block text-gray-500 dark:text-gray-400"
 						>The instance owner hasn't set any limits for your account</span
 					>
 				</Link>

src/routes/Login.svelte

@@ -70,6 +70,7 @@
 				<Input name="username" id="username-input" placeholder="alice" />
 			</label>
 			<Button type="submit">Send login link</Button>
+			<Link to="/auth/signup">Signup instead?</Link>
 		</form>
 	{/if}
 </div>

src/routes/Signup.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { createForm } from "felte"
+  import { Button, Input } from "../lib/components/common"
+  import { login, register } from "../lib/api";
+  import { unwrapResponse } from "../lib/api"
+  import { Link } from "svelte-routing"
+
+  enum State {
+    Waiting,
+    EmailSent,
+    Error,
+  }
+
+  let state = State.Waiting
+  let error: any
+
+  const { form } = createForm({
+    onSubmit: async (values) => {
+      return unwrapResponse(
+        await register(values.username, values.email, {
+          endpoint: values["instance"],
+          entity: values["username"],
+        }),
+      )
+    },
+    onSuccess: () => {
+      state = State.EmailSent
+    },
+    onError: (err) => {
+      error = err
+      state = State.Error
+      console.error(err)
+    },
+  })
+</script>
+
+<div class="md:w-8/12">
+  {#if state === State.EmailSent}
+    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Check your mailbox</h1>
+    <div>
+      <p>We have sent you an e-mail with the confirmation link.</p>
+      <p>
+        You may received a CLI command instead, if that's the case follow this link: <Link
+        to="/auth/confirm">/auth/confirm</Link
+      >
+      </p>
+    </div>
+  {:else if state === State.Error}
+    <h1 class="text-2xl text-red">Error</h1>
+    <span>{error.toString()}</span>
+  {:else if state === State.Waiting}
+    <h1 class="mb-6 text-2xl font-bold text-gray-900 dark:text-white">Signup</h1>
+    <form class="flex flex-col gap-3.5" use:form>
+      <label class="block" for="instance-input">
+        Instance
+        <Input
+          type="url"
+          name="instance"
+          id="instance-input"
+          placeholder="https://ayb.sofiaritz.com"
+        />
+        <span class="text-sm text-gray-700 dark:text-gray-400"
+        >You can find an updated instance list at <a
+          href="https://git.sofiaritz.com/sofia/wip">ayb.host/instances</a
+        ></span
+        >
+      </label>
+      <label class="block" for="username-input">
+        Username
+        <Input name="username" id="username-input" placeholder="alice" />
+      </label>
+      <label class="block" for="email-input">
+        E-mail
+        <Input name="email" id="email-input" placeholder="[email protected]" />
+      </label>
+      <Button type="submit">Send login link</Button>
+      <Link to="/auth/login">Login instead?</Link>
+    </form>
+  {/if}
+</div>