chore: release v0.1.0.35

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

Co-authored-by: Cursor <cursoragent@cursor.com>

VERSION

@@ -1 +1 @@
-0.1.0.35
+0.1.0.36

client/src/App.css

@@ -388,6 +388,51 @@ html.scheme-dark .themed-select-option.is-selected {
   max-height: min(90vh, 820px);
 }
 
+.feedback-modal {
+  position: relative;
+}
+
+.feedback-modal__close {
+  top: 12px;
+  right: 12px;
+  z-index: 1;
+}
+
+.feedback-status {
+  text-align: center;
+  padding: 8px 0 4px;
+}
+
+.feedback-status p {
+  margin: 12px 0 0;
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.feedback-status--success {
+  color: #4ade80;
+  padding: 24px 8px 32px;
+}
+
+.feedback-status--success p {
+  color: var(--app-text-heading, #f1f5f9);
+}
+
+.feedback-status--error {
+  color: var(--app-error-text, #fda4af);
+  background: var(--app-error-bg, rgba(244, 63, 94, 0.08));
+  border: 1px solid var(--app-error-border, #f43f5e);
+  border-radius: 8px;
+  margin-bottom: 16px;
+  padding: 10px 12px;
+  text-align: left;
+}
+
+.feedback-status--error p {
+  margin: 0;
+  font-size: 14px;
+}
+
 .feedback-modal .auth-actions {
   margin-top: 0;
 }
@@ -412,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;
@@ -424,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

@@ -1,8 +1,9 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { MessageSquarePlus, X } from 'lucide-react'
+import { CheckCircle2, MessageSquarePlus, X } from 'lucide-react'
 import { FeedbackApiError, sendFeedback, type FeedbackCategory } from '../services/feedback.js'
-import { useDialog } from './ModalDialog.tsx'
+
+const SUCCESS_CLOSE_DELAY_MS = 1800
 
 interface FeedbackModalProps {
   open: boolean
@@ -11,6 +12,8 @@ interface FeedbackModalProps {
   logbookTitle?: string | null
 }
 
+type SubmitState = 'idle' | 'submitting' | 'success' | 'error'
+
 export default function FeedbackModal({
   open,
   onClose,
@@ -18,82 +21,122 @@ export default function FeedbackModal({
   logbookTitle
 }: FeedbackModalProps) {
   const { t } = useTranslation()
-  const { showAlert } = useDialog()
   const [category, setCategory] = useState<FeedbackCategory>('general')
+  const [contactEmail, setContactEmail] = useState('')
   const [message, setMessage] = useState('')
-  const [sending, setSending] = useState(false)
+  const [submitState, setSubmitState] = useState<SubmitState>('idle')
+  const [statusMessage, setStatusMessage] = useState<string | null>(null)
+  const closeTimerRef = useRef<number | null>(null)
+
+  const isBusy = submitState === 'submitting' || submitState === 'success'
+
+  const clearCloseTimer = () => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+  }
+
+  useEffect(() => {
+    return () => clearCloseTimer()
+  }, [])
 
   useEffect(() => {
     if (!open) return
     const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && !sending) onClose()
+      if (event.key === 'Escape' && !isBusy) onClose()
     }
     window.addEventListener('keydown', onKeyDown)
     return () => window.removeEventListener('keydown', onKeyDown)
-  }, [open, onClose, sending])
+  }, [open, onClose, isBusy])
 
   useEffect(() => {
     if (!open) {
+      clearCloseTimer()
       setCategory('general')
+      setContactEmail('')
       setMessage('')
-      setSending(false)
+      setSubmitState('idle')
+      setStatusMessage(null)
     }
   }, [open])
 
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault()
-    if (!message.trim() || sending) return
+    if (!message.trim() || submitState === 'submitting' || submitState === 'success') return
+
+    setSubmitState('submitting')
+    setStatusMessage(null)
 
-    setSending(true)
     try {
       await sendFeedback({
         category,
         message: message.trim(),
+        contactEmail: contactEmail.trim() || undefined,
         logbookId,
         logbookTitle
       })
-      await showAlert(t('feedback.success'), t('feedback.title'))
+      setSubmitState('success')
+      setStatusMessage(t('feedback.success'))
+      closeTimerRef.current = window.setTimeout(() => {
+        closeTimerRef.current = null
         onClose()
+      }, SUCCESS_CLOSE_DELAY_MS)
     } catch (error) {
-      const msg =
+      setSubmitState('error')
+      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')
-      await showAlert(msg, t('feedback.title'))
-    } finally {
-      setSending(false)
+      )
     }
   }
 
   if (!open) return null
 
   return (
-    <div className="disclaimer-modal-overlay" onClick={sending ? undefined : onClose}>
+    <div className="disclaimer-modal-overlay" onClick={isBusy ? undefined : onClose}>
       <div className="disclaimer-modal-panel" onClick={(event) => event.stopPropagation()}>
         <div className="auth-card glass registration-disclaimer registration-disclaimer--modal feedback-modal">
-          <div className="auth-header">
-            <MessageSquarePlus className="auth-icon accent" size={48} />
-            <h2>{t('feedback.title')}</h2>
           <button
             type="button"
-              className="registration-disclaimer__close"
+            className="registration-disclaimer__close feedback-modal__close"
             onClick={onClose}
-              disabled={sending}
+            disabled={isBusy}
             aria-label={t('feedback.cancel')}
           >
             <X size={18} />
           </button>
+
+          <div className="auth-header">
+            <MessageSquarePlus className="auth-icon accent" size={48} />
+            <h2>{t('feedback.title')}</h2>
           </div>
 
+          {submitState === 'success' ? (
+            <div className="feedback-status feedback-status--success" role="status" aria-live="polite">
+              <CheckCircle2 size={40} aria-hidden="true" />
+              <p>{statusMessage}</p>
+            </div>
+          ) : (
+            <>
               <p className="registration-disclaimer__intro">{t('feedback.intro')}</p>
 
+              {statusMessage && submitState === 'error' && (
+                <div className="feedback-status feedback-status--error" role="alert">
+                  <p>{statusMessage}</p>
+                </div>
+              )}
+
               <form className="feedback-form" onSubmit={handleSubmit}>
                 <label className="feedback-form__field">
                   <span>{t('feedback.category_label')}</span>
                   <select
                     value={category}
                     onChange={(event) => setCategory(event.target.value as FeedbackCategory)}
-                disabled={sending}
+                    disabled={submitState === 'submitting'}
                   >
                     <option value="general">{t('feedback.category_general')}</option>
                     <option value="bug">{t('feedback.category_bug')}</option>
@@ -101,28 +144,64 @@ 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
                     value={message}
-                onChange={(event) => setMessage(event.target.value)}
+                    onChange={(event) => {
+                      setMessage(event.target.value)
+                      if (submitState === 'error') {
+                        setSubmitState('idle')
+                        setStatusMessage(null)
+                      }
+                    }}
                     placeholder={t('feedback.message_placeholder')}
                     rows={6}
                     maxLength={2000}
                     required
-                disabled={sending}
+                    disabled={submitState === 'submitting'}
                   />
                 </label>
 
                 <div className="auth-actions feedback-form__actions">
-              <button type="button" className="btn secondary" onClick={onClose} disabled={sending}>
+                  <button
+                    type="button"
+                    className="btn secondary"
+                    onClick={onClose}
+                    disabled={submitState === 'submitting'}
+                  >
                     {t('feedback.cancel')}
                   </button>
-              <button type="submit" className="btn primary" disabled={sending || !message.trim()}>
-                {sending ? t('feedback.sending') : t('feedback.send')}
+                  <button
+                    type="submit"
+                    className="btn primary"
+                    disabled={submitState === 'submitting' || !message.trim()}
+                  >
+                    {submitState === 'submitting' ? t('feedback.sending') : t('feedback.send')}
                   </button>
                 </div>
               </form>
+            </>
+          )}
         </div>
       </div>
     </div>

client/src/i18n/locales/de.json

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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}`)
   }