467 lines
No EOL
14 KiB
TypeScript
467 lines
No EOL
14 KiB
TypeScript
"use client";
|
|
import React, { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
const AuthenticationScreen = () => {
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const router = useRouter();
|
|
|
|
// ZITADEL configuration
|
|
const zitadelConfig = {
|
|
authority: 'https://your-zitadel-instance.com',
|
|
clientId: 'your-client-id',
|
|
redirectUri: typeof window !== 'undefined' ? window.location.origin : '',
|
|
scopes: ['openid', 'profile', 'email'],
|
|
};
|
|
|
|
const handleSocialLogin = (provider: string) => {
|
|
setIsLoading(true);
|
|
setError('');
|
|
try {
|
|
// In a real implementation, this would redirect to ZITADEL's auth endpoint
|
|
const authUrl = `${zitadelConfig.authority}/oauth/v2/authorize?` +
|
|
`client_id=${zitadelConfig.clientId}&` +
|
|
`redirect_uri=${encodeURIComponent(zitadelConfig.redirectUri)}&` +
|
|
`response_type=code&` +
|
|
`scope=${encodeURIComponent(zitadelConfig.scopes.join(' '))}&` +
|
|
`provider=${provider}`;
|
|
|
|
window.location.href = authUrl;
|
|
} catch (err) {
|
|
setError('Failed to initiate login');
|
|
console.error('Login error:', err);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleEmailLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
setError('');
|
|
|
|
try {
|
|
// Mock implementation - in real app you would call your backend or ZITADEL directly
|
|
localStorage.setItem('authToken', 'dummy-token');
|
|
router.push('/dashboard');
|
|
} catch (err) {
|
|
setError('Login failed. Please check your credentials.');
|
|
console.error('Login error:', err);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="auth-screen">
|
|
<div className="auth-content">
|
|
<div className="auth-left-panel">
|
|
<div className="auth-logo">
|
|
<h1>Welcome to General Bots Online</h1>
|
|
</div>
|
|
<div className="auth-quote">
|
|
<p>"Errar é Humano."</p>
|
|
<p>General Bots</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="auth-form-container">
|
|
<div className="auth-form-header">
|
|
<h2>Sign in to your account</h2>
|
|
<p>Choose your preferred login method</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="auth-error">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div className="auth-social-buttons">
|
|
<button
|
|
className="auth-social-button google"
|
|
onClick={() => handleSocialLogin('google')}
|
|
disabled={isLoading}
|
|
>
|
|
<svg className="auth-social-icon" viewBox="0 0 24 24">
|
|
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
|
|
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
|
|
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
|
|
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
|
|
</svg>
|
|
Continue with Google
|
|
</button>
|
|
|
|
<button
|
|
className="auth-social-button microsoft"
|
|
onClick={() => handleSocialLogin('microsoft')}
|
|
disabled={isLoading}
|
|
>
|
|
<svg className="auth-social-icon" viewBox="0 0 23 23">
|
|
<path d="M0 0h11v11H0zM12 0h11v11H12zM0 12h11v11H0zM12 12h11v11H12z" fill="#F25022"/>
|
|
<path d="M12 0h11v11H12z" fill="#7FBA00"/>
|
|
<path d="M0 12h11v11H0z" fill="#00A4EF"/>
|
|
<path d="M12 12h11v11H12z" fill="#FFB900"/>
|
|
</svg>
|
|
Continue with Microsoft
|
|
</button>
|
|
|
|
<button
|
|
className="auth-social-button facebook"
|
|
onClick={() => handleSocialLogin('facebook')}
|
|
disabled={isLoading}
|
|
>
|
|
<svg className="auth-social-icon" viewBox="0 0 24 24">
|
|
<path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z" fill="#1877F2"/>
|
|
</svg>
|
|
Continue with Facebook
|
|
</button>
|
|
|
|
<button
|
|
className="auth-social-button pragmatismo"
|
|
onClick={() => handleSocialLogin('pragmatismo')}
|
|
disabled={isLoading}
|
|
>
|
|
<svg className="auth-social-icon" viewBox="0 0 24 24">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" fill="currentColor"/>
|
|
</svg>
|
|
Continue with Pragmatismo
|
|
</button>
|
|
</div>
|
|
|
|
<div className="auth-divider">
|
|
<span>OR</span>
|
|
</div>
|
|
|
|
<form onSubmit={handleEmailLogin} className="auth-form">
|
|
<div className="auth-form-group">
|
|
<label htmlFor="email">Email</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="your@email.com"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="auth-form-group">
|
|
<label htmlFor="password">Password</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="••••••••"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="auth-form-options">
|
|
<div className="auth-remember-me">
|
|
<input type="checkbox" id="remember" />
|
|
<label htmlFor="remember">Remember me</label>
|
|
</div>
|
|
<a href="#" className="auth-forgot-password">Forgot password?</a>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="auth-submit-button"
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? 'Signing in...' : 'Sign in with Email'}
|
|
</button>
|
|
</form>
|
|
|
|
<div className="auth-signup-link">
|
|
Don't have an account? <a href="#">Sign up</a>
|
|
</div>
|
|
|
|
<p className="auth-terms">
|
|
By continuing, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
.auth-screen {
|
|
--background: hsl(var(--background));
|
|
--foreground: hsl(var(--foreground));
|
|
--card: hsl(var(--card));
|
|
--card-foreground: hsl(var(--card-foreground));
|
|
--primary: hsl(var(--primary));
|
|
--primary-foreground: hsl(var(--primary-foreground));
|
|
--secondary: hsl(var(--secondary));
|
|
--secondary-foreground: hsl(var(--secondary-foreground));
|
|
--muted: hsl(var(--muted));
|
|
--muted-foreground: hsl(var(--muted-foreground));
|
|
--accent: hsl(var(--accent));
|
|
--accent-foreground: hsl(var(--accent-foreground));
|
|
--destructive: hsl(var(--destructive));
|
|
--destructive-foreground: hsl(var(--destructive-foreground));
|
|
--border: hsl(var(--border));
|
|
--input: hsl(var(--input));
|
|
--ring: hsl(var(--ring));
|
|
--radius: var(--radius);
|
|
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.auth-content {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
background-color: var(--card);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.auth-left-panel {
|
|
flex: 1;
|
|
padding: 4rem;
|
|
background: linear-gradient(135deg, var(--primary), var(--accent));
|
|
color: var(--primary-foreground);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.auth-logo h1 {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.auth-quote {
|
|
font-style: italic;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.auth-quote p:last-child {
|
|
text-align: right;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.auth-form-container {
|
|
flex: 1;
|
|
padding: 4rem;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.auth-form-header {
|
|
margin-bottom: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.auth-form-header h2 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.auth-form-header p {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.auth-error {
|
|
background-color: var(--destructive);
|
|
color: var(--destructive-foreground);
|
|
padding: 0.75rem;
|
|
border-radius: var(--radius);
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.auth-social-buttons {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.auth-social-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.75rem;
|
|
border-radius: var(--radius);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: 1px solid var(--border);
|
|
background-color: var(--secondary);
|
|
color: var(--secondary-foreground);
|
|
}
|
|
|
|
.auth-social-button:hover {
|
|
background-color: var(--muted);
|
|
}
|
|
|
|
.auth-social-button:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.auth-social-icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.auth-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 1.5rem 0;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.auth-divider::before,
|
|
.auth-divider::after {
|
|
content: "";
|
|
flex: 1;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.auth-divider span {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.auth-form {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.auth-form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.auth-form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.auth-form-group input {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--border);
|
|
background-color: var(--input);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.auth-form-group input:focus {
|
|
outline: none;
|
|
border-color: var(--ring);
|
|
box-shadow: 0 0 0 2px var(--ring);
|
|
}
|
|
|
|
.auth-form-options {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.auth-remember-me {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.auth-remember-me input {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.auth-forgot-password {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.auth-forgot-password:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.auth-submit-button {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border-radius: var(--radius);
|
|
background-color: var(--primary);
|
|
color: var(--primary-foreground);
|
|
font-weight: 500;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.auth-submit-button:hover {
|
|
background-color: color-mix(in srgb, var(--primary), black 10%);
|
|
}
|
|
|
|
.auth-submit-button:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.auth-signup-link {
|
|
text-align: center;
|
|
margin: 1.5rem 0;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.auth-signup-link a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.auth-signup-link a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.auth-terms {
|
|
text-align: center;
|
|
font-size: 0.875rem;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.auth-terms a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.auth-terms a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.auth-content {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.auth-left-panel {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.auth-form-container {
|
|
padding: 2rem;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.auth-social-buttons {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AuthenticationScreen; |