Add Azure AD SSO login support
Login component now automatically shows Azure AD SSO when configured (via REACT_APP_AZURE_CLIENT_ID and REACT_APP_AZURE_TENANT_ID), or falls back to simple login for testing when not configured. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
967ed426f9
commit
ce884adb27
2 changed files with 80 additions and 5 deletions
|
|
@ -1,24 +1,48 @@
|
|||
/**
|
||||
* Simple Login Component (for test users only)
|
||||
* Login Component
|
||||
*
|
||||
* This component is for testing purposes only.
|
||||
* In production, only MSAL authentication will be used.
|
||||
* Shows Azure AD SSO login when configured, otherwise falls back to simple login for testing.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { authAPI } from '../services/api';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
|
||||
// Check if Azure AD is configured
|
||||
const isAzureConfigured =
|
||||
process.env.REACT_APP_AZURE_CLIENT_ID &&
|
||||
process.env.REACT_APP_AZURE_CLIENT_ID !== 'your-client-id-here' &&
|
||||
process.env.REACT_APP_AZURE_TENANT_ID &&
|
||||
process.env.REACT_APP_AZURE_TENANT_ID !== 'your-tenant-id-here';
|
||||
|
||||
interface SimpleLoginProps {
|
||||
onLoginSuccess: (token: string, user: any) => void;
|
||||
}
|
||||
|
||||
const SimpleLogin: React.FC<SimpleLoginProps> = ({ onLoginSuccess }) => {
|
||||
const { login: msalLogin, isLoading: msalLoading } = useAuth();
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
// Azure AD Login
|
||||
const handleAzureLogin = async () => {
|
||||
setError(null);
|
||||
try {
|
||||
await msalLogin();
|
||||
} catch (err: any) {
|
||||
console.error('Azure AD login failed:', err);
|
||||
if (err.message) {
|
||||
setError(err.message);
|
||||
} else {
|
||||
setError('Login failed. Please try again.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Simple login (for testing)
|
||||
const handleSimpleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setIsLoading(true);
|
||||
|
|
@ -64,6 +88,39 @@ const SimpleLogin: React.FC<SimpleLoginProps> = ({ onLoginSuccess }) => {
|
|||
setPassword('user');
|
||||
};
|
||||
|
||||
// Azure AD Login UI
|
||||
if (isAzureConfigured) {
|
||||
return (
|
||||
<div className="login-container">
|
||||
<div className="login-box">
|
||||
<div className="login-header">
|
||||
<h1>🤖 Seapac Ops Bot</h1>
|
||||
<p className="login-subtitle">AI Operations Assistant</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="login-error">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleAzureLogin}
|
||||
className="btn-login btn-azure"
|
||||
disabled={msalLoading}
|
||||
>
|
||||
{msalLoading ? 'Signing in...' : '🔐 Sign in with Microsoft'}
|
||||
</button>
|
||||
|
||||
<p className="login-footer">
|
||||
Sign in with your Oliver Agency account
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Simple Login UI (for testing only)
|
||||
return (
|
||||
<div className="login-container">
|
||||
<div className="login-box">
|
||||
|
|
@ -73,7 +130,7 @@ const SimpleLogin: React.FC<SimpleLoginProps> = ({ onLoginSuccess }) => {
|
|||
<p className="login-note">⚠️ For testing only. Production uses Azure AD.</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="login-form">
|
||||
<form onSubmit={handleSimpleSubmit} className="login-form">
|
||||
<div className="form-group">
|
||||
<label htmlFor="email">Email</label>
|
||||
<input
|
||||
|
|
|
|||
|
|
@ -181,6 +181,24 @@
|
|||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
/* Azure AD login button */
|
||||
.btn-azure {
|
||||
background: linear-gradient(135deg, #0078d4, #106ebe);
|
||||
font-size: 1.1rem;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.btn-azure:hover:not(:disabled) {
|
||||
box-shadow: 0 8px 20px rgba(0, 120, 212, 0.3);
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
margin-top: 1.5rem;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Additional styles for role badge in header */
|
||||
.user-role {
|
||||
font-size: 0.75rem;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue