55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
import { useState } from 'react'
|
|
|
|
const LoginForm = ({ onSubmit, isLoading }) => {
|
|
const [formState, setFormState] = useState({
|
|
user_name: '',
|
|
password: ''
|
|
})
|
|
|
|
const handleChange = (event) => {
|
|
const { name, value } = event.target
|
|
setFormState((prev) => ({ ...prev, [name]: value }))
|
|
}
|
|
|
|
const handleSubmit = (event) => {
|
|
event.preventDefault()
|
|
onSubmit(formState)
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="d-flex flex-column gap-3">
|
|
<div>
|
|
<label htmlFor="user_name" className="form-label">Usuario</label>
|
|
<input
|
|
id="user_name"
|
|
name="user_name"
|
|
type="text"
|
|
className="form-control"
|
|
autoComplete="username"
|
|
value={formState.user_name}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="password" className="form-label">Contraseña</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
className="form-control"
|
|
autoComplete="current-password"
|
|
value={formState.password}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<button type="submit" className="btn btn-primary" disabled={isLoading}>
|
|
{isLoading ? 'Iniciando...' : 'Iniciar sesion'}
|
|
</button>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
export default LoginForm
|