APP als Hybrid Version - Anbindung an API

frontend/src/stores/auth.js

@@ -1,41 +1,98 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
+import { clearToken, loginRemote, logoutRemote, setToken } from 'src/services/apiClient'
 
 export const AUTH_STORAGE_KEY = 'thatsme-auth'
 
-export const DEMO_USERS = Array.from({ length: 5 }, (_, index) => {
+export const LOCAL_DEMO_USER = {
+  id: 'local-demo',
+  email: 'demo@local',
+  password: '',
+  name: 'Demo',
+  avatar: 'D',
+  mode: 'local',
+  seedDemoEvents: false
+}
+
+export const REMOTE_USERS = Array.from({ length: 6 }, (_, index) => {
   const number = index + 1
   return {
-    id: `demo-user-${number}`,
+    id: `remote-user-${number}`,
     email: `user${number}@thats-me.app`,
-    password: 'pass',
     name: `User ${number}`,
-    avatar: `U${number}`
+    avatar: `U${number}`,
+    mode: 'remote',
+    seedDemoEvents: false
   }
 })
 
-function loadStoredUserId() {
+function normalizeUser(user) {
+  const mode = user.mode || 'local'
+
+  return {
+    id: String(user.id),
+    email: String(user.email).trim().toLowerCase(),
+    password: mode === 'local' ? '' : String(user.password || 'pass'),
+    name: String(user.name || user.email),
+    avatar: String(user.avatar || '?').slice(0, 3).toUpperCase(),
+    mode,
+    seedDemoEvents: false
+  }
+}
+
+function normalizeRemoteUser(user) {
+  return {
+    id: String(user.id),
+    email: String(user.email).trim().toLowerCase(),
+    name: String(user.name || user.email),
+    avatar: String(user.avatar || '?').slice(0, 3).toUpperCase(),
+    mode: 'remote',
+    seedDemoEvents: false
+  }
+}
+
+export function getAvailableUsers() {
+  return [normalizeUser(LOCAL_DEMO_USER), ...REMOTE_USERS]
+}
+
+function loadStoredAuth() {
   try {
     const stored = localStorage.getItem(AUTH_STORAGE_KEY)
-    return stored ? JSON.parse(stored)?.userId ?? null : null
+    return stored ? JSON.parse(stored) : null
   } catch {
     return null
   }
 }
 
+export function hasStoredAuth() {
+  const stored = loadStoredAuth()
+  return Boolean(stored?.user || stored?.userId)
+}
+
+function persistAuth(user) {
+  localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify({
+    userId: user.id,
+    mode: user.mode,
+    user
+  }))
+}
+
 export const useAuthStore = defineStore('auth', () => {
-  const currentUserId = ref(loadStoredUserId())
+  const storedAuth = loadStoredAuth()
+  const currentUserId = ref(storedAuth?.user?.id ?? storedAuth?.userId ?? null)
+  const currentUserProfile = ref(storedAuth?.user ? normalizeUser(storedAuth.user) : null)
   const lastError = ref('')
+  const users = ref(getAvailableUsers())
 
   const currentUser = computed(() =>
-    DEMO_USERS.find(user => user.id === currentUserId.value) ?? null
+    currentUserProfile.value ?? users.value.find(user => user.id === currentUserId.value) ?? null
   )
   const isAuthenticated = computed(() => currentUser.value !== null)
 
-  function login(email, password) {
+  async function login(email, password) {
     const normalizedEmail = String(email).trim().toLowerCase()
-    const user = DEMO_USERS.find(candidate =>
-      candidate.email === normalizedEmail && candidate.password === password
+    const user = users.value.find(candidate =>
+      candidate.email === normalizedEmail
     )
 
     if (!user) {
@@ -43,20 +100,61 @@ export const useAuthStore = defineStore('auth', () => {
       return false
     }
 
+    if (user.mode === 'remote') {
+      try {
+        const data = await loginRemote(normalizedEmail, password)
+        const remoteUser = normalizeRemoteUser(data.user)
+
+        await setToken(data.token)
+        currentUserId.value = remoteUser.id
+        currentUserProfile.value = remoteUser
+        lastError.value = ''
+        persistAuth(remoteUser)
+
+        return true
+      } catch (error) {
+        console.warn('Remote login failed:', error)
+        lastError.value = error?.status === 422
+          ? 'E-Mail oder Passwort ist falsch.'
+          : 'Login über die API ist gerade nicht möglich.'
+        return false
+      }
+    }
+
+    if (user.mode === 'local') {
+      currentUserId.value = user.id
+      currentUserProfile.value = user
+      lastError.value = ''
+      persistAuth(user)
+      return true
+    }
+
+    if (user.password !== password) {
+      lastError.value = 'E-Mail oder Passwort ist falsch.'
+      return false
+    }
+
     currentUserId.value = user.id
+    currentUserProfile.value = user
     lastError.value = ''
-    localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify({ userId: user.id }))
+    persistAuth(user)
     return true
   }
 
   function logout() {
+    if (currentUser.value?.mode === 'remote') {
+      logoutRemote().catch(() => {})
+    }
+
     currentUserId.value = null
+    currentUserProfile.value = null
     lastError.value = ''
     localStorage.removeItem(AUTH_STORAGE_KEY)
+    clearToken().catch(() => {})
   }
 
   return {
-    users: DEMO_USERS,
+    users,
     currentUserId,
     currentUser,
     isAuthenticated,