Admin
703541d29a
- invitations table (token, task, inviter, expiry 7d) - POST /invitations (create + share links: WhatsApp, Telegram, SMS, Copy) - GET /invite/:token (public landing page) - POST /invite/:token/accept (register + assign + JWT) - Landing page at /invite/[token] with accept flow - CLAUDE.md + Notion key deployed to all servers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
185 lines
11 KiB
TypeScript
185 lines
11 KiB
TypeScript
'use client';
|
|
import { useState } from 'react';
|
|
import { createInvitation, InvitationResponse } from '@/lib/api';
|
|
|
|
interface InviteModalProps {
|
|
taskId: string;
|
|
token: string;
|
|
userId: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function InviteModal({ taskId, token, userId, onClose }: InviteModalProps) {
|
|
const [email, setEmail] = useState('');
|
|
const [name, setName] = useState('');
|
|
const [message, setMessage] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [result, setResult] = useState<InvitationResponse | null>(null);
|
|
const [error, setError] = useState('');
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
async function handleInvite() {
|
|
setLoading(true);
|
|
setError('');
|
|
try {
|
|
const res = await createInvitation(token, {
|
|
task_id: taskId,
|
|
invitee_email: email || undefined,
|
|
invitee_name: name || undefined,
|
|
message: message || undefined,
|
|
inviter_id: userId,
|
|
});
|
|
setResult(res.data);
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Chyba pri vytvareni pozvanky');
|
|
}
|
|
setLoading(false);
|
|
}
|
|
|
|
async function copyLink() {
|
|
if (!result) return;
|
|
try {
|
|
await navigator.clipboard.writeText(result.link);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
} catch {
|
|
// Fallback
|
|
const input = document.createElement('input');
|
|
input.value = result.link;
|
|
document.body.appendChild(input);
|
|
input.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(input);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" onClick={onClose}>
|
|
<div
|
|
className="bg-white dark:bg-gray-900 rounded-2xl p-6 max-w-sm w-full shadow-2xl"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-bold">Pozvat do ukolu</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{!result ? (
|
|
<div className="space-y-3">
|
|
<input
|
|
value={name}
|
|
onChange={e => setName(e.target.value)}
|
|
placeholder="Jmeno (nepovinne)"
|
|
className="w-full px-4 py-3 rounded-lg border dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none"
|
|
/>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={e => setEmail(e.target.value)}
|
|
placeholder="Email (nepovinne)"
|
|
className="w-full px-4 py-3 rounded-lg border dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none"
|
|
/>
|
|
<textarea
|
|
value={message}
|
|
onChange={e => setMessage(e.target.value)}
|
|
placeholder="Zprava (nepovinne)"
|
|
rows={2}
|
|
className="w-full px-4 py-3 rounded-lg border dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none resize-none"
|
|
/>
|
|
|
|
{error && (
|
|
<div className="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-sm rounded-lg p-2">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
onClick={handleInvite}
|
|
disabled={loading}
|
|
className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-bold disabled:opacity-50 transition-colors"
|
|
>
|
|
{loading ? 'Vytvarim...' : 'Vytvorit pozvanku'}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
<div className="bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 rounded-lg p-3 text-sm text-center">
|
|
Pozvanka vytvorena!
|
|
</div>
|
|
|
|
{/* Link display */}
|
|
<div className="flex items-center gap-2 bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
|
|
<input
|
|
readOnly
|
|
value={result.link}
|
|
className="flex-1 bg-transparent text-sm outline-none truncate"
|
|
/>
|
|
<button
|
|
onClick={copyLink}
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
|
copied
|
|
? 'bg-green-600 text-white'
|
|
: 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600'
|
|
}`}
|
|
>
|
|
{copied ? 'Skopirovano!' : 'Kopirovat'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Share buttons */}
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<a
|
|
href={result.share.whatsapp}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex flex-col items-center gap-1 p-3 bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/30 rounded-xl transition-colors"
|
|
>
|
|
<svg className="w-6 h-6 text-green-600" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
|
|
</svg>
|
|
<span className="text-xs font-medium text-green-700 dark:text-green-400">WhatsApp</span>
|
|
</a>
|
|
<a
|
|
href={result.share.telegram}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex flex-col items-center gap-1 p-3 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-xl transition-colors"
|
|
>
|
|
<svg className="w-6 h-6 text-blue-500" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
|
|
</svg>
|
|
<span className="text-xs font-medium text-blue-600 dark:text-blue-400">Telegram</span>
|
|
</a>
|
|
<a
|
|
href={result.share.sms}
|
|
className="flex flex-col items-center gap-1 p-3 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-xl transition-colors"
|
|
>
|
|
<svg className="w-6 h-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
|
</svg>
|
|
<span className="text-xs font-medium text-gray-600 dark:text-gray-400">SMS</span>
|
|
</a>
|
|
</div>
|
|
|
|
<button
|
|
onClick={onClose}
|
|
className="w-full py-2 text-gray-500 text-sm hover:text-gray-700 dark:hover:text-gray-300"
|
|
>
|
|
Zavrit
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|