Enhance Google OAuth functionality in Profile view. Implement linking and unlinking of Google accounts with corresponding UI updates. Add loading states and feedback messages. Update mobile app to support OAuth identity management and integrate new API endpoints for fetching and unlinking identities. Increment version code to 5 and update version name to 0.8.0-alpha4.

frontend/src/views/Profile.vue

@@ -89,9 +89,15 @@
 
         <div class="form-group">
           <label>Google-Anmeldung</label>
-          <button type="button" class="btn" @click="linkGoogle" :disabled="loading">
+          <div class="oauth-status" :class="{ linked: googleLinked }">
+            {{ googleLinked ? 'Google-Konto ist verknüpft' : 'Kein Google-Konto verknüpft' }}
+          </div>
+          <button v-if="!googleLinked" type="button" class="btn" @click="linkGoogle" :disabled="loading">
             Mit Google-Konto verknüpfen
           </button>
+          <button v-else type="button" class="btn btn-danger" @click="unlinkGoogle" :disabled="loading">
+            Google-Verknüpfung entfernen
+          </button>
         </div>
 
         <div class="form-actions">
@@ -118,7 +124,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useAuthStore } from '../stores/authStore'
 import { useModal } from '../composables/useModal'
 import Modal from '../components/Modal.vue'
@@ -127,6 +133,7 @@ import { API_BASE_URL } from '@/config/api'
 const API_URL = API_BASE_URL
 const authStore = useAuthStore()
 const availableStates = ref([])
+const identities = ref([])
 const loading = ref(false)
 
 const { showModal, modalConfig, alert, confirm, onConfirm, onCancel } = useModal()
@@ -140,6 +147,8 @@ const form = ref({
   preferredTitleType: 2
 })
 
+const googleLinked = computed(() => identities.value.some(identity => identity.provider === 'google'))
+
 // Lade Profil
 async function loadProfile() {
   try {
@@ -190,6 +199,23 @@ async function loadStates() {
   }
 }
 
+async function loadIdentities() {
+  try {
+    const response = await fetch(`${API_URL}/auth/identities`, {
+      headers: authStore.getAuthHeaders()
+    })
+
+    if (!response.ok) {
+      throw new Error('Fehler beim Laden der Google-Verknüpfung')
+    }
+
+    const result = await response.json()
+    identities.value = result.identities || []
+  } catch (error) {
+    console.error('Fehler beim Laden der OAuth-Verknüpfungen:', error)
+  }
+}
+
 // Speichere Profil
 async function saveProfile() {
   try {
@@ -246,11 +272,38 @@ async function linkGoogle() {
   }
 }
 
+async function unlinkGoogle() {
+  const confirmed = await confirm(
+    'Möchten Sie die Google-Verknüpfung wirklich entfernen?',
+    'Google-Verknüpfung entfernen'
+  )
+  if (!confirmed) return
+
+  try {
+    loading.value = true
+    const response = await fetch(`${API_URL}/auth/identity/google`, {
+      method: 'DELETE',
+      headers: authStore.getAuthHeaders()
+    })
+    const result = await response.json()
+    if (!response.ok || !result.success) {
+      throw new Error(result.error || 'Google-Verknüpfung konnte nicht entfernt werden')
+    }
+    await loadIdentities()
+    await alert('Google-Verknüpfung wurde entfernt', 'Erfolg')
+  } catch (error) {
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  } finally {
+    loading.value = false
+  }
+}
+
 // Initiales Laden
 onMounted(async () => {
   await Promise.all([
     loadStates(),
-    loadProfile()
+    loadProfile(),
+    loadIdentities()
   ])
 })
 </script>
@@ -302,6 +355,20 @@ onMounted(async () => {
   cursor: not-allowed;
 }
 
+.oauth-status {
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #f5f5f5;
+  color: #555;
+}
+
+.oauth-status.linked {
+  border-color: #d6e9c6;
+  background: #dff0d8;
+  color: #3c763d;
+}
+
 .form-group input:focus,
 .form-group select:focus {
   outline: none;