Hornwitser
aaa2faffb1
Add the concept of authentication methods that authenticate an account where using the telegram login widget is one such method. If a login is done with an authentication method that's not associated with any account the session ends up with the data from the authentication method in order to allow registering a new account with the authentication method. This has to be stored on the session as otherwise it wouldn't be possible to implement authentication methods such as OAuth2 that takes the user to a third-party site and then redirects the browser back.
103 lines
2.9 KiB
Vue
103 lines
2.9 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
<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>
|
|
<p>
|
|
If you do not wish to deal with logins you may create an anonymous account tied to this device.
|
|
</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>
|
|
|
|
<script lang="ts" setup>
|
|
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>
|