service-finder/frontend/src/views/ResetPasswordView.vue

<template>
  <div class="relative flex min-h-screen items-center justify-center text-white">
    <!-- Background Image -->
    <div class="fixed inset-0 z-0">
      <div class="absolute inset-0 bg-[url('@/assets/garage-bg.png')] bg-cover bg-center bg-fixed"></div>
    </div>

    <!-- Glassmorphism Card -->
    <div class="relative z-10 mx-auto w-full max-w-md px-4">
      <div
        class="rounded-2xl border border-white/[0.08] bg-white/[0.05] p-8 backdrop-blur-xl shadow-xl shadow-black/20 text-center"
      >
        <!-- Lock Icon -->
        <div class="mb-6 flex justify-center">
          <div class="flex h-16 w-16 items-center justify-center rounded-full bg-[#418890]/20">
            <svg class="h-8 w-8 text-[#418890]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
          </div>
        </div>

        <!-- Title -->
        <h1 class="mb-4 text-2xl font-bold text-white">
          Jelszó visszaállítás
        </h1>

        <!-- Description -->
        <p class="mb-8 text-white/60 leading-relaxed">
          Add meg az e-mail címed és az új jelszót.
        </p>

        <!-- Email Input -->
        <div class="mb-4 text-left">
          <label for="reset-email" class="mb-2 block text-sm font-medium text-white/80">
            E-mail cím
          </label>
          <input
            id="reset-email"
            v-model="email"
            type="email"
            placeholder="pelda@email.com"
            autocomplete="email"
            class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-white/30 backdrop-blur-sm transition-all duration-200 focus:border-[#75A882] focus:outline-none focus:ring-2 focus:ring-[#75A882]/50"
          />
        </div>

        <!-- New Password Input -->
        <div class="mb-4 text-left">
          <label for="new-password" class="mb-2 block text-sm font-medium text-white/80">
            Új jelszó
          </label>
          <input
            id="new-password"
            v-model="password"
            type="password"
            placeholder="Új jelszó"
            autocomplete="new-password"
            class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-white/30 backdrop-blur-sm transition-all duration-200 focus:border-[#75A882] focus:outline-none focus:ring-2 focus:ring-[#75A882]/50"
          />
        </div>

        <!-- Confirm Password Input -->
        <div class="mb-6 text-left">
          <label for="confirm-password" class="mb-2 block text-sm font-medium text-white/80">
            Jelszó megerősítése
          </label>
          <input
            id="confirm-password"
            v-model="confirmPassword"
            type="password"
            placeholder="Jelszó újra"
            autocomplete="new-password"
            class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-white/30 backdrop-blur-sm transition-all duration-200 focus:border-[#75A882] focus:outline-none focus:ring-2 focus:ring-[#75A882]/50"
          />
        </div>

        <!-- Submit Button -->
        <button
          @click="handleReset"
          :disabled="isSubmitting || !email || !password || !confirmPassword"
          class="btn-premium w-full px-4 py-3 text-lg"
        >
          {{ isSubmitting ? 'Visszaállítás...' : 'Jelszó visszaállítása' }}
        </button>

        <!-- Feedback Message -->
        <div
          v-if="feedbackMessage"
          class="mt-4 rounded-xl px-4 py-3 text-sm"
          :class="feedbackType === 'success' ? 'bg-[#70BC84]/20 text-[#70BC84]' : 'bg-red-500/20 text-red-300'"
        >
          {{ feedbackMessage }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const isSubmitting = ref(false)
const feedbackMessage = ref('')
const feedbackType = ref<'success' | 'error'>('success')

const token = ref('')

onMounted(() => {
  // Read token from query parameter
  const queryToken = route.query.token as string
  if (queryToken) {
    token.value = queryToken
  } else {
    feedbackType.value = 'error'
    feedbackMessage.value = 'Hiányzó token. Kérlek használd a jelszó-visszaállító linket az e-mailből.'
  }
})

async function handleReset() {
  if (!token.value || !email.value || !password.value || !confirmPassword.value) return

  if (password.value !== confirmPassword.value) {
    feedbackType.value = 'error'
    feedbackMessage.value = 'A két jelszó nem egyezik.'
    return
  }

  if (password.value.length < 8) {
    feedbackType.value = 'error'
    feedbackMessage.value = 'A jelszónak legalább 8 karakter hosszúnak kell lennie.'
    return
  }

  isSubmitting.value = true
  feedbackMessage.value = ''

  try {
    await authStore.resetPassword(email.value, token.value, password.value)
    feedbackType.value = 'success'
    feedbackMessage.value = 'A jelszó sikeresen megváltoztatva! Átirányítás a bejelentkezéshez...'
    setTimeout(() => {
      router.push('/')
    }, 2000)
  } catch (err: any) {
    feedbackType.value = 'error'
    feedbackMessage.value = authStore.error || 'A jelszó visszaállítás sikertelen. Kérlek próbáld újra.'
  } finally {
    isSubmitting.value = false
  }
}
</script>