feat: implement user authentication module
- Backend (FastAPI): - External API authentication (pj-auth-api.vercel.app) - JWT token validation with Redis session storage - RBAC with department isolation - User, Role, Department models with pjctrl_ prefix - Alembic migrations with project-specific version table - Complete test coverage (13 tests) - Frontend (React + Vite): - AuthContext for state management - Login page with error handling - Protected route component - Dashboard with user info display - OpenSpec: - 7 capability specs defined - add-user-auth change archived 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
beabigegg
115
frontend/src/pages/Dashboard.tsx
Normal file
115
frontend/src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
|
||||
export default function Dashboard() {
|
||||
const { user, logout } = useAuth()
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout()
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<header style={styles.header}>
|
||||
<h1 style={styles.title}>Project Control</h1>
|
||||
<div style={styles.userInfo}>
|
||||
<span style={styles.userName}>{user?.name}</span>
|
||||
{user?.is_system_admin && (
|
||||
<span style={styles.badge}>Admin</span>
|
||||
)}
|
||||
<button onClick={handleLogout} style={styles.logoutButton}>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main style={styles.main}>
|
||||
<div style={styles.welcomeCard}>
|
||||
<h2>Welcome, {user?.name}!</h2>
|
||||
<p>Email: {user?.email}</p>
|
||||
<p>Role: {user?.role || 'No role assigned'}</p>
|
||||
{user?.is_system_admin && (
|
||||
<p style={styles.adminNote}>
|
||||
You have system administrator privileges.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={styles.infoCard}>
|
||||
<h3>Getting Started</h3>
|
||||
<p>
|
||||
This is the Project Control system dashboard. Features will be
|
||||
added as development progresses.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const styles: { [key: string]: React.CSSProperties } = {
|
||||
container: {
|
||||
minHeight: '100vh',
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
header: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '16px 24px',
|
||||
backgroundColor: 'white',
|
||||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
title: {
|
||||
fontSize: '20px',
|
||||
fontWeight: 600,
|
||||
color: '#333',
|
||||
margin: 0,
|
||||
},
|
||||
userInfo: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
},
|
||||
userName: {
|
||||
color: '#666',
|
||||
},
|
||||
badge: {
|
||||
backgroundColor: '#0066cc',
|
||||
color: 'white',
|
||||
padding: '2px 8px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
fontWeight: 500,
|
||||
},
|
||||
logoutButton: {
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
},
|
||||
main: {
|
||||
padding: '24px',
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
},
|
||||
welcomeCard: {
|
||||
backgroundColor: 'white',
|
||||
padding: '24px',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
|
||||
marginBottom: '24px',
|
||||
},
|
||||
adminNote: {
|
||||
color: '#0066cc',
|
||||
fontWeight: 500,
|
||||
marginTop: '12px',
|
||||
},
|
||||
infoCard: {
|
||||
backgroundColor: 'white',
|
||||
padding: '24px',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
}
|
||||
151
frontend/src/pages/Login.tsx
Normal file
151
frontend/src/pages/Login.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import { useState, FormEvent } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
|
||||
export default function Login() {
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const { login } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
await login({ email, password })
|
||||
navigate('/')
|
||||
} catch (err: any) {
|
||||
if (err.response?.status === 401) {
|
||||
setError('Invalid email or password')
|
||||
} else if (err.response?.status === 503) {
|
||||
setError('Authentication service temporarily unavailable')
|
||||
} else {
|
||||
setError('An error occurred. Please try again.')
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={styles.card}>
|
||||
<h1 style={styles.title}>Project Control</h1>
|
||||
<p style={styles.subtitle}>Sign in to your account</p>
|
||||
|
||||
<form onSubmit={handleSubmit} style={styles.form}>
|
||||
{error && <div style={styles.error}>{error}</div>}
|
||||
|
||||
<div style={styles.field}>
|
||||
<label htmlFor="email" style={styles.label}>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
style={styles.input}
|
||||
placeholder="your.email@company.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={styles.field}>
|
||||
<label htmlFor="password" style={styles.label}>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
style={styles.input}
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
style={styles.button}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Signing in...' : 'Sign in'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const styles: { [key: string]: React.CSSProperties } = {
|
||||
container: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: '100vh',
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
card: {
|
||||
backgroundColor: 'white',
|
||||
padding: '40px',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
|
||||
width: '100%',
|
||||
maxWidth: '400px',
|
||||
},
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
marginBottom: '8px',
|
||||
color: '#333',
|
||||
},
|
||||
subtitle: {
|
||||
textAlign: 'center',
|
||||
color: '#666',
|
||||
marginBottom: '24px',
|
||||
},
|
||||
form: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '16px',
|
||||
},
|
||||
field: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '4px',
|
||||
},
|
||||
label: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
color: '#333',
|
||||
},
|
||||
input: {
|
||||
padding: '10px 12px',
|
||||
fontSize: '16px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
outline: 'none',
|
||||
},
|
||||
button: {
|
||||
padding: '12px',
|
||||
fontSize: '16px',
|
||||
backgroundColor: '#0066cc',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
marginTop: '8px',
|
||||
},
|
||||
error: {
|
||||
backgroundColor: '#fee',
|
||||
color: '#c00',
|
||||
padding: '10px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user