feat: change default review scores to 0 and improve textarea styling

.env.example

@@ -0,0 +1 @@
+API_BASE=http://your-server-ip-or-domain:8000

components/Header.vue

@@ -1,10 +1,67 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useState, useRuntimeConfig } from '#imports'
+
+// Using Nuxt's useState composable instead of Vue's ref
+const config = useRuntimeConfig()
+const apiBase = config.public.apiBase
+
+const user = useState('user', () => ({}))
+const isLoggedIn = useState('isLoggedIn', () => false)
+
+onMounted(() => {
+  // Checking if code is running in browser environment before accessing localStorage
+  if (process.client) {
+    try {
+      const userData = JSON.parse(localStorage.getItem('user') || '{}')
+      user.value = userData
+      if (Object.keys(userData).length > 0) {
+        isLoggedIn.value = true
+        
+      }
+    } catch (error) {
+      console.error('Error accessing localStorage:', error)
+    }
+  }
+})
+
+const logout = () => {
+  if (process.client) {
+    try {
+      localStorage.removeItem('user')
+      isLoggedIn.value = false
+      user.value = {}
+    } catch (error) {
+      console.error('Error during logout:', error)
+    }
+  }
+}
+</script>
+
 <template>
     <header class="p-4 shadow-md flex justify-between bg-slate-100">
         <h1><NuxtLink to="/">Eurovision 2025</NuxtLink></h1>
         <nav>
-            <ul class="flex gap-4">
+            <ul class="flex items-center gap-4">
-                <li><NuxtLink to="/profile">Profile</NuxtLink></li>
+                <li v-if="isLoggedIn" class="flex items-center gap-2">
-                <li><NuxtLink to="/login">Login</NuxtLink></li>
+                    <NuxtLink to="/profile">
+                    <NuxtImg 
+                        v-if="'avatar_id' in user" 
+                        :src="`${apiBase}/static/avatars/${user.avatar_id}.webp`" 
+                        class="w-4 h-4 rounded-full object-cover" 
+                        :alt="user.username"
+                    /></NuxtLink>
+                </li>
+                <li v-if="!isLoggedIn">
+                    <NuxtLink to="/login" class="flex items-center gap-1">
+                        <Icon name="qlementine-icons:log-in-16" class="w-5 h-5" />
+                    </NuxtLink>
+                </li>
+                <li v-if="isLoggedIn">
+                    <button @click="logout" class="flex items-center gap-1">
+                        <Icon name="qlementine-icons:log-out-16" class="w-5 h-5" />
+                    </button>
+                </li>
             </ul>
         </nav>
     </header>

components/ReviewSlider.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-const { category, id } = defineProps(['category', 'id'])
+const { category, id, value } = defineProps(['category', 'id', 'value'])
 </script>
 
 <template>
     <div class="px-6">
         <h2>{{ category }}</h2>
-        <input :id="`slider-${id}`" type="range" min="1" max="100" value="0" class="w-full"/>
+        <input :id="`slider-${id}`" type="range" min="1" max="100" :value="value" class="w-full"/>
         <div class="flex justify-between">
             <p>0</p>
             <p class="sliderSeparator">|</p>

middleware/auth.ts

@@ -0,0 +1,14 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  // Skip middleware if on server-side
+  // This is important because localStorage is only available client-side
+  if (process.server) return
+  
+  // Check if user is logged in
+  const user = localStorage.getItem('user')
+  
+  // If not logged in and trying to access a protected route
+  if (!user) {
+    // Redirect to login page
+    return navigateTo('/login')
+  }
+})

nuxt.config.ts

@@ -2,7 +2,7 @@ import tailwindcss from "@tailwindcss/vite";
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2024-11-01',
+  compatibilityDate: '2025-05-10',
   devtools: { enabled: true },
 
   modules: [

package.json

@@ -14,10 +14,10 @@
     "@nuxt/fonts": "0.11.2",
     "@nuxt/icon": "1.12.0",
     "@nuxt/image": "1.10.0",
-    "@tailwindcss/vite": "^4.1.5",
+    "@tailwindcss/vite": "^4.1.6",
-    "eslint": "^9.0.0",
+    "eslint": "^9.26.0",
-    "nuxt": "^3.17.1",
+    "nuxt": "^3.17.3",
-    "tailwindcss": "^4.1.5",
+    "tailwindcss": "^4.1.6",
     "vue": "^3.5.13",
     "vue-router": "^4.5.1"
   },
