blisstown/campfire
3
0
Fork 0
Code Issues 19 Pull requests Projects Releases Packages Wiki Activity Actions

fixed login flow inconsistency

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

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

3
src/lib/client/client.js
View file

@ -2,7 +2,7 @@ import { Instance, server_types } from './instance.js';
import * as api from './api.js';
import { get, writable } from 'svelte/store';
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);
@ -206,6 +206,7 @@ export class Client {
console.warn("Failed to log out correctly; ditching the old tokens anyways.");
}
localStorage.removeItem(save_name);
logged_in.set(false);
client.set(new Client());
console.log("Logged out successfully.");
}

2
src/lib/notifications.js
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]);
}
last_read_notif_id.set(data[0].id);

20
src/lib/stores/user.js
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 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);
}

9
src/lib/ui/Navigation.svelte
View file

@ -3,6 +3,7 @@
import Button from './Button.svelte';
import Feed from './Feed.svelte';
import { client } from '$lib/client/client.js';
import { user } from '$lib/stores/user.js';
import { play_sound } from '$lib/sound.js';
import { getTimeline } from '$lib/timeline.js';
import { getNotifications } from '$lib/notifications.js';
@ -150,11 +151,11 @@
</div>
<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">
<a href={$client.user.url} class="nickname" title={$client.user.nickname}>{$client.user.nickname}</a>
<span class="username" title={`@${$client.user.username}@${$client.user.host}`}>
{`@${$client.user.username}@${$client.user.host}`}
<a href={$user.url} class="nickname" title={$user.nickname}>{$user.nickname}</a>
<span class="username" title={`@${$user.username}@${$user.host}`}>
{`@${$user.username}@${$user.host}`}
</span>
</div>
</div>

2
src/lib/ui/Notification.svelte
View file

@ -48,7 +48,7 @@
}
</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>
<span class="notif-icon">
{#if data.type === "favourite"}

20
src/routes/+layout.svelte
View file

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

10
src/routes/+page.svelte
View file

@ -1,7 +1,7 @@
<script>
import { page } from '$app/stores';
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 LoginForm from '$lib/ui/LoginForm.svelte';
@ -9,16 +9,18 @@
import User from '$lib/user/user.js';
import Button from '$lib/ui/Button.svelte';
getTimeline();
logged_in.subscribe(logged_in => {
if (logged_in) getTimeline();
});
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) {
getTimeline();
}
});
</script>
{#if $client.user}
{#if $logged_in}
<Feed posts={$timeline} />
{:else}
<LoginForm />

26
src/routes/callback/+page.svelte
View file

@ -3,6 +3,8 @@
import { goto } from '$app/navigation';
import { error } from '@sveltejs/kit';
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;
@ -23,24 +25,18 @@
return c;
});
get(client).getClientUser().then(user => {
if (user) client.update(client => {
client.user = user
return client;
});
getUser().then(new_user => {
if (!new_user) return;
logged_in.set(true);
user.set(new_user);
return get(client).getNotifications(
get(last_read_notification_id)
get(last_read_notif_id)
).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)
last_read_notification_id.set(notif_data[0].id);
client.save();
return client;
});
if (notif_data.constructor === Array && notif_data.length > 0)
last_read_notif_id.set(notif_data[0].id);
get(client).save();
goto("/");
});
});

6
src/routes/notifications/+page.svelte
View file

@ -1,10 +1,16 @@
<script>
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';
if (!get(logged_in)) goto("/");
getNotifications();
/*
document.addEventListener("scroll", event => {
if (get(logged_in) && get(page).url.pathname !== "/") return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
getNotifications();
}