sandrodachandClaude Opus 5.5
0e9fd1b3ad
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m27s
- Danger zone in settings: delete all own data or the account, both with password confirmation; the last server admin cannot delete the account - DELETE /user/data and /user/account; PurgeUserData removes everything a user owns in one transaction (others' tasks in shared lists stay theirs), also used by admin user deletion - MindSift import: 'Hinzufügen' or 'Wiederherstellen' (mode=restore, wipes own data only after the file is fully validated, confirm checkbox) - API key name field and button 44 px on phones (flex-1 collapsed them) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
284 lines
10 KiB
TypeScript
284 lines
10 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
Key,
|
||
Plus,
|
||
Trash2,
|
||
Copy,
|
||
Check,
|
||
Webhook,
|
||
Download,
|
||
ShieldCheck,
|
||
Zap,
|
||
Terminal,
|
||
} from 'lucide-react';
|
||
import { APIKey, PriorityLevel } from '../../lib/types';
|
||
import { api, getToken, triggerHaptic } from '../../lib/api';
|
||
|
||
interface EcosystemViewProps {
|
||
onIngested: () => void;
|
||
}
|
||
|
||
export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
|
||
const [keys, setKeys] = useState<APIKey[]>([]);
|
||
const [newKeyName, setNewKeyName] = useState('');
|
||
const [newlyCreatedKey, setNewlyCreatedKey] = useState<string | null>(null);
|
||
const [copiedKey, setCopiedKey] = useState(false);
|
||
|
||
// Live Webhook Simulator State
|
||
const [simTitle, setSimTitle] = useState('Waschmaschine im Keller ist fertig!');
|
||
const [simPriority, setSimPriority] = useState<PriorityLevel>('high');
|
||
const [simStatus, setSimStatus] = useState<string | null>(null);
|
||
|
||
const loadKeys = async () => {
|
||
const k = await api.getAPIKeys();
|
||
setKeys(k);
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadKeys();
|
||
}, []);
|
||
|
||
const handleCreateKey = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
triggerHaptic(15);
|
||
const created = await api.createAPIKey(newKeyName.trim() || 'Home Assistant');
|
||
if (created.rawKey) {
|
||
setNewlyCreatedKey(created.rawKey);
|
||
}
|
||
setNewKeyName('');
|
||
await loadKeys();
|
||
};
|
||
|
||
const handleDeleteKey = async (id: string) => {
|
||
triggerHaptic(20);
|
||
await api.deleteAPIKey(id);
|
||
await loadKeys();
|
||
};
|
||
|
||
const handleCopy = (text: string) => {
|
||
navigator.clipboard.writeText(text);
|
||
setCopiedKey(true);
|
||
setTimeout(() => setCopiedKey(false), 2000);
|
||
};
|
||
|
||
const handleSimulateWebhook = async () => {
|
||
triggerHaptic(20);
|
||
const tokenToUse = newlyCreatedKey || getToken() || '';
|
||
try {
|
||
await api.testWebhookIngest(tokenToUse, simTitle, simPriority, ['smarthome', 'automation']);
|
||
setSimStatus('✅ Webhook erfolgreich ausgelöst! Neue Karte liegt in deiner Inbox.');
|
||
onIngested();
|
||
setTimeout(() => setSimStatus(null), 4000);
|
||
} catch (err: any) {
|
||
setSimStatus(`❌ Fehler: ${err.message}`);
|
||
}
|
||
};
|
||
|
||
const handleFullExport = async () => {
|
||
triggerHaptic(15);
|
||
const data = await api.exportAll();
|
||
const blob = new Blob([JSON.stringify(data, null, 2)], {
|
||
type: 'application/json;charset=utf-8',
|
||
});
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `mindsift-backup-${new Date().toISOString().slice(0, 10)}.json`;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
};
|
||
|
||
const exampleToken = newlyCreatedKey || 'mindsift_sec_dein_api_key';
|
||
const baseUrl = window.location.origin;
|
||
|
||
return (
|
||
<div className="w-full panel-surface divide-y divide-border">
|
||
{/* Section 1: API Keys for Smarthome & Automation */}
|
||
<div className="p-4">
|
||
<div className="flex items-center gap-3 mb-2">
|
||
<div className="w-8 h-8 bg-accent text-white flex items-center justify-center flex-shrink-0">
|
||
<Key className="w-4 h-4" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-base font-bold text-white">
|
||
Webhooks & Ingestion API-Schlüssel
|
||
</h3>
|
||
<p className="text-xs sm:text-sm text-zinc-400">
|
||
Verbinde Home Assistant, Zigbee2MQTT, n8n oder eigene Cronjobs direkt mit deiner MindSift Inbox.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<form onSubmit={handleCreateKey} className="mt-3 flex flex-col sm:flex-row gap-2">
|
||
<input
|
||
type="text"
|
||
value={newKeyName}
|
||
onChange={(e) => setNewKeyName(e.target.value)}
|
||
placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
|
||
className="w-full sm:flex-1 min-w-0 h-11 sm:h-9 px-3 input-field text-base sm:text-sm"
|
||
/>
|
||
<button
|
||
type="submit"
|
||
className="btn-primary h-11 sm:h-9 px-4 text-sm flex items-center justify-center gap-1.5"
|
||
>
|
||
<Plus className="w-4 h-4" />
|
||
<span>API-Key erzeugen</span>
|
||
</button>
|
||
</form>
|
||
|
||
{newlyCreatedKey && (
|
||
<div className="mt-3 p-3 bg-accent/15 border border-accent/30 flex flex-wrap items-center justify-between gap-3">
|
||
<div className="min-w-0">
|
||
<p className="text-xs font-semibold text-accent mb-1">
|
||
Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
|
||
</p>
|
||
<code className="text-xs sm:text-sm font-mono text-white break-all">
|
||
{newlyCreatedKey}
|
||
</code>
|
||
</div>
|
||
<button
|
||
onClick={() => handleCopy(newlyCreatedKey)}
|
||
className="btn-primary h-8 px-3 text-xs"
|
||
>
|
||
{copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
|
||
<span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Active Keys List */}
|
||
<div className="mt-3 border border-border divide-y divide-border">
|
||
{keys.length === 0 ? (
|
||
<p className="text-xs text-zinc-500 px-3 py-2">
|
||
Noch keine dedizierten API-Schlüssel hinterlegt.
|
||
</p>
|
||
) : (
|
||
keys.map((k) => (
|
||
<div
|
||
key={k.id}
|
||
className="px-3 py-1.5 bg-canvas flex items-center justify-between gap-3"
|
||
>
|
||
<div>
|
||
<span className="text-sm font-medium text-white">{k.name}</span>
|
||
<span className="ml-3 text-xs font-mono text-accent">{k.keyPrefix}</span>
|
||
{k.lastUsedAt && (
|
||
<span className="ml-3 text-xs text-zinc-500">
|
||
Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<button
|
||
onClick={() => handleDeleteKey(k.id)}
|
||
className="btn-icon btn-icon-danger w-7 h-7"
|
||
>
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section 2: Interactive Smarthome Webhook Simulator */}
|
||
<div className="p-4">
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<div className="w-7 h-7 bg-accent text-white flex items-center justify-center flex-shrink-0">
|
||
<Webhook className="w-4 h-4" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-base font-bold text-white">
|
||
Live Smarthome Webhook-Simulator
|
||
</h3>
|
||
<p className="text-xs sm:text-sm text-zinc-400">
|
||
Teste den Webhook-Endpunkt direkt hier – das Event landet sofort als Karte im Triage-Deck.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-1.5 mb-3">
|
||
{[
|
||
{ label: '🧺 Waschmaschine fertig', text: 'Waschmaschine im Keller ist fertig – Wäsche aufhängen!', prio: 'high' as PriorityLevel },
|
||
{ label: '🚨 Rauchmelder Batterie', text: 'Rauchmelder Dachgeschoss meldet niedrige Batterie (12%)', prio: 'urgent' as PriorityLevel },
|
||
{ label: '💧 Luftfeuchtigkeit Keller', text: 'Kellerfeuchtigkeit über 70% – Lüften oder Entfeuchter starten', prio: 'urgent' as PriorityLevel },
|
||
].map((preset) => (
|
||
<button
|
||
key={preset.label}
|
||
type="button"
|
||
onClick={() => {
|
||
setSimTitle(preset.text);
|
||
setSimPriority(preset.prio);
|
||
}}
|
||
className="btn-action text-xs"
|
||
>
|
||
{preset.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-2">
|
||
<input
|
||
type="text"
|
||
value={simTitle}
|
||
onChange={(e) => setSimTitle(e.target.value)}
|
||
className="flex-1 h-9 px-3 input-field text-sm"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={handleSimulateWebhook}
|
||
className="btn-primary h-9 px-4 text-xs sm:text-sm flex items-center gap-1.5"
|
||
>
|
||
<Zap className="w-4 h-4" />
|
||
<span>Webhook jetzt abfeuern</span>
|
||
</button>
|
||
</div>
|
||
|
||
{simStatus && (
|
||
<p className="mt-3 text-xs font-medium text-accent">{simStatus}</p>
|
||
)}
|
||
|
||
{/* Code Example Snippets */}
|
||
<div className="mt-4 space-y-2">
|
||
<div className="flex items-center gap-2 text-xs font-medium text-zinc-400">
|
||
<Terminal className="w-3.5 h-3.5 text-accent" />
|
||
<span>cURL / Home Assistant REST Command:</span>
|
||
</div>
|
||
<pre className="p-3 bg-canvas border border-border font-mono text-xs text-zinc-300 overflow-x-auto">
|
||
{`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
|
||
-H "Content-Type: application/json" \\
|
||
-d '{
|
||
"title": "Kellerfeuchtigkeit über 70%",
|
||
"priority": "urgent",
|
||
"tags": ["smarthome", "keller"]
|
||
}'`}
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section 3: Data Sovereignty & Export */}
|
||
<div className="p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-7 h-7 bg-accent text-white flex items-center justify-center flex-shrink-0">
|
||
<ShieldCheck className="w-4 h-4" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-base font-bold text-white">
|
||
100 % Datensouveränität & Komplett-Export
|
||
</h3>
|
||
<p className="text-xs sm:text-sm text-zinc-400">
|
||
Exportiere jederzeit alle Gedanken, Aufgaben, Dokumente und geteilten Listen als portables JSON-Archiv.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
onClick={handleFullExport}
|
||
className="btn-primary h-9 px-4 text-xs sm:text-sm flex items-center gap-2"
|
||
>
|
||
<Download className="w-4 h-4" />
|
||
<span>Komplett-Backup (.json)</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|