65 lines
1.6 KiB
Vue
65 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { useAuthStore } from '@/stores/auth';
|
|
|
|
const authStore = useAuthStore()
|
|
</script>
|
|
<template>
|
|
<main v-if="authStore.state" class="centered-content">
|
|
<h1 class="align-center">My Account</h1>
|
|
<table class="account-properties-table">
|
|
<tbody>
|
|
<tr>
|
|
<th>Internal ID</th>
|
|
<td>{{ authStore.state.user.id }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Username</th>
|
|
<td>{{ authStore.state.user.username }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Created At</th>
|
|
<td>{{ new Date(authStore.state.user.createdAt).toLocaleString() }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Account Locked</th>
|
|
<td>{{ authStore.state.user.isLocked }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Administrator</th>
|
|
<td>{{ authStore.state.user.isAdmin }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>
|
|
Please contact Andrew Lalis for help with account administration or to report any bugs you find!
|
|
</p>
|
|
<p>
|
|
Suggestions for new features are also highly encouraged!
|
|
</p>
|
|
<p>
|
|
Contact Andrew at <a class="link link-ext" href="https://www.andrewlalis.com/contact"
|
|
target="_blank">andrewlalis.com/contact</a>.
|
|
</p>
|
|
</main>
|
|
</template>
|
|
<style scoped>
|
|
.account-properties-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.account-properties-table :is(th, td) {
|
|
border: 1px solid gray;
|
|
padding: 0.25em;
|
|
}
|
|
|
|
.account-properties-table th {
|
|
text-align: left;
|
|
}
|
|
|
|
.account-properties-table td {
|
|
text-align: right;
|
|
font-family: 'SourceCodePro', monospace;
|
|
}
|
|
</style>
|