Take a swing at putting an invite UI in place.

4 files changed, 52 insertions, 2 deletions

diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js
index 3910dab..db554e2 100644
--- a/ui/lib/apiServer.js
+++ b/ui/lib/apiServer.js
@@ -42,6 +42,10 @@ export async function deleteMessage(messageId) {
   // TODO
 }
 
+export async function createInvite(inviteId) {
+  return apiServer.post(`/invite`, {});
+}
+
 export async function getInvite(inviteId) {
   return apiServer.get(`/invite/${inviteId}`);
 }
diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte
new file mode 100644
index 0000000..f4babad
--- /dev/null
+++ b/ui/lib/components/Invite.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { base } from '$app/paths';
+	import { createInvite } from '$lib/apiServer';
+	import { clipboard } from '@skeletonlabs/skeleton';
+
+	let invite = null;
+	$: inviteUrl = invite ? new URL(`/invite/${invite.id}`, document.location) : null;
+	$: inviteUrl, console.log("invite url", inviteUrl);
+
+	async function onSubmit() {
+		let response = await createInvite();
+		if (response.status == 200) {
+			invite = response.data;
+		}
+		console.log("base url", base);
+	}
+
+	async function onReset() {
+		invite = null;
+	}
+</script>
+
+<form
+	on:submit|preventDefault={onSubmit}
+	on:reset|preventDefault={onReset}>
+	{#if inviteUrl}
+	<button
+		class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
+		use:clipboard={inviteUrl}
+		type="reset">
+		Copy Invite
+	</button>
+	{:else}
+	<button
+		class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
+		type="submit">
+		Invite
+	</button>
+	{/if}
+</form>
diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index b9a4a97..798dfb7 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -23,8 +23,12 @@
 </script>
 
 {#await data}
-<p>Loading invitation…</p>
+<div class="card m-4 p-4">
+    <p>Loading invitation…</p>
+</div>
 {:then { invite }}
-<p>Hi there! {invite.issuer} invites you to the conversation.</p>
+<div class="card m-4 p-4">
+    <p>Hi there! {invite.issuer} invites you to the conversation.</p>
+</div>
 <LogIn bind:disabled bind:username bind:password on:submit={onSubmit} />
 {/await}
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 7b99d62..fdd3883 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -4,6 +4,7 @@
 
   import { currentUser } from '$lib/store';
   import LogOut from '$lib/components/LogOut.svelte';
+  import Invite from '$lib/components/Invite.svelte';
 </script>
 
 <div id="app">
@@ -12,6 +13,7 @@
             <a href="/">understory</a>
         <svelte:fragment slot="trail">
             {#if $currentUser}
+                <Invite />
                 <LogOut />
             {/if}
         </svelte:fragment>