Merge branch 'main' into test/playback

# Conflicts:
#	nuxt.config.ts
#	package-lock.json
#	package.json
#	pages/confirm.vue
#	pages/index.vue

.github/workflows/validate.yml

@@ -0,0 +1,22 @@
+name: ESLint Validation
+
+on: [push, pull_request]
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run ESLint
+        run: npx eslint

README.md

@@ -45,31 +45,16 @@ Build the application for production:
 ```bash
 # npm
 npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
 ```
 
 Locally preview production build:
 
 ```bash
 # npm
 npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
 ```
 
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+
+## Required Environment Variables
+Check `.env.demo` for the required environment variables.

components/login/ProviderButton.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const supabase = useSupabaseClient()
+
+const props = defineProps({
+  provider: {
+    type: String,
+    default: 'spotify'
+  },
+  name: {
+    type: String,
+    default: 'Spotify'
+  }
+});
+
+const imgSrc = `icons/${props.provider}.svg`
+
+async function signIn() {
+  console.log("click")
+  const {error} = await supabase.auth.signInWithOAuth({
+    provider: props.provider,
+    options: {
+      redirectTo: `http://${window.location.host}/confirm`,
+    },
+  });
+  if (error) {
+    console.error('Error:', error.message);
+  }
+}
+</script>
+
+<template>
+  <button @click="signIn">
+    <div class="flex items-center px-3 rounded-full bg-[#1DB954] h-16 max-h-16">
+        <NuxtImg :src="imgSrc" :alt="props.provider" class="h-3/4"/>
+        <span class="flex-grow">Sign in with {{ props.name }}</span>
+    </div>
+  </button>
+</template>
+
+<style scoped>
+
+</style>

nuxt.config.ts

@@ -1,15 +1,21 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
     compatibilityDate: '2024-04-03',
-    devtools: {enabled: true},
-    modules: ['@nuxtjs/tailwindcss', '@nuxt/eslint', '@nuxtjs/supabase'],
+    devtools: {enabled: false},
+    modules: ['@nuxtjs/tailwindcss', '@nuxt/eslint', '@nuxtjs/supabase', '@nuxt/image'],
     supabase: {
         redirectOptions: {
-            login: '/',
+            login: '/login',
             callback: '/confirm',
             include: undefined, // undefined = include all
-            exclude: ['/'], // exclude routes like ['/foo', '/bar/*']
+            exclude: [], // exclude routes like ['/foo', '/bar/*']
             cookieRedirect: true,
+        },
+        cookieOptions: {
+            secure: false, //TODO: set to true when deploying
         }
+    },
+    devServer: {
+        host: '0.0.0.0'
     }
 })