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>

71
pages/register.vue
View file

@ -5,43 +5,74 @@
<template>
<main>
<h1>Register</h1>
<form @submit.prevent="register">
<h2>User Details</h2>
<div class="card">
<h2>Regular User</h2>
<p>
<label>
Username
<input type="text" v-model="username">
</label>
Set up an authentication method and choose a username to register a new user.
</p>
<h2>Authentication Method</h2>
<h3>Authentication Method</h3>
<p v-if="sessionStore.authenticationProvider">
Provider: {{ sessionStore.authenticationProvider }}
<br>Identifier: {{ sessionStore.authenticationName }}
<br><button type="button" @click="clearProvider">Clear Method</button>
</p>
<p v-else>
<LogInTelegram />
<LogIn v-else />
<form @submit.prevent="register(false)">
<h3>User Details</h3>
<p>
<label>
Username
<input type="text" v-model="username" required>
</label>
</p>
<p>
<button
type="submit"
:disabled="!sessionStore.authenticationProvider"
>
Register new user
</button>
</p>
</form>
</div>
<div class="alternatively">
&ndash; or &ndash;
</div>
<div class="card">
<h2>Anonymous User</h2>
<p>
If you do not wish to deal with logins you may create an
anonymous user authenticated with a session cookie stored on
this device. Since there's no persistent authentication for the
user should you lose the session cookie you will also lose
access to the user.
</p>
<p>
<button type="submit">Register new account</button>
<button type="button" @click="register(true)">
Create anonymous user
</button>
</p>
</form>
</div>
</main>
</template>
<script setup lang="ts">
useHead({
title: "Register",
});
const sessionStore = useSessionStore();
const username = ref("");
async function clearProvider() {
sessionStore.logOut();
}
async function register() {
async function register(anonymous: boolean) {
let session;
try {
session = await $fetch("/api/auth/account", {
method: "POST",
body: {
body: anonymous ? undefined : {
name: username.value,
},
});
@ -55,3 +86,17 @@ async function register() {
}
}
</script>
<style scoped>
.alternatively {
margin-block: 1rem;
}
.card {
background: color-mix(in oklab, var(--background), grey 20%);
padding: 0.5rem;
border-radius: 0.5rem;
}
.card h2 {
margin-block-start: 0;
}
</style>