Charaktererstellung funktioniert

frontend/src/components/CharacterCreation.vue

@@ -244,7 +244,7 @@ export default {
           alert('Your session has expired. Please log in again.')
         } else if (error.response && error.response.status === 400) {
           const errorMsg = error.response.data?.error || 'Invalid data submitted'
-          alert(`Error saving character data: ${errorMsg}`)
+          //alert(`Error saving character data: ${errorMsg}`)
         } //else {
           //alert('Failed to save character data. Please try again.')
         //}
@@ -285,10 +285,37 @@ export default {
       }
     },
     
+    getUserIdFromToken() {
+      try {
+        const token = localStorage.getItem('token')
+        if (!token) return null
+        
+        // Decode JWT token to get user ID
+        const base64Url = token.split('.')[1]
+        const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
+        const jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
+          return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+        }).join(''))
+        
+        const payload = JSON.parse(jsonPayload)
+        return payload.user_id || payload.userID || payload.sub || null
+      } catch (error) {
+        console.error('Error decoding token:', error)
+        return null
+      }
+    },
+    
     async handleFinalize() {
       try {
         const token = localStorage.getItem('token')
-        const response = await API.post(`/api/characters/create-session/${this.sessionId}/finalize`, {}, {
+        const userId = this.getUserIdFromToken()
+        
+        const requestBody = {}
+        if (userId) {
+          requestBody.user_id = userId
+        }
+        
+        const response = await API.post(`/api/characters/create-session/${this.sessionId}/finalize`, requestBody, {
           headers: { Authorization: `Bearer ${token}` },
         })
         

frontend/src/components/CharacterCreation/CharacterSkills.vue

@@ -360,13 +360,7 @@ export default {
     selectedSkills: {
       handler(newSkills) {
         // Save skills automatically when they change
-        this.$emit('save', { 
-          skills: newSkills,
-          skills_meta: {
-            totalUsedPoints: this.totalUsedPoints,
-            selectedCategory: this.selectedCategory
-          }
-        })
+        this.saveSkillsToSession()
       },
       deep: true
     }
@@ -385,7 +379,22 @@ export default {
     // Initialize component
     this.initializeComponent()
   },
+  beforeUnmount() {
+    // Ensure skills are saved when component is about to be unmounted
+    this.saveSkillsToSession()
+  },
   methods: {
+    saveSkillsToSession() {
+      // Save skills to session data via emit
+      this.$emit('save', { 
+        skills: this.selectedSkills,
+        skills_meta: {
+          totalUsedPoints: this.totalUsedPoints,
+          selectedCategory: this.selectedCategory
+        }
+      })
+    },
+    
     async initializeComponent() {
       try {
         this.isLoading = true

frontend/src/components/DeleteCharView.vue

@@ -1,53 +1,43 @@
 <template>
-    <div class="cd-view">
-      <DeleteCharView
-      v-if="showDeleteDialog"
-      :character="character"
-      @deleted="handleDeleted"
-      @cancel="handleCancel"
-    />
-      <p>Are you sure you want to delete {{ character.name }}?</p>
-      <button @click="deleteCharacter">Yes</button>
-      <button @click="$emit('cancel')">No</button>
-    </div>
-  </template>
+  <div class="cd-view">
+    <p>Are you sure you want to delete {{ character.name }}?</p>
+    <button @click="deleteCharacter" class="btn btn-danger">Yes, Delete</button>
+    <button @click="$emit('cancel')" class="btn btn-secondary">Cancel</button>
+  </div>
+</template>
 
-  <script>
-  export default {
-    name: "DeleteCharView",
+<script>
+import API from '../utils/api'
 
-    props: {
-      character: {
-        type: Object,
-        required: true
-      }
-    },
-    methods: {
-      async deleteCharacter() {
-        try {
-          const response = await fetch(`/api/characters/${this.character.id}`, {
-            method: 'DELETE'
-          });
-          if (response.ok) {
-            this.$emit('deleted');
-          } else {
-            console.error('Failed to delete character');
-          }
-        } catch (error) {
-          console.error('Error:', error);
+export default {
+  name: "DeleteCharView",
+  
+  props: {
+    character: {
+      type: Object,
+      required: true
+    }
+  },
+  
+  emits: ['deleted', 'cancel'],
+  
+  methods: {
+    async deleteCharacter() {
+      try {
+        const response = await API.delete(`/api/characters/${this.character.id}`)
+
+        if (response.status === 200 || response.status === 204) {
+          this.$emit('deleted')
+        } else {
+          console.error('Failed to delete character')
         }
-      },
-      handleCancel() {
-      this.showDeleteDialog = false;
-      // Optional: Go back in router history
-      this.$router.go(-1);
-    },
-    handleDeleted() {
-      this.$router.push('/characters');
+      } catch (error) {
+        console.error('Error deleting character:', error)
+      }
     }
-    }
-  };
-  </script>
+  }
+}
+</script>
 
   <style>
     /*