Main auth and account flows now tested and working

pages/account.vue

@@ -60,9 +60,19 @@
         <span>{{ activeMembership?.account.max_notes }}</span>
       </div>
 
+      <div class="flex gap-4 items-center">
+        <span class="font-bold w-32">Maximum Members:</span>
+        <span>{{ activeMembership?.account.max_members }}</span>
+      </div>
+
       <div class="flex gap-4 items-center">
         <span class="font-bold w-32">Access Level:</span>
         <span class="bg-green-500 text-white font-semibold py-1 px-2 rounded-full">{{ activeMembership?.access }}</span>
+        <button @click.prevent="accountStore.claimOwnershipOfAccount()"
+          v-if="activeMembership && activeMembership.access === ACCOUNT_ACCESS.ADMIN "
+          class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
+          Claim Ownership
+        </button>
       </div>
 
       <div class="flex gap-4 items-center">

pages/dashboard.vue

@@ -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>

pages/signup.vue

@@ -6,12 +6,18 @@
   const email = ref('')
   const password = ref('')
   const confirmPassword = ref('')
+  const signUpOk = ref(false)
 
   const handleStandardSignup = async () => {
     try {
       loading.value = true
       const { data, error } = await supabase.auth.signUp({ email: email.value, password: password.value })
-      if (error) throw error
+      if (error) {
+        throw error
+      }
+      else {
+        signUpOk.value = true;
+      }
     } catch (error) {
       alert(error)
     } finally {
@@ -47,6 +53,8 @@
         </div>
         <button :disabled="loading || password === '' || (confirmPassword !== password)" type="submit"
           class="w-full py-2 text-white bg-indigo-600 rounded-md hover:bg-indigo-700">Sign up</button>
+        
+          <p v-if="signUpOk" class="mt-4 text-lg text-center">You have successfully signed up.  Please check your email for a link to confirm your email address and proceed.</p>
       </form>
       <p class="text-center">or</p>
       <button @click="supabase.auth.signInWithOAuth({ provider: 'google' })"

pages/success.vue

@@ -18,6 +18,6 @@ try{
       <span v-if="customer && !customer.deleted">We appreciate your business {{customer.name}}!</span>
       <span v-if="customer && customer.deleted">It appears your stripe customer information has been deleted!</span>
     </p>
-    <p>Checkout our reasonable <NuxtLink to="/pricing">Pricing</NuxtLink></p>
+    <p>Go to Your <NuxtLink to="/dashboard">Dashboard</NuxtLink></p>
   </div>
 </template>