131 lines
4.6 KiB
JavaScript
131 lines
4.6 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
|
|
function Login() {
|
|
const navigate = useNavigate();
|
|
const [form, setForm] = useState({
|
|
username: "",
|
|
password: ""
|
|
});
|
|
const [alert, setAlert] = useState("");
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
const handleChange = (e) => {
|
|
setForm({ ...form, [e.target.name]: e.target.value });
|
|
};
|
|
|
|
const handleLogin = (e) => {
|
|
e.preventDefault();
|
|
if (form.username && form.password) {
|
|
// ...login logic...
|
|
navigate('/secretaria/inicio');
|
|
} else {
|
|
setAlert("Preencha todos os campos!");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="mt-3 card-position">
|
|
<div className="col-lg-5 col-12">
|
|
<div className="card shadow-sm d-flex justify-content-between align-items-center">
|
|
<div id="auth-left">
|
|
<div className="auth-logo">
|
|
<br />
|
|
<Link to="/">
|
|
<h1 className="mb-4 text-center">MediConnect</h1>
|
|
</Link>
|
|
</div>
|
|
<h3 className="auth-title">Entrar</h3>
|
|
<p className="auth-subtitle mb-5">
|
|
Entre com os dados que você inseriu durante o registro.
|
|
</p>
|
|
{alert && (
|
|
<div className="alert alert-info" role="alert">
|
|
{alert}
|
|
</div>
|
|
)}
|
|
<form>
|
|
<div className="form-group position-relative has-icon-left mb-4">
|
|
<input
|
|
type="text"
|
|
name="username"
|
|
className="form-control form-control-xl"
|
|
placeholder="Username"
|
|
value={form.username}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
<div className="form-control-icon">
|
|
<i className="bi bi-person" />
|
|
</div>
|
|
</div>
|
|
<div className="form-group position-relative has-icon-left mb-4">
|
|
<input
|
|
type={showPassword ? "text" : "password"}
|
|
name="password"
|
|
className="form-control form-control-xl"
|
|
placeholder="Password"
|
|
value={form.password}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
<div className="form-control-icon">
|
|
<i className="bi bi-shield-lock" />
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm"
|
|
style={{ position: "absolute", right: "10px", top: "10px", background: "none", border: "none" }}
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
tabIndex={-1}
|
|
>
|
|
<i className={`bi ${showPassword ? "bi-eye-slash" : "bi-eye"}`}></i>
|
|
</button>
|
|
</div>
|
|
<div className="form-check form-check-lg d-flex align-items-end">
|
|
<input
|
|
className="form-check-input me-2"
|
|
type="checkbox"
|
|
defaultValue=""
|
|
id="flexCheckDefault"
|
|
/>
|
|
<label
|
|
className="form-check-label text-gray-600"
|
|
htmlFor="flexCheckDefault"
|
|
>
|
|
Manter-me conectado
|
|
</label>
|
|
</div>
|
|
<button className="btn btn-primary btn-block btn-lg shadow-lg mt-5"
|
|
onClick={handleLogin}>
|
|
Entrar
|
|
</button>
|
|
</form>
|
|
<div className="text-center mt-5 text-lg fs-4">
|
|
<p className="text-gray-600">
|
|
Não tem uma conta?
|
|
<Link className="font-bold" to={'/register'}>
|
|
Cadastre-se
|
|
</Link>
|
|
.
|
|
</p>
|
|
<p>
|
|
<Link className="font-bold" to={'/forgotPassword'}>
|
|
Esqueceu a senha?
|
|
</Link>
|
|
.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-7 d-none d-lg-block">
|
|
<div id="auth-right"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Login; |