Porsche Chen
360533393f
Major Features: - ✅ Multi-tenant architecture (tenant isolation) - ✅ Employee CRUD with lifecycle management (onboarding/offboarding) - ✅ Department tree structure with email domain management - ✅ Company info management (single-record editing) - ✅ System functions CRUD (permission management) - ✅ Email account management (multi-account per employee) - ✅ Keycloak SSO integration (auth.lab.taipei) - ✅ Redis session storage (10.1.0.254:6379) - Solves Cookie 4KB limitation - Cross-system session sharing - Sliding expiration (8 hours) - Automatic token refresh Technical Stack: Backend: - FastAPI + SQLAlchemy - PostgreSQL 16 (10.1.0.20:5433) - Keycloak Admin API integration - Docker Mailserver integration (SSH) - Alembic migrations Frontend: - Next.js 14 (App Router) - NextAuth 4 with Keycloak Provider - Redis session storage (ioredis) - Tailwind CSS Infrastructure: - Redis 7 (10.1.0.254:6379) - Session + Cache - Keycloak 26.1.0 (auth.lab.taipei) - Docker Mailserver (10.1.0.254) Architecture Highlights: - Session管理由 Keycloak + Redis 統一控制 - 支援多系統 (HR/WebMail/Calendar/Drive/Office) 共享 session - Token 自動刷新,異質服務整合 - 未來可無縫遷移到雲端 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
/**
|
|
* 登入頁面
|
|
*/
|
|
'use client'
|
|
|
|
import { signIn } from 'next-auth/react'
|
|
import { useSearchParams } from 'next/navigation'
|
|
import { Suspense } from 'react'
|
|
|
|
function SignInContent() {
|
|
const searchParams = useSearchParams()
|
|
const error = searchParams.get('error')
|
|
const callbackUrl = searchParams.get('callbackUrl') || '/dashboard'
|
|
|
|
const handleSignIn = () => {
|
|
signIn('keycloak', { callbackUrl })
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
|
|
<div className="max-w-md w-full bg-white rounded-lg shadow-xl p-8">
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">HR Portal</h1>
|
|
<p className="text-gray-600">人力資源管理系統</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-md">
|
|
<p className="text-sm text-red-600">
|
|
{error === 'OAuthCallback'
|
|
? '登入失敗,請重試'
|
|
: '發生錯誤,請稍後再試'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-4">
|
|
<button
|
|
onClick={handleSignIn}
|
|
className="w-full flex items-center justify-center px-4 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
|
|
>
|
|
<svg
|
|
className="w-5 h-5 mr-2"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
|
|
/>
|
|
</svg>
|
|
使用 Keycloak SSO 登入
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-6 text-center text-sm text-gray-500">
|
|
<p>© 2026 Porsche World</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function SignInPage() {
|
|
return (
|
|
<Suspense fallback={<div>載入中...</div>}>
|
|
<SignInContent />
|
|
</Suspense>
|
|
)
|
|
}
|