mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-19 13:21:46 +00:00
74f19f3312
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
133 lines
3.4 KiB
JavaScript
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 } }))
|
|
},
|
|
}))
|