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

feat(feedback): optionales E-Mail-Kontaktfeld im Formular

Browse Source 
Nutzer können optional eine E-Mail hinterlassen; Validierung client-/serverseitig, Weitergabe in Ntfy-Benachrichtigungen.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
elpatron
2026-05-30 13:24:43 +02:00
parent c914156d70
commit 858d5d1d25
7 changed files with 81 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.css
+2
View File
@@ -457,6 +457,7 @@ html.scheme-dark .themed-select-option.is-selected {
}
.feedback-form__field select,
.feedback-form__field input,
.feedback-form__field textarea {
width: 100%;
padding: 10px 12px;
@@ -469,6 +470,7 @@ html.scheme-dark .themed-select-option.is-selected {
}
.feedback-form__field select:focus,
.feedback-form__field input:focus,
.feedback-form__field textarea:focus {
outline: none;
border-color: var(--app-accent, #38bdf8);
client/src/components/FeedbackModal.tsx
+24
View File
@@ -22,6 +22,7 @@ export default function FeedbackModal({
}: FeedbackModalProps) {
const { t } = useTranslation()
const [category, setCategory] = useState<FeedbackCategory>('general')
const [contactEmail, setContactEmail] = useState('')
const [message, setMessage] = useState('')
const [submitState, setSubmitState] = useState<SubmitState>('idle')
const [statusMessage, setStatusMessage] = useState<string | null>(null)
@@ -53,6 +54,7 @@ export default function FeedbackModal({
if (!open) {
clearCloseTimer()
setCategory('general')
setContactEmail('')
setMessage('')
setSubmitState('idle')
setStatusMessage(null)
@@ -70,6 +72,7 @@ export default function FeedbackModal({
await sendFeedback({
category,
message: message.trim(),
contactEmail: contactEmail.trim() || undefined,
logbookId,
logbookTitle
})
@@ -84,6 +87,8 @@ export default function FeedbackModal({
setStatusMessage(
error instanceof FeedbackApiError && error.code === 'NOT_CONFIGURED'
? t('feedback.error_not_configured')
: error instanceof FeedbackApiError && error.code === 'INVALID_EMAIL'
? t('feedback.error_invalid_email')
: t('feedback.error_send')
)
}
@@ -139,6 +144,25 @@ export default function FeedbackModal({
</select>
</label>
<label className="feedback-form__field">
<span>{t('feedback.contact_label')}</span>
<input
type="email"
value={contactEmail}
onChange={(event) => {
setContactEmail(event.target.value)
if (submitState === 'error') {
setSubmitState('idle')
setStatusMessage(null)
}
}}
placeholder={t('feedback.contact_placeholder')}
autoComplete="email"
maxLength={254}
disabled={submitState === 'submitting'}
/>
</label>
<label className="feedback-form__field">
<span>{t('feedback.message_label')}</span>
<textarea
client/src/i18n/locales/de.json
+3
View File
@@ -406,6 +406,8 @@
"category_general": "Allgemein",
"category_bug": "Fehler melden",
"category_feature": "Feature-Wunsch",
"contact_label": "E-Mail (optional)",
"contact_placeholder": "ihre@email.beispiel",
"message_label": "Nachricht",
"message_placeholder": "Beschreiben Sie Ihr Feedback…",
"send": "Senden",
@@ -413,6 +415,7 @@
"cancel": "Abbrechen",
"success": "Vielen Dank! Ihr Feedback wurde gesendet.",
"error_send": "Feedback konnte nicht gesendet werden. Bitte versuchen Sie es später erneut.",
"error_invalid_email": "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
"error_not_configured": "Feedback ist auf diesem Server nicht verfügbar."
},
"demo": {
client/src/i18n/locales/en.json
+3
View File
@@ -406,6 +406,8 @@
"category_general": "General",
"category_bug": "Bug report",
"category_feature": "Feature request",
"contact_label": "Email (optional)",
"contact_placeholder": "your@email.example",
"message_label": "Message",
"message_placeholder": "Describe your feedback…",
"send": "Send",
@@ -413,6 +415,7 @@
"cancel": "Cancel",
"success": "Thank you! Your feedback has been sent.",
"error_send": "Could not send feedback. Please try again later.",
"error_invalid_email": "Please enter a valid email address.",
"error_not_configured": "Feedback is not available on this server."
},
"demo": {
client/src/services/feedback.ts
+18 -2
View File
@@ -1,15 +1,24 @@
export type FeedbackCategory = 'bug' | 'feature' | 'general'
export class FeedbackApiError extends Error {
code: 'NOT_CONFIGURED' | 'REQUEST_FAILED'
code: 'NOT_CONFIGURED' | 'REQUEST_FAILED' | 'INVALID_EMAIL'
constructor(message: string, code: 'NOT_CONFIGURED' | 'REQUEST_FAILED' = 'REQUEST_FAILED') {
constructor(
message: string,
code: 'NOT_CONFIGURED' | 'REQUEST_FAILED' | 'INVALID_EMAIL' = 'REQUEST_FAILED'
) {
super(message)
this.name = 'FeedbackApiError'
this.code = code
}
}
const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
export function isValidFeedbackEmail(email: string): boolean {
return EMAIL_PATTERN.test(email.trim())
}
function buildFeedbackHeaders(): Record<string, string> {
const headers: Record<string, string> = {
'Content-Type': 'application/json'
@@ -22,15 +31,22 @@ function buildFeedbackHeaders(): Record<string, string> {
export async function sendFeedback(payload: {
category: FeedbackCategory
message: string
contactEmail?: string | null
logbookId?: string | null
logbookTitle?: string | null
}): Promise<void> {
const contactEmail = payload.contactEmail?.trim()
if (contactEmail && !isValidFeedbackEmail(contactEmail)) {
throw new FeedbackApiError('Invalid email address', 'INVALID_EMAIL')
}
const res = await fetch('/api/feedback', {
method: 'POST',
headers: buildFeedbackHeaders(),
body: JSON.stringify({
category: payload.category,
message: payload.message,
contactEmail: contactEmail || undefined,
username: localStorage.getItem('active_username') || undefined,
logbookId: payload.logbookId || undefined,
logbookTitle: payload.logbookTitle || undefined,
server/src/routes/feedback.ts
+25 -1
View File
@@ -5,6 +5,20 @@ const router = Router()
const VALID_CATEGORIES = new Set(['bug', 'feature', 'general'])
const MAX_MESSAGE_LENGTH = 2000
const MAX_EMAIL_LENGTH = 254
const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
function parseOptionalEmail(value: unknown): string | undefined {
if (value === undefined || value === null || value === '') return undefined
if (typeof value !== 'string') return undefined
const trimmed = value.trim()
if (!trimmed) return undefined
if (trimmed.length > MAX_EMAIL_LENGTH) return undefined
if (!EMAIL_PATTERN.test(trimmed)) return undefined
return trimmed
}
const requireUser = (req: any, res: any, next: any) => {
const userId = req.headers['x-user-id']
@@ -25,7 +39,8 @@ router.post('/', requireUser, async (req: any, res) => {
return res.status(503).json({ error: 'Feedback is not configured on this server' })
}
const { category, message, username, logbookId, logbookTitle, appVersion, pageUrl } = req.body ?? {}
const { category, message, username, contactEmail, logbookId, logbookTitle, appVersion, pageUrl } =
req.body ?? {}
if (typeof category !== 'string' || !VALID_CATEGORIES.has(category)) {
return res.status(400).json({ error: 'Invalid category' })
@@ -40,10 +55,19 @@ router.post('/', requireUser, async (req: any, res) => {
return res.status(400).json({ error: `Message must be at most ${MAX_MESSAGE_LENGTH} characters` })
}
let parsedContactEmail: string | undefined
if (contactEmail !== undefined && contactEmail !== null && String(contactEmail).trim()) {
parsedContactEmail = parseOptionalEmail(contactEmail)
if (!parsedContactEmail) {
return res.status(400).json({ error: 'Invalid email address' })
}
}
await sendFeedbackViaNtfy({
category,
message: trimmedMessage,
username: typeof username === 'string' ? username.trim() : undefined,
contactEmail: parsedContactEmail,
userId: req.userId,
logbookId: typeof logbookId === 'string' ? logbookId.trim() : undefined,
logbookTitle: typeof logbookTitle === 'string' ? logbookTitle.trim() : undefined,
server/src/services/ntfyNotify.ts
+5
View File
@@ -2,6 +2,7 @@ export interface FeedbackPayload {
category: string
message: string
username?: string
contactEmail?: string
userId: string
logbookId?: string
logbookTitle?: string
@@ -40,6 +41,10 @@ export async function sendFeedbackViaNtfy(payload: FeedbackPayload): Promise<voi
`User ID: ${payload.userId}`
]
if (payload.contactEmail) {
lines.push(`Contact: ${payload.contactEmail}`)
}
if (payload.logbookTitle || payload.logbookId) {
lines.push(`Logbook: ${payload.logbookTitle || payload.logbookId}`)
}