fix login page showing when logged in

This commit is contained in:
ari melody 2024-06-29 15:52:52 +01:00
parent 8f41613179
commit ce1dfc388f
Signed by: ari
GPG key ID: CF99829C92678188
3 changed files with 53 additions and 45 deletions

View file

@ -15,6 +15,7 @@ export class Client {
constructor() { constructor() {
this.instance = null; this.instance = null;
this.app = null; this.app = null;
this.user = null;
this.cache = { this.cache = {
users: {}, users: {},
emojis: {}, emojis: {},
@ -86,10 +87,13 @@ export class Client {
async verifyCredentials() { async verifyCredentials() {
const data = await api.verifyCredentials(); const data = await api.verifyCredentials();
if (!data) return false; if (!data) {
this.user = false;
return false;
}
this.user = await api.parseUser(data); this.user = await api.parseUser(data);
client.set(this); client.set(this);
return data; return this.user;
} }
async getTimeline(last_post_id) { async getTimeline(last_post_id) {

2
src/routes/+page.js Normal file
View file

@ -0,0 +1,2 @@
export const prerender = true;
export const ssr = false;

View file

@ -10,8 +10,7 @@
import { get } from 'svelte/store'; import { get } from 'svelte/store';
let client = get(Client.get()); let client = get(Client.get());
let ready = !!client; let logged_in;
let logged_in = client.app && client.app.token;
let instance_url_error = false; let instance_url_error = false;
let logging_in = false; let logging_in = false;
@ -27,11 +26,16 @@
if (client.app && client.app.token) { if (client.app && client.app.token) {
// this triggers the client actually getting the authenticated user's data. // this triggers the client actually getting the authenticated user's data.
client.verifyCredentials().then(res => { client.verifyCredentials().then(user => {
if (res) { if (user) {
console.log(`Logged in as @${client.user.username}@${client.user.host}`); console.log(`Logged in as @${user.username}@${user.host}`);
logged_in = true;
} else {
logged_in = false;
} }
}); });
} else {
logged_in = false;
} }
function log_in(event) { function log_in(event) {
@ -67,47 +71,45 @@
</header> </header>
<main> <main>
{#if ready} {#if logged_in === undefined}
{#if logged_in}
<header>
<h1>Home</h1>
<nav>
<Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header>
<Feed />
{:else}
<form on:submit={log_in} id="login-form">
<img class="app-icon light-only" src={LogoLight} width="320px" aria-label="Space Social"/>
<img class="app-icon dark-only" src={LogoDark} width="320px" aria-label="Space Social"/>
<p>Welcome, fediverse user!</p>
<p>Please enter your instance domain to log in.</p>
<div class="input-wrapper">
<input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
{#if instance_url_error}
<p class="error">{instance_url_error}</p>
{/if}
</div>
<br>
<button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
<p><small>
Please note this is
<strong><em>extremely experimental software</em></strong>;
things are likely to break!
<br>
If that's all cool with you, welcome aboard!
</small></p>
<p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
</form>
{/if}
{:else}
<div class="loading throb"> <div class="loading throb">
<span>just a moment...</span> <span>just a moment...</span>
</div> </div>
{:else if logged_in === false}
<form on:submit={log_in} id="login-form">
<img class="app-icon light-only" src={LogoLight} width="320px" aria-label="Space Social"/>
<img class="app-icon dark-only" src={LogoDark} width="320px" aria-label="Space Social"/>
<p>Welcome, fediverse user!</p>
<p>Please enter your instance domain to log in.</p>
<div class="input-wrapper">
<input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
{#if instance_url_error}
<p class="error">{instance_url_error}</p>
{/if}
</div>
<br>
<button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
<p><small>
Please note this is
<strong><em>extremely experimental software</em></strong>;
things are likely to break!
<br>
If that's all cool with you, welcome aboard!
</small></p>
<p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
</form>
{:else}
<header>
<h1>Home</h1>
<nav>
<Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header>
<Feed />
{/if} {/if}
</main> </main>