ddaa963bc2
Problem: - MSAL library was causing crypto errors in browser - Black screen on load due to MSAL initialization failure - Error: crypto module not available in browser environment Solution: - Made MSAL initialization conditional based on Azure AD configuration - Only initialize MSAL if REACT_APP_AZURE_CLIENT_ID is properly configured - Allow simple login to work without MSAL for testing purposes - Gracefully handle both MSAL and simple login modes Changes: - frontend/src/context/AuthContext.tsx: * Check if Azure AD is configured before initializing MSAL * Set msalInstance to null when Azure is not configured * Updated all MSAL calls to check for null before use * Simple login works independently of MSAL - frontend/package.json: * Added crypto polyfills as devDependencies (for future use) * Packages: crypto-browserify, buffer, stream-browserify, etc. - frontend/src/styles/theme.css: * Added login form styles (login-container, login-card, form-group, etc.) Benefits: - No more crypto errors in browser - Simple login works without Azure AD configuration - Easy testing with test accounts (admin/user) - Production Azure AD login still supported when configured - Graceful fallback for environments without Azure setup Testing: - Frontend compiles successfully without crypto errors - All services running: backend, frontend, postgres, redis - Simple login working with test accounts - No black screen on load Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
500 lines
9.8 KiB
CSS
500 lines
9.8 KiB
CSS
/* ========================================
|
|
AI CHAT PRO - DESIGN SYSTEM
|
|
Color Scheme: Dark & Gold
|
|
Font: Montserrat
|
|
======================================== */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
|
|
|
|
/* ========== CSS VARIABLES ========== */
|
|
:root {
|
|
/* Primary colors */
|
|
--primary-gold: #FFC407;
|
|
--primary-gold-dark: #e6b007;
|
|
--primary-gold-light: #ffcf33;
|
|
|
|
/* Dark colors */
|
|
--dark-primary: #2c2c2c;
|
|
--dark-secondary: #1a1a1a;
|
|
|
|
/* Light colors */
|
|
--white: #ffffff;
|
|
--light-bg: #fafafa;
|
|
--light-bg-gradient: #f8fafc;
|
|
|
|
/* Text colors */
|
|
--text-primary: #1f2937;
|
|
--text-secondary: #374151;
|
|
--text-muted: #6b7280;
|
|
|
|
/* Status colors */
|
|
--success-green: #4ade80;
|
|
--error-red: #ef4444;
|
|
|
|
/* Transparency */
|
|
--overlay-light: rgba(255, 255, 255, 0.95);
|
|
--overlay-dark: rgba(0, 0, 0, 0.5);
|
|
--border-light: rgba(255, 255, 255, 0.2);
|
|
--border-subtle: rgba(0, 0, 0, 0.05);
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
--shadow-md: 0 10px 25px rgba(0, 0, 0, 0.15);
|
|
--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
|
|
/* Border radius */
|
|
--radius-sm: 4px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 18px;
|
|
--radius-xl: 20px;
|
|
--radius-full: 50%;
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 12px;
|
|
--spacing-lg: 16px;
|
|
--spacing-xl: 20px;
|
|
--spacing-2xl: 25px;
|
|
|
|
/* Font sizes */
|
|
--font-size-xs: 11px;
|
|
--font-size-sm: 12px;
|
|
--font-size-base: 14px;
|
|
--font-size-md: 15px;
|
|
--font-size-lg: 16px;
|
|
--font-size-xl: 18px;
|
|
--font-size-2xl: 20px;
|
|
|
|
/* Transitions */
|
|
--transition-fast: 0.15s ease;
|
|
--transition-normal: 0.3s ease;
|
|
--transition-slow: 0.5s ease;
|
|
}
|
|
|
|
/* ========== BASE STYLES ========== */
|
|
body {
|
|
font-family: var(--font-family);
|
|
background: linear-gradient(135deg, var(--dark-primary) 0%, var(--dark-secondary) 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: var(--spacing-xl);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* ========== ANIMATIONS ========== */
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 50% { opacity: 1; }
|
|
51%, 100% { opacity: 0.3; }
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ========== CONTAINERS ========== */
|
|
.chat-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--white);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ========== HEADER ========== */
|
|
.chat-header {
|
|
background: linear-gradient(135deg, var(--primary-gold) 0%, var(--primary-gold-dark) 100%);
|
|
color: var(--dark-secondary);
|
|
padding: var(--spacing-xl) var(--spacing-2xl);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
}
|
|
|
|
.chat-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
|
|
animation: shimmer 3s infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
z-index: 1;
|
|
}
|
|
|
|
.ai-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-light));
|
|
border-radius: var(--radius-full);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--font-size-xl);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.header-info h1 {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: 600;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.status {
|
|
font-size: var(--font-size-sm);
|
|
opacity: 0.9;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--success-green);
|
|
border-radius: var(--radius-full);
|
|
animation: blink 1.5s infinite;
|
|
}
|
|
|
|
/* ========== CHAT BODY ========== */
|
|
.chat-body {
|
|
flex: 1;
|
|
padding: var(--spacing-xl);
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-lg);
|
|
background: linear-gradient(180deg, var(--light-bg) 0%, var(--light-bg-gradient) 100%);
|
|
}
|
|
|
|
/* Center welcome message vertically */
|
|
.chat-body:has(.welcome-message) {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ========== WELCOME MESSAGE ========== */
|
|
.welcome-message {
|
|
text-align: center;
|
|
padding: var(--spacing-2xl);
|
|
color: var(--text-muted);
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.welcome-message h2 {
|
|
font-size: 24px;
|
|
margin-bottom: var(--spacing-md);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.welcome-message p {
|
|
font-size: var(--font-size-base);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ========== INPUT AREA ========== */
|
|
.chat-input {
|
|
padding: var(--spacing-lg) var(--spacing-xl);
|
|
background: var(--white);
|
|
border-top: 1px solid #e5e7eb;
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
align-items: flex-end;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.input-wrapper {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
#message {
|
|
width: 100%;
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: var(--radius-md);
|
|
font-family: var(--font-family);
|
|
font-size: var(--font-size-base);
|
|
resize: none;
|
|
max-height: 120px;
|
|
transition: border-color var(--transition-fast);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
#message:focus {
|
|
outline: none;
|
|
border-color: var(--primary-gold);
|
|
}
|
|
|
|
/* ========== BUTTONS ========== */
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-dark));
|
|
color: var(--dark-secondary);
|
|
border: none;
|
|
padding: var(--spacing-md) 24px;
|
|
border-radius: var(--radius-md);
|
|
font-family: var(--font-family);
|
|
font-size: var(--font-size-base);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(255, 196, 7, 0.4);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ========== RESPONSIVE ========== */
|
|
@media (max-width: 768px) {
|
|
body {
|
|
padding: 10px;
|
|
}
|
|
|
|
.chat-container {
|
|
height: 95vh;
|
|
border-radius: var(--spacing-md);
|
|
}
|
|
|
|
.chat-header {
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.header-info h1 {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
|
|
.chat-body {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.chat-input {
|
|
padding: var(--spacing-md);
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.input-wrapper textarea {
|
|
font-size: 16px; /* Prevents zoom on iOS */
|
|
}
|
|
|
|
.chat-input button {
|
|
padding: var(--spacing-md);
|
|
min-width: 70px;
|
|
}
|
|
|
|
.welcome-message {
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.welcome-message h2 {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
}
|
|
|
|
/* Extra small devices */
|
|
@media (max-width: 480px) {
|
|
.chat-input {
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.input-wrapper {
|
|
flex: 1;
|
|
}
|
|
|
|
.chat-input button {
|
|
height: 44px;
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
|
|
/* ========== LOGIN FORM ========== */
|
|
.login-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, var(--dark-primary) 0%, var(--dark-secondary) 100%);
|
|
padding: var(--spacing-xl);
|
|
}
|
|
|
|
.login-card {
|
|
background: var(--white);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-lg);
|
|
padding: 40px;
|
|
max-width: 420px;
|
|
width: 100%;
|
|
animation: slideIn 0.5s ease;
|
|
}
|
|
|
|
.login-header {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.login-header h1 {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-dark));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.login-header p {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.login-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.form-group label {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.form-group input {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: var(--radius-md);
|
|
font-family: var(--font-family);
|
|
font-size: var(--font-size-base);
|
|
transition: all var(--transition-fast);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-group input:focus {
|
|
outline: none;
|
|
border-color: var(--primary-gold);
|
|
box-shadow: 0 0 0 3px rgba(255, 196, 7, 0.1);
|
|
}
|
|
|
|
.form-group input:disabled {
|
|
background: #f9fafb;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.error-message {
|
|
background: #fef2f2;
|
|
border: 1px solid #fecaca;
|
|
color: var(--error-red);
|
|
padding: 12px 16px;
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--font-size-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
.login-button {
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
padding: 14px;
|
|
font-size: var(--font-size-md);
|
|
justify-content: center;
|
|
}
|
|
|
|
.test-credentials {
|
|
margin-top: 24px;
|
|
padding: 16px;
|
|
background: #f9fafb;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.credentials-title {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.credentials-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.credential-item {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
padding: 8px;
|
|
background: var(--white);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.credential-item strong {
|
|
color: var(--primary-gold-dark);
|
|
margin-right: 8px;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.login-container {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.login-card {
|
|
padding: 28px 24px;
|
|
}
|
|
|
|
.login-header h1 {
|
|
font-size: 24px;
|
|
}
|
|
}
|