fix login, use token from login

src/routes/+layout.svelte

@@ -1,13 +1,6 @@
 <script>
 import "../app.css";
 
-
-export const load = async ({ request, locals, cookies }) => {
-
-return {
-    user: locals.user
-};
-};
 </script>
 
 <slot />

src/routes/+page.server.js

@@ -1,26 +1,27 @@
 import { fail, redirect } from '@sveltejs/kit';
 
+export async function load({ cookies }) {
+	if (cookies.get("mToken")) {
+		redirect(302, '/emotes');
+	}
+}
 
 export const actions = {
-	default: async ({ request, cookies }) => {
+	default: async ({ cookies, request }) => {
-		//if (cookies.get('matrixToken')) {
+		if (cookies.get("mToken")) {
-		//	redirect(302, '/emotes');
+			redirect(302, '/emotes');
-		//}
+		}
+
 		const data = await request.formData();
-		const homeserver = data.get('url');
+		const token = data.get("token");
-		const username = data.get('username');
+		const homeserver = data.get("hs");
-		const password = data.get('password');
+		
-		let token = "";
+		if(!homeserver || !token) return fail(400, "Invalid credentials");
 
-		if(!homeserver || !username || !password ) return fail(400, "Invalid credentials");
+	
+		cookies.set('mToken', token, { path: "/" });
+		cookies.set('hs', homeserver, { path: "/" });
 
-		cookies.set(
+		return redirect(302, '/emotes')
-			'matrixToken', token, {
-				path: '/',
-				maxAge: 60 * 60 * 24 * 365,
-				httpOnly: false
-			},
-		);
-		redirect(302, '/');
 	}
-}
+};

src/routes/+page.svelte

@@ -1,8 +1,7 @@
 <script>
         import { enhance } from '$app/forms';
-        export let data;
         let homeserver, username, password = "";
-        let result = null;
+        let formData = new FormData();
 
         async function matrixLogin() {
             const res = await fetch(homeserver + "/_matrix/client/r0/login", {
@@ -15,9 +14,18 @@
             });
 
             const json = await res.json();
-            result = json;
+            formData.append("token", json.access_token);
-            if(result) data.matrixToken = result.access_token
+            formData.append("hs", json.home_server);
-        } 
+
+            await sendPost()
+        }
+
+        async function sendPost() {
+            const res = await fetch("/", {
+                method: "POST",
+                body: formData
+            });
+        }
 </script>
 
 <section class="bg-gray-50 dark:bg-gray-900">
@@ -31,7 +39,7 @@
               <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
                   Sign in to your Matrix Account
               </h1>
-              <form method="POST" class="space-y-4 md:space-y-3" use:enhance>
+              <form class="space-y-4 md:space-y-3">
                   <div>
                       <label for="url" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Homeserver</label>
                       <input bind:value={homeserver} type="url" name="url" id="url" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="https://matrix.boehm.sh"/>
@@ -45,7 +53,7 @@
                       <input bind:value={password} type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
                   </div>
                   <div class="mt-5">
-                    <button on:click={matrixLogin} type="submit" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Sign in</button>
+                    <button on:click|preventDefault={matrixLogin} type="submit" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Sign in</button>
                   </div>
               </form>
           </div>

src/routes/emotes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+    import "./app.css";
+</script>
+
+<slot />

src/routes/emotes/+page.server.js

@@ -0,0 +1,6 @@
+export const load = (async ({ cookies}) => {
+	const homeserver = cookies.get("hs");
+	const token = cookies.get("mToken");
+
+	return { homeserver: homeserver, token: token}
+})

src/routes/emotes/+page.svelte

@@ -1,24 +1,29 @@
 <script>
-import {flip} from 'svelte/animate';
+  import { flip } from 'svelte/animate';
-import { onMount } from 'svelte';
+  import { onMount } from 'svelte';
   let baskets = [];
   let isLoading = true;
