Browse Source

feat: cria um modal para login de usuário

master
Henrique-Sousa 2 weeks ago
parent
commit
f936bf4639
2 changed files with 103 additions and 0 deletions
  1. +90
    -0
      ui/src/components/LoginModal.jsx
  2. +13
    -0
      ui/src/containers/DashboardContainer/index.jsx

+ 90
- 0
ui/src/components/LoginModal.jsx View File

@ -0,0 +1,90 @@
import { Modal, Button, Checkbox, Form, Input } from 'antd';
import _service from '@netuno/service-client';
function LoginModal({isLoginModalOpen, setIsLoginModalOpen}) {
const handleLoginOk = () => {
setIsLoginModalOpen(false);
};
const handleLoginCancel = () => {
setIsLoginModalOpen(false);
};
const onFinish = values => {
console.log('Success:', values);
_service({
url: "/services/_auth",
method: "POST",
data: {...values, jwt: true },
success: (response) => {
if (response.json) {
console.log("Service Response", response.json);
}
},
fail: (e) => {
console.log("Service Error", e);
}
});
};
const onFinishFailed = errorInfo => {
console.log('Failed:', errorInfo);
};
return (
<>
<Modal
title="Fazer login"
closable={{ 'aria-label': 'Custom Close Button' }}
open={isLoginModalOpen}
onOk={handleLoginOk}
onCancel={handleLoginCancel}
okButtonProps={{ style: { display: 'none' } }}
>
<Form
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ maxWidth: 600 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item name="remember" valuePropName="checked" label={null}>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item label={null}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</Modal>
</>
);
}
export default LoginModal;

+ 13
- 0
ui/src/containers/DashboardContainer/index.jsx View File

@ -5,6 +5,7 @@ import { Button } from 'antd';
import ListaMedicosModal from "../../components/ListaMedicosModal.jsx";
import ListaPacientesModal from "../../components/ListaPacientesModal.jsx";
import CadastrarMedicosModal from "../../components/CadastrarMedicosModal.jsx";
import LoginModal from "../../components/LoginModal.jsx";
import "./index.less";
@ -12,6 +13,7 @@ function DashboardContainer() {
const [isPacientesModalOpen, setIsPacientesModalOpen] = useState(false);
const [isMedicosModalOpen, setIsMedicosModalOpen] = useState(false);
const [isCadastrarMedicosModalOpen, setIsCadastrarMedicosModalOpen] = useState(false);
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
const showPacientesModal = () => {
setIsPacientesModalOpen(true);
@ -25,6 +27,10 @@ function DashboardContainer() {
setIsCadastrarMedicosModalOpen(true);
};
const showLoginModal = () => {
setIsLoginModalOpen(true);
};
return (
<>
<Button type="primary" onClick={showPacientesModal}>
@ -36,6 +42,9 @@ function DashboardContainer() {
<Button type="primary" onClick={showCadastrarMedicosModal}>
Cadastrar médicos
</Button>
<Button type="primary" onClick={showLoginModal}>
Login
</Button>
<ListaPacientesModal
isPacientesModalOpen={isPacientesModalOpen}
@ -49,6 +58,10 @@ function DashboardContainer() {
isCadastrarMedicosModalOpen={isCadastrarMedicosModalOpen}
setIsCadastrarMedicosModalOpen={setIsCadastrarMedicosModalOpen}
/>
<LoginModal
isLoginModalOpen={isLoginModalOpen}
setIsLoginModalOpen={setIsLoginModalOpen}
/>
</>
);
}


Loading…
Cancel
Save