public/owltide
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Refactor demo login as an authentication method

Browse source 
Use the authentication method system for the demo login and the
generated accounts.  This makes it possible to toggle it off on
production systems as these shouldn't have it enabled at all.
This commit is contained in:
Hornwitser 2025-07-09 17:57:49 +02:00
parent a33c8e9dac
commit 0d0e38e4b6
14 changed files with 212 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

88
pages/login.vue
View file

@ -5,32 +5,10 @@
<template>
<main>
<h1>Log In</h1>
<form @submit.prevent="logIn">
<input v-model="name" type="text" placeholder="Name" required>
<button type="submit">Log In</button>
</form>
<LogInTelegram v-if="authTelegramEnabled" />
<h2 id="create-account">Create Account</h2>
<p>If you don't have an account you may create one</p>
<form @submit.prevent="createAccount">
<fieldset>
<legend>Regular Account</legend>
<label>
Name:
<input v-model="createName" type="text" placeholder="Name" required />
</label>
<button type="submit">Create account</button>
</fieldset>
</form>
<LogIn />
<p>
If you do not wish to deal with logins you may create an anonymous account tied to this device.
If you don't have an account you may <NuxtLink to="/register">register for one</NuxtLink>.
</p>
<fieldset>
<legend>Anonymous Account</legend>
<button type="button" @click="createAnonymousAccount">Create anonymous account</button>
</fieldset>
<pre><code>{{ result }}</code></pre>
<pre><code>Session: {{ ({ id: sessionStore.id, account: sessionStore.account, push: sessionStore.push }) }}</code></pre>
</main>
</template>
@ -38,66 +16,4 @@
useHead({
title: "Login",
});
const runtimeConfig = useRuntimeConfig();
const authTelegramEnabled = runtimeConfig.public.authTelegramEnabled;
const sessionStore = useSessionStore();
const { getSubscription, subscribe } = usePushNotification();
const name = ref("");
const result = ref("")
async function logIn() {
try {
result.value = await sessionStore.logIn(name.value);
// Resubscribe push notifications if the user was subscribed before.
const subscription = await getSubscription();
if (subscription) {
await subscribe();
}
// XXX Remove the need for this.
await sessionStore.fetch();
} catch (err: any) {
console.log(err);
console.log(err.data);
result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
}
}
const createName = ref("");
async function createAccount() {
try {
const res = await $fetch.raw("/api/auth/account", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: new URLSearchParams({ name: createName.value })
});
result.value = `Server replied: ${res.status} ${res.statusText}`;
await sessionStore.fetch();
} catch (err: any) {
console.log(err);
console.log(err.data);
result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
}
}
async function createAnonymousAccount() {
try {
const res = await $fetch.raw("/api/auth/account", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
});
result.value = `Server replied: ${res.status} ${res.statusText}`;
await sessionStore.fetch();
} catch (err: any) {
console.log(err);
console.log(err.data);
result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
}
}
</script>