harheimertc/pages/registrieren.vue

<template>
  <div class="min-h-full flex items-center justify-center py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
    <div class="max-w-md w-full space-y-8">
      <div class="text-center">
        <h2 class="text-3xl font-display font-bold text-gray-900">
          Registrierung
        </h2>
        <p class="mt-2 text-sm text-gray-600">
          Beantragen Sie Zugang zum Mitgliederbereich
        </p>
      </div>

      <div class="bg-white rounded-xl shadow-lg p-8">
        <form
          class="space-y-6"
          @submit.prevent="handleRegister"
        >
          <!-- Name -->
          <div>
            <label
              for="name"
              class="block text-sm font-medium text-gray-700 mb-2"
            >
              Vollständiger Name
            </label>
            <input
              id="name"
              v-model="formData.name"
              type="text"
              required
              autocomplete="name"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent transition-all"
              placeholder="Max Mustermann"
            >
          </div>

          <!-- Email -->
          <div>
            <label
              for="email"
              class="block text-sm font-medium text-gray-700 mb-2"
            >
              E-Mail-Adresse
            </label>
            <input
              id="email"
              v-model="formData.email"
              type="email"
              required
              autocomplete="email"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent transition-all"
              placeholder="ihre-email@example.com"
            >
          </div>

          <!-- Phone -->
          <div>
            <label
              for="phone"
              class="block text-sm font-medium text-gray-700 mb-2"
            >
              Telefonnummer (optional)
            </label>
            <input
              id="phone"
              v-model="formData.phone"
              type="tel"
              autocomplete="tel"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent transition-all"
              placeholder="069-12345678"
            >
          </div>

          <!-- Password -->
          <div>
            <label
              for="password"
              class="block text-sm font-medium text-gray-700 mb-2"
            >
              Passwort
            </label>
            <input
              id="password"
              v-model="formData.password"
              type="password"
              required
              autocomplete="new-password"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent transition-all"
              placeholder="••••••••"
            >
            <p class="mt-1 text-xs text-gray-500">
              Mindestens 8 Zeichen
            </p>
          </div>

          <!-- Confirm Password -->
          <div>
            <label
              for="confirmPassword"
              class="block text-sm font-medium text-gray-700 mb-2"
            >
              Passwort bestätigen
            </label>
            <input
              id="confirmPassword"
              v-model="formData.confirmPassword"
              type="password"
              required
              autocomplete="new-password"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent transition-all"
              placeholder="••••••••"
            >
          </div>

          <!-- Error Message -->
          <div
            v-if="errorMessage"
            class="bg-red-50 border border-red-200 rounded-lg p-4"
          >
            <p class="text-sm text-red-800 flex items-center">
              <AlertCircle
                :size="18"
                class="mr-2"
              />
              {{ errorMessage }}
            </p>
          </div>

          <!-- Success Message -->
          <div
            v-if="successMessage"
            class="bg-green-50 border border-green-200 rounded-lg p-4"
          >
            <p class="text-sm text-green-800 flex items-center">
              <Check
                :size="18"
                class="mr-2"
              />
              {{ successMessage }}
            </p>
          </div>

          <!-- Submit Button -->
          <button
            type="submit"
            :disabled="isLoading"
            class="w-full px-6 py-3 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-400 text-white font-semibold rounded-lg transition-colors flex items-center justify-center"
          >
            <Loader2
              v-if="isLoading"
              :size="20"
              class="mr-2 animate-spin"
            />
            <span>{{ isLoading ? 'Wird gesendet...' : 'Registrierung beantragen' }}</span>
          </button>

          <!-- Back to Login -->
          <div class="text-center">
            <NuxtLink
              to="/login"
              class="text-sm text-primary-600 hover:text-primary-700 font-medium"
            >
              Bereits registriert? Zum Login
            </NuxtLink>
          </div>
        </form>
      </div>

      <!-- Info Box -->
      <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
        <p class="text-sm text-yellow-800">
          <Info
            :size="16"
            class="inline mr-1"
          />
          <strong>Hinweis:</strong> Ihre Registrierung muss vom Vorstand freigegeben werden. 
          Sie erhalten eine E-Mail, sobald Ihr Zugang aktiviert wurde.
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { AlertCircle, Check, Loader2, Info } from 'lucide-vue-next'

const formData = ref({
  name: '',
  email: '',
  phone: '',
  password: '',
  confirmPassword: ''
})

const isLoading = ref(false)
const errorMessage = ref('')
const successMessage = ref('')

const handleRegister = async () => {
  errorMessage.value = ''
  successMessage.value = ''

  // Validate
  if (formData.value.password.length < 8) {
    errorMessage.value = 'Das Passwort muss mindestens 8 Zeichen lang sein.'
    return
  }

  if (formData.value.password !== formData.value.confirmPassword) {
    errorMessage.value = 'Die Passwörter stimmen nicht überein.'
    return
  }

  isLoading.value = true

  try {
    const response = await $fetch('/api/auth/register', {
      method: 'POST',
      body: {
        name: formData.value.name,
        email: formData.value.email,
        phone: formData.value.phone,
        password: formData.value.password
      }
    })

    if (response.success) {
      successMessage.value = 'Registrierung erfolgreich! Sie erhalten eine E-Mail, sobald Ihr Zugang freigeschaltet wurde.'
      
      // Reset form
      formData.value = {
        name: '',
        email: '',
        phone: '',
        password: '',
        confirmPassword: ''
      }

      // Redirect after 3 seconds
      setTimeout(() => {
        navigateTo('/login')
      }, 3000)
    }
  } catch (error) {
    errorMessage.value = error.data?.message || 'Registrierung fehlgeschlagen. Bitte versuchen Sie es später erneut.'
  } finally {
    isLoading.value = false
  }
}

useHead({
  title: 'Registrierung - Harheimer TC',
})
</script>