46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import React, { useState } from "react";
|
|
import styles from './Login.module.css'
|
|
|
|
|
|
const Login = () => {
|
|
const [user, setUser] = useState<string>("");
|
|
const [password, setPassword] = useState<string>("");
|
|
|
|
function handleUserChange(e: React.ChangeEvent<HTMLInputElement>): void {
|
|
setUser(e.target.value);
|
|
}
|
|
|
|
function handlePasswordChange(e: React.ChangeEvent<HTMLInputElement>): void {
|
|
setPassword(e.target.value);
|
|
}
|
|
|
|
function handleSubmit(e: React.FormEvent<HTMLFormElement>): void {
|
|
e.preventDefault();
|
|
alert([user, password]);
|
|
setUser("");
|
|
setPassword("");
|
|
}
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.formWrapper}>
|
|
<form onSubmit={handleSubmit}>
|
|
<h1>Inicia sesión.</h1>
|
|
<img src="https://picsum.photos/300/200?random=1" alt="Imagen"/>
|
|
|
|
<label>Usuario:</label>
|
|
<input type="text" value={user} onChange={handleUserChange}/>
|
|
|
|
<label>Contraseña</label>
|
|
<input type="password" value={password} onChange={handlePasswordChange}/>
|
|
|
|
<input type="submit" value="Iniciar sesión"/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
|
|
export default Login;
|