103 lines
4.1 KiB
TypeScript
Executable File
103 lines
4.1 KiB
TypeScript
Executable File
/**
|
|
* AddAccountModal.tsx
|
|
*
|
|
* @author Descomplicar® Crescimento Digital
|
|
* @link https://descomplicar.pt
|
|
* @copyright 2025 Descomplicar®
|
|
*/
|
|
|
|
import React, { useState } from 'react';
|
|
import type { Account } from '../types';
|
|
import { GmailIcon } from './icons/GmailIcon';
|
|
import { OutlookIcon } from './icons/OutlookIcon';
|
|
import { YahooIcon } from './icons/YahooIcon';
|
|
import { ImapIcon } from './icons/ImapIcon';
|
|
import AddImapAccountForm from './AddImapAccountForm';
|
|
|
|
interface AddAccountModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onAddAccount: (account: Omit<Account, 'id' | 'avatar'>) => void;
|
|
}
|
|
|
|
const AddAccountModal: React.FC<AddAccountModalProps> = ({ isOpen, onClose, onAddAccount }) => {
|
|
const [view, setView] = useState<'providers' | 'imapForm'>('providers');
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const handleProviderClick = (provider: Account['provider']) => {
|
|
const email = `novo.usuario.${Math.floor(Math.random() * 1000)}@${provider}.com`;
|
|
onAddAccount({ email, provider });
|
|
};
|
|
|
|
const handleImapConnect = (email: string) => {
|
|
onAddAccount({ email, provider: 'imap' });
|
|
}
|
|
|
|
const providers: { name: Account['provider'], icon: React.ReactNode }[] = [
|
|
{ name: 'gmail', icon: <GmailIcon className="w-6 h-6" /> },
|
|
{ name: 'outlook', icon: <OutlookIcon className="w-6 h-6" /> },
|
|
{ name: 'yahoo', icon: <YahooIcon className="w-6 h-6 text-[#6001d2]" /> },
|
|
];
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4"
|
|
aria-modal="true"
|
|
role="dialog"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className="bg-white dark:bg-slate-800 rounded-xl shadow-2xl p-6 w-full max-w-sm transform transition-all"
|
|
role="document"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-white" id="modal-title">
|
|
{view === 'providers' ? 'Conectar nova conta' : 'Conectar Conta IMAP'}
|
|
</h3>
|
|
<button onClick={onClose} className="p-1 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-slate-500">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{view === 'providers' ? (
|
|
<>
|
|
<p className="text-sm text-slate-500 dark:text-slate-400 mb-6">
|
|
Selecione seu provedor de e-mail para conectar sua conta com segurança.
|
|
</p>
|
|
<div className="space-y-3">
|
|
{providers.map(provider => (
|
|
<button
|
|
key={provider.name}
|
|
onClick={() => handleProviderClick(provider.name)}
|
|
className="w-full flex items-center gap-4 p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"
|
|
>
|
|
{provider.icon}
|
|
<span className="font-medium text-slate-700 dark:text-slate-200 capitalize">
|
|
Conectar com {provider.name}
|
|
</span>
|
|
</button>
|
|
))}
|
|
<button
|
|
onClick={() => setView('imapForm')}
|
|
className="w-full flex items-center gap-4 p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"
|
|
>
|
|
<ImapIcon className="w-6 h-6 text-slate-500" />
|
|
<span className="font-medium text-slate-700 dark:text-slate-200">
|
|
Conectar via IMAP
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<AddImapAccountForm onConnect={handleImapConnect} onBack={() => setView('providers')} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddAccountModal; |