diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/lib/apiServer.js | 4 | ||||
| -rw-r--r-- | ui/lib/components/Invite.svelte | 40 | ||||
| -rw-r--r-- | ui/routes/(login)/invite/[invite]/+page.svelte | 8 | ||||
| -rw-r--r-- | ui/routes/+layout.svelte | 2 |
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> |