show bot name validations in frontend

This commit is contained in:
Ilion Beyst 2022-04-15 19:18:27 +02:00
parent 0027fef74e
commit a41b4c48cb

View file

@ -11,7 +11,7 @@ import { createEventDispatcher, onMount } from "svelte";
let selectedOpponent = undefined;
let botName: string | undefined = undefined;
let saveErrorText = undefined;
let saveErrors: string[] = [];
onMount(async () => {
const res = await fetch("/api/bots", {
@ -57,7 +57,7 @@ import { createEventDispatcher, onMount } from "svelte";
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${get_session_token()}`,
Authorization: `Bearer ${get_session_token()}`,
},
body: JSON.stringify({
bot_name: botName,
@ -69,10 +69,13 @@ import { createEventDispatcher, onMount } from "svelte";
if (response.ok) {
dispatch("botSaved", responseData);
// clear errors
saveErrorText = undefined;
saveErrors = [];
} else {
if (responseData["error"] === "BotNameTaken") {
saveErrorText = "Bot name is already taken";
const error = responseData["error"];
if (error["type"] === "validation_failed") {
saveErrors = error["validation_errors"];
} else if (error["type"] === "bot_name_taken") {
saveErrors = ["Bot name is already taken"];
} else {
// unexpected error
throw responseData;
@ -101,8 +104,12 @@ import { createEventDispatcher, onMount } from "svelte";
{#if $currentUser}
<div>Add your bot to the opponents list</div>
<input type="text" class="bot-name-input" placeholder="bot name" bind:value={botName} />
{#if saveErrorText}
<div class="error-text">{saveErrorText}</div>
{#if saveErrors.length > 0}
<ul>
{#each saveErrors as errorText}
<li class="error-text">{errorText}</li>
{/each}
</ul>
{/if}
<button class="submit-button save-button" on:click={saveBot}>Save</button>
{:else}