summaryrefslogtreecommitdiff
path: root/ui/routes
diff options
context:
space:
mode:
Diffstat (limited to 'ui/routes')
-rw-r--r--ui/routes/(app)/+layout.svelte16
-rw-r--r--ui/routes/(app)/ch/[channel]/+page.svelte28
-rw-r--r--ui/routes/(app)/me/+page.svelte31
-rw-r--r--ui/routes/(login)/invite/[invite]/+page.svelte18
-rw-r--r--ui/routes/(login)/login/+page.svelte18
-rw-r--r--ui/routes/(login)/setup/+page.svelte18
6 files changed, 74 insertions, 55 deletions
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 67fea64..d1bd7d0 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -7,7 +7,7 @@
import TinyGesture from 'tinygesture';
- import { boot, subscribeToEvents } from '$lib/apiServer';
+ import * as api from '$lib/apiServer.js';
import {
channelsList,
channelsMetaList,
@@ -69,20 +69,20 @@
return;
}
gesture = new TinyGesture(window);
- gesture.on('swiperight', (event) => {
+ gesture.on('swiperight', () => {
pageContext.showMenu = true;
});
- gesture.on('swipeleft', (event) => {
+ gesture.on('swipeleft', () => {
pageContext.showMenu = false;
});
}
onMount(async () => {
- let response = await boot();
+ let response = await api.boot();
switch (response.status) {
case 200:
onBooted(response.data);
- events = subscribeToEvents(response.data.resume_point);
+ events = api.subscribeToEvents(response.data.resume_point);
events.onmessage = onEvent.fromMessage;
break;
case 401:
@@ -140,6 +140,10 @@
setLastActiveChannel(channel || null);
}
});
+
+ async function createChannel(name) {
+ await api.createChannel(name);
+ }
</script>
<svelte:window {onbeforeunload} />
@@ -156,7 +160,7 @@
<nav id="sidebar" data-expanded={pageContext.showMenu}>
<ChannelList active={channel} channels={enrichedChannels} />
<div class="create-channel">
- <CreateChannelForm />
+ <CreateChannelForm {createChannel} />
</div>
</nav>
<main>
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index 54ebda7..095e66a 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -3,10 +3,22 @@
import { page } from '$app/state';
import ActiveChannel from '$lib/components/ActiveChannel.svelte';
import MessageInput from '$lib/components/MessageInput.svelte';
- import { channelsMetaList, messages } from '$lib/store';
+ import { channelsList, channelsMetaList, currentUser, logins, messages } from '$lib/store';
+ import * as api from '$lib/apiServer';
let channel = $derived(page.params.channel);
- let messageRuns = $derived($messages.inChannel(channel));
+ let messageRuns = $derived(
+ $messages.inChannel(channel).map(({ sender, messages }) => {
+ let senderName = $derived($logins.get(sender));
+ let ownMessage = $derived($currentUser !== null && $currentUser.id === sender);
+
+ return {
+ sender: senderName,
+ ownMessage,
+ messages
+ };
+ })
+ );
let activeChannel;
function inView(parentElement, element) {
@@ -58,13 +70,21 @@
clearTimeout(lastReadCallback); // Fine if lastReadCallback is null still.
lastReadCallback = setTimeout(setLastRead, 2 * 1000);
}
+
+ async function sendMessage(message) {
+ await api.postToChannel(channel, message);
+ }
+
+ async function deleteMessage(id) {
+ await api.deleteMessage(id);
+ }
</script>
<svelte:window onkeydown={handleKeydown} />
<div class="active-channel" {onscroll} bind:this={activeChannel}>
- <ActiveChannel {messageRuns} />
+ <ActiveChannel {messageRuns} {deleteMessage} />
</div>
<div class="create-message">
- <MessageInput {channel} />
+ <MessageInput {sendMessage} />
</div>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 14a9db8..ab214e9 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -2,10 +2,35 @@
import LogOut from '$lib/components/LogOut.svelte';
import Invites from '$lib/components/Invites.svelte';
import ChangePassword from '$lib/components/ChangePassword.svelte';
+
+ import { goto } from '$app/navigation';
+ import * as api from '$lib/apiServer.js';
+ import { currentUser } from '$lib/store';
+
+ let invites = $state([]);
+
+ async function logOut() {
+ const response = await api.logOut();
+ if (200 <= response.status && response.status < 300) {
+ currentUser.set(null);
+ await goto('/login');
+ }
+ }
+
+ async function changePassword(currentPassword, newPassword) {
+ await api.changePassword(currentPassword, newPassword);
+ }
+
+ async function createInvite() {
+ let response = await api.createInvite();
+ if (response.status === 200) {
+ invites.push(response.data);
+ }
+ }
</script>
-<ChangePassword />
+<ChangePassword {changePassword} />
<hr />
-<Invites />
+<Invites {invites} {createInvite} />
<hr />
-<LogOut />
+<LogOut {logOut} />
diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index 0c01286..04341e5 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -1,26 +1,16 @@
<script>
import { goto } from '$app/navigation';
- import { acceptInvite } from '$lib/apiServer';
+ import * as api from '$lib/apiServer';
import LogIn from '$lib/components/LogIn.svelte';
let { data } = $props();
- let username = $state(''),
- password = $state('');
- let pending = false;
- let disabled = $derived(pending);
-
- async function onSubmit(event, inviteId) {
- event.preventDefault();
- pending = true;
- const response = await acceptInvite(inviteId, username, password);
+ async function acceptInvite(inviteId, username, password) {
+ const response = await api.acceptInvite(inviteId, username, password);
if (200 <= response.status && response.status < 300) {
- username = '';
- password = '';
await goto('/');
}
- pending = false;
}
</script>
@@ -32,5 +22,5 @@
<div class="invite-text">
<p>Hi there! {invite.issuer} invites you to the conversation.</p>
</div>
- <LogIn {disabled} bind:username bind:password onsubmit={(event) => onSubmit(event, invite.id)} />
+ <LogIn logIn={async (username, password) => acceptInvite(invite.id, username, password)} />
{/await}
diff --git a/ui/routes/(login)/login/+page.svelte b/ui/routes/(login)/login/+page.svelte
index 9157cef..b1f7cf2 100644
--- a/ui/routes/(login)/login/+page.svelte
+++ b/ui/routes/(login)/login/+page.svelte
@@ -1,25 +1,15 @@
<script>
import { goto } from '$app/navigation';
- import { logIn } from '$lib/apiServer';
+ import * as api from '$lib/apiServer';
import LogIn from '$lib/components/LogIn.svelte';
- let username = '',
- password = '';
- let pending = false;
- $: disabled = pending;
-
- async function onSubmit(event) {
- event.preventDefault();
- pending = true;
- const response = await logIn(username, password);
+ async function logIn(username, password) {
+ const response = await api.logIn(username, password);
if (200 <= response.status && response.status < 300) {
- username = '';
- password = '';
await goto('/');
}
- pending = false;
}
</script>
-<LogIn {disabled} bind:username bind:password onsubmit={onSubmit} />
+<LogIn {logIn} />
diff --git a/ui/routes/(login)/setup/+page.svelte b/ui/routes/(login)/setup/+page.svelte
index c63f198..0b5a824 100644
--- a/ui/routes/(login)/setup/+page.svelte
+++ b/ui/routes/(login)/setup/+page.svelte
@@ -1,25 +1,15 @@
<script>
import { goto } from '$app/navigation';
- import { setup } from '$lib/apiServer';
+ import * as api from '$lib/apiServer';
import LogIn from '$lib/components/LogIn.svelte';
- let username = $state(''),
- password = $state('');
- let pending = false;
- let disabled = $derived(pending);
-
- async function onSubmit(event) {
- event.preventDefault();
- pending = true;
- const response = await setup(username, password);
+ async function logIn(username, password) {
+ const response = await api.setup(username, password);
if (200 <= response.status && response.status < 300) {
- username = '';
- password = '';
await goto('/');
}
- pending = false;
}
</script>
-<LogIn {disabled} bind:username bind:password legend="set up" onsubmit={onSubmit} />
+<LogIn legend="set up" {logIn} />
generated by cgit v1.2.3 (git 2.39.1) at 2026-01-02 14:36:45 +0000