From 13ca1d1432e64540b4406d6ed35e653e2219c880 Mon Sep 17 00:00:00 2001
From: Jeroen De Meerleer <me@jeroened.be>
Date: Wed, 16 Aug 2023 20:42:54 +0200
Subject: [PATCH] Added login

---
 src/app.html                             | 22 +++++------
 src/{app.pcss => app.postcss}            |  0
 src/routes/+layout.svelte                | 47 ++++++++++++++++++++----
 src/routes/+page.svelte                  | 19 ++++++++--
 src/routes/account/+layout.svelte        | 39 ++++++++++++--------
 src/routes/account/login/Login.svelte    | 24 ++++++++++--
 src/routes/account/register/+page.svelte |  4 +-
 src/serverrequest.js                     |  3 +-
 8 files changed, 115 insertions(+), 43 deletions(-)
 rename src/{app.pcss => app.postcss} (100%)
diff --git a/src/app.html b/src/app.html
index 83c1951..dcf03f9 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html >
-<html lang="en" class="dark">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		%sveltekit.head%
-	</head>
-	<body data-theme="skeleton">
-		<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width" />
+	%sveltekit.head%
+</head>
+<body data-sveltekit-preload-data="hover" data-theme="skeleton">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
 </html>
diff --git a/src/app.pcss b/src/app.postcss
similarity index 100%
rename from src/app.pcss
rename to src/app.postcss
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6c6fb33..503108b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,44 @@
 <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';
+    // 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.postcss';
+
+    import {alerts, globals} from "$lib/stores.js";
+
+    let alertsvar;
+    let globalvars;
+
+    function closeWarning(e) {
+        let index = e.target.dataset.index;
+        alerts.update(function (data) {
+            data.splice(index, 1)
+            return data;
+        })
+    }
+    alerts.subscribe((value) => {
+        alertsvar = value;
+    });
+    globals.subscribe(value => {
+        globalvars = value;
+    });
 </script>
 
+{#if typeof globalvars.user !== 'undefined' }
+    {#each alertsvar as alert, i}
+        <aside class="alert variant-filled-{alert.class}">
+            <!-- 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}
+{/if}
+
 <slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index deedc03..0e18dde 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,22 @@
 <script>
     import { goto } from '$app/navigation';
     import { onMount } from 'svelte';
+    import {globals} from "$lib/stores.js";
 
-    onMount(async () => {
-        goto("/account/login");
+    let globalvars;
+
+    globals.subscribe(value => {
+        globalvars = value;
     });
 
-</script>
\ No newline at end of file
+    onMount(async () => {
+        if(typeof globalvars.user === 'undefined') {
+            goto("/account/login");
+        }
+    });
+
+</script>
+
+{#if typeof globalvars.user !== 'undefined'}
+    <h1>Welcome {globalvars.user.name}</h1>
+{/if}
\ No newline at end of file
diff --git a/src/routes/account/+layout.svelte b/src/routes/account/+layout.svelte
index 9beaf55..527d9ff 100644
--- a/src/routes/account/+layout.svelte
+++ b/src/routes/account/+layout.svelte
@@ -1,20 +1,23 @@
 <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-{alert.class}">
-            <!-- 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 />
+    {#if typeof globalvars.user == 'undefined' }
+        {#each alertsvar as alert, i}
+            <aside class="alert variant-filled-{alert.class} mb-3">
+                <!-- 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}
+    {/if}
+    <div class="card p-4 w-50 text-token space-y-4">
+        <slot />
+    </div>
 
 </div>
 
@@ -23,9 +26,11 @@
 </style>
 
 <script lang="js">
-    import {alerts} from "$lib/stores.js";
+    import {alerts, globals} from "$lib/stores.js";
 
     let alertsvar;
+    let globalvars;
+
     function closeWarning(e) {
         let index = e.target.dataset.index;
         alerts.update(function (data) {
@@ -36,4 +41,8 @@
     alerts.subscribe((value) => {
         alertsvar = value;
     });
+
+    globals.subscribe(value => {
+        globalvars = value;
+    });
 </script>
\ No newline at end of file
diff --git a/src/routes/account/login/Login.svelte b/src/routes/account/login/Login.svelte
index 75fa568..35aee88 100644
--- a/src/routes/account/login/Login.svelte
+++ b/src/routes/account/login/Login.svelte
@@ -3,7 +3,7 @@
 </div>
 <form name="login-server" class="flex flex-col">
     <label class="label my-3">
-        <span>Username:</span>
+        <span>E-Mail:</span>
         <input type="email" name="email" id="login-email" class="input" bind:value={email}>
     </label>
     <label class="label my-3">
@@ -31,6 +31,9 @@
     import { urls, alerts, globals } from "$lib/stores.js";
     import { createEventDispatcher } from 'svelte';
     import {browser} from "$app/environment";
+    import {requestor} from "../../../serverrequest.js";
+    import {throwError} from "svelte-preprocess/dist/modules/errors.js";
+    import {goto} from "$app/navigation";
 
     var email = '';
     var password = '';
@@ -41,10 +44,23 @@
         globalvars = value;
     });
 
-    const dispatch = createEventDispatcher();
 
-    function handleLogin() {
-        alerts.update(data => [...data, {text: 'Not yet implemented', type: 'notimplemented', class: 'warning'}]);
+    async function handleLogin() {
+        try {
+            let postdata = {email: email, password: password}
+            let response = await requestor.post(urls.login, JSON.stringify(postdata));
+            let responsedata = JSON.parse(response.data);
+            if(response.status != 200) {
+                let message = 'Something went wrong during login'
+                if(typeof responsedata.message !== 'undefined') message = responsedata.message
+                throwError(message)
+            }
+            if(!responsedata.success) return alerts.update(data => [...data, {text: 'Login failed: ' + responsedata.message , class: 'error'}]);
+            globals.update((globalobj) => ({ ...globalobj, ...{user: responsedata.user }}));
+            goto('/')
+        } catch (error) {
+            return alerts.update(data => [...data, {text: error, class: 'error'}]);
+        }
     }
 
     function handleGoToServerSelect() {
diff --git a/src/routes/account/register/+page.svelte b/src/routes/account/register/+page.svelte
index 3802e98..7e7a1ab 100644
--- a/src/routes/account/register/+page.svelte
+++ b/src/routes/account/register/+page.svelte
@@ -166,11 +166,11 @@
             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'}]);
+                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'}]);
+            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'}]);
diff --git a/src/serverrequest.js b/src/serverrequest.js
index 271f396..14cbc2d 100644
--- a/src/serverrequest.js
+++ b/src/serverrequest.js
@@ -3,7 +3,8 @@ import {Axios} from "axios";
 var options = {
     headers: {
         'X-BlackbirdChessClient': 'webclient',
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
     }
 }
 
