3 files changed, 57 insertions, 0 deletions
diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js
index 76ecb87..3910dab 100644
--- a/ui/lib/apiServer.js
+++ b/ui/lib/apiServer.js
@@ -42,6 +42,18 @@ export async function deleteMessage(messageId) {
   // TODO
 }
 
+export async function getInvite(inviteId) {
+  return apiServer.get(`/invite/${inviteId}`);
+}
+
+export async function acceptInvite(inviteId, username, password) {
+  const data = {
+    name: username,
+    password,
+  };
+  return apiServer.post(`/invite/${inviteId}`, data);
+}
+
 export function subscribeToEvents(resume_point) {
   const eventsUrl = new URL('/api/events', window.location);
   eventsUrl.searchParams.append('resume_point', resume_point);
diff --git a/ui/routes/(login)/invite/[invite]/+page.js b/ui/routes/(login)/invite/[invite]/+page.js
new file mode 100644
index 0000000..d90f542
--- /dev/null
+++ b/ui/routes/(login)/invite/[invite]/+page.js
@@ -0,0 +1,17 @@
+import { getInvite } from '$lib/apiServer';
+
+export async function load({ params }) {
+	let { invite } = params;
+	let response = await getInvite(invite);
+	switch (response.status) {
+		case 200:
+			return response.data;
+			break;
+		case 404:
+			return null;
+			break;
+		default:
+			// TODO: display error.
+			break;
+	}
+}
diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
new file mode 100644
index 0000000..eea05fc
--- /dev/null
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -0,0 +1,28 @@
+<script>
+    import { goto } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { acceptInvite } from '$lib/apiServer';
+
+    $: inviteId = $page?.params?.invite;
+    $: invite = $page.data;
+
+    import LogIn from '$lib/components/LogIn.svelte';
+
+    let disabled;
+    let username;
+    let password;
+
+    async function onSubmit() {
+        disabled = true;
+        const response = await acceptInvite(inviteId, username, password);
+        if (200 <= response.status && response.status < 300) {
+            username = '';
+            password = '';
+            goto('/');
+        }
+        disabled = false;
+    }
+</script>
+
+<p>Hi there! {invite.issuer.name} invites you to the conversation.</p>
+<LogIn bind:disabled bind:username bind:password on:submit={onSubmit} />