Luis
1391fe6216
- Updated Dockerfile to include hardcoded environment variables for Next.js build. - Enhanced Google Calendar API integration by extracting user email from id_token and adding scopes for OpenID and email access. - Modified credential management to delete existing credentials before creating new ones in n8n. - Updated dashboard to display connected Google Calendar email and credential details. Story: 4.2 - Melhorar integração com Google Calendar e atualizar Dockerfile 🤖 Generated with [Claude Code](https://claude.com/claude-code)
75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
interface GoogleCalendarCardProps {
|
|
isConnected: boolean;
|
|
connectedEmail?: string | null;
|
|
credentialId?: string | null;
|
|
credentialName?: string | null;
|
|
onConnect: () => void;
|
|
connecting?: boolean;
|
|
}
|
|
|
|
export default function GoogleCalendarCard({
|
|
isConnected,
|
|
connectedEmail,
|
|
credentialId,
|
|
credentialName,
|
|
onConnect,
|
|
connecting = false,
|
|
}: GoogleCalendarCardProps) {
|
|
return (
|
|
<div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-semibold text-white">Google Calendar</h3>
|
|
<div
|
|
className={`px-3 py-1 rounded-full text-sm font-medium ${
|
|
connecting
|
|
? "bg-yellow-500/10 text-yellow-500"
|
|
: isConnected
|
|
? "bg-green-500/10 text-green-500"
|
|
: "bg-gray-500/10 text-gray-400"
|
|
}`}
|
|
>
|
|
{connecting ? (
|
|
<span className="flex items-center gap-2">
|
|
<div className="animate-spin rounded-full h-3 w-3 border-b-2 border-yellow-500" />
|
|
Conectando...
|
|
</span>
|
|
) : isConnected ? (
|
|
"Conectado ✅"
|
|
) : (
|
|
"Não conectado ❌"
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{connectedEmail && (
|
|
<div className="space-y-2 mb-4">
|
|
<p className="text-gray-400 text-sm">
|
|
📧 Conectado como:{" "}
|
|
<span className="text-white">{connectedEmail}</span>
|
|
</p>
|
|
{credentialName && (
|
|
<p className="text-gray-400 text-sm">
|
|
🔑 Credencial n8n:{" "}
|
|
<span className="text-green-400 font-mono">{credentialName}</span>
|
|
</p>
|
|
)}
|
|
{credentialId && (
|
|
<p className="text-gray-500 text-xs font-mono">
|
|
ID: {credentialId}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onConnect}
|
|
disabled={connecting}
|
|
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{connecting ? "Conectando..." : isConnected ? "Reconectar" : "Conectar"}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|