@@ -31,6 +31,7 @@
     ],
     "onlyBuiltDependencies": [
       "@parcel/watcher",
+      "@tailwindcss/oxide",
       "esbuild",
       "sharp",
       "unrs-resolver"

pages/login.vue

@@ -3,9 +3,36 @@ definePageMeta({
     layout: 'login'
 })
 
-const login = () => {
+const errorMessage = ref('')
-    console.log('login')
+
-    navigateTo('/')
+const login = async () => {
+    // Clear any previous error messages
+    errorMessage.value = ''
+    
+    const payload = {
+        username: document.getElementById('username')?.value,
+        password: document.getElementById('password')?.value
+    }
+    const config = useRuntimeConfig()
+    const apiBase = config.public.apiBase
+    const api_url = `${apiBase}/auth/token`
+    
+    try {
+        const { data: user } = await useFetch(api_url, {
+            method: 'POST',
+            body: payload
+        })
+        
+        if (!user.value) {
+            errorMessage.value = 'Kirjautuminen epäonnistui. Tarkista käyttäjätunnus ja salasana.'
+            return
+        }
+        
+        localStorage.setItem('user', JSON.stringify(user.value))
+        navigateTo('/')
+    } catch (error) {
+        errorMessage.value = 'Kirjautuminen epäonnistui. Palvelimeen ei saada yhteyttä.'
+    }
 }
 </script>
 
@@ -14,6 +41,9 @@ const login = () => {
         <div class="flex flex-col gap-4 m-6 bg-slate-300 rounded-2xl p-6 shadow-md text-sm">
             <h1 class="text-center font-bold text-lg">Kirjaudu</h1>
             <form @submit.prevent="login" class="">
+                <div v-if="errorMessage" class="error-message p-2 my-2 bg-red-100 text-red-700 rounded border border-red-300">
+                    {{ errorMessage }}
+                </div>
                 <label>Käyttäjätunnus
                     <input class="textfield" type="text" id="username" placeholder="Käyttäjätunnus" />
                 </label>

pages/review/[id].vue

@@ -1,71 +1,158 @@
 <script setup lang="ts">
-const { id } = useRoute().params
+definePageMeta({
+    middleware: 'auth'
+})
+
+interface Review {
+    song_id: number
+    user_id: number
+    score_song: number
+    score_show: number
+    score_costume: number
+    text_review?: string
+    created_at?: string
+    updated_at?: string
+}
 
 interface Artist {
     id: number
-    year: number
-    country_fi: string
     artist: string
     title: string
-    running_order: number
-    lyrics_original: string
-    lyrics_translation_fi: string
-    tags: string[]
     img: string
-    flag: string
+    lyrics_original: string
+    lyrics_translation_fi?: string
+    tags: string[]
 }
 
-const { data: artist } = await useFetch<Artist>(`/api/artist?id=${id}`)
+interface User {
-
+    id: number
-if (!artist.value) {
+    [key: string]: any
-    throw createError({
-        statusCode: 404,
-        statusMessage: 'Artist not found'
-    })
 }
 
+// Config and route setup
+const config = useRuntimeConfig()
+const apiBase = config.public.apiBase
+const route = useRoute()
+const { id } = route.params
 
+// Reactive state
+const artist = ref<Artist | null>(null)
+const user = ref<User | null>(null)
+const review = ref<Review | null>(null)
 
-// State for toggling lyrics visibility
+// Form state with default values
+const song = ref(0)
+const show = ref(0)
+const costume = ref(0)
+const textReview = ref('')
+const isSubmitting = ref(false)
+
+// UI state
 const showOriginalLyrics = ref(false)
-const toggleOriginalLyrics = () => {
-    showOriginalLyrics.value = !showOriginalLyrics.value
-}
-
 const showTranslationLyrics = ref(false)
-const toggleTranslationLyrics = () => {
+
-    showTranslationLyrics.value = !showTranslationLyrics.value
+// Toggle functions for lyrics display
+function toggleOriginalLyrics() {
+  showOriginalLyrics.value = !showOriginalLyrics.value
 }
 
-const submitReview = () => {
+function toggleTranslationLyrics() {
-    // Get slider values
+  showTranslationLyrics.value = !showTranslationLyrics.value
-    const songEl = document.getElementById('slider-song') as HTMLInputElement
+}
-    const showEl = document.getElementById('slider-show') as HTMLInputElement
-    const costumeEl = document.getElementById('slider-costume') as HTMLInputElement
 
-    const songRating = songEl?.value || '0'
+// Load user data from localStorage
-    const showRating = showEl?.value || '0'
+function loadUserData(): User | null {
-    const costumeRating = costumeEl?.value || '0'
+  if (!process.client) return null
   
-    // Create review object
+  const userData = localStorage.getItem('user')
-    const review = {
+  return userData ? JSON.parse(userData) : null
-        artistId: id,
+}
-        ratings: {
+
-            song: parseInt(songRating),
+// Fetch artist data
-            show: parseInt(showRating),
+async function fetchArtist() {
-            costume: parseInt(costumeRating)
+  try {
-        },
+    const response = await fetch(`${apiBase}/songs/${id}`)
-        timestamp: new Date().toISOString()
+    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`)
+    
+    artist.value = await response.json()
+  } catch (error) {
+    console.error('Error fetching artist data:', error)
+  }
+}
+
+// Fetch user's existing review for this song
+async function fetchUserReview(userId: number) {
+  try {
+    const response = await fetch(`${apiBase}/reviews/?song_id=${id}&user_id=${userId}`)
+    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`)
+    
+    const reviewData = await response.json()
+    review.value = reviewData
+    
+    // Pre-fill form with existing review data
+    if (reviewData) {
+      song.value = reviewData.score_song || 0
+      show.value = reviewData.score_show || 0
+      costume.value = reviewData.score_costume || 0
+      textReview.value = reviewData.text_review || ''
     }
-    
+  } catch (error) {
-    console.log('Submitting review:', review)
+    console.error('Error fetching review data:', error)
-    
+  }
-    // TODO: Send review to API
-    // await useFetch('/api/reviews', {
-    //   method: 'POST',
-    //   body: review
-    // })
 }
+
+// Submit review to the API
+async function submitReview() {
+  if (!user.value?.id) {
+    console.error('User not authenticated')
+    return
+  }
+  
+  isSubmitting.value = true
+  
+  const payload: Review = {
+    song_id: Number(id),
+    user_id: user.value.id,
+    score_song: song.value,
+    score_show: show.value,
+    score_costume: costume.value,
+    text_review: textReview.value
+  }
+  
+  try {
+    const response = await fetch(`${apiBase}/reviews/`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(payload),
+    })
+    
+    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`)
+    
+    console.log('Review submitted successfully')
+    // You could add a success notification or redirect here
+  } catch (error) {
+    console.error('Error submitting review:', error)
+    // You could add an error notification here
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// Initialize data on component mount
+onMounted(async () => {
+  // Get user from localStorage
+  user.value = loadUserData()
+  
+  // Fetch artist data
+  await fetchArtist()
+  
+  // If user is logged in, fetch their review for this song
+  if (user.value?.id) {
+    await fetchUserReview(user.value.id)
+  }
+})
 </script>
 
 <template>
@@ -102,18 +189,37 @@ const submitReview = () => {
         <ul class="flex flex-wrap justify-center list-none gap-2 p-0 m-0">
             <li class="tag" v-for="tag in artist.tags" :key="tag">{{ tag }}</li>
         </ul>
-        <form @submit.prevent="submitReview">
+        <form @submit.prevent="submitReview" class="space-y-4 flex flex-col gap-4">
-            <ReviewSlider id="song" category="Kappale"/>
+            <div class="flex flex-col gap-2">
-            <ReviewSlider id="show" category="Lava show"/>
+                <label for="slider-song">Kappale</label>
-            <ReviewSlider id="costume" category="Asuste"/>
+                <input id="slider-song" type="range" min="1" max="100" v-model="song"/>
-            <label for="text_review">Arvostelu</label>
+                <div class="flex justify-between"><p>0</p><p class="sliderSeparator">|</p><p>25</p><p class="sliderSeparator">|</p><p>50</p><p class="sliderSeparator">|</p><p>75</p><p class="sliderSeparator">|</p><p>100</p></div>
-            <textarea id="text_review" placeholder="Arvostelu" class="textfield" />
+            </div>
+            
+            <div class="flex flex-col gap-2">
+                <label for="slider-show">Lava show</label>
+                <input id="slider-show" type="range" min="1" max="100" v-model="show"/>
+                <div class="flex justify-between"><p>0</p><p class="sliderSeparator">|</p><p>25</p><p class="sliderSeparator">|</p><p>50</p><p class="sliderSeparator">|</p><p>75</p><p class="sliderSeparator">|</p><p>100</p></div>
+            </div>
+            
+            <div class="flex flex-col gap-2">
+                <label for="slider-costume">Asuste</label>
+                <input id="slider-costume" type="range" min="1" max="100" v-model="costume"/>
+                <div class="flex justify-between"><p>0</p><p class="sliderSeparator">|</p><p>25</p><p class="sliderSeparator">|</p><p>50</p><p class="sliderSeparator">|</p><p>75</p><p class="sliderSeparator">|</p><p>100</p></div>
+            </div>
+            
+            <div class="flex flex-col gap-2">
+                <label for="text_review">Arvostelu (vaihtoehtoinen)</label>
+                <textarea id="text_review" placeholder="Arvostelu" class="textfield" rows="6" v-model="textReview"/>
+            </div>
+            
             <button type="submit" class="btn-primary">Arvostele</button>
         </form>
-    </div>
+        <NuxtLink class="btn-primary" to="/">Palaa etusivulle</NuxtLink>
-    <div v-else>
+      </div>
+      <div v-else>
         <h1>Artist not found</h1>
-    </div>
+      </div>
 </template>
 
 <style>
@@ -135,10 +241,10 @@ const submitReview = () => {
 .textfield {
     border: none;
     border-bottom: 1px solid #ccc;
-    max-width: 80%;
+    width: 100%; /* Changed from max-width: 80% to width: 100% */
     padding: 6px;
     background-color: rgba(255, 255, 255, 0.2);
     border-radius: 6px;
-    
+    resize: none;
 }
 </style>