Add registration page, fix auth paths, and improve navigation

pages/registrieren.vue

@@ -0,0 +1,219 @@
+<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 @submit.prevent="handleRegister" class="space-y-6">
+          <!-- 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>
+