Day 7 完了
実装内容: 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
@@ -1,12 +1,17 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Inter, Noto_Sans_JP } from "next/font/google";
|
||||
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 = {
|
||||
title: "KeinaSystem",
|
||||
description: "KeinaSystem Frontend",
|
||||
description: "KeinaSystem - 農業管理システム",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -15,8 +20,8 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}</body>
|
||||
<html lang="ja">
|
||||
<body className={`${inter.variable} ${notoSansJP.variable} font-sans`}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
112
frontend/src/app/login/page.tsx
Normal file
112
frontend/src/app/login/page.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user