From 63b7b5a852a8ef7fc283946ae44e34f223c98a87 Mon Sep 17 00:00:00 2001
From: Jonas Zohren <jonas.zohren@adesso.de>
Date: Sun, 13 Sep 2020 14:09:51 +0200
Subject: [PATCH] Add form input checks for attach and broadcast
---
client/src/components/AttachRoomPanel.svelte | 36 ++++++++++++++-----
.../src/components/ChatBroadcastPanel.svelte | 5 +--
2 files changed, 31 insertions(+), 10 deletions(-)
diff --git a/client/src/components/AttachRoomPanel.svelte b/client/src/components/AttachRoomPanel.svelte
index da319f8..5fa46d6 100644
--- a/client/src/components/AttachRoomPanel.svelte
+++ b/client/src/components/AttachRoomPanel.svelte
@@ -4,16 +4,36 @@
import { API_BASE_URL } from '../stores.js';
export let roomUrl = "";
+ $: trimmedUrlInput = roomUrl.trim();
+ $: isValidBBBUrl = trimmedUrlInput.length > 0 && isValidUrl(trimmedUrlInput);
+
+ let createRoomRequestInProgress = false;
+
+ function isValidUrl(inputString) {
+ try {
+ const _ = new URL(inputString);
+ return true;
+ } catch (error) {
+ return (error instanceof TypeError) ? false : error;
+ }
+ }
async function requestAttachToRoom() {
- await fetch(API_BASE_URL+'/attach', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({url: roomUrl})
- })
+ createRoomRequestInProgress = true;
+ try {
+ await fetch(API_BASE_URL+'/attach', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({url: trimmedUrlInput})
+ })
+ } catch (error) {
+ console.error("Could not send request to attach to room", trimmedUrlInput);
+ console.error(error);
+ }
roomUrl = '';
+ createRoomRequestInProgress = false;
}
</script>
@@ -28,7 +48,7 @@
<br />
</div>
<div class="panel-block">
- <button class="button is-success is-outlined is-fullwidth" on:click={requestAttachToRoom}>
+ <button type="submit" class:is-loading={createRoomRequestInProgress} class="button is-success is-outlined is-fullwidth" disabled={!isValidBBBUrl} on:click={requestAttachToRoom}>
Attach
</button>
</div>
diff --git a/client/src/components/ChatBroadcastPanel.svelte b/client/src/components/ChatBroadcastPanel.svelte
index ee90691..44e900c 100644
--- a/client/src/components/ChatBroadcastPanel.svelte
+++ b/client/src/components/ChatBroadcastPanel.svelte
@@ -1,6 +1,7 @@
<script>
import { API_BASE_URL } from '../stores.js';
let content = "";
+ $: hasContent = content.trim().length !== 0;
async function sendBroadcast() {
try {
@@ -34,8 +35,8 @@
<br />
</div>
<div class="panel-block">
- <button class="button is-link is-outlined is-fullwidth" on:click={sendBroadcast}>
- Send to all attached rooms
+ <button type="submit" class="button is-link is-outlined is-fullwidth" disabled={!hasContent} on:click={sendBroadcast}>
+ Send to attached rooms
</button>
</div>
</nav>
--
GitLab