Kalana B. Thilakarathna
0052725b88
- Created UserViewSheet component to display user details including username, full name, role, status, and timestamps. - Created RoleViewSheet component to display role details including name, level, status, creation date, and associated permissions. - Introduced permissions configuration in a new permissions.ts file, defining categories and permission codes for better management. - Implemented middleware for authentication, ensuring access control for protected routes.
83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, type FormEvent } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useAuth } from '@/contexts/auth-context'
|
|
import { getApiError } from '@/lib/api'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Label } from '@/components/ui/label'
|
|
|
|
export default function LoginPage() {
|
|
const { login, user, loading } = useAuth()
|
|
const router = useRouter()
|
|
const [identifier, setIdentifier] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [submitting, setSubmitting] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (!loading && user) {
|
|
router.replace('/')
|
|
}
|
|
}, [user, loading, router])
|
|
|
|
async function handleSubmit(e: FormEvent) {
|
|
e.preventDefault()
|
|
setError(null)
|
|
setSubmitting(true)
|
|
try {
|
|
await login(identifier, password)
|
|
} catch (err) {
|
|
setError(getApiError(err))
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-svh items-center justify-center bg-background">
|
|
<form onSubmit={handleSubmit} className="flex w-full max-w-sm flex-col gap-6 p-6">
|
|
<div className="flex flex-col gap-1 text-center">
|
|
<h1 className="text-2xl font-semibold text-foreground">Sign in</h1>
|
|
<p className="text-sm text-muted-foreground">Distribution ERP</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex flex-col gap-1.5">
|
|
<Label htmlFor="identifier">Email</Label>
|
|
<Input
|
|
id="identifier"
|
|
type="email"
|
|
autoComplete="email"
|
|
required
|
|
value={identifier}
|
|
onChange={(e) => setIdentifier(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
<Label htmlFor="password">Password</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
required
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<p className="text-sm text-destructive">{error}</p>
|
|
)}
|
|
|
|
<Button type="submit" disabled={submitting} className="w-full">
|
|
{submitting ? 'Signing in…' : 'Sign in'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|