Added possibility to register

src/lib/stores.js

@@ -3,7 +3,8 @@ import { writable } from 'svelte/store';
 export const urls = {
     capabilities: "/capabilities",
     login: "/login",
-    checkusertaken: "/register/checkusertaken"
+    checkusertaken: "/register/checkusertaken",
+    register: "/register"
 }
 export const alerts = writable([])
 export const globals = writable({

src/routes/account/+layout.svelte

@@ -2,7 +2,7 @@
     <h1 class="my-3">Blackbird Chess</h1>
 
     {#each alertsvar as alert, i}
-        <aside class="alert variant-filled-error">
+        <aside class="alert variant-filled-{alert.class}">
             <!-- Icon -->
             <div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
             <!-- Message -->

src/routes/account/login/Login.svelte

@@ -1,3 +1,6 @@
+<div class="flex justify-between">
+    <a href="/account/login" on:click="{handleGoToServerSelect}">Go Back</a>
+</div>
 <form name="login-server" class="flex flex-col">
     <label class="label my-3">
         <span>Username:</span>
@@ -27,6 +30,7 @@
 <script lang="js">
     import { urls, alerts, globals } from "$lib/stores.js";
     import { createEventDispatcher } from 'svelte';
+    import {browser} from "$app/environment";
 
     var email = '';
     var password = '';
@@ -40,6 +44,13 @@
     const dispatch = createEventDispatcher();
 
     function handleLogin() {
-        alerts.update(data => [...data, {text: 'Not yet implemented'}]);
+        alerts.update(data => [...data, {text: 'Not yet implemented', type: 'notimplemented', class: 'warning'}]);
+    }
+
+    function handleGoToServerSelect() {
+        if(sessionStorage.getItem('serverurl') != undefined) {
+            if(browser) sessionStorage.removeItem('serverurl');
+            globals.update((data) => ({ ...data, ...{server: {url: '', caps: {}}} }));
+        }
     }
 </script>

src/routes/account/login/Server.svelte

@@ -35,7 +35,7 @@
         if(!isValidHttpUrl(loginserver)) {
             loginserver = 'https://' + loginserver;
             if(!isValidHttpUrl(loginserver)) {
-                return alerts.update(data => [...data, {text: loginserver + ' is not a Blackbird Chess server'}]);
+                return alerts.update(data => [...data, {text: loginserver + ' is not a Blackbird Chess server', class: 'error'}]);
             }
         }
         console.log("Selected server: " + loginserver);
@@ -44,13 +44,13 @@
         try {
             let response = await requestor.get(urls.capabilities);
             let caps = JSON.parse(response.data);
-            if(!caps.login) return alerts.update(data => [...data, {text: loginserver + ' is unavailable for login currently'}]);
+            if(!caps.login) return alerts.update(data => [...data, {text: loginserver + ' is unavailable for login currently', class: 'error'}]);
             globals.update(data => ({ ...data, ...{server: {url: loginserver, caps: caps}}}));
             if(browser) {
                 sessionStorage.setItem('serverurl', loginserver);
             }
         } catch (error) {
-            return alerts.update(data => [...data, {text: loginserver + ' is not a Blackbird Chess server'}]);
+            return alerts.update(data => [...data, {text: loginserver + ' is not a Blackbird Chess server', class: 'error'}]);
         }
     }
 

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

@@ -1,25 +1,26 @@
+<div class="flex justify-between">
+    <a href="/account/login">Go Back</a>
+</div>
 {#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">
+            <input bind:value="{name}" on:input="{triggerCheck}" 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">
+            <input bind:value="{email}" on:input="{triggerCheck}" 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">
+            <input bind:value={password} on:input="{triggerCheck}" 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">
+            <input bind:value={password2} on:input="{triggerCheck}" 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>
+        <button on:click="{register}"type="submit" id="register-server-submit" class="btn variant-filled-primary my-3">Register</button>
     </form>
-{:else }
-    <h3>There is no hope</h3>
 {/if}
 
 
@@ -30,10 +31,14 @@
 <script lang="js">
     import {alerts, globals, urls} from "$lib/stores.js";
     import { requestor, setBaseUrl } from "../../../serverrequest.js";
+    import {onMount} from "svelte";
+    import {goto} from "$app/navigation";
 
     let globalvars;
     let email = '';
     let name = '';
+    let password = '';
+    let password2 = '';
 
     globals.subscribe(value => {
         globalvars = value;
@@ -41,43 +46,135 @@
 
     setBaseUrl(globalvars.server.url);
 
-    async function checkEmail(e) {
+    onMount(async () => {
+        if(globalvars.server.url == '' ) {
+            alerts.update(data => data.filter(alert => alert.type !== 'noregister'));
+            alerts.update(data => [...data,{text: 'You cannot register without selecting a server', type: 'noregister', class: 'error'}]);
+            goto('/account/login');
+            return;
+        }
+        if(globalvars.server.caps.register == false ) {
+            alerts.update(data => data.filter(alert => alert.type !== 'noregister'));
+            alerts.update(data => [...data,{text: 'You cannot register on this server', type: 'noregister', class: 'error'}]);
+        }
+    })
+    function triggerCheck(evt) {
+        switch(evt.target.id) {
+            case 'register-name':
+                checkName(false);
+                break;
+            case 'register-email':
+                checkEmail(false);
+                break;
+            case 'register-password':
+            case 'register-password-repeat':
+                checkPassword(false);
+                break;
+        }
+    }
+    async function checkEmail(errorempty = false) {
+        if (email.length == 0) {
+            alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
+            if(errorempty) alerts.update(data => [...data,{text: 'Email cannot be empty', type: 'emailtaken', class: 'error'}]);
+            return false
+        }
         if(document.querySelector('#register-email').checkValidity() === false) {
             alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
-            return;
+            if(errorempty) alerts.update(data => [...data,{text: 'Email is invalid', type: 'emailtaken', class: 'error'}]);
+            return false;
         }
         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'));
+                return true
             }
             if(data.email == 'taken') {
                 alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
-                alerts.update(data => [...data, {text: 'Email is already taken', type: 'emailtaken'}]);
+                alerts.update(data => [...data, {text: 'Email is already taken', type: 'emailtaken', class: 'error'}]);
+                return false;
             }
         } catch (error) {
-            alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable'}]);
+            alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable', class: 'error'}]);
+            return false;
         }
     }
 
-    async function checkName(e) {
+    async function checkName(errorempty = false) {
+        if (name.length == 0) {
+            if(errorempty) alerts.update(data => [...data,{text: 'Username cannot be empty', type: 'usernametaken', class: 'error'}]);
+            return false
+        }
         if(document.querySelector('#register-name').checkValidity() === false) {
             alerts.update(data => data.filter(alert => alert.type !== 'usernametaken'));
-            return;
+            if(errorempty) alerts.update(data => [...data,{text: 'Username cannot be empty', type: 'usernametaken', class: 'error'}]);
+            return false;
         }
         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'));
+                return true;
             }
             if(data.name == 'taken') {
                 alerts.update(data => data.filter(alert => alert.type !== 'usernametaken'));
-                alerts.update(data => [...data,{text: 'Username is already taken', type: 'usernametaken'}]);
+                alerts.update(data => [...data,{text: 'Username is already taken', type: 'usernametaken', class: 'error'}]);
+                return false
             }
         } catch (error) {
-            alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable'}]);
+            alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable', class: 'error'}]);
+            return false
+        }
+    }
+
+    async function checkPassword(errorempty = false) {
+        if (password == '') {
+            alerts.update(data => data.filter(alert => alert.type !== 'passwordnotequal'));
+            if(errorempty) alerts.update(data => [...data,{text: 'Password cannot be empty', type: 'passwordnotequal', class: 'error'}]);
+            return false
+
+        }
+        if (password2 == '') {
+            alerts.update(data => data.filter(alert => alert.type !== 'passwordnotequal'));
+            if(errorempty) alerts.update(data => [...data,{text: 'Password cannot be empty', type: 'passwordnotequal', class: 'error'}]);
+            return false
+        }
+        if (password != password2) {
+            alerts.update(data => data.filter(alert => alert.type !== 'passwordnotequal'));
+            alerts.update(data => [...data,{text: 'Passwords are not equal', type: 'passwordnotequal', class: 'error'}]);
+            return false
+        } else {
+            alerts.update(data => data.filter(alert => alert.type !== 'passwordnotequal'));
+            return true
+        }
+    }
+    async function register() {
+        let emailok = await checkEmail(true);
+        let nameok = await checkName(true);
+        let passwordok = await checkPassword(true);
+        alerts.update(data => data.filter(alert => alert.type !== 'register-errors'));
+
+        if(!(emailok && nameok && passwordok )) {
+            alerts.update(data => [...data, {text: 'Errors in fields, please check', type: 'register-errors', class: 'error'}]);
+            return false;
+        }
+
+        try {
+            let response = await requestor.post(urls.register, JSON.stringify({ email: email, name: name, password: password }));
+            let responsejson = JSON.parse(response.data);
+            if (response.status !== 200) {
+                alerts.update(data => data.filter(alert => alert.type !== 'register-errors'));
+                alerts.update(data => [...data, {text: responsejson.message, type: 'register-errors', class: 'error'}]);
+                return false;
+            }
+            alerts.update(data => []);
+            alerts.update(data => [...data, {text: responsejson.message, type: 'register-success', class: 'success'}]);
+            return false;
+        } catch (error) {
+            alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable', class: 'error'}]);
+            return false;
         }
     }
 </script>