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:
michael 2026-02-02 17:17:08 -06:00
parent 967ed426f9
commit ce884adb27
2 changed files with 80 additions and 5 deletions

View file

@ -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

View file

@ -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;