Main auth and account flows now tested and working

This commit is contained in:
Michael Dausmann
2023-04-25 15:01:23 +10:00
parent 577e79478e
commit 5d21a5731b
13 changed files with 192 additions and 50 deletions

View File

@@ -1,10 +1,13 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { ACCOUNT_ACCESS } from '@prisma/client';
definePageMeta({
middleware: ['auth'],
});
const accountStore = useAccountStore();
const { activeMembership } = storeToRefs(accountStore)
const notesStore = useNotesStore();
const { notes } = storeToRefs(notesStore); // ensure the notes list is reactive
const newNoteText = ref('')
@@ -15,6 +18,7 @@
}
onMounted(async () => {
await accountStore.init();
await notesStore.fetchNotesForCurrentUser();
});
</script>
@@ -25,9 +29,10 @@
</div>
<div class="w-full max-w-md mb-8">
<div class="flex flex-row">
<div v-if="activeMembership && (activeMembership.access === ACCOUNT_ACCESS.READ_WRITE || activeMembership.access === ACCOUNT_ACCESS.ADMIN || activeMembership.access === ACCOUNT_ACCESS.OWNER)" class="flex flex-row">
<input v-model="newNoteText" type="text" class="w-full rounded-l-md py-2 px-4 border-gray-400 border-2 focus:outline-none focus:border-blue-500" placeholder="Add a note...">
<button @click.prevent="addNote()" type="button" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-r-md focus:outline-none focus:shadow-outline-blue">
<button @click.prevent="addNote()" type="button"
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-r-md focus:outline-none focus:shadow-outline-blue">
Add
</button>
</div>
@@ -36,7 +41,9 @@
<div class="w-full max-w-md">
<div v-for="note in notes" class="bg-white rounded-lg shadow-lg text-center px-6 py-8 md:mx-4 md:my-4">
<p class="text-gray-600 mb-4">{{ note.note_text }}</p>
<button @click.prevent="notesStore.deleteNote(note.id)" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
<button @click.prevent="notesStore.deleteNote(note.id)"
v-if="activeMembership && (activeMembership.access === ACCOUNT_ACCESS.ADMIN || activeMembership.access === ACCOUNT_ACCESS.OWNER)"
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Delete
</button>
</div>