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
@ -1,14 +1,31 @@
|
||||
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'
|
||||
import {
|
||||
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