Better usage of stores

src/lib/stores.js

@@ -2,9 +2,10 @@ import { writable } from 'svelte/store';
 
 export const urls = {
     capabilities: "/capabilities",
-    login: "/login"
+    login: "/login",
+    checkusertaken: "/register/checkusertaken"
 }
-
+export const alerts = writable([])
 export const globals = writable({
     server: {
         url: '',

src/routes/account/+layout.svelte

@@ -0,0 +1,39 @@
+<div class="container h-full mx-auto flex justify-center items-center flex-col">
+    <h1 class="my-3">Blackbird Chess</h1>
+
+    {#each alertsvar as alert, i}
+        <aside class="alert variant-filled-error">
+            <!-- Icon -->
+            <div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
+            <!-- Message -->
+            <p class="alert-message">{alert.text}</p>
+            <!-- Actions -->
+            <div class="alert-actions">
+                <i on:click={closeWarning} data-index={i} class="icon icon-close"></i>
+            </div>
+        </aside>
+    {/each}
+
+    <slot />
+
+</div>
+
+<style lang="scss">
+
+</style>
+
+<script lang="js">
+    import {alerts} from "$lib/stores.js";
+
+    let alertsvar;
+    function closeWarning(e) {
+        let index = e.target.dataset.index;
+        alerts.update(function (data) {
+            data.splice(index, 1)
+            return data;
+        })
+    }
+    alerts.subscribe((value) => {
+        alertsvar = value;
+    });
+</script>

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

@@ -1,55 +1,18 @@
-<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}
 
 {#if globalvars.server.url == ''}
-        <Server on:message={showMessage} bind:globals={globalvars}/>
+    <Server/>
 {:else}
-        <Login on:message={showMessage} bind:globals={globalvars}/>
+    <Login/>
 {/if}
-</div>
 
-<style lang="scss">
+<script>
-
+    import Server from "./Server.svelte";
-</style>
+    import Login from "./Login.svelte";
-
+    import {globals} from "$lib/stores.js";
-<script lang="js">
-    import { globals } from "../../../stores.js";
-    import Login from './Login.svelte'
-    import Server  from './Server.svelte'
 
     let globalvars;
 
-    let message = {
-        visible: false,
-        text: '',
-        class: 'error'
-    };
-
     globals.subscribe(value => {
         globalvars = value;
     });
-
-    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/account/login/Login.svelte

@@ -10,10 +10,10 @@
     <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 }
+        {#if globalvars.server.caps.register }
             <a href="/account/register">Register</a>
         {/if}
-        {#if globals.server.caps.reset }
+        {#if globalvars.server.caps.reset }
             <a href="/account/reset">Reset your password</a>
         {/if}
     </div>
@@ -25,17 +25,21 @@
 </style>
 
 <script lang="js">
-    import { urls } from "../../../stores.js";
+    import { urls, alerts, globals } from "$lib/stores.js";
     import { createEventDispatcher } from 'svelte';
 
     var email = '';
     var password = '';
 
-    export let globals;
+    let globalvars;
+
+    globals.subscribe(value => {
+        globalvars = value;
+    });
 
     const dispatch = createEventDispatcher();
 
     function handleLogin() {
-        dispatch('message', {text: 'Not yet implemented'})
+        alerts.update(data => [...data, {text: 'Not yet implemented'}]);
     }
 </script>

src/routes/account/login/Server.svelte

@@ -16,15 +16,12 @@
 </style>
 
 <script lang="js">
-    import { urls } from "../../../stores.js";
+    import { urls, alerts, globals } from "$lib/stores.js";
     import {createEventDispatcher, onMount} from 'svelte';
     import {browser} from "$app/environment";
     import { requestor, setBaseUrl } from "../../../serverrequest.js";
 
-    export let globals;
-
     var loginserver;
-    const dispatch = createEventDispatcher();
 
     onMount(() => {
         if(sessionStorage.getItem('serverurl') != undefined) {
@@ -33,11 +30,12 @@
         }
     })
 
+
     async function handleSelectServer() {
         if(!isValidHttpUrl(loginserver)) {
             loginserver = 'https://' + loginserver;
             if(!isValidHttpUrl(loginserver)) {
-                return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
+                return alerts.update(data => [...data, {text: loginserver + ' is not a Blackbird Chess server'}]);
             }
         }
         console.log("Selected server: " + loginserver);
@@ -45,18 +43,18 @@
 
         try {
             let response = await requestor.get(urls.capabilities);
-            let data = JSON.parse(response.data);
+            let caps = JSON.parse(response.data);
-            if(!data.login) return dispatch('message', {text: 'This server is unavailable for login currently'})
+            if(!caps.login) return alerts.update(data => [...data, {text: loginserver + ' is unavailable for login currently'}]);
-            globals.server.url = loginserver;
+            globals.update(data => ({ ...data, ...{server: {url: loginserver, caps: caps}}}));
-            globals.server.caps = data;
             if(browser) {
                 sessionStorage.setItem('serverurl', loginserver);
             }
         } catch (error) {
-            return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
+            return alerts.update(data => [...data, {text: loginserver + ' is not a Blackbird Chess server'}]);
         }
     }
 
+
     function isValidHttpUrl(string) {
         let url;
         try {

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

@@ -1 +1,83 @@
-<h3>Register page</h3>
+{#if globalvars.server.caps.register }
+    <form name="login-server" class="flex flex-col">
+        <label class="label my-3">
+            <span>Username:</span>
+            <input bind:value="{name}" on:input="{checkName}" type="text" name="email" id="register-name" class="input">
+        </label>
+        <label class="label my-3">
+            <span>E-mail:</span>
+            <input bind:value="{email}" on:input="{checkEmail}" type="email" name="email" id="register-email" class="input">
+        </label>
+        <label class="label my-3">
+            <span>Password:</span>
+            <input type="password" name="password" id="register-password" class="input">
+        </label>
+        <label class="label my-3">
+            <span>Repeat password:</span>
+            <input type="password" name="password2" id="register-password-repeat" class="input">
+        </label>
+        <button type="button" id="register-server-submit" class="btn variant-filled-primary my-3">Register</button>
+    </form>
+{:else }
+    <h3>There is no hope</h3>
+{/if}
+
+
+<style lang="scss">
+
+</style>
+
+<script lang="js">
+    import {alerts, globals, urls} from "$lib/stores.js";
+    import { requestor, setBaseUrl } from "../../../serverrequest.js";
+
+    let globalvars;
+    let email = '';
+    let name = '';
+
+    globals.subscribe(value => {
+        globalvars = value;
+    });
+
+    setBaseUrl(globalvars.server.url);
+
+    async function checkEmail(e) {
+        if(document.querySelector('#register-email').checkValidity() === false) {
+            alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
+            return;
+        }
+        try {
+            let response = await requestor.post(urls.checkusertaken, JSON.stringify({ email: email }));
+            let data = JSON.parse(response.data);
+            if(typeof data.email == 'undefined') {
+                alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
+            }
+            if(data.email == 'taken') {
+                alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
+                alerts.update(data => [...data, {text: 'Email is already taken', type: 'emailtaken'}]);
+            }
+        } catch (error) {
+            alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable'}]);
+        }
+    }
+
+    async function checkName(e) {
+        if(document.querySelector('#register-name').checkValidity() === false) {
+            alerts.update(data => data.filter(alert => alert.type !== 'usernametaken'));
+            return;
+        }
+        try {
+            let response = await requestor.post(urls.checkusertaken, JSON.stringify({ name: name }));
+            let data = JSON.parse(response.data);
+            if(typeof data.name == 'undefined') {
+                alerts.update(data => data.filter(alert => alert.type !== 'usernametaken'));
+            }
+            if(data.name == 'taken') {
+                alerts.update(data => data.filter(alert => alert.type !== 'usernametaken'));
+                alerts.update(data => [...data,{text: 'Username is already taken', type: 'usernametaken'}]);
+            }
+        } catch (error) {
+            alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable'}]);
+        }
+    }
+</script>

src/serverrequest.js

@@ -2,7 +2,8 @@ import {Axios} from "axios";
 
 var options = {
     headers: {
-        'X-BlackbirdChessClient': 'webclient'
+        'X-BlackbirdChessClient': 'webclient',
+        "Content-Type": "application/json",
     }
 }