summaryrefslogtreecommitdiff
path: root/ui/lib
diff options
context:
space:
mode:
Diffstat (limited to 'ui/lib')
-rw-r--r--ui/lib/components/ActiveChannel.svelte6
-rw-r--r--ui/lib/components/ChangePassword.svelte24
-rw-r--r--ui/lib/components/CreateChannelForm.svelte15
-rw-r--r--ui/lib/components/Invites.svelte8
-rw-r--r--ui/lib/components/LogIn.svelte27
-rw-r--r--ui/lib/components/LogOut.svelte10
-rw-r--r--ui/lib/components/Message.svelte7
-rw-r--r--ui/lib/components/MessageInput.svelte25
-rw-r--r--ui/lib/components/MessageRun.svelte10
9 files changed, 63 insertions, 69 deletions
diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
index 9c181e4..f7837aa 100644
--- a/ui/lib/components/ActiveChannel.svelte
+++ b/ui/lib/components/ActiveChannel.svelte
@@ -1,9 +1,9 @@
<script>
import MessageRun from './MessageRun.svelte';
- let { messageRuns } = $props();
+ let { messageRuns, deleteMessage = async (id) => {} } = $props();
</script>
-{#each messageRuns as { sender, messages }}
- <MessageRun {sender} {messages} />
+{#each messageRuns as { sender, ownMessage, messages }}
+ <MessageRun {sender} {ownMessage} {messages} {deleteMessage} />
{/each}
diff --git a/ui/lib/components/ChangePassword.svelte b/ui/lib/components/ChangePassword.svelte
index bf94ea7..742d4f1 100644
--- a/ui/lib/components/ChangePassword.svelte
+++ b/ui/lib/components/ChangePassword.svelte
@@ -1,28 +1,26 @@
<script>
- import { changePassword } from '$lib/apiServer.js';
+ let { changePassword = async (currentPassword, newPassword) => {} } = $props();
- let currentPassword = $state(''),
- newPassword = $state(''),
- confirmPassword = $state(''),
- pending = $state(false),
- form;
+ let currentPassword = $state('');
+ let newPassword = $state('');
+ let confirmPassword = $state('');
+ let pending = $state(false);
let valid = $derived(newPassword === confirmPassword && newPassword !== currentPassword);
let disabled = $derived(pending || !valid);
async function onsubmit(event) {
event.preventDefault();
pending = true;
- let response = await changePassword(currentPassword, newPassword);
- switch (response.status) {
- case 200:
- form.reset();
- break;
+ try {
+ await changePassword(currentPassword, newPassword);
+ event.target.reset();
+ } finally {
+ pending = false;
}
- pending = false;
}
</script>
-<form class="form" {onsubmit} bind:this={form}>
+<form class="form" {onsubmit}>
<label
>current password
<input
diff --git a/ui/lib/components/CreateChannelForm.svelte b/ui/lib/components/CreateChannelForm.svelte
index 85c85bb..471c2b7 100644
--- a/ui/lib/components/CreateChannelForm.svelte
+++ b/ui/lib/components/CreateChannelForm.svelte
@@ -1,21 +1,22 @@
<script>
- import { createChannel } from '$lib/apiServer';
+ let { createChannel = async (name) => {} } = $props();
let name = $state('');
let disabled = $state(false);
- async function handleSubmit(event) {
+ async function onsubmit(event) {
event.preventDefault();
disabled = true;
- const response = await createChannel(name);
- if (200 <= response.status && response.status < 300) {
- name = '';
+ try {
+ await createChannel(name);
+ event.target.reset();
+ } finally {
+ disabled = false;
}
- disabled = false;
}
</script>
-<form onsubmit={handleSubmit}>
+<form {onsubmit}>
<input type="text" placeholder="create channel" bind:value={name} {disabled} />
<button type="submit">&#x2795;</button>
</form>
diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte
index 27d3754..226ccce 100644
--- a/ui/lib/components/Invites.svelte
+++ b/ui/lib/components/Invites.svelte
@@ -1,15 +1,11 @@
<script>
- import { createInvite } from '$lib/apiServer';
import Invite from '$lib/components/Invite.svelte';
- let invites = $state([]);
+ let { invites, createInvite = async () => {} } = $props();
async function onsubmit(event) {
event.preventDefault();
- let response = await createInvite();
- if (response.status == 200) {
- invites.push(response.data);
- }
+ await createInvite();
}
</script>
diff --git a/ui/lib/components/LogIn.svelte b/ui/lib/components/LogIn.svelte
index 5bfdae2..c49ea3b 100644
--- a/ui/lib/components/LogIn.svelte
+++ b/ui/lib/components/LogIn.svelte
@@ -1,20 +1,29 @@
<script>
- let {
- username = $bindable(),
- password = $bindable(),
- legend = 'sign in',
- disabled,
- onsubmit
- } = $props();
+ let { legend = 'sign in', logIn = async (username, password) => {} } = $props();
+
+ let username = $state();
+ let password = $state();
+ let disabled = $state(false);
+
+ async function onsubmit(event) {
+ event.preventDefault();
+ disabled = true;
+ try {
+ await logIn(username, password);
+ event.target.reset();
+ } finally {
+ disabled = false;
+ }
+ }
</script>
<div>
<form class="form" {onsubmit}>
- <label for="username">
+ <label>
username
<input name="username" type="text" placeholder="username" bind:value={username} {disabled} />
</label>
- <label for="password">
+ <label>
password
<input
name="password"
diff --git a/ui/lib/components/LogOut.svelte b/ui/lib/components/LogOut.svelte
index 1cb8fb5..bb24681 100644
--- a/ui/lib/components/LogOut.svelte
+++ b/ui/lib/components/LogOut.svelte
@@ -1,15 +1,9 @@
<script>
- import { goto } from '$app/navigation';
- import { logOut } from '$lib/apiServer.js';
- import { currentUser } from '$lib/store';
+ let { logOut = async () => {} } = $props();
async function onsubmit(event) {
event.preventDefault();
- const response = await logOut();
- if (200 <= response.status && response.status < 300) {
- currentUser.set(null);
- await goto('/login');
- }
+ await logOut();
}
</script>
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index 1b1598b..dacd900 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -1,16 +1,15 @@
<script>
import { DateTime } from 'luxon';
- import { deleteMessage } from '$lib/apiServer';
function scroll(message) {
message.scrollIntoView();
}
- let { id, at, body, renderedBody, editable = false } = $props();
+ let { id, at, body, renderedBody, editable = false, deleteMessage = async (id) => {} } = $props();
let deleteArmed = $state(false);
let atFormatted = $derived(at.toLocaleString(DateTime.DATETIME_SHORT));
- function onDelete(event) {
+ function ondelete(event) {
event.preventDefault();
if (deleteArmed) {
deleteArmed = false;
@@ -29,7 +28,7 @@
<div class="handle">
{atFormatted}
{#if editable}
- <button onclick={onDelete}>&#x1F5D1;&#xFE0F;</button>
+ <button onclick={ondelete}>&#x1F5D1;&#xFE0F;</button>
{/if}
</div>
<section use:scroll class="message-body">
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 1eb1d7b..69a8298 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -1,29 +1,30 @@
<script>
- import { postToChannel } from '$lib/apiServer';
+ let { sendMessage = async (message) => {} } = $props();
- let { channel } = $props();
-
- let form;
let value = $state('');
let disabled = $state(false);
- async function onSubmit(event) {
+ async function onsubmit(event) {
event.preventDefault();
disabled = true;
- await postToChannel(channel, value);
- form.reset();
- disabled = false;
+ try {
+ await sendMessage(value);
+ event.target.reset();
+ } finally {
+ disabled = false;
+ }
}
- function onKeyDown(event) {
+ function onkeydown(event) {
let modifier = event.shiftKey || event.altKey || event.ctrlKey || event.metaKey;
if (!modifier && event.key === 'Enter') {
- onSubmit(event);
+ event.preventDefault();
+ event.target.form.requestSubmit();
}
}
</script>
-<form bind:this={form} onsubmit={onSubmit}>
- <textarea onkeydown={onKeyDown} bind:value {disabled} placeholder="Say something..."></textarea>
+<form {onsubmit}>
+ <textarea {onkeydown} bind:value {disabled} placeholder="Say something..."></textarea>
<button type="submit">&raquo;</button>
</form>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index bee64e8..f1facd3 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -1,18 +1,14 @@
<script>
- import { logins, currentUser } from '$lib/store';
import Message from '$lib/components/Message.svelte';
- let { sender, messages } = $props();
-
- let name = $derived($logins.get(sender));
- let ownMessage = $derived($currentUser !== null && $currentUser.id == sender);
+ let { sender, messages, ownMessage, deleteMessage = async (id) => {} } = $props();
</script>
<div class="message-run" class:own-message={ownMessage} class:other-message={!ownMessage}>
<span class="username">
- @{name}:
+ @{sender}:
</span>
{#each messages as message}
- <Message {...message} editable={ownMessage} />
+ <Message {...message} editable={ownMessage} {deleteMessage} />
{/each}
</div>
generated by cgit v1.2.3 (git 2.39.1) at 2026-01-02 09:09:27 +0000