wumbo changes (proper mastodon API support and oauth login!)
This commit is contained in:
parent
b7c03381f7
commit
e17b26b075
20 changed files with 1935 additions and 1618 deletions
117
src/App.svelte
117
src/App.svelte
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue