aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src/routes/bots/new.svelte
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-07-24 18:05:20 +0200
committerIlion Beyst <ilion.beyst@gmail.com>2022-07-24 18:05:20 +0200
commit90dfc3dec45b3f5d5700f711130d04a5f4d958db (patch)
tree74acb864dc364c363835d4a5a66b0e2f7fabd6df /web/pw-server/src/routes/bots/new.svelte
parent99987f84446ce4fb9457696de070434706ae1a7b (diff)
downloadplanetwars.dev-90dfc3dec45b3f5d5700f711130d04a5f4d958db.tar.xz
planetwars.dev-90dfc3dec45b3f5d5700f711130d04a5f4d958db.zip
create new bot flow
Diffstat (limited to 'web/pw-server/src/routes/bots/new.svelte')
-rw-r--r--web/pw-server/src/routes/bots/new.svelte98
1 files changed, 98 insertions, 0 deletions
diff --git a/web/pw-server/src/routes/bots/new.svelte b/web/pw-server/src/routes/bots/new.svelte
new file mode 100644
index 0000000..7cb7229
--- /dev/null
+++ b/web/pw-server/src/routes/bots/new.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+ import { goto } from "$app/navigation";
+ import { get_session_token } from "$lib/auth";
+ import { currentUser } from "$lib/stores/current_user";
+ import { onMount } from "svelte";
+ let botName: string | undefined = undefined;
+ let saveErrors: string[] = [];
+
+ onMount(() => {
+ // ensure user is logged in
+ if (!$currentUser) {
+ goto("/login");
+ }
+ });
+
+ async function createBot() {
+ saveErrors = [];
+
+ let response = await fetch("/api/bots", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${get_session_token()}`,
+ },
+ body: JSON.stringify({
+ name: botName,
+ }),
+ });
+
+ let responseData = await response.json();
+ if (response.ok) {
+ let bot = responseData;
+ goto(`/bots/${bot["name"]}`);
+ } else {
+ 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;
+ }
+ }
+ }
+</script>
+
+<div class="container">
+ <div class="create-bot-form">
+ <h4>Create new bot</h4>
+ <input type="text" class="bot-name-input" placeholder="bot name" bind:value={botName} />
+ {#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={createBot}>Save</button>
+ </div>
+</div>
+
+<style lang="scss">
+ .container {
+ width: 400px;
+ max-width: 80%;
+ margin: 50px auto;
+ }
+
+ .create-bot-form h4 {
+ margin-bottom: 0.3em;
+ }
+
+ .error-text {
+ color: red;
+ }
+
+ .submit-button {
+ padding: 6px 16px;
+ border-radius: 4px;
+ border: 0;
+ font-size: 18pt;
+ display: block;
+ margin: 10px auto;
+ background-color: lightgreen;
+ cursor: pointer;
+ }
+
+ .bot-name-input {
+ width: 100%;
+ font-size: 16px;
+ padding: 8px 16px;
+ box-sizing: border-box;
+ margin: 10px 0;
+ border: 1px solid rgb(216, 219, 223);
+ border-radius: 3px;
+ }
+</style>