ENHANCEMENT: better use of svelte

src/routes/+page.svelte

@@ -1,88 +1,9 @@
-<div class="container h-full mx-auto flex justify-center items-center flex-col">
+<script>
-    <h1 class="my-3">Blackbird Chess</h1>
+    import { goto } from '$app/navigation';
+    import { onMount } from 'svelte';
 
-
+    onMount(async () => {
-    {#if message.visible}
+        goto("/login");
-        <aside class="alert variant-filled-error">
-            <!-- Icon -->
-            <div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
-            <!-- Message -->
-            <p class="alert-message">{message.text}</p>
-            <!-- Actions -->
-            <div class="alert-actions">
-                <i on:click={closeWarning} class="icon icon-close"></i>
-            </div>
-        </aside>
-    {/if}
-
-    <form name="login-server" class="flex flex-col">
-        <label class="label my-3">
-            <span>Please select the server to login:</span>
-            <input
-                    type="url"
-                    name="server"
-                    id="login-server-url"
-                    class="input"
-                    bind:value={serverurl}>
-        </label>
-        <button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleSelectServer}>Submit</button>
-    </form>
-</div>
-
-<style lang="scss">
-
-</style>
-
-<script lang="js">
-    import { urls, server } from "../stores.js";
-    import {goto} from "$app/navigation";
-    let message = {
-        visible: false,
-        text: '',
-        class: 'error'
-    };
-    var serverurl = '';
-    function handleSelectServer() {
-        if(!isValidHttpUrl(serverurl)) {
-            serverurl = 'https://' + serverurl;
-            if(!isValidHttpUrl(serverurl)) {
-                return unavailableServer('This server is not a Blackbird Chess Server')
-            }
-        }
-        console.log("Selected server: " + serverurl);
-        fetch(serverurl + urls.capabilities)
-            .then((response) => {
-                if (!response.ok) return unavailableServer('This server is not a Blackbird Chess Server')
-                return response.json()
-            })
-            .then((data) => {
-                if(!data.login) return unavailableServer('This server is unavailable for login currently');
-                server.update(n => serverurl);
-                goto('/login')
-            })
-            .catch((error) => {
-                return unavailableServer('This server is not a Blackbird Chess Server')
     });
-    }
 
-    function isValidHttpUrl(string) {
-        let url;
-        try {
-            url = new URL(string);
-        } catch (_) {
-            return false;
-        }
-        return url.protocol === "http:" || url.protocol === "https:";
-    }
-
-    function unavailableServer(error) {
-        console.log(error);
-        message.text = error;
-        message.class = 'error'
-        message.visible = true;
-    }
-
-    function closeWarning() {
-        message.visible = false;
-    }
 </script>

src/routes/login/+layout.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	import '../../app.pcss';
-	// The ordering of these imports is critical to your app working properly
-	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
-	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
-	import '@skeletonlabs/skeleton/styles/all.css';
-	// Most of your app wide CSS should be put in this file
-	import '../../app.pcss';
-</script>
-
-<slot />

src/routes/login/+page.svelte

@@ -1,7 +1,6 @@
 <div class="container h-full mx-auto flex justify-center items-center flex-col">
     <h1 class="my-3">Blackbird Chess</h1>
 
-
     {#if message.visible}
         <aside class="alert variant-filled-error">
             <!-- Icon -->
@@ -15,17 +14,7 @@
         </aside>
     {/if}
 
-    <form name="login-server" class="flex flex-col">
+    <Server on:message={showMessage}/>
-        <label class="label my-3">
-            <span>Username:</span>
-            <input type="email" name="email" id="login-email" class="input" bind:value={email}>
-        </label>
-        <label class="label my-3">
-            <span>Password:</span>
-            <input type="password" name="password" id="login-password" class="input" bind:value={email}>
-        </label>
-        <button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleLogin}>Submit</button>
-    </form>
 </div>
 
 <style lang="scss">
@@ -33,39 +22,29 @@
 </style>
 
 <script lang="js">
-    import { urls, server } from "../../stores.js";
+    import { urls, serverurl } from "../../stores.js";
-    import { goto } from '$app/navigation';
+    import login from './Login.svelte'
-    import { onMount } from 'svelte';
+    import Server  from './Server.svelte'
+
     let message = {
         visible: false,
         text: '',
         class: 'error'
     };
-    var email = '';
+    var myserver
-    var password = '';
-    var serverurl
 
-    server.subscribe(value => {
+    serverurl.subscribe(value => {
-        serverurl = value;
+        myserver = value;
     });
-    onMount(async () => {
-        if(serverurl == null) {
-            goto('/')
-        }
-    });
-
-    function handleLogin() {
-        unavailableServer('To be implemented')
-    }
-
-    function unavailableServer(error) {
-        console.log(error);
-        message.text = error;
-        message.class = 'error'
-        message.visible = true;
-    }
 
     function closeWarning() {
         message.visible = false;
     }
+
+    function showMessage(error) {
+        console.log(error);
+        message.text = error.detail.text;
+        message.class = 'error'
+        message.visible = true;
+    }
 </script>

src/routes/login/Login.svelte

@@ -0,0 +1,60 @@
+<div class="container h-full mx-auto flex justify-center items-center flex-col">
+    <h1 class="my-3">Blackbird Chess</h1>
+
+
+    {#if message.visible}
+        <aside class="alert variant-filled-error">
+            <!-- Icon -->
+            <div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
+            <!-- Message -->
+            <p class="alert-message">{message.text}</p>
+            <!-- Actions -->
+            <div class="alert-actions">
+                <i on:click={closeWarning} class="icon icon-close"></i>
+            </div>
+        </aside>
+    {/if}
+
+    <form name="login-server" class="flex flex-col">
+        <label class="label my-3">
+            <span>Username:</span>
+            <input type="email" name="email" id="login-email" class="input" bind:value={email}>
+        </label>
+        <label class="label my-3">
+            <span>Password:</span>
+            <input type="password" name="password" id="login-password" class="input" bind:value={email}>
+        </label>
+        <button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleLogin}>Submit</button>
+    </form>
+</div>
+
+<style lang="scss">
+
+</style>
+
+<script lang="js">
+    import { urls, serverurl } from "../../stores.js";
+    import { goto } from '$app/navigation';
+    import { onMount } from 'svelte';
+    let message = {
+        visible: false,
+        text: '',
+        class: 'error'
+    };
+    var email = '';
+    var password = '';
+    var bbcserver
+
+    bbcserver.subscribe(value => {
+        bbcserver = value;
+    });
+    onMount(async () => {
+        if(serverurl == null) {
+            goto('/')
+        }
+    });
+
+    function handleLogin() {
+        unavailableServer('To be implemented')
+    }
+</script>

src/routes/login/Server.svelte

@@ -0,0 +1,58 @@
+<form name="login-server" class="flex flex-col">
+    <label class="label my-3">
+        <span>Please select the server to login:</span>
+        <input
+                type="url"
+                name="server"
+                id="login-server-url"
+                class="input"
+                bind:value={server}>
+    </label>
+    <button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleSelectServer}>Submit</button>
+</form>
+
+<style lang="scss">
+
+</style>
+
+<script lang="js">
+    import { urls, serverurl } from "../../stores.js";
+    import { createEventDispatcher } from 'svelte';
+    import { goto } from "$app/navigation";
+
+    const dispatch = createEventDispatcher();
+
+    var server = '';
+    function handleSelectServer() {
+        if(!isValidHttpUrl(server)) {
+            server = 'https://' + server;
+            if(!isValidHttpUrl(server)) {
+                return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
+            }
+        }
+        console.log("Selected server: " + server);
+        fetch(server + urls.capabilities)
+            .then((response) => {
+                if (!response.ok) return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
+                return response.json()
+            })
+            .then((data) => {
+                if(!data.login) return dispatch('message', {text: 'This server is unavailable for login currently'})
+                serverurl.update(n => server);
+                goto('/login')
+            })
+            .catch((error) => {
+                return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
+            });
+    }
+
+    function isValidHttpUrl(string) {
+        let url;
+        try {
+            url = new URL(string);
+        } catch (_) {
+            return false;
+        }
+        return url.protocol === "http:" || url.protocol === "https:";
+    }
+</script>

src/stores.js

@@ -5,4 +5,4 @@ export const urls = {
     login: "/login"
 }
 
-export const server = writable(null);
+export const serverurl = writable(null);