feat: Initialize OmniSupport AI project structure
Sets up the basic project structure for OmniSupport AI, including: - Vite build tool configuration. - React and necessary dependencies. - TypeScript configuration. - Basic HTML and root component setup. - Initial type definitions and mock data for core entities like tickets, agents, and queues. - A README with setup instructions. - A .gitignore file for common build artifacts and development files.
This commit is contained in:
fcarraUniSa
199
components/AuthScreen.tsx
Normal file
199
components/AuthScreen.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Agent, ClientUser, AppSettings } from '../types';
|
||||
import { Lock, User, Mail, Briefcase, ArrowRight, AlertCircle } from 'lucide-react';
|
||||
|
||||
interface AuthScreenProps {
|
||||
settings: AppSettings;
|
||||
onClientLogin: (email: string, password: string) => boolean;
|
||||
onAgentLogin: (email: string, password: string) => boolean;
|
||||
onClientRegister: (name: string, email: string, password: string, company: string) => void;
|
||||
}
|
||||
|
||||
export const AuthScreen: React.FC<AuthScreenProps> = ({ settings, onClientLogin, onAgentLogin, onClientRegister }) => {
|
||||
const [activeTab, setActiveTab] = useState<'client' | 'agent'>('client');
|
||||
const [isRegistering, setIsRegistering] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Form States
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [name, setName] = useState('');
|
||||
const [company, setCompany] = useState('');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
let success = false;
|
||||
|
||||
if (activeTab === 'agent') {
|
||||
success = onAgentLogin(email, password);
|
||||
} else {
|
||||
if (isRegistering) {
|
||||
onClientRegister(name, email, password, company);
|
||||
success = true; // Assume success for mock registration
|
||||
} else {
|
||||
success = onClientLogin(email, password);
|
||||
}
|
||||
}
|
||||
|
||||
if (!success) {
|
||||
setError("Credenziali non valide. Per favore controlla email e password.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleTabChange = (tab: 'client' | 'agent') => {
|
||||
setActiveTab(tab);
|
||||
setIsRegistering(false);
|
||||
setError(null);
|
||||
setEmail('');
|
||||
setPassword('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col justify-center items-center p-4">
|
||||
<div className="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
|
||||
<div className="bg-white p-8 pb-0 text-center">
|
||||
<div
|
||||
className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold text-2xl"
|
||||
style={{ backgroundColor: settings.branding.primaryColor }}
|
||||
>
|
||||
{settings.branding.appName.substring(0, 2)}
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">{settings.branding.appName}</h2>
|
||||
<p className="text-gray-500 mt-2 text-sm">Piattaforma di Supporto & Assistenza</p>
|
||||
</div>
|
||||
|
||||
<div className="flex border-b border-gray-200 mt-8">
|
||||
<button
|
||||
onClick={() => handleTabChange('client')}
|
||||
className={`flex-1 py-4 text-sm font-medium transition ${activeTab === 'client' ? 'border-b-2 text-gray-900' : 'text-gray-400 hover:text-gray-600'}`}
|
||||
style={activeTab === 'client' ? { borderColor: settings.branding.primaryColor } : {}}
|
||||
>
|
||||
Cliente
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleTabChange('agent')}
|
||||
className={`flex-1 py-4 text-sm font-medium transition ${activeTab === 'agent' ? 'border-b-2 text-gray-900' : 'text-gray-400 hover:text-gray-600'}`}
|
||||
style={activeTab === 'agent' ? { borderColor: settings.branding.primaryColor } : {}}
|
||||
>
|
||||
Agente / Staff
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-6">
|
||||
{activeTab === 'agent' ? 'Accesso Area Riservata' : (isRegistering ? 'Crea un nuovo account' : 'Accedi al tuo account')}
|
||||
</h3>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg flex items-center text-red-700 text-sm animate-pulse">
|
||||
<AlertCircle className="w-5 h-5 mr-2 flex-shrink-0" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{isRegistering && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Nome Completo</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-2.5 text-gray-400 w-5 h-5" />
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
|
||||
placeholder="Mario Rossi"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-2.5 text-gray-400 w-5 h-5" />
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
className={`w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 bg-white text-gray-900 ${error ? 'border-red-300 focus:ring-red-200' : 'border-gray-300 focus:ring-blue-500'}`}
|
||||
placeholder="nome@esempio.com"
|
||||
value={email}
|
||||
onChange={(e) => { setEmail(e.target.value); setError(null); }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isRegistering && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Azienda (Opzionale)</label>
|
||||
<div className="relative">
|
||||
<Briefcase className="absolute left-3 top-2.5 text-gray-400 w-5 h-5" />
|
||||
<input
|
||||
type="text"
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
|
||||
placeholder="La tua azienda"
|
||||
value={company}
|
||||
onChange={(e) => setCompany(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-2.5 text-gray-400 w-5 h-5" />
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
className={`w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 bg-white text-gray-900 ${error ? 'border-red-300 focus:ring-red-200' : 'border-gray-300 focus:ring-blue-500'}`}
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => { setPassword(e.target.value); setError(null); }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-3 rounded-lg text-white font-bold shadow-md hover:opacity-90 transition flex justify-center items-center mt-6"
|
||||
style={{ backgroundColor: settings.branding.primaryColor }}
|
||||
>
|
||||
{activeTab === 'agent' ? 'Entra in Dashboard' : (isRegistering ? 'Registrati' : 'Accedi')}
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{activeTab === 'client' && (
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-sm text-gray-600">
|
||||
{isRegistering ? 'Hai già un account?' : 'Non hai un account?'}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setIsRegistering(!isRegistering); setError(null); }}
|
||||
className="font-bold ml-1 hover:underline"
|
||||
style={{ color: settings.branding.primaryColor }}
|
||||
>
|
||||
{isRegistering ? 'Accedi' : 'Registrati ora'}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'agent' && (
|
||||
<div className="mt-6 text-center bg-blue-50 p-2 rounded text-xs text-blue-700">
|
||||
Demo: Usa <b>mario@omni.ai</b> / <b>admin</b>
|
||||
</div>
|
||||
)}
|
||||
{activeTab === 'client' && !isRegistering && (
|
||||
<div className="mt-6 text-center bg-gray-50 p-2 rounded text-xs text-gray-700">
|
||||
Demo: Usa <b>luca@client.com</b> / <b>user</b>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user