Hornwitser
e52972853d
I firmly believe in free software. The application I'm making here have capabilities that I've not seen in any system. It presents itself as an opportunity to collaborate on a tool that serves the people rather than corporations. Whose incentives are to help people rather, not make the most money. And whose terms ensure that these freedoms and incentives cannot be taken back or subverted. I license this software under the AGPL.
96 lines
2.7 KiB
Vue
96 lines
2.7 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>
|
|
<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>
|
|
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>
|