Spaenny/matrix-emote
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix login, use token from login

Browse source
This commit is contained in:
Philipp 2024-04-24 03:09:01 +02:00
parent 1a4cbad65a
commit 8afa9be65f
Signed by: Philipp
GPG key ID: 9EBD8439AFBAB750
7 changed files with 100 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/routes/+layout.svelte
View file

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

37
src/routes/+page.server.js
View file

@ -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 }) => {
//if (cookies.get('matrixToken')) {
// redirect(302, '/emotes');
//}
default: async ({ cookies, request }) => {
if (cookies.get("mToken")) {
redirect(302, '/emotes');
}
const data = await request.formData();
const homeserver = data.get('url');
const username = data.get('username');
const password = data.get('password');
let token = "";
const token = data.get("token");
const homeserver = data.get("hs");
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(
'matrixToken', token, {
path: '/',
maxAge: 60 * 60 * 24 * 365,
httpOnly: false
},
);
redirect(302, '/');
return redirect(302, '/emotes')
}
}
};

22
src/routes/+page.svelte
View file

@ -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;
if(result) data.matrixToken = result.access_token
}
formData.append("token", json.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>

5
src/routes/emotes/+layout.svelte Normal file
View file

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

6
src/routes/emotes/+page.server.js Normal file
View file

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

66
src/routes/emotes/+page.svelte
View file

@ -1,24 +1,29 @@
<script>
import {flip} from 'svelte/animate';
import { onMount } from 'svelte';
import { flip } from 'svelte/animate';
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];
prepareArr.push("https://matrix.boehm.sh/_matrix/media/r0/thumbnail/" + hs + "/" + image_id + "?width=256&height=256&method=crop")
let emote_hs = value.url.split("/")[2];
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}
<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>
{/if}

39
src/routes/emotes/app.css Normal file
View file

@ -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;
}