fixed login flow inconsistency

This commit is contained in:
ari melody 2024-07-02 20:21:34 +01:00
parent 998e8f2517
commit abab0df83f
Signed by: ari
GPG key ID: CF99829C92678188
10 changed files with 65 additions and 45 deletions

View file

@ -1,8 +1,9 @@
import { client } from '../client/client.js'; import { client } from '$lib/client/client.js';
import { user } from '$lib/stores/user.js';
import { capabilities } from '../client/instance.js'; import { capabilities } from '../client/instance.js';
import Post from '../post.js'; import Post from '$lib/post.js';
import User from '../user/user.js'; import User from '$lib/user/user.js';
import Emoji from '../emoji.js'; import Emoji from '$lib/emoji.js';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
export async function createApp(host) { export async function createApp(host) {
@ -92,7 +93,7 @@ export async function verifyCredentials() {
} }
export async function getNotifications(since_id, limit, types) { export async function getNotifications(since_id, limit, types) {
if (!get(client).user) return false; if (!get(user)) return false;
let url = `https://${get(client).instance.host}/api/v1/notifications`; let url = `https://${get(client).instance.host}/api/v1/notifications`;
@ -112,6 +113,7 @@ export async function getNotifications(since_id, limit, types) {
} }
export async function getTimeline(last_post_id) { export async function getTimeline(last_post_id) {
if (!get(user)) return false;
let url = `https://${get(client).instance.host}/api/v1/timelines/home`; let url = `https://${get(client).instance.host}/api/v1/timelines/home`;
if (last_post_id) url += "?max_id=" + last_post_id; if (last_post_id) url += "?max_id=" + last_post_id;
const data = await fetch(url, { const data = await fetch(url, {

View file

@ -2,7 +2,7 @@ import { Instance, server_types } from './instance.js';
import * as api from './api.js'; import * as api from './api.js';
import { get, writable } from 'svelte/store'; import { get, writable } from 'svelte/store';
import { last_read_notif_id } from '$lib/notifications.js'; import { last_read_notif_id } from '$lib/notifications.js';
import { user } from '$lib/stores/user.js'; import { user, logged_in } from '$lib/stores/user.js';
export const client = writable(false); export const client = writable(false);
@ -206,6 +206,7 @@ export class Client {
console.warn("Failed to log out correctly; ditching the old tokens anyways."); console.warn("Failed to log out correctly; ditching the old tokens anyways.");
} }
localStorage.removeItem(save_name); localStorage.removeItem(save_name);
logged_in.set(false);
client.set(new Client()); client.set(new Client());
console.log("Logged out successfully."); console.log("Logged out successfully.");
} }

View file

@ -29,7 +29,7 @@ export async function getNotifications() {
} }
} }
} }
notif.status = await api.parsePost(notif.status, 0, false); notif.status = notif.status ? await api.parsePost(notif.status, 0, false) : null;
notifications.update(notifications => [...notifications, notif]); notifications.update(notifications => [...notifications, notif]);
} }
last_read_notif_id.set(data[0].id); last_read_notif_id.set(data[0].id);

View file

@ -1,4 +1,22 @@
import { writable } from 'svelte/store'; import { client } from '$lib/client/client.js';
import * as api from '$lib/client/api.js';
import { get, writable } from 'svelte/store';
export let user = writable(0); export let user = writable(0);
export let logged_in = writable(false); export let logged_in = writable(false);
export async function getUser() {
// already known
if (get(user)) return get(user);
// cannot provide- not logged in
if (!get(client).app || !get(client).app.token) return false;
// logged in- attempt to retrieve using token
const data = await api.verifyCredentials();
if (!data) return false;
user.set(await api.parseUser(data));
console.log(`Logged in as @${get(user).username}@${get(user).host}`);
return get(user);
}

View file

@ -3,6 +3,7 @@
import Button from './Button.svelte'; import Button from './Button.svelte';
import Feed from './Feed.svelte'; import Feed from './Feed.svelte';
import { client } from '$lib/client/client.js'; import { client } from '$lib/client/client.js';
import { user } from '$lib/stores/user.js';
import { play_sound } from '$lib/sound.js'; import { play_sound } from '$lib/sound.js';
import { getTimeline } from '$lib/timeline.js'; import { getTimeline } from '$lib/timeline.js';
import { getNotifications } from '$lib/notifications.js'; import { getNotifications } from '$lib/notifications.js';
@ -150,11 +151,11 @@
</div> </div>
<div id="account-button"> <div id="account-button">
<img src={$client.user.avatar_url} class="account-avatar" height="64px" alt="" aria-hidden="true" on:click={() => play_sound()}> <img src={$user.avatar_url} class="account-avatar" height="64px" alt="" aria-hidden="true" on:click={() => play_sound()}>
<div class="account-name" aria-hidden="true"> <div class="account-name" aria-hidden="true">
<a href={$client.user.url} class="nickname" title={$client.user.nickname}>{$client.user.nickname}</a> <a href={$user.url} class="nickname" title={$user.nickname}>{$user.nickname}</a>
<span class="username" title={`@${$client.user.username}@${$client.user.host}`}> <span class="username" title={`@${$user.username}@${$user.host}`}>
{`@${$client.user.username}@${$client.user.host}`} {`@${$user.username}@${$user.host}`}
</span> </span>
</div> </div>
</div> </div>