+  export let data;
+
+  const hs = "https://" + data.homeserver;
+  const token = data.token;
+
     onMount(async () => {
-      const response = await fetch("https://matrix.org/_matrix/client/v3/rooms/!WesIJpYbWDvdAYThkW:matrix.org/state", {
+      const response = await fetch(hs + "/_matrix/client/v3/rooms/!WesIJpYbWDvdAYThkW:matrix.org/state", {
         method: "GET",
         headers: {
-          "Authorization": "Bearer xxx"
+          "Authorization": "Bearer " + token
         }
       })
-      const data = await response.json();
+      const res = await response.json();
 
-      data.forEach(e => {
+      res.forEach(e => {
         if(e.type === "im.ponies.room_emotes" && e.content.pack != undefined) {
           let prepareArr = [];
           for(const [key, value] of Object.entries(e.content.images)) {
             let image_id = value.url.split("/")[3];
-            let hs = value.url.split("/")[2];
+            let emote_hs = value.url.split("/")[2];
-            prepareArr.push("https://matrix.boehm.sh/_matrix/media/r0/thumbnail/" + hs + "/" + image_id + "?width=256&height=256&method=crop")
+            prepareArr.push(hs + "/_matrix/media/r0/thumbnail/" + emote_hs + "/" + image_id + "?width=256&height=256&method=crop")
           }
           baskets.push({"name": e.content.pack.display_name, "items": prepareArr})
         }
@@ -57,11 +62,11 @@ import { onMount } from 'svelte';
 {:else}
   {#each baskets as basket, basketIndex (basket)}
     <div animate:flip>
-      <b>{basket.name}</b>
+      <p>{basket.name}</p>
       <ul
         class:hovering={hoveringOverBasket === basket.name}
         on:dragenter={() => hoveringOverBasket = basket.name}
-          on:dragleave={() => hoveringOverBasket = null}
+        on:dragleave={() => hoveringOverBasket = null}
         on:drop={event => drop(event, basketIndex)}
         ondragover="return false" >
         {#each basket.items as item, itemIndex (item)}
@@ -76,43 +81,4 @@ import { onMount } from 'svelte';
       </ul>
     </div>
   {/each}
-{/if}
+{/if}
-
-<style>
-	.hovering {
-		border-color: orange;
-	}
-	.item {
-		display: inline; /* required for flip to work */
-	}
-	li {
-		background-color: lightgray;
-		cursor: pointer;
-		display: inline-block;
-		margin-right: 10px;
-    margin-top: 10px;
-		padding: 10px;
-	}
-	li:hover {
-		background: orange;
-		color: white;
-	}
-  ul {
-		border: solid lightgray 1px;
-		display: fit-content; /* required for drag & drop to work when .item display is inline */
-		padding: 10px;
-    margin-left: 10px;
-    width: 100%;
-    min-height: 100px;
-    table-layout: fixed;        
-	}
-  b {
-    margin-left: 10px;
-  }
-  p {
-    margin-left: 10px;
-  }
-  img {
-    height: 32px;
-  }
-</style>

src/routes/emotes/app.css

@@ -0,0 +1,39 @@
+html {
+    background-color: black;
+}
+
+.hovering {
+    border-color: orange;
+}
+.item {
+    display: inline; /* required for flip to work */
+}
+li {
+    background-color: darkslategray;
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 10px;
+    margin-top: 10px;
+    padding: 10px;
+}
+li:hover {
+    background: orange;
+    color: white;
+}
+ul {
+    border: solid lightgray 1px;
+    display: fit-content; /* required for drag & drop to work when .item display is inline */
+    padding: 10px;
+    margin-left: 10px;
+    width: 100%;
+    min-height: 100px;
+    table-layout: fixed;        
+}
+p {
+    padding-top: 10px;
+    margin-left: 10px;
+    color: white;
+}
+img {
+    height: 32px;
+}