show bot name validations in frontend
This commit is contained in:
parent
0027fef74e
commit
a41b4c48cb
1 changed files with 16 additions and 9 deletions
|
@ -1,8 +1,8 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { get_session_token } from "$lib/auth";
|
import { get_session_token } from "$lib/auth";
|
||||||
|
|
||||||
import { currentUser } from "$lib/stores/current_user";
|
import { currentUser } from "$lib/stores/current_user";
|
||||||
import { createEventDispatcher, onMount } from "svelte";
|
import { createEventDispatcher, onMount } from "svelte";
|
||||||
import Select from "svelte-select";
|
import Select from "svelte-select";
|
||||||
|
|
||||||
export let editSession;
|
export let editSession;
|
||||||
|
@ -11,7 +11,7 @@ import { createEventDispatcher, onMount } from "svelte";
|
||||||
let selectedOpponent = undefined;
|
let selectedOpponent = undefined;
|
||||||
let botName: string | undefined = undefined;
|
let botName: string | undefined = undefined;
|
||||||
|
|
||||||
let saveErrorText = undefined;
|
let saveErrors: string[] = [];
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const res = await fetch("/api/bots", {
|
const res = await fetch("/api/bots", {
|
||||||
|
@ -57,7 +57,7 @@ import { createEventDispatcher, onMount } from "svelte";
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
"Authorization": `Bearer ${get_session_token()}`,
|
Authorization: `Bearer ${get_session_token()}`,
|
||||||
},
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
bot_name: botName,
|
bot_name: botName,
|
||||||
|
@ -69,10 +69,13 @@ import { createEventDispatcher, onMount } from "svelte";
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
dispatch("botSaved", responseData);
|
dispatch("botSaved", responseData);
|
||||||
// clear errors
|
// clear errors
|
||||||
saveErrorText = undefined;
|
saveErrors = [];
|
||||||
} else {
|
} else {
|
||||||
if (responseData["error"] === "BotNameTaken") {
|
const error = responseData["error"];
|
||||||
saveErrorText = "Bot name is already taken";
|
if (error["type"] === "validation_failed") {
|
||||||
|
saveErrors = error["validation_errors"];
|
||||||
|
} else if (error["type"] === "bot_name_taken") {
|
||||||
|
saveErrors = ["Bot name is already taken"];
|
||||||
} else {
|
} else {
|
||||||
// unexpected error
|
// unexpected error
|
||||||
throw responseData;
|
throw responseData;
|
||||||
|
@ -101,8 +104,12 @@ import { createEventDispatcher, onMount } from "svelte";
|
||||||
{#if $currentUser}
|
{#if $currentUser}
|
||||||
<div>Add your bot to the opponents list</div>
|
<div>Add your bot to the opponents list</div>
|
||||||
<input type="text" class="bot-name-input" placeholder="bot name" bind:value={botName} />
|
<input type="text" class="bot-name-input" placeholder="bot name" bind:value={botName} />
|
||||||
{#if saveErrorText}
|
{#if saveErrors.length > 0}
|
||||||
<div class="error-text">{saveErrorText}</div>
|
<ul>
|
||||||
|
{#each saveErrors as errorText}
|
||||||
|
<li class="error-text">{errorText}</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
{/if}
|
{/if}
|
||||||
<button class="submit-button save-button" on:click={saveBot}>Save</button>
|
<button class="submit-button save-button" on:click={saveBot}>Save</button>
|
||||||
{:else}
|
{:else}
|
||||||
|
|
Loading…
Reference in a new issue