finally put #3 to bed with state. also introduce email/password signup and login

pages/account.vue

@@ -10,6 +10,7 @@
 
   onMounted(async () => {
     await accountStore.init();
+    await accountStore.getActiveAccountMembers();
   });
 
   function formatDate(date: Date | undefined){

pages/pricing.vue

@@ -2,11 +2,11 @@
   import { storeToRefs } from 'pinia';
   import { ACCOUNT_ACCESS } from '@prisma/client';
 
-  const authStore = useAuthStore()
-  const { activeMembership } = storeToRefs(authStore);
+  const accountStore = useAccountStore()
+  const { activeMembership } = storeToRefs(accountStore);
 
   onMounted(async () => {
-    await authStore.initUser();
+    await accountStore.init();
   });
 </script>
 <template>

pages/signin.vue

@@ -2,8 +2,11 @@
   const user = useSupabaseUser()
   const supabase = useSupabaseAuthClient();
 
+  const accountStore = useAccountStore()
+
   const loading = ref(false)
   const email = ref('')
+  const password = ref('')
 
   const handleOtpLogin = async () => {
     try {
@@ -18,8 +21,21 @@
     }
   }
 
-  watchEffect(() => {
+  const handleStandardLogin = async () => {
+    try {
+      loading.value = true
+      const { error } = await supabase.auth.signInWithPassword({ email: email.value, password: password.value })
+      if (error) throw error
+    } catch (error) {
+      alert(error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watchEffect(async () => {
     if (user.value) {
+      await accountStore.init();
       navigateTo('/dashboard', {replace: true})
     }
   })  
@@ -27,6 +43,16 @@
 <template>
   <div>
     <h3>Sign In</h3>
+    <form @submit.prevent="handleStandardLogin">
+      <label for="email">Email:</label>
+      <input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" />
+      <label for="password">Password:</label>
+      <input class="inputField" type="password" id="password" placeholder="Password" v-model="password" />
+      <p>By signing in, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p>
+
+      <button type="submit" :disabled="loading">Sign In</button>
+    </form>
+
     <form @submit.prevent="handleOtpLogin">
       <label for="email">Email:</label>
       <input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" />

pages/signup.vue

@@ -4,6 +4,8 @@
 
   const loading = ref(false)
   const email = ref('')
+  const password = ref('')
+  const confirmPassword = ref('')
 
   const handleOtpLogin = async () => {
     try {
@@ -18,6 +20,18 @@
     }
   }
 
+  const handleStandardSignup = async () => {
+    try {
+      loading.value = true
+      const { data, error } = await supabase.auth.signUp({ email: email.value, password: password.value })
+      if (error) throw error
+    } catch (error) {
+      alert(error)
+    } finally {
+      loading.value = false
+    }
+  }
+
   watchEffect(() => {
     if (user.value) {
       navigateTo('/dashboard', {replace: true})
@@ -27,6 +41,18 @@
 <template>
   <div>
     <h3>Sign Up</h3>
+    <form @submit.prevent="handleStandardSignup">
+      <label for="email">Email:</label>
+      <input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" />
+      <label for="password">Password:</label>
+      <input class="inputField" type="password" id="password" placeholder="Password" v-model="password" />
+      <label for="confirm_password">Confirm Password:</label>
+      <input class="inputField" type="password" id="convirm_password" placeholder="Confirm Password" v-model="confirmPassword" />
+      <p>By proceeding, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p>
+      
+      <button type="submit" :disabled="loading || (confirmPassword !== password)">Sign Up</button>
+    </form>
+
     <form @submit.prevent="handleOtpLogin">
       <label for="email">Email:</label>
       <input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" />