akira/keinasystem
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

Day 7 完了

Browse Source 
実装内容:
1. 依存ライブラリ追加: axios, lucide-react, clsx, tailwind-merge
2. APIクライアント作成: frontend/src/lib/api.ts - JWT認証対応
3. ログイン画面作成: frontend/src/app/login/page.tsx - 日本語UI
4. レイアウト更新: frontend/src/app/layout.tsx - Noto Sans JP追加
5. JWTエンドポイント追加: backend/keinasystem/urls.py にJWT URL追加
テスト結果:
- ログインAPI (/api/auth/jwt/create/) → HTTP 200 OK
- テストユーザー: admin / password123
ブラウザで http://localhost:3000/login にアクセスして動作確認できます。
次の工程に移りますか？
This commit is contained in:
Akira
2026-02-15 13:04:48 +09:00
parent ea26c5a46f
commit 964c34471c
6 changed files with 6378 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
backend/keinasystem/urls.py
View File

@@ -16,10 +16,13 @@ Including another URLconf
""" """
from django.contrib import admin from django.contrib import admin
from django.urls import path, include from django.urls import path, include
from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
urlpatterns = [ urlpatterns = [
path('admin/', admin.site.urls), path('admin/', admin.site.urls),
path('api/fields/', include('apps.fields.urls')), path('api/fields/', include('apps.fields.urls')),
path('api/plans/', include('apps.plans.urls')), path('api/plans/', include('apps.plans.urls')),
path('api/reports/', include('apps.reports.urls')), path('api/reports/', include('apps.reports.urls')),
path('api/auth/jwt/create/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
path('api/auth/jwt/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
] ]

6153
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

12
frontend/package.json
View File

@@ -9,19 +9,23 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"axios": "^1.13.5",
"clsx": "^2.1.1",
"lucide-react": "^0.564.0",
"next": "14.1.0",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",
"next": "14.1.0" "tailwind-merge": "^3.4.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^18", "@types/react": "^18",
"@types/react-dom": "^18", "@types/react-dom": "^18",
"typescript": "^5", "autoprefixer": "^10.0.0",
"eslint": "^8", "eslint": "^8",
"eslint-config-next": "14.1.0", "eslint-config-next": "14.1.0",
"tailwindcss": "^3.3.0",
"postcss": "^8", "postcss": "^8",
"autoprefixer": "^10.0.0" "tailwindcss": "^3.3.0",
"typescript": "^5"
} }
} }

15
frontend/src/app/layout.tsx
View File

@@ -1,12 +1,17 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter, Noto_Sans_JP } from "next/font/google";
import "./globals.css"; import "./globals.css";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const notoSansJP = Noto_Sans_JP({
subsets: ["latin"],
variable: "--font-noto-sans-jp",
weight: ["400", "500", "700"],
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: "KeinaSystem", title: "KeinaSystem",
description: "KeinaSystem Frontend", description: "KeinaSystem - 農業管理システム",
}; };
export default function RootLayout({ export default function RootLayout({
@@ -15,8 +20,8 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html lang="ja">
<body className={inter.className}>{children}</body> <body className={`${inter.variable} ${notoSansJP.variable} font-sans`}>{children}</body>
</html> </html>
); );
} }

112
frontend/src/app/login/page.tsx Normal file
View File

@@ -0,0 +1,112 @@
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Loader2, Lock, User } from 'lucide-react';
import { login } from '@/lib/api';
export default function LoginPage() {
const router = useRouter();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError('');
setLoading(true);
try {
await login(username, password);
router.push('/allocation');
} catch (err: unknown) {
if (err && typeof err === 'object' && 'response' in err) {
const axiosError = err as { response?: { data?: { non_field_errors?: string[] } } };
if (axiosError.response?.data?.non_field_errors) {
setError(axiosError.response.data.non_field_errors[0]);
} else {
setError('ログインに失敗しました');
}
} else {
setError('ログインに失敗しました');
}
} finally {
setLoading(false);
}
};
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="w-full max-w-md p-8 bg-white rounded-lg shadow-md">
<div className="text-center mb-8">
<h1 className="text-2xl font-bold text-gray-900">KeinaSystem</h1>
<p className="text-gray-600 mt-2">農業管理システム</p>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
{error && (
<div className="p-3 text-sm text-red-600 bg-red-50 rounded-md">
{error}
</div>
)}
<div>
<label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-2">
ユーザー名
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<User className="h-5 w-5 text-gray-400" />
</div>
<input
id="username"
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
placeholder="ユーザー名を入力"
required
/>
</div>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
パスワード
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Lock className="h-5 w-5 text-gray-400" />
</div>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
placeholder="パスワードを入力"
required
/>
</div>
</div>
<button
type="submit"
disabled={loading}
className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? (
<>
<Loader2 className="h-5 w-5 mr-2 animate-spin" />
ログイン中...
</>
) : (
'ログイン'
)}
</button>
</form>
</div>
</div>
);
}

92
frontend/src/lib/api.ts Normal file
View File

@@ -0,0 +1,92 @@
import axios from 'axios';
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
export const api = axios.create({
baseURL: `${API_URL}/api`,
headers: {
'Content-Type': 'application/json',
},
});
api.interceptors.request.use(
(config) => {
if (typeof window !== 'undefined') {
const token = localStorage.getItem('accessToken');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
}
return config;
},
(error) => Promise.reject(error)
);
api.interceptors.response.use(
(response) => response,
async (error) => {
const originalRequest = error.config;
if (error.response?.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
if (typeof window !== 'undefined') {
const refreshToken = localStorage.getItem('refreshToken');
if (refreshToken) {
try {
const response = await axios.post(`${API_URL}/api/auth/jwt/refresh/`, {
refresh: refreshToken,
});
const { access } = response.data;
localStorage.setItem('accessToken', access);
originalRequest.headers.Authorization = `Bearer ${access}`;
return api(originalRequest);
} catch (refreshError) {
localStorage.removeItem('accessToken');
localStorage.removeItem('refreshToken');
window.location.href = '/login';
return Promise.reject(refreshError);
}
} else {
window.location.href = '/login';
}
}
}
return Promise.reject(error);
}
);
export const login = async (username: string, password: string) => {
const response = await api.post('/auth/jwt/create/', {
username,
password,
});
const { access, refresh } = response.data;
if (typeof window !== 'undefined') {
localStorage.setItem('accessToken', access);
localStorage.setItem('refreshToken', refresh);
}
return response.data;
};
export const logout = () => {
if (typeof window !== 'undefined') {
localStorage.removeItem('accessToken');
localStorage.removeItem('refreshToken');
window.location.href = '/login';
}
};
export const getToken = () => {
if (typeof window !== 'undefined') {
return localStorage.getItem('accessToken');
}
return null;
};