[CLAUDE] Phase1: foundation - BE Clean Arch + Identity + JWT + 2 FE React + login E2E
Backend (.NET 10): - Domain: BaseEntity/AuditableEntity, ContractType/Phase/ApprovalDecision enums, User/Role (Identity<Guid>), AppRoles (12 const) - Application: IApplicationDbContext/ICurrentUser/IDateTime/IJwtTokenService, custom exceptions, ValidationBehavior (MediatR pipeline), Auth CQRS (Login/Refresh/Me), DependencyInjection - Infrastructure: ApplicationDbContext (IdentityDbContext), AuditingInterceptor (auto audit + soft delete), DbInitializer (seed 12 role + admin), DesignTimeDbContextFactory, JwtTokenService, DateTimeService, DI - Api: CurrentUserService, GlobalExceptionMiddleware (ProblemDetails), AuthController, Program.cs rewrite (Serilog + JWT + CORS + Swagger), appsettings + launchSettings (port 5443) - Migration Init applied to SolutionErp_Dev LocalDB Frontend (React 19 + Vite 8 + Tailwind 4): - fe-admin (:8082 blue) + fe-user (:8080 emerald) - shared structure, khac menu + brand color - Tailwind 4 via @tailwindcss/vite plugin, theme brand colors - AuthContext (localStorage token), ProtectedRoute, Layout (sidebar + header) - UI kit: Button/Input/Label (CVA + Tailwind) - LoginPage voi toast error, DashboardPage/InboxPage placeholder - Axios interceptor: auto Bearer + 401 redirect - TanStack Query client, React Router 7, Sonner toast Package downgrades (do .NET 10 / TS 6 compat): - MediatR 14 -> 12.4.1 (v14 breaking changes) - Swashbuckle 10 -> 6.9.0 (v10 khong tuong thich OpenApi 2) - Removed Microsoft.AspNetCore.OpenApi (conflict voi Swashbuckle) E2E verified: POST /api/auth/login qua Vite proxy ca 2 FE -> JWT + user info Credentials seed: admin@solutionerp.local / Admin@123456 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
28
fe-admin/src/pages/DashboardPage.tsx
Normal file
28
fe-admin/src/pages/DashboardPage.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { useAuth } from '@/contexts/AuthContext'
|
||||
|
||||
export function DashboardPage() {
|
||||
const { user } = useAuth()
|
||||
|
||||
return (
|
||||
<div className="p-8">
|
||||
<h1 className="text-2xl font-bold text-slate-900">Tổng quan</h1>
|
||||
<p className="mt-2 text-slate-600">
|
||||
Xin chào <span className="font-medium">{user?.fullName}</span>. Vai trò:{' '}
|
||||
<span className="font-mono text-sm">{user?.roles.join(', ')}</span>
|
||||
</p>
|
||||
<div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
{[
|
||||
{ label: 'HĐ đang xử lý', value: '—', hint: 'Sẽ hiển thị sau Phase 3' },
|
||||
{ label: 'HĐ chờ tôi duyệt', value: '—', hint: 'Sẽ hiển thị sau Phase 3' },
|
||||
{ label: 'Tổng NCC', value: '—', hint: 'Sẽ hiển thị sau Phase 1 đợt 2' },
|
||||
].map(card => (
|
||||
<div key={card.label} className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="text-xs font-medium text-slate-500">{card.label}</div>
|
||||
<div className="mt-2 text-3xl font-bold text-slate-900">{card.value}</div>
|
||||
<div className="mt-1 text-xs text-slate-400">{card.hint}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
73
fe-admin/src/pages/LoginPage.tsx
Normal file
73
fe-admin/src/pages/LoginPage.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import { useState, type FormEvent } from 'react'
|
||||
import { useNavigate, useLocation } from 'react-router-dom'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { Label } from '@/components/ui/Label'
|
||||
import { useAuth } from '@/contexts/AuthContext'
|
||||
import axios from 'axios'
|
||||
|
||||
export function LoginPage() {
|
||||
const { login } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
const [email, setEmail] = useState('admin@solutionerp.local')
|
||||
const [password, setPassword] = useState('Admin@123456')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
async function handleSubmit(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
await login({ email, password })
|
||||
const redirectTo = (location.state as { from?: { pathname: string } } | null)?.from?.pathname ?? '/dashboard'
|
||||
navigate(redirectTo, { replace: true })
|
||||
toast.success('Đăng nhập thành công')
|
||||
} catch (err) {
|
||||
const msg = axios.isAxiosError(err)
|
||||
? err.response?.data?.detail ?? err.response?.data?.title ?? err.message
|
||||
: 'Lỗi kết nối máy chủ'
|
||||
toast.error(`Đăng nhập thất bại: ${msg}`)
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-slate-100 px-4">
|
||||
<div className="w-full max-w-md rounded-lg border border-slate-200 bg-white p-8 shadow-sm">
|
||||
<div className="mb-6 text-center">
|
||||
<h1 className="text-2xl font-bold text-brand-700">SOLUTION ERP</h1>
|
||||
<p className="mt-1 text-sm text-slate-500">Trang quản trị</p>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
autoComplete="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="password">Mật khẩu</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Đang đăng nhập…' : 'Đăng nhập'}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user