Files
TREK/client/src/store/authStore.js
T
Maurice 74f19f3312 v2.1.0 — Real-time collaboration, performance & security overhaul
Real-Time Collaboration (WebSocket):
- WebSocket server with JWT auth and trip-based rooms
- Live sync for all CRUD operations (places, assignments, days, notes, budget, packing, reservations, files)
- Socket-based exclusion to prevent duplicate updates
- Auto-reconnect with exponential backoff
- Assignment move sync between days

Performance:
- 16 database indexes on all foreign key columns
- N+1 query fix in places, assignments and days endpoints
- Marker clustering (react-leaflet-cluster) with configurable radius
- List virtualization (react-window) for places sidebar
- useMemo for filtered places
- SQLite WAL mode + busy_timeout for concurrent writes
- Weather API: server-side cache (1h forecast, 15min current) + client sessionStorage
- Google Places photos: persisted to DB after first fetch
- Google Details: 3-tier cache (memory → sessionStorage → API)

Security:
- CORS auto-configuration (production: same-origin, dev: open)
- API keys removed from /auth/me response
- Admin-only endpoint for reading API keys
- Path traversal prevention in cover image deletion
- JWT secret persisted to file (survives restarts)
- Avatar upload file extension whitelist
- API key fallback: normal users use admin's key without exposure
- Case-insensitive email login

Dark Mode:
- Fixed hardcoded colors across PackingList, Budget, ReservationModal, ReservationsPanel
- Mobile map buttons and sidebar sheets respect dark mode
- Cluster markers always dark

UI/UX:
- Redesigned login page with animated planes, stars and feature cards
- Admin: create user functionality with CustomSelect
- Mobile: day-picker popup for assigning places to days
- Mobile: touch-friendly reorder buttons (32px targets)
- Mobile: responsive text (shorter labels on small screens)
- Packing list: index-based category colors
- i18n: translated date picker placeholder, fixed German labels
- Default map tile: CartoDB Light
2026-03-19 12:46:11 +01:00

133 lines
3.4 KiB
JavaScript

import { create } from 'zustand'
import { authApi } from '../api/client'
import { connect, disconnect } from '../api/websocket'
export const useAuthStore = create((set, get) => ({
user: null,
token: localStorage.getItem('auth_token') || null,
isAuthenticated: !!localStorage.getItem('auth_token'),
isLoading: false,
error: null,
login: async (email, password) => {
set({ isLoading: true, error: null })
try {
const data = await authApi.login({ email, password })
localStorage.setItem('auth_token', data.token)
set({
user: data.user,
token: data.token,
isAuthenticated: true,
isLoading: false,
error: null,
})
connect(data.token)
return data
} catch (err) {
const error = err.response?.data?.error || 'Anmeldung fehlgeschlagen'
set({ isLoading: false, error })
throw new Error(error)
}
},
register: async (username, email, password) => {
set({ isLoading: true, error: null })
try {
const data = await authApi.register({ username, email, password })
localStorage.setItem('auth_token', data.token)
set({
user: data.user,
token: data.token,
isAuthenticated: true,
isLoading: false,
error: null,
})
connect(data.token)
return data
} catch (err) {
const error = err.response?.data?.error || 'Registrierung fehlgeschlagen'
set({ isLoading: false, error })
throw new Error(error)
}
},
logout: () => {
disconnect()
localStorage.removeItem('auth_token')
set({
user: null,
token: null,
isAuthenticated: false,
error: null,
})
},
loadUser: async () => {
const token = get().token
if (!token) {
set({ isLoading: false })
return
}
set({ isLoading: true })
try {
const data = await authApi.me()
set({
user: data.user,
isAuthenticated: true,
isLoading: false,
})
connect(token)
} catch (err) {
localStorage.removeItem('auth_token')
set({
user: null,
token: null,
isAuthenticated: false,
isLoading: false,
})
}
},
updateMapsKey: async (key) => {
try {
await authApi.updateMapsKey(key)
set(state => ({
user: { ...state.user, maps_api_key: key || null }
}))
} catch (err) {
throw new Error(err.response?.data?.error || 'Fehler beim Speichern des API-Schlüssels')
}
},
updateApiKeys: async (keys) => {
try {
const data = await authApi.updateApiKeys(keys)
set({ user: data.user })
} catch (err) {
throw new Error(err.response?.data?.error || 'Fehler beim Speichern der API-Schlüssel')
}
},
updateProfile: async (profileData) => {
try {
const data = await authApi.updateSettings(profileData)
set({ user: data.user })
} catch (err) {
throw new Error(err.response?.data?.error || 'Fehler beim Aktualisieren des Profils')
}
},
uploadAvatar: async (file) => {
const formData = new FormData()
formData.append('avatar', file)
const data = await authApi.uploadAvatar(formData)
set(state => ({ user: { ...state.user, avatar_url: data.avatar_url } }))
return data
},
deleteAvatar: async () => {
await authApi.deleteAvatar()
set(state => ({ user: { ...state.user, avatar_url: null } }))
},
}))