wumbo changes (proper mastodon API support and oauth login!)

This commit is contained in:
ari melody 2024-06-19 22:13:16 +01:00
parent b7c03381f7
commit e17b26b075
Signed by: ari
GPG key ID: CF99829C92678188
20 changed files with 1935 additions and 1618 deletions

View file

@ -1,84 +1,72 @@
<script>
import Feed from './Feed.svelte';
import Error from './Error.svelte';
import Instance from './instance.js';
import { Client, server_types } from './client/client.js';
let ready = false;
if (localStorage.getItem("fedi_host") && localStorage.getItem("fedi_token")) {
Instance.setup(
localStorage.getItem("fedi_host"),
localStorage.getItem("fedi_token"),
true
).then(() => {
ready = true;
let ready = Client.get().app && Client.get().app.token;
let auth_code = new URLSearchParams(location.search).get("code");
if (auth_code) {
let client = Client.get();
client.getToken(auth_code).then(() => {
client.save();
location = location.origin;
});
}
function log_in(event) {
let client = Client.get();
event.preventDefault();
localStorage.setItem("fedi_host", event.target.instance_host.value);
localStorage.setItem("fedi_token", event.target.session_token.value);
location = location;
const host = event.target.host.value;
client.init(host).then(() => {
if (client.instance.type === server_types.INCOMPATIBLE) {
console.error("Server " + client.instance.host + " is not supported - " + client.instance.version);
alert("Sorry, this app is not compatible with " + client.instance.host + "!");
return;
}
console.log("Server is \"" + client.instance.type + "\" (or compatible).");
client.save();
let oauth_url = client.getOAuthUrl();
location = oauth_url;
});
}
function log_out() {
localStorage.removeItem("fedi_host");
localStorage.removeItem("fedi_token");
location = location;
Client.get().logout().then(() => {
ready = false;
});
}
</script>
<header>
<h1>space social</h1>
<p>social media for the galaxy-wide-web! 🌌</p>
<button id="log-out" on:click={log_out}>log out</button>
<button id="logout" on:click={log_out}>log out</button>
</header>
<main>
{#if ready}
<Feed />
{:else if !Instance.get_instance().ok}
<Error>
<p>this app requires a <strong>instance host</strong> and <strong>session token</strong> to work! you may enter these below:</p>
<form on:submit={data => (log_in(data))}>
<label for="instance host">instance host: </label>
<input type="text" id="instance_host">
<br>
<label for="session token">session token: </label>
<input type="password" id="session_token">
<br>
<button type="submit" id="log-in">log in</button>
{:else}
<div class="pane">
<form on:submit={log_in} id="login">
<h1>welcome!</h1>
<p>please enter your instance domain to log in.</p>
<input type="text" id="host" aria-label="instance domain">
<button type="submit" id="login">log in</button>
</form>
<hr>
<h4>how do i get these?</h4>
<ul>
<li>
<strong>instance host</strong> refers to the domain of your fediverse instance. i.e. <code>ice.arimelody.me</code>.
</li>
<li>
a <strong>token</strong> is a unique code that grants applications permission to act on your behalf.
you can find it in your browser's cookies for your instance.
(instructions for <a href="https://support.mozilla.org/en-US/questions/1219653">firefox</a>
and <a href="https://superuser.com/questions/1715037/how-can-i-view-the-content-of-cookies-in-chrome">chrome</a>)
</li>
</ul>
<p><small>
your login credentials will not be saved to an external server.
they are required for communication with the fediverse instance, and are saved entirely within your browser.
a cleaner login flow will be built in the future.
</small></p>
<p><small>
oh yeah i should also probably mention this is <strong><em>extremely experimental software</em></strong>;
please note this is <strong><em>extremely experimental software</em></strong>;
even if you use the exact same instance as me, you may encounter problems.
if that's all cool with you, welcome aboard!
</small></p>
<p>made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
</Error>
</div>
{/if}
</main>
@ -95,9 +83,12 @@
align-items: center;
}
header h1 {
margin: 0 16px 0 0;
}
h1 {
color: var(--accent);
margin: 0 16px 0 0;
}
main {
@ -105,6 +96,19 @@
margin: 0 auto;
}
div.pane {
margin-top: 16px;
padding: 20px 32px;
border: 1px solid #8884;
border-radius: 16px;
background-color: var(--bg1);
}
form#login {
margin: 64px 0;
text-align: center;
}
a {
color: var(--accent);
text-decoration: none;
@ -115,14 +119,14 @@
}
input[type="text"], input[type="password"] {
margin-bottom: 8px;
margin: 8px 0;
padding: 4px 6px;
font-family: inherit;
border: none;
border-radius: 8px;
}
button#log-in, button#log-out {
button#login, button#logout {
margin-left: auto;
padding: 8px 12px;
font-size: 1em;
@ -134,17 +138,12 @@
transition: color .1s, background-color .1s;
}
button#log-in.active, button#log-out.active {
background: var(--accent);
color: var(--bg0);
}
button#log-in:hover, button#log-out:hover {
button#login:hover, button#logout:hover {
color: var(--bg0);
background: var(--fg0);
}
button#log-in:active, button#log-out:active {
button#login:active, button#logout:active {
background: #0001;
}