57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
import { useState } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { Alert, Button, Center, Paper, PasswordInput, Stack, Text, TextInput, Title } from '@mantine/core';
|
|
import { login } from '../store/authSlice';
|
|
|
|
export default function LoginForm() {
|
|
const dispatch = useDispatch();
|
|
const { loading, error } = useSelector((state) => state.auth);
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
|
|
function handleSubmit(event) {
|
|
event.preventDefault();
|
|
dispatch(login({ username, password }));
|
|
}
|
|
|
|
return (
|
|
<Center mih="100vh" p="md">
|
|
<Paper shadow="md" radius="lg" p="xl" w={380} maw="100%">
|
|
<form onSubmit={handleSubmit}>
|
|
<Stack gap="md">
|
|
<div>
|
|
<Title order={2}>Listing - Suggest Price</Title>
|
|
<Text c="dimmed" size="sm">
|
|
Đăng nhập bằng tài khoản ERP
|
|
</Text>
|
|
</div>
|
|
|
|
{error && (
|
|
<Alert color="red" variant="light">
|
|
{error}
|
|
</Alert>
|
|
)}
|
|
|
|
<TextInput
|
|
label="Email"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
placeholder="you@company.com"
|
|
required
|
|
/>
|
|
<PasswordInput
|
|
label="Mật khẩu"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
/>
|
|
<Button type="submit" fullWidth loading={loading} disabled={!username.trim()}>
|
|
Đăng nhập
|
|
</Button>
|
|
</Stack>
|
|
</form>
|
|
</Paper>
|
|
</Center>
|
|
);
|
|
}
|