feat: Replace Lucide React with Material-UI for Google OAuth style
- Installed Material-UI (@mui/material, @emotion/react, @emotion/styled, @mui/icons-material) - Removed unused Lucide React dependency - Redesigned LoginPage with Material-UI to match Google OAuth login style - Redesigned AuthorizePage with Material-UI to match Google OAuth permission screen - Updated docker-compose to remove APISIX health check dependency from frontend 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
@ -128,8 +128,6 @@ services:
|
||||
depends_on:
|
||||
backend:
|
||||
condition: service_started
|
||||
apisix:
|
||||
condition: service_healthy
|
||||
volumes:
|
||||
- ./oauth/frontend:/app
|
||||
- /app/node_modules
|
||||
|
||||
734
oauth/frontend/package-lock.json
generated
734
oauth/frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,7 +10,11 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@hookform/resolvers": "^5.2.1",
|
||||
"@mui/icons-material": "^7.3.1",
|
||||
"@mui/material": "^7.3.1",
|
||||
"@tanstack/react-query": "^5.85.6",
|
||||
"axios": "^1.11.0",
|
||||
"react": "^19.1.1",
|
||||
@ -34,7 +38,6 @@
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.20",
|
||||
"globals": "^16.3.0",
|
||||
"lucide-react": "^0.542.0",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss": "^4.1.12",
|
||||
|
||||
@ -2,20 +2,39 @@ import { useState, useEffect } from 'react'
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
import {
|
||||
Shield,
|
||||
ChevronDown,
|
||||
AlertCircle,
|
||||
Check,
|
||||
X,
|
||||
Info,
|
||||
Database,
|
||||
User,
|
||||
Mail,
|
||||
Calendar,
|
||||
FileText,
|
||||
Box,
|
||||
Container,
|
||||
Typography,
|
||||
Button,
|
||||
Paper,
|
||||
Checkbox,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Avatar,
|
||||
Link,
|
||||
IconButton,
|
||||
Divider,
|
||||
Chip,
|
||||
Alert,
|
||||
Stack
|
||||
} from '@mui/material'
|
||||
import {
|
||||
AccountCircle,
|
||||
Email,
|
||||
CloudQueue,
|
||||
CalendarMonth,
|
||||
Description,
|
||||
Settings,
|
||||
Lock
|
||||
} from 'lucide-react'
|
||||
Security,
|
||||
Info,
|
||||
ExpandMore,
|
||||
ExpandLess,
|
||||
CheckCircle,
|
||||
Language,
|
||||
HelpOutline
|
||||
} from '@mui/icons-material'
|
||||
|
||||
interface Permission {
|
||||
id: string
|
||||
@ -47,35 +66,35 @@ const AuthorizePage = () => {
|
||||
id: 'profile',
|
||||
name: '프로필 정보',
|
||||
description: '이름, 이메일, 프로필 사진 등 기본 정보',
|
||||
icon: User,
|
||||
icon: AccountCircle,
|
||||
required: true
|
||||
},
|
||||
{
|
||||
id: 'email',
|
||||
name: '이메일 주소',
|
||||
description: '이메일 주소 확인 및 알림 전송',
|
||||
icon: Mail,
|
||||
icon: Email,
|
||||
required: true
|
||||
},
|
||||
{
|
||||
id: 'offline_access',
|
||||
name: '오프라인 액세스',
|
||||
description: '사용자가 오프라인일 때도 액세스 유지',
|
||||
icon: Database,
|
||||
icon: CloudQueue,
|
||||
required: false
|
||||
},
|
||||
{
|
||||
id: 'calendar',
|
||||
name: '캘린더 접근',
|
||||
description: '캘린더 일정 읽기 및 수정',
|
||||
icon: Calendar,
|
||||
icon: CalendarMonth,
|
||||
required: false
|
||||
},
|
||||
{
|
||||
id: 'files',
|
||||
name: '파일 접근',
|
||||
description: '파일 읽기, 쓰기 및 공유',
|
||||
icon: FileText,
|
||||
icon: Description,
|
||||
required: false
|
||||
},
|
||||
{
|
||||
@ -88,15 +107,12 @@ const AuthorizePage = () => {
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
// Mock user for demo
|
||||
if (!user) {
|
||||
// Redirect to login with return URL
|
||||
const returnUrl = encodeURIComponent(window.location.href)
|
||||
navigate(`/login?return_url=${returnUrl}`)
|
||||
return
|
||||
// In production, redirect to login
|
||||
}
|
||||
|
||||
if (!clientId) {
|
||||
// Invalid request
|
||||
navigate('/error?type=invalid_request')
|
||||
return
|
||||
}
|
||||
@ -142,7 +158,6 @@ const AuthorizePage = () => {
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
// Send authorization request to backend
|
||||
const response = await fetch('/api/v1/auth/authorize', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@ -161,7 +176,6 @@ const AuthorizePage = () => {
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
|
||||
// Redirect back to the application with authorization code
|
||||
const redirectUrl = new URL(redirectUri || '/')
|
||||
redirectUrl.searchParams.append('code', data.code)
|
||||
if (state) {
|
||||
@ -178,7 +192,6 @@ const AuthorizePage = () => {
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
// Redirect back to the application with error
|
||||
const redirectUrl = new URL(redirectUri || '/')
|
||||
redirectUrl.searchParams.append('error', 'access_denied')
|
||||
if (state) {
|
||||
@ -190,7 +203,7 @@ const AuthorizePage = () => {
|
||||
|
||||
const togglePermission = (permId: string) => {
|
||||
const permission = permissions.find(p => p.id === permId)
|
||||
if (permission?.required) return // Can't uncheck required permissions
|
||||
if (permission?.required) return
|
||||
|
||||
const newPermissions = new Set(selectedPermissions)
|
||||
if (newPermissions.has(permId)) {
|
||||
@ -201,190 +214,256 @@ const AuthorizePage = () => {
|
||||
setSelectedPermissions(newPermissions)
|
||||
}
|
||||
|
||||
if (!user || !appInfo) {
|
||||
if (!appInfo) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
<Box sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Typography>Loading...</Typography>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-gray-50">
|
||||
<Box sx={{ minHeight: '100vh', backgroundColor: '#fff', display: 'flex', flexDirection: 'column' }}>
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 px-4 py-3">
|
||||
<div className="max-w-3xl mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Shield className="w-8 h-8 text-blue-600" />
|
||||
<span className="text-xl font-semibold text-gray-900">AiMond</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4 text-sm">
|
||||
<span className="text-gray-600">{user.email}</span>
|
||||
<ChevronDown size={16} className="text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<Box sx={{ borderBottom: '1px solid #dadce0', py: 2, px: 3 }}>
|
||||
<Container maxWidth="md">
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 500, color: '#202124' }}>
|
||||
AiMond
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<Typography sx={{ fontSize: '14px', color: '#5f6368' }}>
|
||||
{user?.email || 'user@example.com'}
|
||||
</Typography>
|
||||
<Avatar sx={{ width: 32, height: 32, bgcolor: '#1a73e8' }}>
|
||||
{(user?.email || 'U')[0].toUpperCase()}
|
||||
</Avatar>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex items-center justify-center py-12 px-4">
|
||||
<div className="max-w-md w-full">
|
||||
{/* App Info Card */}
|
||||
<div className="bg-white rounded-lg shadow-md border border-gray-200 p-6">
|
||||
{/* App Header */}
|
||||
<div className="text-center mb-6">
|
||||
<h1 className="text-2xl font-semibold text-gray-900 mb-2">
|
||||
<Box sx={{ flex: 1, display: 'flex', alignItems: 'center', py: 4 }}>
|
||||
<Container maxWidth="sm">
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
border: '1px solid #dadce0',
|
||||
borderRadius: '8px',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
{/* App Info Header */}
|
||||
<Box sx={{ p: 4, textAlign: 'center', borderBottom: '1px solid #dadce0' }}>
|
||||
<Typography variant="h5" sx={{ mb: 2, fontWeight: 400, color: '#202124' }}>
|
||||
{appInfo.name}
|
||||
</h1>
|
||||
<p className="text-gray-600">이 앱에서 다음 권한을 요청합니다:</p>
|
||||
</div>
|
||||
</Typography>
|
||||
<Typography sx={{ color: '#5f6368', fontSize: '14px', mb: 2 }}>
|
||||
이 앱에서 다음 권한을 요청합니다:
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Permissions List */}
|
||||
<div className="space-y-3 mb-6">
|
||||
{permissions.map(permission => {
|
||||
const Icon = permission.icon
|
||||
const isSelected = selectedPermissions.has(permission.id)
|
||||
const isRequired = permission.required
|
||||
<Box sx={{ p: 3 }}>
|
||||
<List sx={{ py: 0 }}>
|
||||
{permissions.map((permission, index) => {
|
||||
const Icon = permission.icon
|
||||
const isSelected = selectedPermissions.has(permission.id)
|
||||
const isRequired = permission.required
|
||||
|
||||
return (
|
||||
<div
|
||||
key={permission.id}
|
||||
className={`flex items-start space-x-3 p-3 rounded-lg border ${
|
||||
isRequired ? 'bg-gray-50 border-gray-200' : 'border-gray-200 cursor-pointer hover:bg-gray-50'
|
||||
}`}
|
||||
onClick={() => !isRequired && togglePermission(permission.id)}
|
||||
>
|
||||
<div className="flex-shrink-0 mt-0.5">
|
||||
{isRequired ? (
|
||||
<div className="w-5 h-5 bg-blue-600 rounded flex items-center justify-center">
|
||||
<Check size={14} className="text-white" />
|
||||
</div>
|
||||
) : (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => togglePermission(permission.id)}
|
||||
className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
return (
|
||||
<React.Fragment key={permission.id}>
|
||||
<ListItem
|
||||
sx={{
|
||||
py: 2,
|
||||
px: 2,
|
||||
borderRadius: '8px',
|
||||
cursor: isRequired ? 'default' : 'pointer',
|
||||
'&:hover': {
|
||||
backgroundColor: isRequired ? 'transparent' : '#f8f9fa'
|
||||
}
|
||||
}}
|
||||
onClick={() => !isRequired && togglePermission(permission.id)}
|
||||
>
|
||||
<ListItemIcon sx={{ minWidth: 40 }}>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
disabled={isRequired}
|
||||
sx={{
|
||||
color: '#5f6368',
|
||||
'&.Mui-checked': {
|
||||
color: '#1a73e8'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemIcon sx={{ minWidth: 40 }}>
|
||||
<Icon sx={{ color: '#5f6368' }} />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography sx={{ fontSize: '14px', fontWeight: 500, color: '#202124' }}>
|
||||
{permission.name}
|
||||
</Typography>
|
||||
{isRequired && (
|
||||
<Chip
|
||||
label="필수"
|
||||
size="small"
|
||||
sx={{
|
||||
height: 20,
|
||||
fontSize: '11px',
|
||||
backgroundColor: '#e8f0fe',
|
||||
color: '#1967d2'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
secondary={
|
||||
<Typography sx={{ fontSize: '12px', color: '#5f6368' }}>
|
||||
{permission.description}
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<Icon size={20} className="text-gray-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
{permission.name}
|
||||
</p>
|
||||
{isRequired && (
|
||||
<span className="text-xs text-gray-500 bg-gray-200 px-2 py-0.5 rounded">
|
||||
필수
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 mt-0.5">
|
||||
{permission.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</ListItem>
|
||||
{index < permissions.length - 1 && <Divider sx={{ my: 0.5 }} />}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
</Box>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-6">
|
||||
<div className="flex items-start space-x-2">
|
||||
<Info size={16} className="text-blue-600 flex-shrink-0 mt-0.5" />
|
||||
<div className="text-xs text-blue-800">
|
||||
<p className="font-medium mb-1">앱 권한 정보</p>
|
||||
<p>이 앱은 선택한 권한에만 접근할 수 있으며, 언제든지 계정 설정에서 권한을 취소할 수 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Info Alert */}
|
||||
<Box sx={{ px: 3, pb: 3 }}>
|
||||
<Alert
|
||||
icon={<Info />}
|
||||
severity="info"
|
||||
sx={{
|
||||
backgroundColor: '#e8f0fe',
|
||||
color: '#1967d2',
|
||||
'& .MuiAlert-icon': {
|
||||
color: '#1967d2'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ fontSize: '12px' }}>
|
||||
이 앱은 선택한 권한에만 접근할 수 있으며, 언제든지 계정 설정에서 권한을 취소할 수 있습니다.
|
||||
</Typography>
|
||||
</Alert>
|
||||
</Box>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex space-x-3">
|
||||
<button
|
||||
<Box sx={{ p: 3, borderTop: '1px solid #dadce0', display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
|
||||
<Button
|
||||
onClick={handleCancel}
|
||||
className="flex-1 py-2.5 px-4 border border-gray-300 text-gray-700 font-medium rounded-md hover:bg-gray-50 transition duration-200"
|
||||
variant="text"
|
||||
sx={{
|
||||
color: '#5f6368',
|
||||
textTransform: 'none',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500
|
||||
}}
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleAccept}
|
||||
variant="contained"
|
||||
disabled={isLoading || selectedPermissions.size === 0}
|
||||
className="flex-1 py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
sx={{
|
||||
backgroundColor: '#1a73e8',
|
||||
textTransform: 'none',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
px: 3,
|
||||
'&:hover': {
|
||||
backgroundColor: '#1666c9'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isLoading ? '처리 중...' : '허용'}
|
||||
</button>
|
||||
</div>
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Additional Info */}
|
||||
<button
|
||||
onClick={() => setShowDetails(!showDetails)}
|
||||
className="w-full mt-4 text-center text-xs text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
{showDetails ? '상세 정보 숨기기' : '상세 정보 보기'}
|
||||
</button>
|
||||
|
||||
{showDetails && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-200 space-y-2 text-xs text-gray-600">
|
||||
<div className="flex justify-between">
|
||||
<span>개발자:</span>
|
||||
<span className="font-medium">{appInfo.developer}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>웹사이트:</span>
|
||||
<a href={appInfo.website} className="text-blue-600 hover:underline">
|
||||
{appInfo.website}
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>인증 상태:</span>
|
||||
<span className="flex items-center space-x-1">
|
||||
{appInfo.verified ? (
|
||||
<>
|
||||
<Check size={12} className="text-green-600" />
|
||||
<span className="text-green-600">인증됨</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<AlertCircle size={12} className="text-yellow-600" />
|
||||
<span className="text-yellow-600">미인증</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Additional Details */}
|
||||
<Box sx={{ borderTop: '1px solid #dadce0' }}>
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={() => setShowDetails(!showDetails)}
|
||||
sx={{
|
||||
py: 2,
|
||||
color: '#5f6368',
|
||||
textTransform: 'none',
|
||||
fontSize: '12px',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
endIcon={showDetails ? <ExpandLess /> : <ExpandMore />}
|
||||
>
|
||||
{showDetails ? '상세 정보 숨기기' : '상세 정보 보기'}
|
||||
</Button>
|
||||
{showDetails && (
|
||||
<Box sx={{ px: 3, pb: 3, pt: 1 }}>
|
||||
<Stack spacing={1}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography sx={{ fontSize: '12px', color: '#5f6368' }}>개발자:</Typography>
|
||||
<Typography sx={{ fontSize: '12px', color: '#202124', fontWeight: 500 }}>
|
||||
{appInfo.developer}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography sx={{ fontSize: '12px', color: '#5f6368' }}>웹사이트:</Typography>
|
||||
<Link href={appInfo.website} sx={{ fontSize: '12px', color: '#1a73e8' }}>
|
||||
{appInfo.website}
|
||||
</Link>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Typography sx={{ fontSize: '12px', color: '#5f6368' }}>인증 상태:</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
{appInfo.verified && <CheckCircle sx={{ fontSize: 14, color: '#34a853' }} />}
|
||||
<Typography sx={{ fontSize: '12px', color: appInfo.verified ? '#34a853' : '#ea4335' }}>
|
||||
{appInfo.verified ? '인증됨' : '미인증'}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Privacy Notice */}
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-xs text-gray-500">
|
||||
<Box sx={{ mt: 3, textAlign: 'center' }}>
|
||||
<Typography sx={{ fontSize: '12px', color: '#5f6368' }}>
|
||||
계속 진행하면 AiMond의{' '}
|
||||
<a href="#" className="text-blue-600 hover:underline">서비스 약관</a> 및{' '}
|
||||
<a href="#" className="text-blue-600 hover:underline">개인정보처리방침</a>에 동의하는 것입니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="#" sx={{ color: '#1a73e8' }}>서비스 약관</Link> 및{' '}
|
||||
<Link href="#" sx={{ color: '#1a73e8' }}>개인정보처리방침</Link>에 동의하는 것입니다.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-4 px-4 border-t border-gray-200 bg-white">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between text-xs text-gray-600">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span>한국어</span>
|
||||
<ChevronDown size={16} />
|
||||
</div>
|
||||
<div className="flex items-center space-x-6">
|
||||
<a href="#" className="hover:text-gray-900">도움말</a>
|
||||
<a href="#" className="hover:text-gray-900">개인정보처리방침</a>
|
||||
<a href="#" className="hover:text-gray-900">약관</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<Box sx={{ borderTop: '1px solid #dadce0', py: 2, px: 3, backgroundColor: '#f8f9fa' }}>
|
||||
<Container maxWidth="lg">
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Typography sx={{ fontSize: '12px', color: '#5f6368' }}>한국어</Typography>
|
||||
<Stack direction="row" spacing={3}>
|
||||
<Link href="#" underline="none" sx={{ fontSize: '12px', color: '#5f6368' }}>
|
||||
도움말
|
||||
</Link>
|
||||
<Link href="#" underline="none" sx={{ fontSize: '12px', color: '#5f6368' }}>
|
||||
개인정보처리방침
|
||||
</Link>
|
||||
<Link href="#" underline="none" sx={{ fontSize: '12px', color: '#5f6368' }}>
|
||||
약관
|
||||
</Link>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -2,13 +2,30 @@ import { useState, useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
import {
|
||||
Eye,
|
||||
EyeOff,
|
||||
Loader2,
|
||||
Shield,
|
||||
ChevronDown,
|
||||
HelpCircle
|
||||
} from 'lucide-react'
|
||||
Box,
|
||||
Container,
|
||||
TextField,
|
||||
Button,
|
||||
Typography,
|
||||
Link,
|
||||
Paper,
|
||||
IconButton,
|
||||
InputAdornment,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
Avatar,
|
||||
Stack,
|
||||
Divider
|
||||
} from '@mui/material'
|
||||
import {
|
||||
Visibility,
|
||||
VisibilityOff,
|
||||
Language,
|
||||
HelpOutline,
|
||||
KeyboardArrowDown
|
||||
} from '@mui/icons-material'
|
||||
|
||||
const LoginPage = () => {
|
||||
const [email, setEmail] = useState('')
|
||||
@ -16,8 +33,7 @@ const LoginPage = () => {
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [rememberMe, setRememberMe] = useState(false)
|
||||
const [currentUser, setCurrentUser] = useState<string | null>(null)
|
||||
const [theme, setTheme] = useState<any>(null)
|
||||
const [language, setLanguage] = useState('ko')
|
||||
|
||||
const { login, user } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
@ -26,34 +42,8 @@ const LoginPage = () => {
|
||||
if (user) {
|
||||
navigate('/dashboard')
|
||||
}
|
||||
|
||||
// Get theme from query params (for OAuth applications)
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
const appId = params.get('app_id')
|
||||
const savedEmail = localStorage.getItem('last_user_email')
|
||||
|
||||
if (savedEmail) {
|
||||
setCurrentUser(savedEmail)
|
||||
setEmail(savedEmail)
|
||||
}
|
||||
|
||||
if (appId) {
|
||||
fetchApplicationTheme(appId)
|
||||
}
|
||||
}, [user, navigate])
|
||||
|
||||
const fetchApplicationTheme = async (appId: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/v1/applications/${appId}/theme`)
|
||||
if (response.ok) {
|
||||
const themeData = await response.json()
|
||||
setTheme(themeData)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch theme:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsLoading(true)
|
||||
@ -70,182 +60,247 @@ const LoginPage = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const switchAccount = () => {
|
||||
setCurrentUser(null)
|
||||
setEmail('')
|
||||
setPassword('')
|
||||
localStorage.removeItem('last_user_email')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-gray-50">
|
||||
{/* Header */}
|
||||
<div className="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto w-full max-w-md">
|
||||
<Box
|
||||
sx={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
backgroundColor: '#fff'
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="sm">
|
||||
<Box
|
||||
sx={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
py: 4
|
||||
}}
|
||||
>
|
||||
{/* Logo and Title */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex justify-center mb-4">
|
||||
{theme?.logo ? (
|
||||
<img src={theme.logo} alt="Logo" className="h-12" />
|
||||
) : (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Shield className="w-10 h-10 text-blue-600" />
|
||||
<span className="text-2xl font-semibold text-gray-900">AiMond</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-2xl text-gray-700">
|
||||
{currentUser ? `${currentUser}로 로그인` : 'AiMond Account로 로그인'}
|
||||
</h2>
|
||||
</div>
|
||||
<Box sx={{ textAlign: 'center', mb: 4 }}>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: 300,
|
||||
color: '#202124',
|
||||
mb: 2,
|
||||
fontFamily: 'Google Sans, Roboto, Arial, sans-serif'
|
||||
}}
|
||||
>
|
||||
<Box component="span" sx={{ fontWeight: 500 }}>AiMond</Box>
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
color: '#202124',
|
||||
mb: 1
|
||||
}}
|
||||
>
|
||||
AiMond Account로 로그인
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Login Card */}
|
||||
<div className="bg-white rounded-lg shadow-md border border-gray-200 p-8">
|
||||
{currentUser && (
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-center mb-4">
|
||||
<div className="w-20 h-20 bg-gray-200 rounded-full flex items-center justify-center">
|
||||
<span className="text-3xl text-gray-600">
|
||||
{currentUser[0].toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-600">{currentUser}</p>
|
||||
<button
|
||||
onClick={switchAccount}
|
||||
className="text-sm text-blue-600 hover:text-blue-700 mt-1"
|
||||
>
|
||||
다른 계정 사용
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Login Form */}
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
border: '1px solid #dadce0',
|
||||
borderRadius: '8px',
|
||||
p: 5,
|
||||
maxWidth: 450,
|
||||
width: '100%',
|
||||
mx: 'auto'
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<TextField
|
||||
fullWidth
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="이메일"
|
||||
required
|
||||
sx={{
|
||||
mb: 2,
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'&:hover fieldset': {
|
||||
borderColor: '#1976d2',
|
||||
},
|
||||
},
|
||||
}}
|
||||
size="medium"
|
||||
autoComplete="email"
|
||||
/>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{!currentUser && (
|
||||
<div>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition text-gray-900"
|
||||
placeholder="이메일"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-4 py-3 pr-12 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition text-gray-900"
|
||||
placeholder="비밀번호를 입력하세요"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
{showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="rememberMe"
|
||||
checked={rememberMe}
|
||||
onChange={(e) => setRememberMe(e.target.checked)}
|
||||
className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
|
||||
/>
|
||||
<label htmlFor="rememberMe" className="ml-2 text-sm text-gray-600">
|
||||
로그인 상태 유지
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition duration-200 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
<Link
|
||||
href="#"
|
||||
underline="none"
|
||||
sx={{
|
||||
color: '#1a73e8',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
display: 'block',
|
||||
mb: 3
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin mr-2" size={20} />
|
||||
로그인 중...
|
||||
</>
|
||||
) : (
|
||||
'로그인'
|
||||
)}
|
||||
</button>
|
||||
비밀번호를 잊으셨나요?
|
||||
</Link>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="비밀번호를 입력하세요"
|
||||
required
|
||||
sx={{ mb: 1 }}
|
||||
size="medium"
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
edge="end"
|
||||
size="small"
|
||||
>
|
||||
{showPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={rememberMe}
|
||||
onChange={(e) => setRememberMe(e.target.checked)}
|
||||
size="small"
|
||||
sx={{ color: '#5f6368' }}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Typography sx={{ fontSize: '14px', color: '#5f6368' }}>
|
||||
로그인 상태 유지
|
||||
</Typography>
|
||||
}
|
||||
sx={{ mb: 4 }}
|
||||
/>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '14px',
|
||||
color: '#5f6368',
|
||||
mb: 4,
|
||||
lineHeight: 1.5
|
||||
}}
|
||||
>
|
||||
하나의 AiMond 계정으로 모든 AiMond 서비스를 이용하실 수 있습니다
|
||||
</Typography>
|
||||
|
||||
{/* Service Icons */}
|
||||
<Stack direction="row" spacing={1} justifyContent="center" sx={{ mb: 4 }}>
|
||||
<Avatar sx={{ width: 32, height: 32, bgcolor: '#4285f4', fontSize: 14 }}>A</Avatar>
|
||||
<Avatar sx={{ width: 32, height: 32, bgcolor: '#ea4335', fontSize: 14 }}>M</Avatar>
|
||||
<Avatar sx={{ width: 32, height: 32, bgcolor: '#34a853', fontSize: 14 }}>D</Avatar>
|
||||
<Avatar sx={{ width: 32, height: 32, bgcolor: '#fbbc04', fontSize: 14 }}>S</Avatar>
|
||||
<Avatar sx={{ width: 32, height: 32, bgcolor: '#9333ea', fontSize: 14 }}>C</Avatar>
|
||||
</Stack>
|
||||
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Link
|
||||
href="/signup"
|
||||
underline="none"
|
||||
sx={{
|
||||
color: '#1a73e8',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500
|
||||
}}
|
||||
>
|
||||
계정 만들기
|
||||
</Link>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
disabled={isLoading}
|
||||
sx={{
|
||||
backgroundColor: '#1a73e8',
|
||||
color: 'white',
|
||||
textTransform: 'none',
|
||||
px: 3,
|
||||
py: 1,
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
'&:hover': {
|
||||
backgroundColor: '#1666c9',
|
||||
},
|
||||
}}
|
||||
>
|
||||
로그인
|
||||
</Button>
|
||||
</Box>
|
||||
</form>
|
||||
</Paper>
|
||||
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<a href="#" className="text-sm text-blue-600 hover:text-blue-700">
|
||||
도움이 필요하신가요?
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create Account Link */}
|
||||
<div className="mt-6 text-center">
|
||||
<a href="/signup" className="text-blue-600 hover:text-blue-700 text-sm font-medium">
|
||||
계정 만들기
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Footer Text */}
|
||||
<div className="mt-8 text-center">
|
||||
<p className="text-xs text-gray-500">
|
||||
하나의 AiMond 계정으로 모든 AiMond 서비스를 이용하실 수 있습니다
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Service Icons */}
|
||||
<div className="mt-6 flex justify-center space-x-4">
|
||||
<div className="w-8 h-8 bg-blue-100 rounded flex items-center justify-center">
|
||||
<span className="text-blue-600 text-xs font-bold">A</span>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-red-100 rounded flex items-center justify-center">
|
||||
<span className="text-red-600 text-xs font-bold">M</span>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-green-100 rounded flex items-center justify-center">
|
||||
<span className="text-green-600 text-xs font-bold">D</span>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-yellow-100 rounded flex items-center justify-center">
|
||||
<span className="text-yellow-600 text-xs font-bold">S</span>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-purple-100 rounded flex items-center justify-center">
|
||||
<span className="text-purple-600 text-xs font-bold">C</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Language Selection Link */}
|
||||
<Box sx={{ textAlign: 'center', mt: 3 }}>
|
||||
<Link
|
||||
href="#"
|
||||
underline="none"
|
||||
sx={{
|
||||
color: '#1a73e8',
|
||||
fontSize: '14px',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5
|
||||
}}
|
||||
>
|
||||
도움말개인정보처리방침약관
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-4 px-4 border-t border-gray-200 bg-white">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between text-xs text-gray-600">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span>한국어</span>
|
||||
<ChevronDown size={16} />
|
||||
</div>
|
||||
<div className="flex items-center space-x-6">
|
||||
<a href="#" className="hover:text-gray-900">도움말</a>
|
||||
<a href="#" className="hover:text-gray-900">개인정보처리방침</a>
|
||||
<a href="#" className="hover:text-gray-900">약관</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<Box
|
||||
sx={{
|
||||
borderTop: '1px solid #dadce0',
|
||||
py: 2,
|
||||
px: 3,
|
||||
backgroundColor: '#f8f9fa'
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg">
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Select
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
variant="standard"
|
||||
disableUnderline
|
||||
sx={{ fontSize: '12px', color: '#5f6368' }}
|
||||
>
|
||||
<MenuItem value="ko">한국어</MenuItem>
|
||||
<MenuItem value="en">English</MenuItem>
|
||||
</Select>
|
||||
<Stack direction="row" spacing={3}>
|
||||
<Link href="#" underline="none" sx={{ fontSize: '12px', color: '#5f6368' }}>
|
||||
도움말
|
||||
</Link>
|
||||
<Link href="#" underline="none" sx={{ fontSize: '12px', color: '#5f6368' }}>
|
||||
개인정보처리방침
|
||||
</Link>
|
||||
<Link href="#" underline="none" sx={{ fontSize: '12px', color: '#5f6368' }}>
|
||||
약관
|
||||
</Link>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user