ENHANCEMENT: using global vars for server-capabilities

src/routes/+page.svelte

@@ -3,7 +3,7 @@
     import { onMount } from 'svelte';
 
     onMount(async () => {
-        goto("/login");
+        goto("/account/login");
     });
 
 </script>

src/routes/account/login/+page.svelte

@@ -14,7 +14,11 @@
         </aside>
     {/if}
 
-    <Server on:message={showMessage}/>
+    {#if globalvars.server.url == ''}
+        <Server on:message={showMessage} bind:globals={globalvars}/>
+    {:else}
+        <Login on:message={showMessage} bind:globals={globalvars}/>
+    {/if}
 </div>
 
 <style lang="scss">
@@ -22,19 +26,20 @@
 </style>
 
 <script lang="js">
-    import { urls, serverurl } from "../../stores.js";
+    import { globals } from "../../../stores.js";
-    import login from './Login.svelte'
+    import Login from './Login.svelte'
     import Server  from './Server.svelte'
 
+    let globalvars;
+
     let message = {
         visible: false,
         text: '',
         class: 'error'
     };
-    var myserver
 
-    serverurl.subscribe(value => {
+    globals.subscribe(value => {
-        myserver = value;
+        globalvars = value;
     });
 
     function closeWarning() {

src/routes/account/login/Login.svelte

@@ -0,0 +1,41 @@
+<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={password}>
+    </label>
+    <button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleLogin}>Submit</button>
+
+    <div class="flex justify-between">
+        {#if globals.server.caps.register }
+            <a href="/account/register">Register</a>
+        {/if}
+        {#if globals.server.caps.reset }
+            <a href="/account/reset">Reset your password</a>
+        {/if}
+    </div>
+
+</form>
+
+<style lang="scss">
+
+</style>
+
+<script lang="js">
+    import { urls } from "../../../stores.js";
+    import { createEventDispatcher } from 'svelte';
+
+    var email = '';
+    var password = '';
+
+    export let globals;
+
+    const dispatch = createEventDispatcher();
+
+    function handleLogin() {
+        dispatch('message', {text: 'Not yet implemented'})
+    }
+</script>

src/routes/account/login/Server.svelte

@@ -6,7 +6,7 @@
                 name="server"
                 id="login-server-url"
                 class="input"
-                bind:value={server}>
+                bind:value={loginserver}>
     </label>
     <button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleSelectServer}>Submit</button>
 </form>
@@ -16,30 +16,30 @@
 </style>
 
 <script lang="js">
-    import { urls, serverurl } from "../../stores.js";
+    import { urls } from "../../../stores.js";
     import { createEventDispatcher } from 'svelte';
-    import { goto } from "$app/navigation";
 
+    export let globals;
     const dispatch = createEventDispatcher();
 
-    var server = '';
+    var loginserver;
     function handleSelectServer() {
-        if(!isValidHttpUrl(server)) {
+        if(!isValidHttpUrl(loginserver)) {
-            server = 'https://' + server;
+            loginserver = 'https://' + loginserver;
-            if(!isValidHttpUrl(server)) {
+            if(!isValidHttpUrl(loginserver)) {
                 return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
             }
         }
-        console.log("Selected server: " + server);
+        console.log("Selected server: " + loginserver);
-        fetch(server + urls.capabilities)
+        fetch(loginserver + 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);
+                globals.server.url = loginserver;
-                goto('/login')
+                globals.server.caps = data;
             })
             .catch((error) => {
                 return dispatch('message', {text: 'This server is not a Blackbird Chess server'})

src/routes/account/register/+page.svelte

@@ -0,0 +1 @@
+<h3>Register page</h3>

src/routes/login/Login.svelte

@@ -1,60 +0,0 @@
-<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/stores.js

@@ -5,4 +5,13 @@ export const urls = {
     login: "/login"
 }
 
-export const serverurl = writable(null);
+export const globals = writable({
+    server: {
+        url: '',
+        caps: {
+            register: false,
+            login: false,
+            reset: false
+        },
+    }
+});