elpatron/kapteins-daagbok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

feat: add logbook title editing with E2E encryption and sync support

Browse Source
This commit is contained in:
elpatron
2026-05-31 10:45:36 +02:00
parent b48b31580d
commit 917fb92d85
8 changed files with 291 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.css
+26
View File
@@ -1418,6 +1418,32 @@ html.scheme-dark .themed-select-option.is-selected {
background: rgba(244, 63, 94, 0.1);
}
.btn-edit {
background: none;
border: none;
color: #475569;
cursor: pointer;
padding: 6px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.2s ease;
position: absolute;
top: 12px;
right: 48px;
}
.logbook-card:hover .btn-edit {
opacity: 1;
}
.btn-edit:hover {
color: var(--app-accent-light);
background: var(--app-accent-bg);
}
.btn-pdf {
background: none;
border: none;
client/src/components/EditLogbookModal.tsx
+108
View File
@@ -0,0 +1,108 @@
import React, { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Edit2, X } from 'lucide-react'
interface EditLogbookModalProps {
open: boolean
onClose: () => void
currentTitle: string
onSave: (newTitle: string) => Promise<void>
}
export default function EditLogbookModal({ open, onClose, currentTitle, onSave }: EditLogbookModalProps) {
const { t } = useTranslation()
const [title, setTitle] = useState(currentTitle)
const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
useEffect(() => {
if (open) {
setTitle(currentTitle)
setError(null)
}
}, [open, currentTitle])
if (!open) return null
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
const trimmedTitle = title.trim()
if (!trimmedTitle) return
if (trimmedTitle === currentTitle.trim()) {
onClose()
return
}
setLoading(true)
setError(null)
try {
await onSave(trimmedTitle)
onClose()
} catch (err: any) {
setError(err.message || 'Failed to rename logbook')
} finally {
setLoading(false)
}
}
return (
<div className="custom-dialog-overlay" onClick={onClose}>
<div className="custom-dialog-card glass scale-in" onClick={(e) => e.stopPropagation()}>
<button
type="button"
className="registration-disclaimer__close feedback-modal__close"
onClick={onClose}
disabled={loading}
aria-label={t('feedback.cancel')}
style={{ position: 'absolute', top: '12px', right: '12px' }}
>
<X size={18} />
</button>
<h3 className="custom-dialog-title" style={{ display: 'flex', alignItems: 'center', gap: '8px', justifyContent: 'center' }}>
<Edit2 size={20} />
{t('dashboard.edit_title')}
</h3>
<form onSubmit={handleSubmit} style={{ width: '100%', marginTop: '16px' }}>
<div className="input-group" style={{ marginBottom: '20px' }}>
<input
type="text"
className="input-text"
placeholder={t('dashboard.edit_placeholder')}
value={title}
onChange={(e) => setTitle(e.target.value)}
disabled={loading}
required
autoFocus
style={{ width: '100%', textAlign: 'left' }}
/>
</div>
{error && <div className="auth-error" style={{ marginBottom: '16px', fontSize: '13px' }}>{error}</div>}
<div className="custom-dialog-actions">
<button
type="button"
className="btn secondary"
onClick={onClose}
disabled={loading}
style={{ width: 'auto', padding: '8px 20px', margin: 0 }}
>
{t('logs.cancel_event_edit')}
</button>
<button
type="submit"
className="btn primary"
disabled={loading || !title.trim()}
style={{ width: 'auto', minWidth: '80px', padding: '8px 20px', margin: 0 }}
>
{t('dashboard.edit_btn')}
</button>
</div>
</form>
</div>
</div>
)
}
client/src/components/LogbookDashboard.tsx
+45 -2
View File
@@ -2,15 +2,16 @@ import React, { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { useLiveQuery } from 'dexie-react-hooks'
import { db } from '../services/db.js'
import { fetchLogbooks, createLogbook, deleteLogbook, type DecryptedLogbook } from '../services/logbook.js'
import { fetchLogbooks, createLogbook, deleteLogbook, updateLogbookTitle, type DecryptedLogbook } from '../services/logbook.js'
import LogbookRoleBadge from './LogbookRoleBadge.tsx'
import BetaBadge from './BetaBadge.tsx'
import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
import { logoutUser } from '../services/auth.js'
import { useDialog } from './ModalDialog.tsx'
import { BookOpen, Plus, Trash2, LogOut, Languages, RefreshCw, Ship, User, Wifi, WifiOff } from 'lucide-react'
import { BookOpen, Plus, Trash2, Edit2, LogOut, Languages, RefreshCw, Ship, User, Wifi, WifiOff } from 'lucide-react'
import DisclaimerHeaderButton from './DisclaimerHeaderButton.tsx'
import FeedbackHeaderButton from './FeedbackHeaderButton.tsx'
import EditLogbookModal from './EditLogbookModal.tsx'
interface LogbookDashboardProps {
onSelectLogbook: (id: string, title: string) => void
@@ -23,6 +24,7 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
const { showConfirm } = useDialog()
const [logbooks, setLogbooks] = useState<DecryptedLogbook[]>([])
const [newTitle, setNewTitle] = useState('')
const [editingLogbook, setEditingLogbook] = useState<DecryptedLogbook | null>(null)
const [loading, setLoading] = useState(false)
const [refreshing, setRefreshing] = useState(false)
const [error, setError] = useState<string | null>(null)
@@ -99,6 +101,30 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
}
}
const handleEdit = (lb: DecryptedLogbook, e: React.MouseEvent) => {
e.stopPropagation() // Prevent selecting the logbook when clicking edit
setEditingLogbook(lb)
}
const handleSaveTitle = async (newTitle: string) => {
if (!editingLogbook) return
setLoading(true)
setError(null)
try {
await updateLogbookTitle(editingLogbook.id, newTitle)
setLogbooks((prev) =>
prev.map((lb) => (lb.id === editingLogbook.id ? { ...lb, title: newTitle, updatedAt: new Date().toISOString() } : lb))
)
setEditingLogbook(null)
} catch (err: any) {
setError(err.message || 'Failed to update logbook title')
throw err
} finally {
setLoading(false)
}
}
const handleLogout = () => {
void logoutUser()
onLogout()
@@ -144,6 +170,15 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
</div>
</div>
<button
className="btn-edit"
onClick={(e) => handleEdit(lb, e)}
title={t('dashboard.edit_title')}
style={{ visibility: lb.isShared ? 'hidden' : 'visible' }}
>
<Edit2 size={18} />
</button>
<button
className="btn-delete"
onClick={(e) => handleDelete(lb.id, e)}
@@ -291,6 +326,14 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
)}
</section>
</main>
{/* Edit Logbook Title Modal */}
<EditLogbookModal
open={editingLogbook !== null}
onClose={() => setEditingLogbook(null)}
currentTitle={editingLogbook?.title || ''}
onSave={handleSaveTitle}
/>
</div>
)
}
client/src/i18n/locales/de.json
+5 -1
View File
@@ -270,7 +270,11 @@
"role_crew_hint": "Eingeladenes Logbuch — du kannst als Crew mitarbeiten und signieren",
"role_read": "Nur Lesen",
"role_read_hint": "Geteiltes Logbuch — nur Ansicht, keine Bearbeitung",
"open_profile": "Profil von {{name}} öffnen"
"open_profile": "Profil von {{name}} öffnen",
"edit_title": "Logbuch umbenennen",
"edit_placeholder": "Neuer Name des Logbuchs",
"edit_success": "Logbuch erfolgreich umbenannt",
"edit_btn": "Umbenennen"
},
"profile": {
"title": "Benutzerprofil",
client/src/i18n/locales/en.json
+5 -1
View File
@@ -270,7 +270,11 @@
"role_crew_hint": "Invited logbook — you can collaborate and sign as crew",
"role_read": "Read only",
"role_read_hint": "Shared logbook — view only, no editing",
"open_profile": "Open profile for {{name}}"
"open_profile": "Open profile for {{name}}",
"edit_title": "Rename Logbook",
"edit_placeholder": "New name of the logbook",
"edit_success": "Logbook renamed successfully",
"edit_btn": "Rename"
},
"profile": {
"title": "User profile",
client/src/services/logbook.ts
+61
View File
@@ -322,3 +322,64 @@ export async function deleteLogbook(id: string): Promise<void> {
await deleteLocalLogbookCache(id)
trackPlausibleEvent(PlausibleEvents.LOGBOOK_DELETED)
}
// Update the title of a logbook. Encrypts the title and updates locally + on server
export async function updateLogbookTitle(id: string, newTitle: string): Promise<void> {
const userId = localStorage.getItem('active_userid')
if (!userId) {
throw new Error('User not authenticated')
}
const masterKey = getActiveMasterKey()
if (!masterKey) {
throw new Error('Master key not found. User must log in.')
}
const logbookKey = await getLogbookKey(id) || masterKey
// E2E Encrypt the new title using the Logbook Key (or master key fallback)
const encrypted = await encryptJson(newTitle, logbookKey)
const encryptedTitleStr = JSON.stringify(encrypted)
const now = new Date().toISOString()
const payloadData = {
encryptedTitle: encryptedTitleStr
}
if (navigator.onLine) {
try {
const response = await apiFetch(`${API_BASE}/${id}`, {
method: 'PUT',
body: JSON.stringify(payloadData)
})
if (response.ok) {
// Update local IndexedDB cache as synced
await db.logbooks.update(id, {
encryptedTitle: encryptedTitleStr,
updatedAt: now,
isSynced: 1
})
return
}
} catch (error) {
console.warn('Failed to update logbook on server, saving locally instead:', error)
}
}
// If offline or request failed, store locally as unsynced and add to queue
await db.logbooks.update(id, {
encryptedTitle: encryptedTitleStr,
updatedAt: now,
isSynced: 0
})
await db.syncQueue.put({
action: 'update',
type: 'logbook',
payloadId: id,
logbookId: id,
data: JSON.stringify(payloadData),
updatedAt: now
})
}
server/src/routes/logbooks.ts
+37
View File
@@ -131,4 +131,41 @@ router.delete('/:id', async (req: any, res) => {
}
})
// 5. Update a logbook title
router.put('/:id', async (req: any, res) => {
try {
const { id } = req.params
const { encryptedTitle } = req.body
if (!encryptedTitle) {
return res.status(400).json({ error: 'encryptedTitle is required' })
}
const logbook = await prisma.logbook.findUnique({
where: { id }
})
if (!logbook) {
return res.status(404).json({ error: 'Logbook not found' })
}
if (logbook.userId !== req.userId) {
return res.status(403).json({ error: 'Forbidden: Access denied' })
}
const updatedLogbook = await prisma.logbook.update({
where: { id },
data: {
encryptedTitle,
updatedAt: new Date()
}
})
return res.json(updatedLogbook)
} catch (error: any) {
console.error('Error updating logbook:', error)
return res.status(500).json({ error: error.message || 'Internal server error' })
}
})
export default router
server/src/routes/sync.ts
+4 -4
View File
@@ -46,7 +46,7 @@ router.post('/push', async (req: any, res) => {
// Authorize: Check if logbook belongs to user
// Exception: If action is create logbook, the logbook might not exist yet,
// so we authorize based on user creating a logbook with their userId.
if (type === 'logbook' && action === 'create') {
if (type === 'logbook' && (action === 'create' || action === 'update')) {
const existing = await prisma.logbook.findUnique({
where: { id: logbookId }
})
@@ -69,9 +69,9 @@ router.post('/push', async (req: any, res) => {
},
update: {
encryptedTitle: parsed.encryptedTitle,
encryptedKey: parsed.encryptedKey || null,
iv: parsed.iv || null,
tag: parsed.tag || null,
...(parsed.encryptedKey !== undefined ? { encryptedKey: parsed.encryptedKey } : {}),
...(parsed.iv !== undefined ? { iv: parsed.iv } : {}),
...(parsed.tag !== undefined ? { tag: parsed.tag } : {}),
updatedAt: itemUpdatedAt
}
})