View file

@ -48,7 +48,7 @@
} }
</script> </script>
<a class="notification" href={`/post/${data.status.id}`} aria-label={aria_label}> <a class="notification" href={data.status ? `/post/${data.status.id}` : null} aria-label={aria_label}>
<header aria-hidden> <header aria-hidden>
<span class="notif-icon"> <span class="notif-icon">
{#if data.type === "favourite"} {#if data.type === "favourite"}

View file

@ -3,27 +3,25 @@
import Navigation from '$lib/ui/Navigation.svelte'; import Navigation from '$lib/ui/Navigation.svelte';
import Widgets from '$lib/ui/Widgets.svelte'; import Widgets from '$lib/ui/Widgets.svelte';
import { client, Client } from '$lib/client/client.js'; import { client, Client } from '$lib/client/client.js';
import { user, getUser } from '$lib/stores/user.js';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import { logged_in } from '$lib/stores/user.js'; import { logged_in } from '$lib/stores/user.js';
import { unread_notif_count, last_read_notif_id } from '$lib/notifications.js'; import { unread_notif_count, last_read_notif_id } from '$lib/notifications.js';
let ready = new Promise(resolve => { let ready = new Promise(resolve => {
if (get(client)) { if (get(client)) {
if (get(client).user) logged_in.set(true); if (get(user)) logged_in.set(true);
return resolve(); return resolve();
} }
let new_client = new Client(); let new_client = new Client();
new_client.load(); new_client.load();
client.set(new_client); client.set(new_client);
return new_client.getClientUser().then(user => { return getUser().then(new_user => {
if (!user) { if (!new_user) return resolve();
client.set(new_client);
return resolve(); logged_in.set(true);
} user.set(new_user);
if (user) logged_in.set(true);
new_client.user = user;
window.peekie = new_client;
// spin up async task to fetch notifications // spin up async task to fetch notifications
get(client).getNotifications( get(client).getNotifications(
@ -33,10 +31,6 @@
unread_notif_count.set(notif_data.length); unread_notif_count.set(notif_data.length);
}); });
client.update(client => {
client.user = user;
return client;
});
return resolve(); return resolve();
}); });
}); });

View file

@ -1,7 +1,7 @@
<script> <script>
import { page } from '$app/stores'; import { page } from '$app/stores';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import { client } from '$lib/client/client.js'; import { logged_in } from '$lib/stores/user.js';
import { timeline, getTimeline } from '$lib/timeline.js'; import { timeline, getTimeline } from '$lib/timeline.js';
import LoginForm from '$lib/ui/LoginForm.svelte'; import LoginForm from '$lib/ui/LoginForm.svelte';
@ -9,16 +9,18 @@
import User from '$lib/user/user.js'; import User from '$lib/user/user.js';
import Button from '$lib/ui/Button.svelte'; import Button from '$lib/ui/Button.svelte';
getTimeline(); logged_in.subscribe(logged_in => {
if (logged_in) getTimeline();
});
document.addEventListener("scroll", event => { document.addEventListener("scroll", event => {
if (get(page).url.pathname !== "/") return; if (get(logged_in) && get(page).url.pathname !== "/") return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) { if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
getTimeline(); getTimeline();
} }
}); });
</script> </script>
{#if $client.user} {#if $logged_in}
<Feed posts={$timeline} /> <Feed posts={$timeline} />
{:else} {:else}
<LoginForm /> <LoginForm />

View file

@ -3,6 +3,8 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { error } from '@sveltejs/kit'; import { error } from '@sveltejs/kit';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import { last_read_notif_id } from '$lib/notifications.js';
import { logged_in, user, getUser } from '$lib/stores/user.js';
export let data; export let data;
@ -23,24 +25,18 @@
return c; return c;
}); });
get(client).getClientUser().then(user => { getUser().then(new_user => {
if (user) client.update(client => { if (!new_user) return;
client.user = user
return client; logged_in.set(true);
}); user.set(new_user);
return get(client).getNotifications( return get(client).getNotifications(
get(last_read_notification_id) get(last_read_notif_id)
).then(notif_data => { ).then(notif_data => {
client.update(client => {
// we've just logged in, so assume all past notifications are read.
// i *would* just use the mastodon marker API to get the last read
// notification, but this does not appear to be widely supported.
if (notif_data.constructor === Array && notif_data.length > 0) if (notif_data.constructor === Array && notif_data.length > 0)
last_read_notification_id.set(notif_data[0].id); last_read_notif_id.set(notif_data[0].id);
client.save(); get(client).save();
return client;
});
goto("/"); goto("/");
}); });
}); });

View file

@ -1,10 +1,16 @@
<script> <script>
import { notifications, getNotifications } from '$lib/notifications.js'; import { notifications, getNotifications } from '$lib/notifications.js';
import { logged_in } from '$lib/stores/user.js';
import { goto } from '$app/navigation';
import { get } from 'svelte/store';
import Notification from '$lib/ui/Notification.svelte'; import Notification from '$lib/ui/Notification.svelte';
if (!get(logged_in)) goto("/");
getNotifications(); getNotifications();
/* /*
document.addEventListener("scroll", event => { document.addEventListener("scroll", event => {
if (get(logged_in) && get(page).url.pathname !== "/") return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) { if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
getNotifications(); getNotifications();
} }