Merge branch 'claude/youthful-mendel-0c569f'
This commit is contained in:
VPS 4 Builder
@@ -1,30 +1,73 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { User, Building2, ShieldCheck, LogOut } from 'lucide-react';
|
||||
import { User, Building2, ShieldCheck, LogOut, KeyRound, CheckCircle2, AlertCircle, Eye, EyeOff, Loader2 } from 'lucide-react';
|
||||
import { HybridBackend } from '../services/backend.ts';
|
||||
import { GoogleConnectButton } from '../components/GoogleConnectButton.tsx';
|
||||
import { useToast } from '../contexts/ToastContext.tsx';
|
||||
|
||||
export const ConfiguracoesView: React.FC = () => {
|
||||
const [connectedAccounts, setConnectedAccounts] = useState<any[]>([]);
|
||||
const [credsStatus, setCredsStatus] = useState<{ configured: boolean; clientIdHint: string | null; fromEnv: boolean } | null>(null);
|
||||
const [clientId, setClientId] = useState('');
|
||||
const [clientSecret, setClientSecret] = useState('');
|
||||
const [showSecret, setShowSecret] = useState(false);
|
||||
const [savingCreds, setSavingCreds] = useState(false);
|
||||
|
||||
const currentRole = HybridBackend.getCurrentRole();
|
||||
const userName = HybridBackend.getCurrentUserName();
|
||||
const userEmail = HybridBackend.getCurrentUser();
|
||||
const activeWorkspace = HybridBackend.getActiveWorkspace();
|
||||
const clinColor = activeWorkspace?.cor || '#2563eb';
|
||||
const toast = useToast();
|
||||
|
||||
const authHeader = { 'Authorization': `Bearer ${localStorage.getItem('SCOREODONTO_AUTH_TOKEN')}`, 'Content-Type': 'application/json' };
|
||||
|
||||
const fetchGoogleStatus = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/auth/google/status');
|
||||
const data = await response.json();
|
||||
setConnectedAccounts(data);
|
||||
} catch (error) {
|
||||
console.error('Erro ao buscar status do Google:', error);
|
||||
}
|
||||
const res = await fetch('/api/auth/google/status');
|
||||
setConnectedAccounts(await res.json());
|
||||
} catch {}
|
||||
};
|
||||
|
||||
const fetchCredsStatus = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/settings/google-credentials', { headers: authHeader });
|
||||
if (res.ok) setCredsStatus(await res.json());
|
||||
} catch {}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchGoogleStatus();
|
||||
if (currentRole === 'admin') fetchCredsStatus();
|
||||
}, []);
|
||||
|
||||
const handleSaveCreds = async () => {
|
||||
if (!clientId.trim() || !clientSecret.trim()) {
|
||||
toast.error('PREENCHA OS DOIS CAMPOS.');
|
||||
return;
|
||||
}
|
||||
setSavingCreds(true);
|
||||
try {
|
||||
const res = await fetch('/api/settings/google-credentials', {
|
||||
method: 'POST',
|
||||
headers: authHeader,
|
||||
body: JSON.stringify({ clientId: clientId.trim(), clientSecret: clientSecret.trim() })
|
||||
});
|
||||
if (res.ok) {
|
||||
toast.success('CREDENCIAIS SALVAS!');
|
||||
setClientId('');
|
||||
setClientSecret('');
|
||||
await fetchCredsStatus();
|
||||
} else {
|
||||
const d = await res.json();
|
||||
toast.error(d.error || 'ERRO AO SALVAR.');
|
||||
}
|
||||
} catch {
|
||||
toast.error('FALHA NA CONEXÃO.');
|
||||
} finally {
|
||||
setSavingCreds(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
if (window.confirm('TEM CERTEZA QUE DESEJA SAIR DO SISTEMA?')) {
|
||||
HybridBackend.logout();
|
||||
@@ -81,21 +124,111 @@ export const ConfiguracoesView: React.FC = () => {
|
||||
<p className="text-[11px] text-gray-400 font-mono mt-0.5">ID: {activeWorkspace.id}</p>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="ml-auto w-3 h-3 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: clinColor }}
|
||||
/>
|
||||
<div className="ml-auto w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: clinColor }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Integrações */}
|
||||
{/* Integrações — só para admin */}
|
||||
{currentRole === 'admin' && (
|
||||
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-gray-50">
|
||||
<h2 className="text-xs font-black text-gray-500 uppercase tracking-widest">Integrações</h2>
|
||||
<h2 className="text-xs font-black text-gray-500 uppercase tracking-widest">Integrações Google</h2>
|
||||
</div>
|
||||
|
||||
{/* Credenciais OAuth */}
|
||||
<div className="p-6 space-y-4 border-b border-gray-50">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<KeyRound size={15} className="text-gray-400" />
|
||||
<span className="text-xs font-black text-gray-700 uppercase tracking-wide">Credenciais OAuth 2.0</span>
|
||||
</div>
|
||||
{credsStatus?.configured ? (
|
||||
<div className="flex items-center gap-1.5 text-green-600 bg-green-50 px-3 py-1 rounded-full border border-green-100">
|
||||
<CheckCircle2 size={12} />
|
||||
<span className="text-[10px] font-black uppercase">
|
||||
{credsStatus.fromEnv ? 'Via ENV' : 'Configurado'}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 text-amber-600 bg-amber-50 px-3 py-1 rounded-full border border-amber-100">
|
||||
<AlertCircle size={12} />
|
||||
<span className="text-[10px] font-black uppercase">Não configurado</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{credsStatus?.configured && credsStatus.clientIdHint && !credsStatus.fromEnv && (
|
||||
<div className="bg-gray-50 rounded-xl px-4 py-3 border border-gray-100">
|
||||
<p className="text-[10px] font-bold text-gray-400 uppercase mb-1">Client ID atual</p>
|
||||
<p className="text-xs font-mono text-gray-600">{credsStatus.clientIdHint}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{credsStatus?.fromEnv && (
|
||||
<p className="text-[11px] text-gray-400 font-medium">
|
||||
Credenciais carregadas via variável de ambiente. Para substituir, preencha os campos abaixo.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-gray-500 uppercase tracking-wider mb-1.5">
|
||||
Client ID
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={clientId}
|
||||
onChange={e => setClientId(e.target.value)}
|
||||
placeholder={credsStatus?.configured ? 'Deixe vazio para manter atual' : 'xxxxxxxxxxxx.apps.googleusercontent.com'}
|
||||
className="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm font-mono focus:ring-2 focus:ring-blue-100 focus:border-blue-300 outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-gray-500 uppercase tracking-wider mb-1.5">
|
||||
Client Secret
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showSecret ? 'text' : 'password'}
|
||||
value={clientSecret}
|
||||
onChange={e => setClientSecret(e.target.value)}
|
||||
placeholder={credsStatus?.configured ? 'Deixe vazio para manter atual' : 'GOCSPX-...'}
|
||||
className="w-full border border-gray-200 rounded-xl px-4 py-2.5 pr-10 text-sm font-mono focus:ring-2 focus:ring-blue-100 focus:border-blue-300 outline-none transition-all"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowSecret(s => !s)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showSecret ? <EyeOff size={15} /> : <Eye size={15} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleSaveCreds}
|
||||
disabled={savingCreds || (!clientId.trim() && !clientSecret.trim())}
|
||||
className="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all disabled:opacity-40 disabled:cursor-not-allowed bg-gray-900 text-white hover:bg-gray-700"
|
||||
>
|
||||
{savingCreds ? <Loader2 size={14} className="animate-spin" /> : <KeyRound size={14} />}
|
||||
{savingCreds ? 'Salvando...' : 'Salvar Credenciais'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-[10px] text-gray-400 leading-relaxed">
|
||||
Obtenha as credenciais em{' '}
|
||||
<span className="font-mono text-blue-500">console.cloud.google.com</span>
|
||||
{' '}→ APIs & Services → Credentials → OAuth 2.0 Client ID.
|
||||
Adicione{' '}
|
||||
<span className="font-mono text-gray-600">https://scoreodonto.com/api/oauth2callback</span>
|
||||
{' '}como URI de redirecionamento autorizado.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Conectar conta Google */}
|
||||
<div className="p-6">
|
||||
<p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-3">Conta conectada</p>
|
||||
<GoogleConnectButton
|
||||
ownerId="admin"
|
||||
isConnected={connectedAccounts.some(a => a.owner_id === 'admin' || a.owner_id === userEmail)}
|
||||
|
||||
Reference in New Issue
Block a user