feat: implement Stripe checkout integration and add related API endpoints

app/components/LoginModal.vue

@@ -1,40 +1,40 @@
 <script setup lang="ts">
-const { signInWithEmail, signInWithGoogle, error } = useAuth()
+const { signInWithEmail, signInWithGoogle, error } = useAuth();
 
-const isOpen = defineModel<boolean>()
-const email = ref('')
-const password = ref('')
-const loginError = ref<string | null>(null)
-const isSubmitting = ref(false)
+const isOpen = useLoginModal();
+const email = ref("");
+const password = ref("");
+const loginError = ref<string | null>(null);
+const isSubmitting = ref(false);
 
 const handleEmailLogin = async () => {
   try {
-    loginError.value = null
-    isSubmitting.value = true
-    await signInWithEmail(email.value, password.value)
-    isOpen.value = false
+    loginError.value = null;
+    isSubmitting.value = true;
+    await signInWithEmail(email.value, password.value);
+    isOpen.value = false;
     // Reset form
-    email.value = ''
-    password.value = ''
+    email.value = "";
+    password.value = "";
   } catch (err) {
-    loginError.value = 'Login failed. Please check your credentials.'
+    loginError.value = "Login failed. Please check your credentials.";
   } finally {
-    isSubmitting.value = false
+    isSubmitting.value = false;
   }
-}
+};
 
 const handleGoogleLogin = async () => {
   try {
-    loginError.value = null
-    isSubmitting.value = true
-    await signInWithGoogle()
-    isOpen.value = false
+    loginError.value = null;
+    isSubmitting.value = true;
+    await signInWithGoogle();
+    isOpen.value = false;
   } catch (err) {
-    loginError.value = 'Google login failed. Please try again.'
+    loginError.value = "Google login failed. Please try again.";
   } finally {
-    isSubmitting.value = false
+    isSubmitting.value = false;
   }
-}
+};
 </script>
 
 <template>
@@ -45,56 +45,60 @@ const handleGoogleLogin = async () => {
       @click.self="isOpen = false"
     >
       <div class="w-full max-w-md rounded-lg bg-slate-900 p-6 shadow-xl">
-      <h2 class="mb-6 text-2xl font-bold text-white">Sign In</h2>
-      
-      <form @submit.prevent="handleEmailLogin" class="space-y-4">
-        <div>
-          <label class="block text-sm font-medium text-slate-300">Email</label>
-          <input
-            v-model="email"
-            type="email"
-            required
-            class="mt-1 w-full rounded-md border border-slate-700 bg-slate-800 px-3 py-2 text-white focus:border-sky-400 focus:outline-none"
-          />
+        <h2 class="mb-6 text-2xl font-bold text-white">Sign In</h2>
+
+        <form @submit.prevent="handleEmailLogin" class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-slate-300"
+              >Email</label
+            >
+            <input
+              v-model="email"
+              type="email"
+              required
+              class="mt-1 w-full rounded-md border border-slate-700 bg-slate-800 px-3 py-2 text-white focus:border-sky-400 focus:outline-none"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-slate-300"
+              >Password</label
+            >
+            <input
+              v-model="password"
+              type="password"
+              required
+              class="mt-1 w-full rounded-md border border-slate-700 bg-slate-800 px-3 py-2 text-white focus:border-sky-400 focus:outline-none"
+            />
+          </div>
+
+          <button
+            type="submit"
+            :disabled="isSubmitting"
+            class="w-full rounded-md bg-sky-600 px-4 py-2 text-white hover:bg-sky-700 disabled:opacity-50"
+          >
+            {{ isSubmitting ? "Signing in..." : "Sign In" }}
+          </button>
+        </form>
+
+        <div class="my-4 flex items-center">
+          <div class="flex-1 border-t border-slate-700"></div>
+          <span class="px-3 text-sm text-slate-400">or</span>
+          <div class="flex-1 border-t border-slate-700"></div>
         </div>
-        
-        <div>
-          <label class="block text-sm font-medium text-slate-300">Password</label>
-          <input
-            v-model="password"
-            type="password"
-            required
-            class="mt-1 w-full rounded-md border border-slate-700 bg-slate-800 px-3 py-2 text-white focus:border-sky-400 focus:outline-none"
-          />
-        </div>
-        
+
         <button
-          type="submit"
+          @click="handleGoogleLogin"
           :disabled="isSubmitting"
-          class="w-full rounded-md bg-sky-600 px-4 py-2 text-white hover:bg-sky-700 disabled:opacity-50"
+          class="w-full rounded-md border border-slate-700 bg-slate-800 px-4 py-2 text-white hover:bg-slate-700 disabled:opacity-50"
         >
-          {{ isSubmitting ? 'Signing in...' : 'Sign In' }}
+          Sign in with Google
         </button>
-      </form>
 
-      <div class="my-4 flex items-center">
-        <div class="flex-1 border-t border-slate-700"></div>
-        <span class="px-3 text-sm text-slate-400">or</span>
-        <div class="flex-1 border-t border-slate-700"></div>
-      </div>
+        <div v-if="loginError || error" class="mt-4 text-sm text-red-400">
+          {{ loginError || error }}
+        </div>
 
-      <button
-        @click="handleGoogleLogin"
-        :disabled="isSubmitting"
-        class="w-full rounded-md border border-slate-700 bg-slate-800 px-4 py-2 text-white hover:bg-slate-700 disabled:opacity-50"
-      >
-        Sign in with Google
-      </button>
-
-      <div v-if="loginError || error" class="mt-4 text-sm text-red-400">
-        {{ loginError || error }}
-      </div>
-      
         <button
           @click="isOpen = false"
           class="mt-4 text-sm text-slate-400 hover:text-white"
@@ -104,4 +108,4 @@ const handleGoogleLogin = async () => {
       </div>
     </div>
   </Teleport>
-</template>
+</template>