Compare commits
8 Commits
6ef6dc53a2
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 14d1eb9d89 | |||
| 8996bd8638 | |||
| 0aa6db1b3b | |||
| fabcc986f9 | |||
| 6d853562a8 | |||
| 18fe4df9ef | |||
| b773ef1b3c | |||
| c03619bdb6 |
@ -25,7 +25,10 @@
|
|||||||
|
|
||||||
### 기술 스택
|
### 기술 스택
|
||||||
- **API Gateway**: Apache APISIX 3.8.0
|
- **API Gateway**: Apache APISIX 3.8.0
|
||||||
- **Frontend**: React 18 + Vite + TypeScript + shadcn/ui + Tailwind CSS
|
- **Frontend**: React 18 + Vite + TypeScript + Material-UI (MUI)
|
||||||
|
- 이전: Lucide React + Tailwind CSS
|
||||||
|
- 현재: Material-UI (@mui/material, @emotion/react, @emotion/styled, @mui/icons-material)
|
||||||
|
- 디자인: Google OAuth 스타일 UI/UX
|
||||||
- **Backend**: Python 3.11 + FastAPI + Motor (MongoDB async)
|
- **Backend**: Python 3.11 + FastAPI + Motor (MongoDB async)
|
||||||
- **Database**: MongoDB 7.0
|
- **Database**: MongoDB 7.0
|
||||||
- **Cache/Queue**: Redis 7
|
- **Cache/Queue**: Redis 7
|
||||||
|
|||||||
391
README.md
391
README.md
@ -1,3 +1,390 @@
|
|||||||
# works
|
# OAuth 2.0 인증 시스템 프로젝트
|
||||||
|
|
||||||
aimond.io 에서 서비스할 대상 시스템의 프로토타입을 구성해 봅니다.
|
> aimond.io 에서 서비스할 대상 시스템의 프로토타입을 구성합니다.
|
||||||
|
|
||||||
|
## 📋 목차
|
||||||
|
- [프로젝트 개요](#프로젝트-개요)
|
||||||
|
- [시스템 아키텍처](#시스템-아키텍처)
|
||||||
|
- [기술 스택](#기술-스택)
|
||||||
|
- [서비스 구성](#서비스-구성)
|
||||||
|
- [빠른 시작](#빠른-시작)
|
||||||
|
- [개발 가이드](#개발-가이드)
|
||||||
|
- [API 문서](#api-문서)
|
||||||
|
- [배포 가이드](#배포-가이드)
|
||||||
|
- [문서](#문서)
|
||||||
|
|
||||||
|
## 🎯 프로젝트 개요
|
||||||
|
|
||||||
|
엔터프라이즈급 OAuth 2.0 기반 중앙 인증 시스템으로, 멀티 테넌트 환경에서 동적 테마 적용 및 세분화된 권한 관리를 제공합니다.
|
||||||
|
|
||||||
|
### 주요 특징
|
||||||
|
- ✅ **OAuth 2.0 표준 준수**: 완벽한 OAuth 2.0 플로우 구현
|
||||||
|
- ✅ **동적 테마 시스템**: 애플리케이션별 맞춤형 인증 페이지
|
||||||
|
- ✅ **3단계 권한 체계**: System Admin, Group Admin, User
|
||||||
|
- ✅ **API Gateway**: Apache APISIX를 통한 트래픽 관리
|
||||||
|
- ✅ **마이크로서비스 아키텍처**: 확장 가능한 서비스 구조
|
||||||
|
- ✅ **컨테이너 기반**: Docker를 통한 일관된 개발/운영 환경
|
||||||
|
|
||||||
|
## 🏗️ 시스템 아키텍처
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph TB
|
||||||
|
subgraph "Client Layer"
|
||||||
|
Browser[사용자 브라우저]
|
||||||
|
Mobile[모바일 앱]
|
||||||
|
API[API 클라이언트]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph "API Gateway Layer"
|
||||||
|
APISIX[Apache APISIX<br/>Rate Limiting<br/>Authentication<br/>Load Balancing]
|
||||||
|
etcd[etcd<br/>Service Discovery]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph "Application Services"
|
||||||
|
OAuth[OAuth Service<br/>FastAPI]
|
||||||
|
Frontend[Web Frontend<br/>React + Vite]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph "Data Layer"
|
||||||
|
MongoDB[(MongoDB<br/>Users/Apps/History)]
|
||||||
|
Redis[(Redis<br/>Cache/Session)]
|
||||||
|
end
|
||||||
|
|
||||||
|
Browser --> APISIX
|
||||||
|
Mobile --> APISIX
|
||||||
|
API --> APISIX
|
||||||
|
APISIX <--> etcd
|
||||||
|
APISIX --> OAuth
|
||||||
|
APISIX --> Frontend
|
||||||
|
OAuth --> MongoDB
|
||||||
|
OAuth --> Redis
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🛠️ 기술 스택
|
||||||
|
|
||||||
|
### API Gateway
|
||||||
|
- **Apache APISIX 3.8.0**: 고성능 API Gateway
|
||||||
|
- **etcd 3.5**: 서비스 디스커버리 및 설정 관리
|
||||||
|
|
||||||
|
### Backend
|
||||||
|
- **Python 3.11**: 메인 프로그래밍 언어
|
||||||
|
- **FastAPI**: 고성능 웹 프레임워크
|
||||||
|
- **Motor**: MongoDB 비동기 드라이버
|
||||||
|
- **Authlib**: OAuth 2.0 구현
|
||||||
|
- **Celery**: 비동기 작업 처리
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
- **React 18**: UI 라이브러리
|
||||||
|
- **Vite**: 빌드 도구
|
||||||
|
- **TypeScript**: 타입 안정성
|
||||||
|
- **shadcn/ui**: UI 컴포넌트
|
||||||
|
- **Tailwind CSS**: 유틸리티 CSS
|
||||||
|
- **Zustand**: 상태 관리
|
||||||
|
- **React Query**: 서버 상태 관리
|
||||||
|
|
||||||
|
### Database & Cache
|
||||||
|
- **MongoDB 7.0**: 메인 데이터베이스
|
||||||
|
- **Redis 7**: 캐싱 및 세션 관리
|
||||||
|
|
||||||
|
### DevOps
|
||||||
|
- **Docker & Docker Compose**: 컨테이너화
|
||||||
|
- **Kubernetes**: 프로덕션 오케스트레이션
|
||||||
|
- **Nexus**: 아티팩트 저장소
|
||||||
|
|
||||||
|
## 📦 서비스 구성
|
||||||
|
|
||||||
|
### 1. OAuth 인증 서비스 (`/oauth`)
|
||||||
|
|
||||||
|
#### 백엔드 (`/oauth/backend`)
|
||||||
|
FastAPI 기반 OAuth 2.0 인증 서버
|
||||||
|
|
||||||
|
**주요 기능:**
|
||||||
|
- OAuth 2.0 Authorization Code Flow
|
||||||
|
- JWT 토큰 발급 및 검증
|
||||||
|
- 사용자 인증 및 권한 관리
|
||||||
|
- 애플리케이션 등록 및 관리
|
||||||
|
- 인증 히스토리 추적
|
||||||
|
|
||||||
|
**디렉토리 구조:**
|
||||||
|
```
|
||||||
|
oauth/backend/
|
||||||
|
├── app/
|
||||||
|
│ ├── api/ # API 엔드포인트
|
||||||
|
│ ├── core/ # 핵심 설정 및 유틸리티
|
||||||
|
│ ├── models/ # 데이터 모델
|
||||||
|
│ ├── services/ # 비즈니스 로직
|
||||||
|
│ └── main.py # 애플리케이션 진입점
|
||||||
|
├── tests/ # 테스트 코드
|
||||||
|
├── requirements.txt # Python 의존성
|
||||||
|
└── Dockerfile # 컨테이너 이미지
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 프론트엔드 (`/oauth/frontend`)
|
||||||
|
React + TypeScript 기반 인증 UI
|
||||||
|
|
||||||
|
**주요 기능:**
|
||||||
|
- 동적 테마 적용 로그인 페이지
|
||||||
|
- 사용자 프로필 관리
|
||||||
|
- 애플리케이션 관리 대시보드
|
||||||
|
- 권한 설정 인터페이스
|
||||||
|
- 인증 히스토리 뷰어
|
||||||
|
|
||||||
|
**디렉토리 구조:**
|
||||||
|
```
|
||||||
|
oauth/frontend/
|
||||||
|
├── src/
|
||||||
|
│ ├── components/ # React 컴포넌트
|
||||||
|
│ ├── pages/ # 페이지 컴포넌트
|
||||||
|
│ ├── hooks/ # Custom Hooks
|
||||||
|
│ ├── services/ # API 서비스
|
||||||
|
│ ├── stores/ # 상태 관리
|
||||||
|
│ └── utils/ # 유틸리티 함수
|
||||||
|
├── public/ # 정적 파일
|
||||||
|
└── package.json # Node.js 의존성
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. API Gateway (`/apisix`)
|
||||||
|
|
||||||
|
Apache APISIX 설정 및 라우팅 규칙
|
||||||
|
|
||||||
|
**주요 설정:**
|
||||||
|
- 라우팅 규칙 (`routes.yaml`)
|
||||||
|
- Rate Limiting 정책
|
||||||
|
- JWT 인증 플러그인
|
||||||
|
- CORS 설정
|
||||||
|
- 캐싱 전략
|
||||||
|
|
||||||
|
**트래픽 제한:**
|
||||||
|
| 엔드포인트 | Rate Limit | Burst |
|
||||||
|
|-----------|------------|-------|
|
||||||
|
| /api/v1/auth/* | 10 req/s | 20 |
|
||||||
|
| /api/v1/users/* | 100 req/s | 50 |
|
||||||
|
| /api/v1/applications/* | 50 req/s | 25 |
|
||||||
|
| /api/v1/admin/* | 200 req/s | 100 |
|
||||||
|
|
||||||
|
### 3. 향후 추가될 서비스 (`/services`)
|
||||||
|
|
||||||
|
이 디렉토리에는 OAuth 인증을 사용할 서비스들이 추가됩니다.
|
||||||
|
|
||||||
|
## 🚀 빠른 시작
|
||||||
|
|
||||||
|
### 사전 요구사항
|
||||||
|
- Docker & Docker Compose
|
||||||
|
- Git
|
||||||
|
- Make (선택사항)
|
||||||
|
|
||||||
|
### 1. 저장소 클론
|
||||||
|
```bash
|
||||||
|
git clone http://gitea.yakenator.io/aimond/works.git
|
||||||
|
cd works
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 환경 변수 설정
|
||||||
|
```bash
|
||||||
|
# 백엔드 환경 변수
|
||||||
|
cp oauth/backend/.env.example oauth/backend/.env
|
||||||
|
# .env 파일을 열어 필요한 값 수정
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Docker Compose로 실행
|
||||||
|
|
||||||
|
#### Makefile 사용 (권장)
|
||||||
|
```bash
|
||||||
|
# 모든 서비스 시작
|
||||||
|
make up
|
||||||
|
|
||||||
|
# 백그라운드 실행
|
||||||
|
make up-d
|
||||||
|
|
||||||
|
# 로그 확인
|
||||||
|
make logs
|
||||||
|
|
||||||
|
# 서비스 중지
|
||||||
|
make down
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Docker Compose 직접 사용
|
||||||
|
```bash
|
||||||
|
# 모든 서비스 시작
|
||||||
|
docker-compose up --build
|
||||||
|
|
||||||
|
# 백그라운드 실행
|
||||||
|
docker-compose up -d --build
|
||||||
|
|
||||||
|
# 로그 확인
|
||||||
|
docker-compose logs -f
|
||||||
|
|
||||||
|
# 서비스 중지
|
||||||
|
docker-compose down
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. 서비스 접속
|
||||||
|
- **API Gateway**: http://localhost:9080
|
||||||
|
- **APISIX Dashboard**: http://localhost:9000 (admin/admin123)
|
||||||
|
- **Frontend**: http://localhost:5173
|
||||||
|
- **API Documentation**: http://localhost:9080/api/v1/docs
|
||||||
|
|
||||||
|
## 💻 개발 가이드
|
||||||
|
|
||||||
|
### 개발 환경 규칙
|
||||||
|
- 모든 개발은 Docker 컨테이너 환경에서 진행
|
||||||
|
- 서비스 간 의존성은 healthcheck로 관리
|
||||||
|
- Hot reload 지원 (백엔드/프론트엔드)
|
||||||
|
|
||||||
|
### 코드 스타일
|
||||||
|
- **Python**: Black + Ruff
|
||||||
|
- **TypeScript**: ESLint + Prettier
|
||||||
|
- **Commit**: Conventional Commits
|
||||||
|
|
||||||
|
### 테스트
|
||||||
|
```bash
|
||||||
|
# 백엔드 테스트
|
||||||
|
make test-backend
|
||||||
|
|
||||||
|
# 프론트엔드 테스트
|
||||||
|
make test-frontend
|
||||||
|
```
|
||||||
|
|
||||||
|
### 디버깅
|
||||||
|
```bash
|
||||||
|
# 백엔드 컨테이너 접속
|
||||||
|
make exec-backend
|
||||||
|
|
||||||
|
# MongoDB 쉘 접속
|
||||||
|
make exec-mongo
|
||||||
|
|
||||||
|
# Redis CLI 접속
|
||||||
|
make exec-redis
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📚 API 문서
|
||||||
|
|
||||||
|
### 주요 엔드포인트
|
||||||
|
|
||||||
|
#### 인증
|
||||||
|
- `POST /api/v1/auth/login`: 로그인
|
||||||
|
- `POST /api/v1/auth/logout`: 로그아웃
|
||||||
|
- `POST /api/v1/auth/refresh`: 토큰 갱신
|
||||||
|
- `GET /api/v1/auth/authorize`: OAuth 인증
|
||||||
|
- `POST /api/v1/auth/token`: 토큰 발급
|
||||||
|
|
||||||
|
#### 사용자
|
||||||
|
- `GET /api/v1/users/me`: 현재 사용자 정보
|
||||||
|
- `PUT /api/v1/users/me`: 사용자 정보 수정
|
||||||
|
- `POST /api/v1/users/me/password`: 패스워드 변경
|
||||||
|
|
||||||
|
#### 애플리케이션
|
||||||
|
- `GET /api/v1/applications`: 애플리케이션 목록
|
||||||
|
- `POST /api/v1/applications`: 애플리케이션 등록
|
||||||
|
- `PUT /api/v1/applications/{id}`: 애플리케이션 수정
|
||||||
|
- `DELETE /api/v1/applications/{id}`: 애플리케이션 삭제
|
||||||
|
|
||||||
|
상세 API 문서는 [oauth/docs/api-specification.md](oauth/docs/api-specification.md) 참조
|
||||||
|
|
||||||
|
## 🚢 배포 가이드
|
||||||
|
|
||||||
|
### 환경별 배포
|
||||||
|
|
||||||
|
#### 개발 환경 (dev)
|
||||||
|
```bash
|
||||||
|
docker-compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 검증 환경 (vei)
|
||||||
|
```bash
|
||||||
|
cd oauth/configs/vei
|
||||||
|
docker-compose -f docker-compose.yml up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 운영 환경 (prod)
|
||||||
|
```bash
|
||||||
|
kubectl apply -f .k8s/
|
||||||
|
```
|
||||||
|
|
||||||
|
### 백업 및 복구
|
||||||
|
|
||||||
|
#### 자동 백업
|
||||||
|
- 매일 새벽 3시 자동 백업
|
||||||
|
- 1개월 이상 데이터는 압축 아카이빙
|
||||||
|
|
||||||
|
#### 수동 백업
|
||||||
|
```bash
|
||||||
|
# MongoDB 백업
|
||||||
|
docker-compose exec mongodb mongodump --out /backup
|
||||||
|
|
||||||
|
# Redis 백업
|
||||||
|
docker-compose exec redis redis-cli BGSAVE
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📖 문서
|
||||||
|
|
||||||
|
### 핵심 문서
|
||||||
|
- [CLAUDE.md](CLAUDE.md): 프로젝트 규칙 및 가이드
|
||||||
|
- [Architecture](oauth/docs/architecture.md): 시스템 아키텍처
|
||||||
|
- [API Specification](oauth/docs/api-specification.md): API 명세
|
||||||
|
- [APISIX Guide](oauth/docs/apisix-guide.md): API Gateway 가이드
|
||||||
|
|
||||||
|
### 개발 문서
|
||||||
|
- Frontend 개발 가이드 (작성 예정)
|
||||||
|
- Backend 개발 가이드 (작성 예정)
|
||||||
|
- 테스트 가이드 (작성 예정)
|
||||||
|
|
||||||
|
### 운영 문서
|
||||||
|
- 모니터링 가이드 (작성 예정)
|
||||||
|
- 트러블슈팅 가이드 (작성 예정)
|
||||||
|
- 성능 튜닝 가이드 (작성 예정)
|
||||||
|
|
||||||
|
## 🔐 보안
|
||||||
|
|
||||||
|
### 보안 기능
|
||||||
|
- JWT 기반 인증
|
||||||
|
- Rate Limiting
|
||||||
|
- IP 제한 (관리자 API)
|
||||||
|
- CORS 정책
|
||||||
|
- SQL Injection 방지
|
||||||
|
- XSS/CSRF 방지
|
||||||
|
|
||||||
|
### 보안 체크리스트
|
||||||
|
- [ ] 환경별 Secret Key 분리
|
||||||
|
- [ ] HTTPS 적용
|
||||||
|
- [ ] WAF 설정
|
||||||
|
- [ ] 정기 보안 감사
|
||||||
|
- [ ] 취약점 스캔
|
||||||
|
|
||||||
|
## 🤝 기여
|
||||||
|
|
||||||
|
### Git 협업 규칙
|
||||||
|
- **원격 저장소**: http://gitea.yakenator.io/aimond/works.git
|
||||||
|
- **브랜치 전략**:
|
||||||
|
- `main`: 프로덕션
|
||||||
|
- `develop`: 개발
|
||||||
|
- `feature/*`: 기능 개발
|
||||||
|
- **커밋 규칙**: 모든 작업 세션은 git commit으로 마무리
|
||||||
|
|
||||||
|
### 개발 프로세스
|
||||||
|
1. Feature 브랜치 생성
|
||||||
|
2. 개발 및 테스트
|
||||||
|
3. Pull Request 생성
|
||||||
|
4. 코드 리뷰
|
||||||
|
5. Merge
|
||||||
|
|
||||||
|
## 📝 라이선스
|
||||||
|
|
||||||
|
[LICENSE](LICENSE) 파일 참조
|
||||||
|
|
||||||
|
## 👥 팀
|
||||||
|
|
||||||
|
- 개발: Claude AI Assistant
|
||||||
|
- 기획/관리: 사용자
|
||||||
|
|
||||||
|
## 🔗 관련 링크
|
||||||
|
|
||||||
|
- [Gitea Repository](http://gitea.yakenator.io/aimond/works.git)
|
||||||
|
- [APISIX Documentation](https://apisix.apache.org/)
|
||||||
|
- [FastAPI Documentation](https://fastapi.tiangolo.com/)
|
||||||
|
- [React Documentation](https://react.dev/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Last Updated**: 2024-12-31
|
||||||
|
**Version**: 1.0.0
|
||||||
@ -49,7 +49,6 @@ plugins:
|
|||||||
- limit-count
|
- limit-count
|
||||||
- limit-req
|
- limit-req
|
||||||
- node-status
|
- node-status
|
||||||
- oauth
|
|
||||||
- prometheus
|
- prometheus
|
||||||
- proxy-cache
|
- proxy-cache
|
||||||
- proxy-mirror
|
- proxy-mirror
|
||||||
|
|||||||
@ -99,6 +99,8 @@ services:
|
|||||||
dockerfile: Dockerfile.dev
|
dockerfile: Dockerfile.dev
|
||||||
container_name: oauth-backend
|
container_name: oauth-backend
|
||||||
restart: always
|
restart: always
|
||||||
|
ports:
|
||||||
|
- "8000:8000"
|
||||||
environment:
|
environment:
|
||||||
- MONGODB_URL=mongodb://admin:admin123@mongodb:27017/oauth_db?authSource=admin
|
- MONGODB_URL=mongodb://admin:admin123@mongodb:27017/oauth_db?authSource=admin
|
||||||
- REDIS_URL=redis://redis:6379
|
- REDIS_URL=redis://redis:6379
|
||||||
@ -128,8 +130,6 @@ services:
|
|||||||
depends_on:
|
depends_on:
|
||||||
backend:
|
backend:
|
||||||
condition: service_started
|
condition: service_started
|
||||||
apisix:
|
|
||||||
condition: service_healthy
|
|
||||||
volumes:
|
volumes:
|
||||||
- ./oauth/frontend:/app
|
- ./oauth/frontend:/app
|
||||||
- /app/node_modules
|
- /app/node_modules
|
||||||
|
|||||||
0
oauth/backend/app/api/v1/endpoints/__init__.py
Normal file
0
oauth/backend/app/api/v1/endpoints/__init__.py
Normal file
25
oauth/backend/app/api/v1/endpoints/admin.py
Normal file
25
oauth/backend/app/api/v1/endpoints/admin.py
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
from fastapi import APIRouter, Depends, HTTPException
|
||||||
|
from typing import List
|
||||||
|
from app.core.security import get_current_user, require_admin
|
||||||
|
from app.models.user import User
|
||||||
|
|
||||||
|
router = APIRouter()
|
||||||
|
|
||||||
|
@router.get("/users", dependencies=[Depends(require_admin)])
|
||||||
|
async def get_all_users():
|
||||||
|
# TODO: Implement get all users logic
|
||||||
|
return {"users": []}
|
||||||
|
|
||||||
|
@router.get("/stats", dependencies=[Depends(require_admin)])
|
||||||
|
async def get_system_stats():
|
||||||
|
# TODO: Implement system statistics logic
|
||||||
|
return {
|
||||||
|
"total_users": 0,
|
||||||
|
"total_applications": 0,
|
||||||
|
"active_sessions": 0
|
||||||
|
}
|
||||||
|
|
||||||
|
@router.post("/users/{user_id}/role", dependencies=[Depends(require_admin)])
|
||||||
|
async def update_user_role(user_id: str, role: str):
|
||||||
|
# TODO: Implement role update logic
|
||||||
|
return {"message": f"User {user_id} role updated to {role}"}
|
||||||
37
oauth/backend/app/api/v1/endpoints/applications.py
Normal file
37
oauth/backend/app/api/v1/endpoints/applications.py
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
from fastapi import APIRouter, Depends, HTTPException
|
||||||
|
from typing import List
|
||||||
|
from app.core.security import get_current_user
|
||||||
|
from app.models.user import User
|
||||||
|
from app.models.application import Application
|
||||||
|
|
||||||
|
router = APIRouter()
|
||||||
|
|
||||||
|
@router.get("/", response_model=List[Application])
|
||||||
|
async def get_applications(current_user: User = Depends(get_current_user)):
|
||||||
|
# TODO: Implement application list logic
|
||||||
|
return []
|
||||||
|
|
||||||
|
@router.post("/", response_model=Application)
|
||||||
|
async def create_application(
|
||||||
|
app_data: dict,
|
||||||
|
current_user: User = Depends(get_current_user)
|
||||||
|
):
|
||||||
|
# TODO: Implement application creation logic
|
||||||
|
return {"message": "Application created"}
|
||||||
|
|
||||||
|
@router.put("/{app_id}")
|
||||||
|
async def update_application(
|
||||||
|
app_id: str,
|
||||||
|
app_data: dict,
|
||||||
|
current_user: User = Depends(get_current_user)
|
||||||
|
):
|
||||||
|
# TODO: Implement application update logic
|
||||||
|
return {"message": f"Application {app_id} updated"}
|
||||||
|
|
||||||
|
@router.delete("/{app_id}")
|
||||||
|
async def delete_application(
|
||||||
|
app_id: str,
|
||||||
|
current_user: User = Depends(get_current_user)
|
||||||
|
):
|
||||||
|
# TODO: Implement application deletion logic
|
||||||
|
return {"message": f"Application {app_id} deleted"}
|
||||||
85
oauth/backend/app/api/v1/endpoints/auth.py
Normal file
85
oauth/backend/app/api/v1/endpoints/auth.py
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
from fastapi import APIRouter, HTTPException, Depends, status
|
||||||
|
from fastapi.security import OAuth2PasswordRequestForm
|
||||||
|
from app.core.security import create_access_token, get_current_user, get_password_hash
|
||||||
|
from app.models.user import User, UserCreate
|
||||||
|
from app.core.config import settings
|
||||||
|
from app.core.database import get_database
|
||||||
|
from datetime import datetime
|
||||||
|
|
||||||
|
router = APIRouter()
|
||||||
|
|
||||||
|
@router.post("/login")
|
||||||
|
async def login(form_data: OAuth2PasswordRequestForm = Depends()):
|
||||||
|
# TODO: Implement actual authentication
|
||||||
|
return {
|
||||||
|
"access_token": create_access_token({"sub": form_data.username}),
|
||||||
|
"token_type": "bearer"
|
||||||
|
}
|
||||||
|
|
||||||
|
@router.post("/logout")
|
||||||
|
async def logout(current_user: User = Depends(get_current_user)):
|
||||||
|
# TODO: Implement logout logic
|
||||||
|
return {"message": "Logged out successfully"}
|
||||||
|
|
||||||
|
@router.post("/refresh")
|
||||||
|
async def refresh_token(current_user: User = Depends(get_current_user)):
|
||||||
|
# TODO: Implement token refresh logic
|
||||||
|
return {
|
||||||
|
"access_token": create_access_token({"sub": current_user.email}),
|
||||||
|
"token_type": "bearer"
|
||||||
|
}
|
||||||
|
|
||||||
|
@router.get("/authorize")
|
||||||
|
async def authorize():
|
||||||
|
# TODO: Implement OAuth authorization
|
||||||
|
return {"message": "Authorization endpoint"}
|
||||||
|
|
||||||
|
@router.post("/token")
|
||||||
|
async def token():
|
||||||
|
# TODO: Implement OAuth token endpoint
|
||||||
|
return {"message": "Token endpoint"}
|
||||||
|
|
||||||
|
@router.post("/register", status_code=status.HTTP_201_CREATED)
|
||||||
|
async def register(user_data: UserCreate):
|
||||||
|
"""Register a new user"""
|
||||||
|
# Get database
|
||||||
|
database = get_database()
|
||||||
|
# Check if user already exists
|
||||||
|
users_collection = database["users"]
|
||||||
|
existing_user = await users_collection.find_one({"email": user_data.email})
|
||||||
|
|
||||||
|
if existing_user:
|
||||||
|
raise HTTPException(
|
||||||
|
status_code=status.HTTP_400_BAD_REQUEST,
|
||||||
|
detail="Email already registered"
|
||||||
|
)
|
||||||
|
|
||||||
|
# Create new user
|
||||||
|
user_dict = {
|
||||||
|
"email": user_data.email,
|
||||||
|
"full_name": user_data.name,
|
||||||
|
"username": user_data.email.split("@")[0], # Use email prefix as username
|
||||||
|
"organization": user_data.organization,
|
||||||
|
"hashed_password": get_password_hash(user_data.password),
|
||||||
|
"role": "user", # Default role
|
||||||
|
"is_active": True,
|
||||||
|
"created_at": datetime.utcnow(),
|
||||||
|
"updated_at": datetime.utcnow()
|
||||||
|
}
|
||||||
|
|
||||||
|
# Insert user into database
|
||||||
|
result = await users_collection.insert_one(user_dict)
|
||||||
|
|
||||||
|
# Create access token for immediate login
|
||||||
|
access_token = create_access_token({"sub": user_data.email})
|
||||||
|
|
||||||
|
return {
|
||||||
|
"message": "User registered successfully",
|
||||||
|
"access_token": access_token,
|
||||||
|
"token_type": "bearer",
|
||||||
|
"user": {
|
||||||
|
"id": str(result.inserted_id),
|
||||||
|
"email": user_data.email,
|
||||||
|
"name": user_data.name
|
||||||
|
}
|
||||||
|
}
|
||||||
25
oauth/backend/app/api/v1/endpoints/users.py
Normal file
25
oauth/backend/app/api/v1/endpoints/users.py
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
from fastapi import APIRouter, Depends, HTTPException
|
||||||
|
from app.core.security import get_current_user
|
||||||
|
from app.models.user import User
|
||||||
|
|
||||||
|
router = APIRouter()
|
||||||
|
|
||||||
|
@router.get("/me")
|
||||||
|
async def get_me(current_user: User = Depends(get_current_user)):
|
||||||
|
return current_user
|
||||||
|
|
||||||
|
@router.put("/me")
|
||||||
|
async def update_me(
|
||||||
|
user_update: dict,
|
||||||
|
current_user: User = Depends(get_current_user)
|
||||||
|
):
|
||||||
|
# TODO: Implement user update logic
|
||||||
|
return {"message": "User updated", "user": current_user}
|
||||||
|
|
||||||
|
@router.post("/me/password")
|
||||||
|
async def change_password(
|
||||||
|
password_data: dict,
|
||||||
|
current_user: User = Depends(get_current_user)
|
||||||
|
):
|
||||||
|
# TODO: Implement password change logic
|
||||||
|
return {"message": "Password changed successfully"}
|
||||||
51
oauth/backend/app/core/security.py
Normal file
51
oauth/backend/app/core/security.py
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
from datetime import datetime, timedelta
|
||||||
|
from typing import Optional, Dict, Any
|
||||||
|
from jose import JWTError, jwt
|
||||||
|
from passlib.context import CryptContext
|
||||||
|
from fastapi import Depends, HTTPException, status
|
||||||
|
from fastapi.security import OAuth2PasswordBearer
|
||||||
|
from app.core.config import settings
|
||||||
|
|
||||||
|
pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
|
||||||
|
oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/api/v1/auth/login")
|
||||||
|
|
||||||
|
def verify_password(plain_password: str, hashed_password: str) -> bool:
|
||||||
|
return pwd_context.verify(plain_password, hashed_password)
|
||||||
|
|
||||||
|
def get_password_hash(password: str) -> str:
|
||||||
|
return pwd_context.hash(password)
|
||||||
|
|
||||||
|
def create_access_token(data: Dict[str, Any], expires_delta: Optional[timedelta] = None) -> str:
|
||||||
|
to_encode = data.copy()
|
||||||
|
if expires_delta:
|
||||||
|
expire = datetime.utcnow() + expires_delta
|
||||||
|
else:
|
||||||
|
expire = datetime.utcnow() + timedelta(minutes=settings.ACCESS_TOKEN_EXPIRE_MINUTES)
|
||||||
|
to_encode.update({"exp": expire})
|
||||||
|
encoded_jwt = jwt.encode(to_encode, settings.SECRET_KEY, algorithm=settings.ALGORITHM)
|
||||||
|
return encoded_jwt
|
||||||
|
|
||||||
|
async def get_current_user(token: str = Depends(oauth2_scheme)):
|
||||||
|
credentials_exception = HTTPException(
|
||||||
|
status_code=status.HTTP_401_UNAUTHORIZED,
|
||||||
|
detail="Could not validate credentials",
|
||||||
|
headers={"WWW-Authenticate": "Bearer"},
|
||||||
|
)
|
||||||
|
try:
|
||||||
|
payload = jwt.decode(token, settings.SECRET_KEY, algorithms=[settings.ALGORITHM])
|
||||||
|
username: str = payload.get("sub")
|
||||||
|
if username is None:
|
||||||
|
raise credentials_exception
|
||||||
|
except JWTError:
|
||||||
|
raise credentials_exception
|
||||||
|
|
||||||
|
# TODO: Get user from database
|
||||||
|
return {"email": username, "role": "user"}
|
||||||
|
|
||||||
|
async def require_admin(current_user = Depends(get_current_user)):
|
||||||
|
if current_user.get("role") != "system_admin":
|
||||||
|
raise HTTPException(
|
||||||
|
status_code=status.HTTP_403_FORBIDDEN,
|
||||||
|
detail="Not enough permissions"
|
||||||
|
)
|
||||||
|
return current_user
|
||||||
1
oauth/backend/app/db/__init__.py
Normal file
1
oauth/backend/app/db/__init__.py
Normal file
@ -0,0 +1 @@
|
|||||||
|
# Database module
|
||||||
20
oauth/backend/app/db/mongodb.py
Normal file
20
oauth/backend/app/db/mongodb.py
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import os
|
||||||
|
from motor.motor_asyncio import AsyncIOMotorClient
|
||||||
|
from typing import Optional
|
||||||
|
|
||||||
|
mongodb_client: Optional[AsyncIOMotorClient] = None
|
||||||
|
database = None
|
||||||
|
|
||||||
|
async def connect_to_mongo():
|
||||||
|
global mongodb_client, database
|
||||||
|
mongodb_url = os.getenv("MONGODB_URL", "mongodb://localhost:27017")
|
||||||
|
mongodb_client = AsyncIOMotorClient(mongodb_url)
|
||||||
|
database = mongodb_client.oauth_db
|
||||||
|
|
||||||
|
async def close_mongo_connection():
|
||||||
|
global mongodb_client
|
||||||
|
if mongodb_client:
|
||||||
|
mongodb_client.close()
|
||||||
|
|
||||||
|
async def get_database():
|
||||||
|
return database
|
||||||
@ -10,17 +10,21 @@ class UserRole(str, Enum):
|
|||||||
|
|
||||||
class UserBase(BaseModel):
|
class UserBase(BaseModel):
|
||||||
email: EmailStr
|
email: EmailStr
|
||||||
username: str
|
username: Optional[str] = None
|
||||||
full_name: str
|
full_name: Optional[str] = None
|
||||||
role: UserRole = UserRole.USER
|
role: UserRole = UserRole.USER
|
||||||
is_active: bool = True
|
is_active: bool = True
|
||||||
phone_number: Optional[str] = None
|
phone_number: Optional[str] = None
|
||||||
birth_date: Optional[str] = None
|
birth_date: Optional[str] = None
|
||||||
gender: Optional[str] = None
|
gender: Optional[str] = None
|
||||||
profile_picture: Optional[str] = None
|
profile_picture: Optional[str] = None
|
||||||
|
organization: Optional[str] = None
|
||||||
|
|
||||||
class UserCreate(UserBase):
|
class UserCreate(BaseModel):
|
||||||
|
email: EmailStr
|
||||||
password: str
|
password: str
|
||||||
|
name: str
|
||||||
|
organization: Optional[str] = None
|
||||||
|
|
||||||
class UserUpdate(BaseModel):
|
class UserUpdate(BaseModel):
|
||||||
full_name: Optional[str] = None
|
full_name: Optional[str] = None
|
||||||
|
|||||||
@ -4,6 +4,7 @@ python-multipart==0.0.9
|
|||||||
python-jose[cryptography]==3.3.0
|
python-jose[cryptography]==3.3.0
|
||||||
passlib[bcrypt]==1.7.4
|
passlib[bcrypt]==1.7.4
|
||||||
motor==3.5.1
|
motor==3.5.1
|
||||||
|
pymongo==4.8.0
|
||||||
redis==5.0.7
|
redis==5.0.7
|
||||||
pydantic==2.9.1
|
pydantic==2.9.1
|
||||||
pydantic-settings==2.4.0
|
pydantic-settings==2.4.0
|
||||||
|
|||||||
762
oauth/frontend/package-lock.json
generated
762
oauth/frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,12 +10,17 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@emotion/react": "^11.14.0",
|
||||||
|
"@emotion/styled": "^11.14.1",
|
||||||
"@hookform/resolvers": "^5.2.1",
|
"@hookform/resolvers": "^5.2.1",
|
||||||
|
"@mui/icons-material": "^7.3.1",
|
||||||
|
"@mui/material": "^7.3.1",
|
||||||
"@tanstack/react-query": "^5.85.6",
|
"@tanstack/react-query": "^5.85.6",
|
||||||
"axios": "^1.11.0",
|
"axios": "^1.11.0",
|
||||||
"react": "^19.1.1",
|
"react": "^19.1.1",
|
||||||
"react-dom": "^19.1.1",
|
"react-dom": "^19.1.1",
|
||||||
"react-hook-form": "^7.62.0",
|
"react-hook-form": "^7.62.0",
|
||||||
|
"react-hot-toast": "^2.6.0",
|
||||||
"react-router-dom": "^7.8.2",
|
"react-router-dom": "^7.8.2",
|
||||||
"zod": "^4.1.5",
|
"zod": "^4.1.5",
|
||||||
"zustand": "^5.0.8"
|
"zustand": "^5.0.8"
|
||||||
@ -33,7 +38,6 @@
|
|||||||
"eslint-plugin-react-hooks": "^5.2.0",
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.20",
|
"eslint-plugin-react-refresh": "^0.4.20",
|
||||||
"globals": "^16.3.0",
|
"globals": "^16.3.0",
|
||||||
"lucide-react": "^0.542.0",
|
|
||||||
"postcss": "^8.5.6",
|
"postcss": "^8.5.6",
|
||||||
"tailwind-merge": "^3.3.1",
|
"tailwind-merge": "^3.3.1",
|
||||||
"tailwindcss": "^4.1.12",
|
"tailwindcss": "^4.1.12",
|
||||||
|
|||||||
@ -1,34 +1,73 @@
|
|||||||
import { useState } from 'react'
|
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
|
||||||
import reactLogo from './assets/react.svg'
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||||
import viteLogo from '/vite.svg'
|
import LoginPage from './pages/LoginPage'
|
||||||
|
import SignupPage from './pages/SignupPage'
|
||||||
|
import Dashboard from './pages/Dashboard'
|
||||||
|
import Applications from './pages/Applications'
|
||||||
|
import Profile from './pages/Profile'
|
||||||
|
import AdminPanel from './pages/AdminPanel'
|
||||||
|
import AuthCallback from './pages/AuthCallback'
|
||||||
|
import AuthorizePage from './pages/AuthorizePage'
|
||||||
|
import { AuthProvider } from './contexts/AuthContext'
|
||||||
|
import ProtectedRoute from './components/ProtectedRoute'
|
||||||
import './App.css'
|
import './App.css'
|
||||||
|
|
||||||
function App() {
|
const queryClient = new QueryClient({
|
||||||
const [count, setCount] = useState(0)
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
retry: 1,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
<QueryClientProvider client={queryClient}>
|
||||||
<div>
|
<AuthProvider>
|
||||||
<a href="https://vite.dev" target="_blank">
|
<Router>
|
||||||
<img src={viteLogo} className="logo" alt="Vite logo" />
|
<Routes>
|
||||||
</a>
|
<Route path="/login" element={<LoginPage />} />
|
||||||
<a href="https://react.dev" target="_blank">
|
<Route path="/signup" element={<SignupPage />} />
|
||||||
<img src={reactLogo} className="logo react" alt="React logo" />
|
<Route path="/auth/callback" element={<AuthCallback />} />
|
||||||
</a>
|
<Route path="/oauth/authorize" element={<AuthorizePage />} />
|
||||||
</div>
|
<Route
|
||||||
<h1>Vite + React</h1>
|
path="/dashboard"
|
||||||
<div className="card">
|
element={
|
||||||
<button onClick={() => setCount((count) => count + 1)}>
|
<ProtectedRoute>
|
||||||
count is {count}
|
<Dashboard />
|
||||||
</button>
|
</ProtectedRoute>
|
||||||
<p>
|
}
|
||||||
Edit <code>src/App.tsx</code> and save to test HMR
|
/>
|
||||||
</p>
|
<Route
|
||||||
</div>
|
path="/applications"
|
||||||
<p className="read-the-docs">
|
element={
|
||||||
Click on the Vite and React logos to learn more
|
<ProtectedRoute>
|
||||||
</p>
|
<Applications />
|
||||||
</>
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/profile"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<Profile />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/admin"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute requireAdmin>
|
||||||
|
<AdminPanel />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||||
|
</Routes>
|
||||||
|
</Router>
|
||||||
|
</AuthProvider>
|
||||||
|
</QueryClientProvider>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
31
oauth/frontend/src/components/ProtectedRoute.tsx
Normal file
31
oauth/frontend/src/components/ProtectedRoute.tsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { Navigate } from 'react-router-dom'
|
||||||
|
import { useAuth } from '../contexts/AuthContext'
|
||||||
|
|
||||||
|
interface ProtectedRouteProps {
|
||||||
|
children: React.ReactNode
|
||||||
|
requireAdmin?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, requireAdmin = false }) => {
|
||||||
|
const { user, isLoading } = useAuth()
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return <Navigate to="/login" replace />
|
||||||
|
}
|
||||||
|
|
||||||
|
if (requireAdmin && user.role !== 'system_admin') {
|
||||||
|
return <Navigate to="/dashboard" replace />
|
||||||
|
}
|
||||||
|
|
||||||
|
return <>{children}</>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ProtectedRoute
|
||||||
108
oauth/frontend/src/contexts/AuthContext.tsx
Normal file
108
oauth/frontend/src/contexts/AuthContext.tsx
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
|
||||||
|
|
||||||
|
interface User {
|
||||||
|
id: string
|
||||||
|
email: string
|
||||||
|
name: string
|
||||||
|
role: 'system_admin' | 'group_admin' | 'user'
|
||||||
|
avatar?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AuthContextType {
|
||||||
|
user: User | null
|
||||||
|
isLoading: boolean
|
||||||
|
login: (email: string, password: string) => Promise<void>
|
||||||
|
logout: () => void
|
||||||
|
checkAuth: () => Promise<void>
|
||||||
|
}
|
||||||
|
|
||||||
|
const AuthContext = createContext<AuthContextType | undefined>(undefined)
|
||||||
|
|
||||||
|
export const useAuth = () => {
|
||||||
|
const context = useContext(AuthContext)
|
||||||
|
if (!context) {
|
||||||
|
throw new Error('useAuth must be used within an AuthProvider')
|
||||||
|
}
|
||||||
|
return context
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AuthProviderProps {
|
||||||
|
children: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
||||||
|
const [user, setUser] = useState<User | null>(null)
|
||||||
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
|
|
||||||
|
const checkAuth = async () => {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('access_token')
|
||||||
|
if (!token) {
|
||||||
|
setIsLoading(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Verify token with backend
|
||||||
|
const response = await fetch('/api/v1/users/me', {
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const userData = await response.json()
|
||||||
|
setUser(userData)
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem('access_token')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Auth check failed:', error)
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const login = async (email: string, password: string) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/v1/auth/login', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||||||
|
},
|
||||||
|
body: new URLSearchParams({
|
||||||
|
username: email,
|
||||||
|
password,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Login failed')
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json()
|
||||||
|
localStorage.setItem('access_token', data.access_token)
|
||||||
|
|
||||||
|
await checkAuth()
|
||||||
|
window.location.href = '/dashboard'
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Login failed:', error)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const logout = () => {
|
||||||
|
localStorage.removeItem('access_token')
|
||||||
|
setUser(null)
|
||||||
|
window.location.href = '/login'
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
checkAuth()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContext.Provider value={{ user, isLoading, login, logout, checkAuth }}>
|
||||||
|
{children}
|
||||||
|
</AuthContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,68 +1,148 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
line-height: 1.5;
|
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||||
font-weight: 400;
|
--gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||||
|
--gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||||||
|
--gradient-dark: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
|
||||||
|
}
|
||||||
|
|
||||||
color-scheme: light dark;
|
body {
|
||||||
color: rgba(255, 255, 255, 0.87);
|
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
background-color: #242424;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
/* Glass effect */
|
||||||
font-weight: 500;
|
.glass {
|
||||||
color: #646cff;
|
background: rgba(255, 255, 255, 0.1);
|
||||||
text-decoration: inherit;
|
backdrop-filter: blur(10px);
|
||||||
}
|
-webkit-backdrop-filter: blur(10px);
|
||||||
a:hover {
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||||
color: #535bf2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
.glass-dark {
|
||||||
margin: 0;
|
background: rgba(0, 0, 0, 0.2);
|
||||||
display: flex;
|
backdrop-filter: blur(10px);
|
||||||
place-items: center;
|
-webkit-backdrop-filter: blur(10px);
|
||||||
min-width: 320px;
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
/* Animations */
|
||||||
font-size: 3.2em;
|
@keyframes float {
|
||||||
line-height: 1.1;
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
@keyframes pulse-slow {
|
||||||
border-radius: 8px;
|
0%, 100% { opacity: 0.3; }
|
||||||
border: 1px solid transparent;
|
50% { opacity: 0.8; }
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@keyframes gradient-shift {
|
||||||
:root {
|
0% { background-position: 0% 50%; }
|
||||||
color: #213547;
|
50% { background-position: 100% 50%; }
|
||||||
background-color: #ffffff;
|
100% { background-position: 0% 50%; }
|
||||||
}
|
}
|
||||||
a:hover {
|
|
||||||
color: #747bff;
|
.animate-float {
|
||||||
}
|
animation: float 6s ease-in-out infinite;
|
||||||
button {
|
}
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
.animate-pulse-slow {
|
||||||
|
animation: pulse-slow 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-gradient {
|
||||||
|
background-size: 200% 200%;
|
||||||
|
animation: gradient-shift 8s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #888;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input focus effects */
|
||||||
|
.input-modern {
|
||||||
|
@apply relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-modern::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, #667eea, #764ba2);
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-modern:focus-within::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button hover effects */
|
||||||
|
.btn-glow {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-glow::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: width 0.6s, height 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-glow:hover::before {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Neumorphism effects */
|
||||||
|
.neu-shadow {
|
||||||
|
box-shadow:
|
||||||
|
12px 12px 24px rgba(0, 0, 0, 0.1),
|
||||||
|
-12px -12px 24px rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.neu-shadow-inset {
|
||||||
|
box-shadow:
|
||||||
|
inset 6px 6px 12px rgba(0, 0, 0, 0.1),
|
||||||
|
inset -6px -6px 12px rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
10
oauth/frontend/src/pages/AdminPanel.tsx
Normal file
10
oauth/frontend/src/pages/AdminPanel.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
const AdminPanel = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 p-6">
|
||||||
|
<h1 className="text-2xl font-bold">관리자 패널</h1>
|
||||||
|
<p className="text-gray-600">시스템 관리자 전용 페이지입니다.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AdminPanel
|
||||||
10
oauth/frontend/src/pages/Applications.tsx
Normal file
10
oauth/frontend/src/pages/Applications.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
const Applications = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 p-6">
|
||||||
|
<h1 className="text-2xl font-bold">애플리케이션 관리</h1>
|
||||||
|
<p className="text-gray-600">OAuth 애플리케이션을 관리합니다.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Applications
|
||||||
54
oauth/frontend/src/pages/AuthCallback.tsx
Normal file
54
oauth/frontend/src/pages/AuthCallback.tsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import { useEffect } from 'react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
|
||||||
|
const AuthCallback = () => {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Handle OAuth callback
|
||||||
|
const params = new URLSearchParams(window.location.search)
|
||||||
|
const code = params.get('code')
|
||||||
|
const state = params.get('state')
|
||||||
|
|
||||||
|
if (code) {
|
||||||
|
// Exchange code for token
|
||||||
|
handleOAuthCallback(code, state)
|
||||||
|
} else {
|
||||||
|
navigate('/login')
|
||||||
|
}
|
||||||
|
}, [navigate])
|
||||||
|
|
||||||
|
const handleOAuthCallback = async (code: string, state: string | null) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/v1/auth/token', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ code, state }),
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json()
|
||||||
|
localStorage.setItem('access_token', data.access_token)
|
||||||
|
navigate('/dashboard')
|
||||||
|
} else {
|
||||||
|
navigate('/login')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('OAuth callback error:', error)
|
||||||
|
navigate('/login')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
|
||||||
|
<p className="mt-4 text-gray-600">인증 처리 중...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuthCallback
|
||||||
470
oauth/frontend/src/pages/AuthorizePage.tsx
Normal file
470
oauth/frontend/src/pages/AuthorizePage.tsx
Normal file
@ -0,0 +1,470 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { useNavigate, useSearchParams } from 'react-router-dom'
|
||||||
|
import { useAuth } from '../contexts/AuthContext'
|
||||||
|
import {
|
||||||
|
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,
|
||||||
|
Security,
|
||||||
|
Info,
|
||||||
|
ExpandMore,
|
||||||
|
ExpandLess,
|
||||||
|
CheckCircle,
|
||||||
|
Language,
|
||||||
|
HelpOutline
|
||||||
|
} from '@mui/icons-material'
|
||||||
|
|
||||||
|
interface Permission {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
description: string
|
||||||
|
icon: React.ElementType
|
||||||
|
required: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const AuthorizePage = () => {
|
||||||
|
const [searchParams] = useSearchParams()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const { user } = useAuth()
|
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [appInfo, setAppInfo] = useState<any>(null)
|
||||||
|
const [selectedPermissions, setSelectedPermissions] = useState<Set<string>>(new Set())
|
||||||
|
const [showDetails, setShowDetails] = useState(false)
|
||||||
|
|
||||||
|
// OAuth parameters
|
||||||
|
const clientId = searchParams.get('client_id')
|
||||||
|
const redirectUri = searchParams.get('redirect_uri')
|
||||||
|
const responseType = searchParams.get('response_type')
|
||||||
|
const scope = searchParams.get('scope')
|
||||||
|
const state = searchParams.get('state')
|
||||||
|
|
||||||
|
const permissions: Permission[] = [
|
||||||
|
{
|
||||||
|
id: 'profile',
|
||||||
|
name: '프로필 정보',
|
||||||
|
description: '이름, 이메일, 프로필 사진 등 기본 정보',
|
||||||
|
icon: AccountCircle,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'email',
|
||||||
|
name: '이메일 주소',
|
||||||
|
description: '이메일 주소 확인 및 알림 전송',
|
||||||
|
icon: Email,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'offline_access',
|
||||||
|
name: '오프라인 액세스',
|
||||||
|
description: '사용자가 오프라인일 때도 액세스 유지',
|
||||||
|
icon: CloudQueue,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'calendar',
|
||||||
|
name: '캘린더 접근',
|
||||||
|
description: '캘린더 일정 읽기 및 수정',
|
||||||
|
icon: CalendarMonth,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'files',
|
||||||
|
name: '파일 접근',
|
||||||
|
description: '파일 읽기, 쓰기 및 공유',
|
||||||
|
icon: Description,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'settings',
|
||||||
|
name: '설정 관리',
|
||||||
|
description: '애플리케이션 설정 읽기 및 수정',
|
||||||
|
icon: Settings,
|
||||||
|
required: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Mock user for demo
|
||||||
|
if (!user) {
|
||||||
|
// In production, redirect to login
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!clientId) {
|
||||||
|
navigate('/error?type=invalid_request')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch application information
|
||||||
|
fetchAppInfo(clientId)
|
||||||
|
|
||||||
|
// Parse requested scopes and set initial permissions
|
||||||
|
if (scope) {
|
||||||
|
const requestedScopes = scope.split(' ')
|
||||||
|
const initialPermissions = new Set<string>()
|
||||||
|
|
||||||
|
permissions.forEach(perm => {
|
||||||
|
if (perm.required || requestedScopes.includes(perm.id)) {
|
||||||
|
initialPermissions.add(perm.id)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
setSelectedPermissions(initialPermissions)
|
||||||
|
}
|
||||||
|
}, [user, clientId, scope, navigate])
|
||||||
|
|
||||||
|
const fetchAppInfo = async (clientId: string) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/v1/applications/${clientId}`)
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json()
|
||||||
|
setAppInfo(data)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch app info:', error)
|
||||||
|
// Use default app info for demo
|
||||||
|
setAppInfo({
|
||||||
|
name: 'Project Default Service Account',
|
||||||
|
developer: 'AiMond Developer',
|
||||||
|
website: 'https://aimond.io',
|
||||||
|
verified: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAccept = async () => {
|
||||||
|
setIsLoading(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/v1/auth/authorize', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
client_id: clientId,
|
||||||
|
redirect_uri: redirectUri,
|
||||||
|
response_type: responseType,
|
||||||
|
scope: Array.from(selectedPermissions).join(' '),
|
||||||
|
state: state
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json()
|
||||||
|
|
||||||
|
const redirectUrl = new URL(redirectUri || '/')
|
||||||
|
redirectUrl.searchParams.append('code', data.code)
|
||||||
|
if (state) {
|
||||||
|
redirectUrl.searchParams.append('state', state)
|
||||||
|
}
|
||||||
|
|
||||||
|
window.location.href = redirectUrl.toString()
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Authorization error:', error)
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
const redirectUrl = new URL(redirectUri || '/')
|
||||||
|
redirectUrl.searchParams.append('error', 'access_denied')
|
||||||
|
if (state) {
|
||||||
|
redirectUrl.searchParams.append('state', state)
|
||||||
|
}
|
||||||
|
|
||||||
|
window.location.href = redirectUrl.toString()
|
||||||
|
}
|
||||||
|
|
||||||
|
const togglePermission = (permId: string) => {
|
||||||
|
const permission = permissions.find(p => p.id === permId)
|
||||||
|
if (permission?.required) return
|
||||||
|
|
||||||
|
const newPermissions = new Set(selectedPermissions)
|
||||||
|
if (newPermissions.has(permId)) {
|
||||||
|
newPermissions.delete(permId)
|
||||||
|
} else {
|
||||||
|
newPermissions.add(permId)
|
||||||
|
}
|
||||||
|
setSelectedPermissions(newPermissions)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!appInfo) {
|
||||||
|
return (
|
||||||
|
<Box sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||||
|
<Typography>Loading...</Typography>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ minHeight: '100vh', backgroundColor: '#fff', display: 'flex', flexDirection: 'column' }}>
|
||||||
|
{/* 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 */}
|
||||||
|
<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}
|
||||||
|
</Typography>
|
||||||
|
<Typography sx={{ color: '#5f6368', fontSize: '14px', mb: 2 }}>
|
||||||
|
이 앱에서 다음 권한을 요청합니다:
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Permissions List */}
|
||||||
|
<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 (
|
||||||
|
<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>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
{index < permissions.length - 1 && <Divider sx={{ my: 0.5 }} />}
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</List>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* 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 */}
|
||||||
|
<Box sx={{ p: 3, borderTop: '1px solid #dadce0', display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
|
||||||
|
<Button
|
||||||
|
onClick={handleCancel}
|
||||||
|
variant="text"
|
||||||
|
sx={{
|
||||||
|
color: '#5f6368',
|
||||||
|
textTransform: 'none',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 500
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleAccept}
|
||||||
|
variant="contained"
|
||||||
|
disabled={isLoading || selectedPermissions.size === 0}
|
||||||
|
sx={{
|
||||||
|
backgroundColor: '#1a73e8',
|
||||||
|
textTransform: 'none',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 500,
|
||||||
|
px: 3,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: '#1666c9'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isLoading ? '처리 중...' : '허용'}
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* 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 */}
|
||||||
|
<Box sx={{ mt: 3, textAlign: 'center' }}>
|
||||||
|
<Typography sx={{ fontSize: '12px', color: '#5f6368' }}>
|
||||||
|
계속 진행하면 AiMond의{' '}
|
||||||
|
<Link href="#" sx={{ color: '#1a73e8' }}>서비스 약관</Link> 및{' '}
|
||||||
|
<Link href="#" sx={{ color: '#1a73e8' }}>개인정보처리방침</Link>에 동의하는 것입니다.
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuthorizePage
|
||||||
296
oauth/frontend/src/pages/Dashboard.tsx
Normal file
296
oauth/frontend/src/pages/Dashboard.tsx
Normal file
@ -0,0 +1,296 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import { useAuth } from '../contexts/AuthContext'
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Container,
|
||||||
|
Grid,
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
Typography,
|
||||||
|
Button,
|
||||||
|
AppBar,
|
||||||
|
Toolbar,
|
||||||
|
IconButton,
|
||||||
|
Avatar,
|
||||||
|
Menu,
|
||||||
|
MenuItem,
|
||||||
|
Drawer,
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListItemIcon,
|
||||||
|
ListItemText,
|
||||||
|
ListItemButton,
|
||||||
|
Divider,
|
||||||
|
Paper,
|
||||||
|
LinearProgress,
|
||||||
|
Chip,
|
||||||
|
InputBase,
|
||||||
|
Badge
|
||||||
|
} from '@mui/material'
|
||||||
|
import {
|
||||||
|
Dashboard as DashboardIcon,
|
||||||
|
Apps,
|
||||||
|
Person,
|
||||||
|
AdminPanelSettings,
|
||||||
|
Menu as MenuIcon,
|
||||||
|
Logout,
|
||||||
|
Settings,
|
||||||
|
TrendingUp,
|
||||||
|
Security,
|
||||||
|
Speed,
|
||||||
|
AccessTime,
|
||||||
|
Notifications,
|
||||||
|
Search,
|
||||||
|
VpnKey,
|
||||||
|
Timeline
|
||||||
|
} from '@mui/icons-material'
|
||||||
|
|
||||||
|
const Dashboard = () => {
|
||||||
|
const [drawerOpen, setDrawerOpen] = useState(false)
|
||||||
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
||||||
|
const { user, logout } = useAuth()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const handleLogout = async () => {
|
||||||
|
await logout()
|
||||||
|
navigate('/login')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleProfileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
|
||||||
|
setAnchorEl(event.currentTarget)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleProfileMenuClose = () => {
|
||||||
|
setAnchorEl(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const menuItems = [
|
||||||
|
{ text: '대시보드', icon: <DashboardIcon />, path: '/dashboard' },
|
||||||
|
{ text: '애플리케이션', icon: <VpnKey />, path: '/applications' },
|
||||||
|
{ text: '프로필 설정', icon: <Settings />, path: '/profile' },
|
||||||
|
{ text: '관리자 패널', icon: <AdminPanelSettings />, path: '/admin', adminOnly: true },
|
||||||
|
]
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ title: '활성 세션', value: '24', icon: <Person />, change: '+12%', color: '#1a73e8' },
|
||||||
|
{ title: '등록된 앱', value: '8', icon: <VpnKey />, change: '+2', color: '#34a853' },
|
||||||
|
{ title: '이번 달 로그인', value: '1,429', icon: <Timeline />, change: '+48%', color: '#fbbc04' },
|
||||||
|
{ title: '평균 응답시간', value: '132ms', icon: <AccessTime />, change: '-12%', color: '#ea4335' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const recentActivities = [
|
||||||
|
{ id: 1, action: '새로운 애플리케이션 등록', app: 'E-Commerce Platform', time: '5분 전' },
|
||||||
|
{ id: 2, action: '권한 업데이트', app: 'Mobile App', time: '2시간 전' },
|
||||||
|
{ id: 3, action: '토큰 갱신', app: 'Analytics Dashboard', time: '4시간 전' },
|
||||||
|
{ id: 4, action: '새로운 사용자 추가', app: 'CRM System', time: '1일 전' },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ display: 'flex', minHeight: '100vh', backgroundColor: '#f8f9fa' }}>
|
||||||
|
{/* AppBar */}
|
||||||
|
<AppBar position="fixed" elevation={0} sx={{ backgroundColor: '#fff', borderBottom: '1px solid #dadce0' }}>
|
||||||
|
<Toolbar>
|
||||||
|
<IconButton
|
||||||
|
edge="start"
|
||||||
|
color="inherit"
|
||||||
|
aria-label="menu"
|
||||||
|
onClick={() => setDrawerOpen(true)}
|
||||||
|
sx={{ mr: 2, color: '#5f6368' }}
|
||||||
|
>
|
||||||
|
<MenuIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Typography variant="h6" sx={{ flexGrow: 0, color: '#202124', fontWeight: 500, mr: 4 }}>
|
||||||
|
OAuth System
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{/* Search Bar */}
|
||||||
|
<Box sx={{
|
||||||
|
flexGrow: 1,
|
||||||
|
maxWidth: 600,
|
||||||
|
backgroundColor: '#f1f3f4',
|
||||||
|
borderRadius: 2,
|
||||||
|
px: 2,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center'
|
||||||
|
}}>
|
||||||
|
<Search sx={{ color: '#5f6368', mr: 1 }} />
|
||||||
|
<InputBase
|
||||||
|
placeholder="검색..."
|
||||||
|
sx={{ flex: 1, py: 1 }}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ flexGrow: 1 }} />
|
||||||
|
|
||||||
|
<IconButton sx={{ mr: 2 }}>
|
||||||
|
<Badge badgeContent={3} color="error">
|
||||||
|
<Notifications sx={{ color: '#5f6368' }} />
|
||||||
|
</Badge>
|
||||||
|
</IconButton>
|
||||||
|
|
||||||
|
<IconButton onClick={handleProfileMenuOpen}>
|
||||||
|
<Avatar sx={{ width: 32, height: 32, bgcolor: '#1a73e8' }}>
|
||||||
|
{user?.name?.[0] || user?.email?.[0]?.toUpperCase() || 'U'}
|
||||||
|
</Avatar>
|
||||||
|
</IconButton>
|
||||||
|
<Menu
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
open={Boolean(anchorEl)}
|
||||||
|
onClose={handleProfileMenuClose}
|
||||||
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
||||||
|
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
||||||
|
>
|
||||||
|
<MenuItem onClick={() => { handleProfileMenuClose(); navigate('/profile'); }}>
|
||||||
|
<ListItemIcon><Person fontSize="small" /></ListItemIcon>
|
||||||
|
프로필 설정
|
||||||
|
</MenuItem>
|
||||||
|
<Divider />
|
||||||
|
<MenuItem onClick={handleLogout}>
|
||||||
|
<ListItemIcon><Logout fontSize="small" /></ListItemIcon>
|
||||||
|
로그아웃
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
</Toolbar>
|
||||||
|
</AppBar>
|
||||||
|
|
||||||
|
{/* Drawer */}
|
||||||
|
<Drawer
|
||||||
|
anchor="left"
|
||||||
|
open={drawerOpen}
|
||||||
|
onClose={() => setDrawerOpen(false)}
|
||||||
|
>
|
||||||
|
<Box sx={{ width: 250 }}>
|
||||||
|
<Box sx={{ p: 2, borderBottom: '1px solid #dadce0' }}>
|
||||||
|
<Typography variant="h6" sx={{ fontWeight: 500, color: '#202124' }}>
|
||||||
|
OAuth System
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<List>
|
||||||
|
{menuItems.map((item) => {
|
||||||
|
if (item.adminOnly && user?.role !== 'system_admin') return null
|
||||||
|
return (
|
||||||
|
<ListItemButton
|
||||||
|
key={item.text}
|
||||||
|
onClick={() => {
|
||||||
|
navigate(item.path)
|
||||||
|
setDrawerOpen(false)
|
||||||
|
}}
|
||||||
|
selected={location.pathname === item.path}
|
||||||
|
sx={{
|
||||||
|
'&.Mui-selected': {
|
||||||
|
backgroundColor: '#e8f0fe',
|
||||||
|
color: '#1967d2',
|
||||||
|
'& .MuiListItemIcon-root': {
|
||||||
|
color: '#1967d2',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ListItemIcon sx={{ color: '#5f6368' }}>{item.icon}</ListItemIcon>
|
||||||
|
<ListItemText primary={item.text} sx={{ color: 'inherit' }} />
|
||||||
|
</ListItemButton>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</List>
|
||||||
|
<Divider />
|
||||||
|
<List>
|
||||||
|
<ListItemButton onClick={handleLogout}>
|
||||||
|
<ListItemIcon sx={{ color: '#ea4335' }}><Logout /></ListItemIcon>
|
||||||
|
<ListItemText primary="로그아웃" sx={{ color: '#ea4335' }} />
|
||||||
|
</ListItemButton>
|
||||||
|
</List>
|
||||||
|
</Box>
|
||||||
|
</Drawer>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<Box component="main" sx={{ flexGrow: 1, mt: 8, p: 3 }}>
|
||||||
|
<Container maxWidth="xl">
|
||||||
|
{/* Page Header */}
|
||||||
|
<Box sx={{ mb: 4 }}>
|
||||||
|
<Typography variant="h4" sx={{ mb: 1, fontWeight: 400, color: '#202124' }}>
|
||||||
|
대시보드
|
||||||
|
</Typography>
|
||||||
|
<Typography sx={{ color: '#5f6368' }}>
|
||||||
|
OAuth 시스템 현황을 한눈에 확인하세요
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Stats Grid */}
|
||||||
|
<Grid container spacing={3} sx={{ mb: 4 }}>
|
||||||
|
{stats.map((stat) => (
|
||||||
|
<Grid item xs={12} sm={6} md={3} key={stat.title}>
|
||||||
|
<Card elevation={0} sx={{ border: '1px solid #dadce0' }}>
|
||||||
|
<CardContent>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||||
|
<Box sx={{
|
||||||
|
p: 1,
|
||||||
|
borderRadius: 1,
|
||||||
|
backgroundColor: `${stat.color}20`,
|
||||||
|
color: stat.color
|
||||||
|
}}>
|
||||||
|
{stat.icon}
|
||||||
|
</Box>
|
||||||
|
<Chip
|
||||||
|
label={stat.change}
|
||||||
|
size="small"
|
||||||
|
sx={{
|
||||||
|
backgroundColor: stat.change.startsWith('+') ? '#e6f4ea' : '#fce8e6',
|
||||||
|
color: stat.change.startsWith('+') ? '#1e8e3e' : '#d33b27',
|
||||||
|
fontWeight: 500
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Typography variant="h4" sx={{ fontWeight: 500, color: '#202124', mb: 0.5 }}>
|
||||||
|
{stat.value}
|
||||||
|
</Typography>
|
||||||
|
<Typography sx={{ color: '#5f6368', fontSize: '14px' }}>
|
||||||
|
{stat.title}
|
||||||
|
</Typography>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Recent Activity */}
|
||||||
|
<Paper elevation={0} sx={{ border: '1px solid #dadce0', borderRadius: 2 }}>
|
||||||
|
<Box sx={{ p: 3, borderBottom: '1px solid #dadce0' }}>
|
||||||
|
<Typography variant="h6" sx={{ fontWeight: 500, color: '#202124' }}>
|
||||||
|
최근 활동
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<List>
|
||||||
|
{recentActivities.map((activity, index) => (
|
||||||
|
<React.Fragment key={activity.id}>
|
||||||
|
<ListItem sx={{ py: 2.5 }}>
|
||||||
|
<ListItemText
|
||||||
|
primary={
|
||||||
|
<Typography sx={{ fontWeight: 500, color: '#202124' }}>
|
||||||
|
{activity.action}
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
secondary={
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
|
||||||
|
<Typography variant="body2" sx={{ color: '#5f6368' }}>
|
||||||
|
{activity.app}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="caption" sx={{ color: '#5f6368' }}>
|
||||||
|
• {activity.time}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
{index < recentActivities.length - 1 && <Divider />}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
</Paper>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Dashboard
|
||||||
307
oauth/frontend/src/pages/LoginPage.tsx
Normal file
307
oauth/frontend/src/pages/LoginPage.tsx
Normal file
@ -0,0 +1,307 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import { useAuth } from '../contexts/AuthContext'
|
||||||
|
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('')
|
||||||
|
const [password, setPassword] = useState('')
|
||||||
|
const [showPassword, setShowPassword] = useState(false)
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [rememberMe, setRememberMe] = useState(false)
|
||||||
|
const [language, setLanguage] = useState('ko')
|
||||||
|
|
||||||
|
const { login, user } = useAuth()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (user) {
|
||||||
|
navigate('/dashboard')
|
||||||
|
}
|
||||||
|
}, [user, navigate])
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setIsLoading(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
await login(email, password)
|
||||||
|
if (rememberMe) {
|
||||||
|
localStorage.setItem('last_user_email', email)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Login error:', error)
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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 */}
|
||||||
|
<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 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"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="#"
|
||||||
|
underline="none"
|
||||||
|
sx={{
|
||||||
|
color: '#1a73e8',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 500,
|
||||||
|
display: 'block',
|
||||||
|
mb: 3
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
비밀번호를 잊으셨나요?
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{/* 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 */}
|
||||||
|
<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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LoginPage
|
||||||
10
oauth/frontend/src/pages/Profile.tsx
Normal file
10
oauth/frontend/src/pages/Profile.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
const Profile = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 p-6">
|
||||||
|
<h1 className="text-2xl font-bold">프로필 설정</h1>
|
||||||
|
<p className="text-gray-600">사용자 프로필을 관리합니다.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Profile
|
||||||
415
oauth/frontend/src/pages/SignupPage.tsx
Normal file
415
oauth/frontend/src/pages/SignupPage.tsx
Normal file
@ -0,0 +1,415 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Container,
|
||||||
|
TextField,
|
||||||
|
Button,
|
||||||
|
Typography,
|
||||||
|
Link,
|
||||||
|
Paper,
|
||||||
|
IconButton,
|
||||||
|
InputAdornment,
|
||||||
|
Checkbox,
|
||||||
|
FormControlLabel,
|
||||||
|
LinearProgress,
|
||||||
|
Alert,
|
||||||
|
Stack
|
||||||
|
} from '@mui/material'
|
||||||
|
import {
|
||||||
|
Visibility,
|
||||||
|
VisibilityOff,
|
||||||
|
Person,
|
||||||
|
Email,
|
||||||
|
Lock,
|
||||||
|
Business,
|
||||||
|
ArrowForward
|
||||||
|
} from '@mui/icons-material'
|
||||||
|
|
||||||
|
const SignupPage = () => {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
password: '',
|
||||||
|
confirmPassword: '',
|
||||||
|
organization: '',
|
||||||
|
agreeTerms: false
|
||||||
|
})
|
||||||
|
const [showPassword, setShowPassword] = useState(false)
|
||||||
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false)
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [passwordStrength, setPasswordStrength] = useState(0)
|
||||||
|
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const checkPasswordStrength = (password: string) => {
|
||||||
|
let strength = 0
|
||||||
|
if (password.length >= 8) strength++
|
||||||
|
if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength++
|
||||||
|
if (password.match(/[0-9]/)) strength++
|
||||||
|
if (password.match(/[^a-zA-Z0-9]/)) strength++
|
||||||
|
setPasswordStrength(strength)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const { name, value, type, checked } = e.target
|
||||||
|
const newValue = type === 'checkbox' ? checked : value
|
||||||
|
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: newValue
|
||||||
|
}))
|
||||||
|
|
||||||
|
if (name === 'password') {
|
||||||
|
checkPasswordStrength(value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
|
||||||
|
if (formData.password !== formData.confirmPassword) {
|
||||||
|
alert('비밀번호가 일치하지 않습니다.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/v1/auth/register', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
name: formData.name,
|
||||||
|
email: formData.email,
|
||||||
|
password: formData.password,
|
||||||
|
organization: formData.organization
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
navigate('/login')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Signup error:', error)
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getPasswordStrengthColor = () => {
|
||||||
|
switch(passwordStrength) {
|
||||||
|
case 0: return '#bdbdbd'
|
||||||
|
case 1: return '#f44336'
|
||||||
|
case 2: return '#ff9800'
|
||||||
|
case 3: return '#2196f3'
|
||||||
|
case 4: return '#4caf50'
|
||||||
|
default: return '#bdbdbd'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getPasswordStrengthText = () => {
|
||||||
|
switch(passwordStrength) {
|
||||||
|
case 0: return ''
|
||||||
|
case 1: return '약함'
|
||||||
|
case 2: return '보통'
|
||||||
|
case 3: return '강함'
|
||||||
|
case 4: return '매우 강함'
|
||||||
|
default: return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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 */}
|
||||||
|
<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 계정 만들기
|
||||||
|
</Typography>
|
||||||
|
<Typography sx={{ color: '#5f6368', fontSize: '16px' }}>
|
||||||
|
계속하려면 AiMond로 이동
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Signup Form */}
|
||||||
|
<Paper
|
||||||
|
elevation={0}
|
||||||
|
sx={{
|
||||||
|
border: '1px solid #dadce0',
|
||||||
|
borderRadius: '8px',
|
||||||
|
p: 5,
|
||||||
|
maxWidth: 450,
|
||||||
|
width: '100%',
|
||||||
|
mx: 'auto'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<Stack spacing={2}>
|
||||||
|
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||||
|
<TextField
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="이름"
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
size="medium"
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<Person sx={{ color: '#5f6368' }} />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="이메일 주소"
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
size="medium"
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<Email sx={{ color: '#5f6368' }} />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
name="organization"
|
||||||
|
value={formData.organization}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="조직/회사 (선택)"
|
||||||
|
fullWidth
|
||||||
|
size="medium"
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<Business sx={{ color: '#5f6368' }} />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
name="password"
|
||||||
|
type={showPassword ? 'text' : 'password'}
|
||||||
|
value={formData.password}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="비밀번호"
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
size="medium"
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<Lock sx={{ color: '#5f6368' }} />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
endAdornment: (
|
||||||
|
<InputAdornment position="end">
|
||||||
|
<IconButton
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
|
edge="end"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
{showPassword ? <VisibilityOff /> : <Visibility />}
|
||||||
|
</IconButton>
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{formData.password && (
|
||||||
|
<Box>
|
||||||
|
<LinearProgress
|
||||||
|
variant="determinate"
|
||||||
|
value={passwordStrength * 25}
|
||||||
|
sx={{
|
||||||
|
height: 6,
|
||||||
|
borderRadius: 3,
|
||||||
|
backgroundColor: '#e0e0e0',
|
||||||
|
'& .MuiLinearProgress-bar': {
|
||||||
|
backgroundColor: getPasswordStrengthColor(),
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Typography variant="caption" sx={{ color: '#5f6368', mt: 0.5 }}>
|
||||||
|
비밀번호 강도: {getPasswordStrengthText()}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
name="confirmPassword"
|
||||||
|
type={showConfirmPassword ? 'text' : 'password'}
|
||||||
|
value={formData.confirmPassword}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="비밀번호 확인"
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
size="medium"
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<Lock sx={{ color: '#5f6368' }} />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
endAdornment: (
|
||||||
|
<InputAdornment position="end">
|
||||||
|
<IconButton
|
||||||
|
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||||
|
edge="end"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
{showConfirmPassword ? <VisibilityOff /> : <Visibility />}
|
||||||
|
</IconButton>
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Typography variant="caption" sx={{ color: '#5f6368', lineHeight: 1.5 }}>
|
||||||
|
문자, 숫자, 기호를 조합하여 8자 이상의 비밀번호를 사용하세요
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
name="agreeTerms"
|
||||||
|
checked={formData.agreeTerms}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
size="small"
|
||||||
|
sx={{ color: '#5f6368' }}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label={
|
||||||
|
<Typography sx={{ fontSize: '14px', color: '#5f6368' }}>
|
||||||
|
<Link href="#" sx={{ color: '#1a73e8' }}>서비스 약관</Link> 및{' '}
|
||||||
|
<Link href="#" sx={{ color: '#1a73e8' }}>개인정보처리방침</Link>에 동의합니다
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 3 }}>
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
underline="none"
|
||||||
|
sx={{
|
||||||
|
color: '#1a73e8',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 500
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
대신 로그인
|
||||||
|
</Link>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="contained"
|
||||||
|
disabled={isLoading || !formData.agreeTerms}
|
||||||
|
endIcon={<ArrowForward />}
|
||||||
|
sx={{
|
||||||
|
backgroundColor: '#1a73e8',
|
||||||
|
color: 'white',
|
||||||
|
textTransform: 'none',
|
||||||
|
px: 3,
|
||||||
|
py: 1,
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 500,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: '#1666c9',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isLoading ? '계정 생성 중...' : '다음'}
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Stack>
|
||||||
|
</form>
|
||||||
|
</Paper>
|
||||||
|
|
||||||
|
{/* Footer Text */}
|
||||||
|
<Box sx={{ mt: 4, textAlign: 'center' }}>
|
||||||
|
<Typography sx={{ fontSize: '12px', color: '#5f6368' }}>
|
||||||
|
하나의 AiMond 계정으로 모든 AiMond 서비스를 이용하실 수 있습니다
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SignupPage
|
||||||
@ -4,4 +4,14 @@ import react from '@vitejs/plugin-react'
|
|||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [react()],
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
host: true,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://backend:8000',
|
||||||
|
changeOrigin: true,
|
||||||
|
secure: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
BIN
ref/image19.png
Normal file
BIN
ref/image19.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
ref/image20.png
Normal file
BIN
ref/image20.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Reference in New Issue
Block a user