From 9cc954b14f033214eb3bc5741535fde54634bbf1 Mon Sep 17 00:00:00 2001
From: RenatoDiGiacomo <renato_di_giacomo@hotmail.com>
Date: Tue, 19 Jul 2022 17:18:36 -0300
Subject: [PATCH] Yet in login and base components
Logout button and modal created
perfil user in progress
---
.../controllers/WhatsAppSessionController.ts | 10 ++---
backend/src/libs/wbot.ts | 12 ++---
.../src/assets/icons/UserModal/perfil.svg | 3 ++
.../src/assets/icons/UserModal/signoff.svg | 4 ++
frontend/src/components/Base/BTN/Btn.jsx | 12 +++++
.../src/components/Base/BTN/Btn.styled.jsx | 24 ++++++++++
.../{ => ContainerLogin}/ContainerLogin.jsx | 0
.../ContainerLogin.style.jsx | 0
.../components/Base/Form/FormComponent.jsx | 10 +++++
.../Base/Form/FormComponent.style.jsx | 10 +++++
.../Base/Form/Input/InputComponent.jsx | 15 +++++++
.../Base/Form/Input/InputComponent.style.jsx | 28 ++++++++++++
.../Base/Form/Label/LabelComponent.jsx | 11 +++++
.../Base/Form/Label/LabelComponent.style.jsx | 14 ++++++
.../src/components/Base/MainContainer.jsx | 18 --------
.../Base/MainContainer/MainContainer.jsx | 22 +++++++++
.../MainContainer.style.jsx | 10 ++---
.../ConfirmationModal/ConfirmationModal.jsx | 39 ++++++++++++++++
.../ConfirmationModal.style.jsx | 45 +++++++++++++++++++
.../src/components/Menu/MenuComponent.jsx | 2 +-
.../src/components/PageTitle/PageTitle.jsx | 11 +++--
.../components/PageTitle/PageTitle.style.jsx | 42 +++++++++++++++--
.../components/PageTitle/UserBtn/UserBtn.jsx | 39 +++++++++++++---
.../components/PageTitle/UserBtn/UserItem.jsx | 14 ++++++
.../src/components/UserModal/UserModal.jsx | 43 ++++++++++++++++++
.../components/UserModal/UserModal.style.jsx | 34 ++++++++++++++
frontend/src/layout/index.js | 6 +--
frontend/src/pages/Login/index.js | 2 +-
frontend/src/style/varibles.jsx | 6 ++-
29 files changed, 431 insertions(+), 55 deletions(-)
create mode 100644 frontend/src/assets/icons/UserModal/perfil.svg
create mode 100644 frontend/src/assets/icons/UserModal/signoff.svg
create mode 100644 frontend/src/components/Base/BTN/Btn.jsx
create mode 100644 frontend/src/components/Base/BTN/Btn.styled.jsx
rename frontend/src/components/Base/{ => ContainerLogin}/ContainerLogin.jsx (100%)
rename frontend/src/components/Base/{ => ContainerLogin}/ContainerLogin.style.jsx (100%)
create mode 100644 frontend/src/components/Base/Form/FormComponent.jsx
create mode 100644 frontend/src/components/Base/Form/FormComponent.style.jsx
create mode 100644 frontend/src/components/Base/Form/Input/InputComponent.jsx
create mode 100644 frontend/src/components/Base/Form/Input/InputComponent.style.jsx
create mode 100644 frontend/src/components/Base/Form/Label/LabelComponent.jsx
create mode 100644 frontend/src/components/Base/Form/Label/LabelComponent.style.jsx
delete mode 100644 frontend/src/components/Base/MainContainer.jsx
create mode 100644 frontend/src/components/Base/MainContainer/MainContainer.jsx
rename frontend/src/components/Base/{ => MainContainer}/MainContainer.style.jsx (58%)
create mode 100644 frontend/src/components/ConfirmationModal/ConfirmationModal.jsx
create mode 100644 frontend/src/components/ConfirmationModal/ConfirmationModal.style.jsx
create mode 100644 frontend/src/components/PageTitle/UserBtn/UserItem.jsx
create mode 100644 frontend/src/components/UserModal/UserModal.jsx
create mode 100644 frontend/src/components/UserModal/UserModal.style.jsx
diff --git a/backend/src/controllers/WhatsAppSessionController.ts b/backend/src/controllers/WhatsAppSessionController.ts
index aa9d9b7..6e82a7c 100644
--- a/backend/src/controllers/WhatsAppSessionController.ts
+++ b/backend/src/controllers/WhatsAppSessionController.ts
@@ -7,7 +7,7 @@ import UpdateWhatsAppService from "../services/WhatsappService/UpdateWhatsAppSer
import { restartWhatsSession } from "../helpers/RestartWhatsSession";
-import path from 'path';
+import path from 'path';
// import { WWebJsw } from "../../WWebJS/session-bd_40"
@@ -37,7 +37,7 @@ const update = async (req: Request, res: Response): Promise<Response> => {
const restart = async (req: Request, res: Response): Promise<Response> => {
-
+
const { whatsappId } = req.params;
console.log('FROM REQUEST WHATSAPP ID: ', whatsappId)
@@ -58,9 +58,9 @@ const remove = async (req: Request, res: Response): Promise<Response> => {
const wbot = getWbot(whatsapp.id);
console.log(
- 'Desconectou s whatsapp.id: ', whatsapp.id,
- ' | PATH TO DELETE',path.join(process.cwd(),'.wwebjs_auth', `session-bd_${whatsapp.id}`)
- )
+ 'Desconectou s whatsapp.id: ', whatsapp.id,
+ ' | PATH TO DELETE', path.join(process.cwd(), '.wwebjs_auth', `session-bd_${whatsapp.id}`)
+ )
//removeDir(path.join(process.cwd(),'.wwebjs_auth', `session-bd_${whatsapp.id}`))
diff --git a/backend/src/libs/wbot.ts b/backend/src/libs/wbot.ts
index ffe26fc..13beb70 100644
--- a/backend/src/libs/wbot.ts
+++ b/backend/src/libs/wbot.ts
@@ -46,8 +46,6 @@ const syncUnreadMessages = async (wbot: Session) => {
export const initWbot = async (whatsapp: Whatsapp): Promise<Session> => {
return new Promise((resolve, reject) => {
try {
-
-
const io = getIO();
const sessionName = whatsapp.name;
let sessionCfg;
@@ -55,8 +53,6 @@ export const initWbot = async (whatsapp: Whatsapp): Promise<Session> => {
if (whatsapp && whatsapp.session) {
sessionCfg = JSON.parse(whatsapp.session);
}
-
-
//NOVA OPÇÃO MD
const wbot: Session = new Client({
session: sessionCfg, authStrategy: new LocalAuth({ clientId: 'bd_' + whatsapp.id }),
@@ -85,7 +81,7 @@ export const initWbot = async (whatsapp: Whatsapp): Promise<Session> => {
wbot.on("qr", async qr => {
-
+
if (!backupSession.includes(whatsapp.id)) {
backupSession.push(whatsapp.id)
}
@@ -163,16 +159,16 @@ export const initWbot = async (whatsapp: Whatsapp): Promise<Session> => {
await syncUnreadMessages(wbot);
resolve(wbot);
-
+
console.log(`>>>>>>>>>>>>>>>>>>>>>>>>>.. BACKUP SESSION whatsapp.id ${whatsapp.id} | backupSession: ${backupSession}`)
- const whatsIndex = backupSession.findIndex((id:number) => id === +whatsapp.id);
+ const whatsIndex = backupSession.findIndex((id: number) => id === +whatsapp.id);
console.log(' whatsIndex: ', whatsIndex)
-
+
if (whatsIndex !== -1) {
backupSession.splice(whatsIndex, 1);
diff --git a/frontend/src/assets/icons/UserModal/perfil.svg b/frontend/src/assets/icons/UserModal/perfil.svg
new file mode 100644
index 0000000..38d19d4
--- /dev/null
+++ b/frontend/src/assets/icons/UserModal/perfil.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="current" xmlns="http://www.w3.org/2000/svg">
+ <path d="M9 0C4.032 0 0 4.032 0 9C0 13.968 4.032 18 9 18C13.968 18 18 13.968 18 9C18 4.032 13.968 0 9 0ZM12.249 5.706C13.212 5.706 13.986 6.48 13.986 7.443C13.986 8.406 13.212 9.18 12.249 9.18C11.286 9.18 10.512 8.406 10.512 7.443C10.503 6.48 11.286 5.706 12.249 5.706ZM6.849 4.284C8.019 4.284 8.973 5.238 8.973 6.408C8.973 7.578 8.019 8.532 6.849 8.532C5.679 8.532 4.725 7.578 4.725 6.408C4.725 5.229 5.67 4.284 6.849 4.284ZM6.849 12.501V15.876C4.689 15.201 2.979 13.536 2.223 11.412C3.168 10.404 5.526 9.891 6.849 9.891C7.326 9.891 7.929 9.963 8.559 10.089C7.083 10.872 6.849 11.907 6.849 12.501ZM9 16.2C8.757 16.2 8.523 16.191 8.289 16.164V12.501C8.289 11.223 10.935 10.584 12.249 10.584C13.212 10.584 14.877 10.935 15.705 11.619C14.652 14.292 12.051 16.2 9 16.2Z" fill="current" />
+</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/icons/UserModal/signoff.svg b/frontend/src/assets/icons/UserModal/signoff.svg
new file mode 100644
index 0000000..ab8c0cd
--- /dev/null
+++ b/frontend/src/assets/icons/UserModal/signoff.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="current" xmlns="http://www.w3.org/2000/svg">
+ <path d="M14.6257 4.41706C14.3603 4.15175 13.9303 4.15175 13.6648 4.41706C13.3995 4.68238 13.3995 5.11246 13.6648 5.37778C14.9115 6.62446 15.598 8.28202 15.598 10.0451C15.598 11.8081 14.9115 13.4656 13.6648 14.7122C12.3783 15.9988 10.6886 16.642 8.99843 16.6418C7.30826 16.6417 5.61773 15.9983 4.33101 14.7116C1.75803 12.1386 1.7583 7.95194 4.33146 5.37877C4.59678 5.11346 4.59678 4.68328 4.33146 4.41806C4.06615 4.15275 3.63606 4.15275 3.37066 4.41806C0.267772 7.52095 0.267501 12.5697 3.37021 15.6724C4.92206 17.2243 6.96015 18.0001 8.99852 18C11.0363 17.9999 13.0744 17.2243 14.6257 15.673C16.129 14.1698 16.9568 12.1712 16.9568 10.0452C16.9569 7.91915 16.1289 5.92036 14.6257 4.41706Z" fill="current" />
+ <path d="M8.99772 8.80131C9.37301 8.80131 9.67709 8.49713 9.67709 8.12194V0.679365C9.67709 0.304174 9.37301 0 8.99772 0C8.62244 0 8.31836 0.304174 8.31836 0.679365V8.12194C8.31836 8.49722 8.62244 8.80131 8.99772 8.80131Z" fill="current" />
+</svg>
\ No newline at end of file
diff --git a/frontend/src/components/Base/BTN/Btn.jsx b/frontend/src/components/Base/BTN/Btn.jsx
new file mode 100644
index 0000000..9755fa4
--- /dev/null
+++ b/frontend/src/components/Base/BTN/Btn.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import BtnBaseStyled from "./Btn.styled";
+
+const BtnComponent = ({ text, bgcolor, fontcolor,...props }) => {
+ return (
+ <BtnBaseStyled bgcolor={bgcolor} fontcolor={fontcolor} {...props}>
+ {text}
+ </BtnBaseStyled>
+ );
+};
+
+export default BtnComponent;
diff --git a/frontend/src/components/Base/BTN/Btn.styled.jsx b/frontend/src/components/Base/BTN/Btn.styled.jsx
new file mode 100644
index 0000000..9773520
--- /dev/null
+++ b/frontend/src/components/Base/BTN/Btn.styled.jsx
@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+const BtnBaseStyled = styled.button`
+ cursor: pointer;
+ border: 1px solid ${({ bgcolor }) => bgcolor};
+ background-color: ${({ bgcolor }) => bgcolor};
+ color: ${({ fontcolor }) => fontcolor};
+ padding: 6px 16px 3px;
+ border-radius: 5px;
+ margin: 12px 0;
+ font-size: 18px;
+ font-family: "Helvetica55";
+ vertical-align: baseline;
+ transition: all 0.2s linear;
+ &:hover {
+ border: 1px solid ${({ bgcolor }) => bgcolor};
+ color: ${({ bgcolor }) => bgcolor};
+ background-color: ${({ fontcolor }) => fontcolor};
+ transition: all 0.2s linear;
+ }
+`;
+
+export default BtnBaseStyled;
+
diff --git a/frontend/src/components/Base/ContainerLogin.jsx b/frontend/src/components/Base/ContainerLogin/ContainerLogin.jsx
similarity index 100%
rename from frontend/src/components/Base/ContainerLogin.jsx
rename to frontend/src/components/Base/ContainerLogin/ContainerLogin.jsx
diff --git a/frontend/src/components/Base/ContainerLogin.style.jsx b/frontend/src/components/Base/ContainerLogin/ContainerLogin.style.jsx
similarity index 100%
rename from frontend/src/components/Base/ContainerLogin.style.jsx
rename to frontend/src/components/Base/ContainerLogin/ContainerLogin.style.jsx
diff --git a/frontend/src/components/Base/Form/FormComponent.jsx b/frontend/src/components/Base/Form/FormComponent.jsx
new file mode 100644
index 0000000..b3f5ae0
--- /dev/null
+++ b/frontend/src/components/Base/Form/FormComponent.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import FormComponentStyled from "./FormComponent.style";
+
+
+const FormComponent = ({ children, ...props }) => {
+ return <FormComponentStyled {...props}>{children}</FormComponentStyled>;
+};
+
+export default FormComponent;
+
diff --git a/frontend/src/components/Base/Form/FormComponent.style.jsx b/frontend/src/components/Base/Form/FormComponent.style.jsx
new file mode 100644
index 0000000..737f157
--- /dev/null
+++ b/frontend/src/components/Base/Form/FormComponent.style.jsx
@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+const FormComponentStyled = styled.form`
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ align-items: flex-start;
+`;
+
+export default FormComponentStyled;
diff --git a/frontend/src/components/Base/Form/Input/InputComponent.jsx b/frontend/src/components/Base/Form/Input/InputComponent.jsx
new file mode 100644
index 0000000..1116aea
--- /dev/null
+++ b/frontend/src/components/Base/Form/Input/InputComponent.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import LabelComponent from "../Label/LabelComponent";
+import { InputComponentStyled, InputContainerStyled } from "./InputComponent.style";
+
+const InputComponent = ({ type, id, label, ...props }) => {
+ return (
+ <InputContainerStyled>
+ <LabelComponent forhtml={id} label={label} />
+ <InputComponentStyled type={type} id={id} {...props} />
+ </InputContainerStyled>
+ );
+};
+
+export default InputComponent;
+
diff --git a/frontend/src/components/Base/Form/Input/InputComponent.style.jsx b/frontend/src/components/Base/Form/Input/InputComponent.style.jsx
new file mode 100644
index 0000000..3ef411b
--- /dev/null
+++ b/frontend/src/components/Base/Form/Input/InputComponent.style.jsx
@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import { color } from "../../../../style/varibles";
+
+const InputComponentStyled = styled.input`
+ background-color: ${color.pricinpal.grisOscuro};
+ padding: 12px;
+ font-size: 14px;
+ font-family: "Helvetica85";
+ color: ${color.pricinpal.blanco};
+ border: 2px solid ${color.pricinpal.blanco};
+ border-radius: 5px;
+ ::placeholder {
+ color: ${color.gradient.placeholder};
+ }
+ &:focus {
+ outline: none;
+ }
+`;
+
+const InputContainerStyled = styled.div`
+width: 100%;
+ display: flex;
+ flex-direction: column;
+ margin: 12px 0;
+`;
+
+export {InputComponentStyled,InputContainerStyled};
+
diff --git a/frontend/src/components/Base/Form/Label/LabelComponent.jsx b/frontend/src/components/Base/Form/Label/LabelComponent.jsx
new file mode 100644
index 0000000..e5a34ae
--- /dev/null
+++ b/frontend/src/components/Base/Form/Label/LabelComponent.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import LabelComponentStyled from "./LabelComponent.style"
+
+
+const LabelComponent = ({label,forhtml}) => {
+ return (
+ <LabelComponentStyled forhtml={forhtml}>{label}</LabelComponentStyled>
+ )
+}
+
+export default LabelComponent
\ No newline at end of file
diff --git a/frontend/src/components/Base/Form/Label/LabelComponent.style.jsx b/frontend/src/components/Base/Form/Label/LabelComponent.style.jsx
new file mode 100644
index 0000000..8ce2670
--- /dev/null
+++ b/frontend/src/components/Base/Form/Label/LabelComponent.style.jsx
@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import { color } from "../../../../style/varibles";
+
+const LabelComponentStyled = styled.label`
+ color: ${color.pricinpal.blanco};
+ text-align: left;
+ font-size: 16px;
+ font-family: "Helvetica85";
+ text-transform: uppercase;
+ margin: 6px 0;
+`;
+
+export default LabelComponentStyled;
+
diff --git a/frontend/src/components/Base/MainContainer.jsx b/frontend/src/components/Base/MainContainer.jsx
deleted file mode 100644
index a9c9dbf..0000000
--- a/frontend/src/components/Base/MainContainer.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import PageTitle from "../PageTitle/PageTitle";
-
-import MainContainerStyled, { ContentContainer, TitleContainer } from "./MainContainer.style";
-
-const MainContainer = ({ children }) => {
- return (
- <MainContainerStyled>
- <TitleContainer>
- <PageTitle />
- </TitleContainer>
- <ContentContainer>{children}</ContentContainer>
- </MainContainerStyled>
- );
-};
-
-export default MainContainer;
-
diff --git a/frontend/src/components/Base/MainContainer/MainContainer.jsx b/frontend/src/components/Base/MainContainer/MainContainer.jsx
new file mode 100644
index 0000000..b8bb60d
--- /dev/null
+++ b/frontend/src/components/Base/MainContainer/MainContainer.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import PageTitle from "../../PageTitle/PageTitle";
+
+
+import MainContainerStyled, {
+ TitleContainerStyled,
+ ContentContainerStyled,
+} from "./MainContainer.style";
+
+const MainContainer = ({ children }) => {
+ return (
+ <MainContainerStyled>
+ <TitleContainerStyled>
+ <PageTitle />
+ </TitleContainerStyled>
+ <ContentContainerStyled>{children}</ContentContainerStyled>
+ </MainContainerStyled>
+ );
+};
+
+export default MainContainer;
+
diff --git a/frontend/src/components/Base/MainContainer.style.jsx b/frontend/src/components/Base/MainContainer/MainContainer.style.jsx
similarity index 58%
rename from frontend/src/components/Base/MainContainer.style.jsx
rename to frontend/src/components/Base/MainContainer/MainContainer.style.jsx
index 0ca3664..b2e7437 100644
--- a/frontend/src/components/Base/MainContainer.style.jsx
+++ b/frontend/src/components/Base/MainContainer/MainContainer.style.jsx
@@ -1,6 +1,6 @@
import styled from "styled-components";
-const MainContainer = styled.main`
+const MainContainerStyled = styled.main`
padding-left: 97px;
padding-top: 26px;
margin-right: 16px;
@@ -10,17 +10,17 @@ const MainContainer = styled.main`
align-items: flex-end;
height: 96vh;
`;
-const TitleContainer = styled.div`
+const TitleContainerStyled = styled.div`
width: 100%;
`;
-const ContentContainer = styled.div`
+const ContentContainerStyled = styled.div`
width: 100%;
height: 100vh;
overflow: hidden;
margin-top: 16px;
`;
-export default MainContainer;
+export default MainContainerStyled;
-export { TitleContainer, ContentContainer };
+export { TitleContainerStyled, ContentContainerStyled };
diff --git a/frontend/src/components/ConfirmationModal/ConfirmationModal.jsx b/frontend/src/components/ConfirmationModal/ConfirmationModal.jsx
new file mode 100644
index 0000000..0f8d424
--- /dev/null
+++ b/frontend/src/components/ConfirmationModal/ConfirmationModal.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import BtnComponent from "../Base/BTN/Btn";
+
+import {
+ ConfirmationModalStyled,
+ ModalOverlayStyled,
+ ModalConfirmationBtns,
+} from "./ConfirmationModal.style";
+
+import { color } from "../../style/varibles";
+
+const ConfirmationModal = ({ children, title, modal, click }) => {
+ const { handleModal, handleLogout } = click;
+ return (
+ <ModalOverlayStyled modal={modal} onClick={handleModal}>
+ <ConfirmationModalStyled>
+ <h1>{title}</h1>
+ <p>{children}</p>
+ <ModalConfirmationBtns>
+ <BtnComponent
+ text="Cancelar"
+ bgcolor={color.pricinpal.blanco}
+ fontcolor={color.pricinpal.grisOscuro}
+ onClick={handleModal}
+ />
+ <BtnComponent
+ text="Sim"
+ bgcolor={color.status.yes}
+ fontcolor={color.pricinpal.blanco}
+ onClick={handleLogout}
+ />
+ </ModalConfirmationBtns>
+ </ConfirmationModalStyled>
+ </ModalOverlayStyled>
+ );
+};
+
+export default ConfirmationModal;
+
diff --git a/frontend/src/components/ConfirmationModal/ConfirmationModal.style.jsx b/frontend/src/components/ConfirmationModal/ConfirmationModal.style.jsx
new file mode 100644
index 0000000..ceec6d9
--- /dev/null
+++ b/frontend/src/components/ConfirmationModal/ConfirmationModal.style.jsx
@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import { color } from "../../style/varibles";
+
+const ModalOverlayStyled = styled.div`
+ display: ${({modal}) => (modal ? "flex" : "none")};
+ position: absolute;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100vh;
+ background-color: #00000050;
+ z-index: 9999;
+ top: 0;
+ right: 0;
+`;
+
+const ConfirmationModalStyled = styled.div`
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ margin: 0 auto;
+ padding: 16px;
+ justify-content: center;
+ text-align: center;
+ z-index: 10000;
+ border-radius: 5px;
+ background-color: ${color.pricinpal.grisOscuro};
+ width: 50%;
+ h1 {
+ margin: 16px 0;
+ }
+ p {
+ font-size: 18px;
+ margin: 16px 0;
+ }
+`;
+
+const ModalConfirmationBtns = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+`;
+
+export { ConfirmationModalStyled, ModalOverlayStyled, ModalConfirmationBtns };
+
diff --git a/frontend/src/components/Menu/MenuComponent.jsx b/frontend/src/components/Menu/MenuComponent.jsx
index c4cb2fb..047aedc 100644
--- a/frontend/src/components/Menu/MenuComponent.jsx
+++ b/frontend/src/components/Menu/MenuComponent.jsx
@@ -61,7 +61,7 @@ const MenuComponent = () => {
<MenuTop hover={hover}/>
<MenuListStyled>
<MenuItem icon={<Tickets />} text="Tickets" to="/tickets" hover={hover} />
- <MenuItem icon={<Contact />} text="Contatos" to="contacts" hover={hover} />
+ <MenuItem icon={<Contact />} text="Contatos" to="/contacts" hover={hover} />
<MenuItem icon={<Reminder />} text="Lembretes" to="/schedulesReminder" hover={hover} />
<MenuItem icon={<FastAanswer />} text="Respostas" to="" hover={hover} />
<Divider />
diff --git a/frontend/src/components/PageTitle/PageTitle.jsx b/frontend/src/components/PageTitle/PageTitle.jsx
index 2e355be..6ba57c1 100644
--- a/frontend/src/components/PageTitle/PageTitle.jsx
+++ b/frontend/src/components/PageTitle/PageTitle.jsx
@@ -1,17 +1,22 @@
import React from "react";
import { PageTitleStyled } from "./PageTitle.style";
+
import UserBtn from "./UserBtn/UserBtn";
import { AuthContext } from "../../context/Auth/AuthContext";
-
-import logo from "../../assets/images/Logo.png"
+import logo from "../../assets/images/Logo.png";
const PageTitle = () => {
+ const [modal, setModal] = React.useState(false);
const { user } = React.useContext(AuthContext);
+
+ const handleModal = () => {
+ setModal(!modal);
+ };
return (
<PageTitleStyled>
<h1>PageTitle</h1>
- <UserBtn user={user} img={logo}/>
+ <UserBtn user={user} img={logo} modal={modal} modalSet={handleModal} />
</PageTitleStyled>
);
};
diff --git a/frontend/src/components/PageTitle/PageTitle.style.jsx b/frontend/src/components/PageTitle/PageTitle.style.jsx
index ee7511d..3847e9c 100644
--- a/frontend/src/components/PageTitle/PageTitle.style.jsx
+++ b/frontend/src/components/PageTitle/PageTitle.style.jsx
@@ -17,11 +17,12 @@ const UserBtnStyled = styled.button`
border: none;
border-radius: 5px;
font-family: "Helvetica55";
- letter-spacing: .5px;
+ letter-spacing: 0.5px;
font-size: 14px;
text-transform: capitalize;
align-items: center;
- img{
+ cursor: pointer;
+ img {
background-color: white;
width: 24px;
height: 24px;
@@ -29,6 +30,39 @@ const UserBtnStyled = styled.button`
border-radius: 50%;
margin-right: 12px;
}
- `;
+`;
+
+const UserModalStyled = styled.div`
+ display: ${({ modal }) => (modal ? "flex" : "none")};
+ position: absolute;
+ background-color: white;
+ padding: 12px;
+ right: 2rem;
+ top: 5.5rem;
+ border-radius: 5px;
+ box-shadow: ${color.shadow.dark} ${color.gradient.bgOpacity};
+`;
+
+const UserModalListStyled = styled.ul`
+ display: flex;
+ flex-direction: column;
+`;
+
+const UserModalItemStyled = styled.li`
+ display: flex;
+ justify-content: left;
+ color: ${color.pricinpal.grisOscuro};
+ margin: 6px 0;
+ cursor: pointer;
+ svg {
+ margin-right: 12px;
+ }
+`;
+export {
+ PageTitleStyled,
+ UserBtnStyled,
+ UserModalStyled,
+ UserModalListStyled,
+ UserModalItemStyled,
+};
-export { PageTitleStyled, UserBtnStyled };
diff --git a/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx b/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx
index 301241e..8296bde 100644
--- a/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx
+++ b/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx
@@ -1,12 +1,39 @@
import React from "react";
-import { UserBtnStyled } from "../PageTitle.style";
+import { UserBtnStyled, UserModalStyled, UserModalListStyled } from "../PageTitle.style";
+
+import { AuthContext } from "../../../context/Auth/AuthContext";
+import UserItem from "./UserItem";
+
+import { ReactComponent as Perfil } from "../../../assets/icons/UserModal/perfil.svg";
+import { ReactComponent as Signoff } from "../../../assets/icons/UserModal/signoff.svg";
+import ConfirmationModal from "../../ConfirmationModal/ConfirmationModal";
+import UserModal from "../../UserModal/UserModal";
+
+const UserBtn = ({ user, img, modal, modalSet }) => {
+ const [modalConfirm, setModalConfirm] = React.useState(false);
+ const { handleLogout } = React.useContext(AuthContext);
+
+ const handleModal = () => {
+ setModalConfirm(!modalConfirm);
+ };
-const UserBtn = ({ user, img }) => {
return (
- <UserBtnStyled>
- <img src={img} alt={user ? user.name : null} width="24px" />
- Bem Vindo, {user ? user.name : null}
- </UserBtnStyled>
+ <>
+ <UserBtnStyled onClick={modalSet}>
+ <img src={img} alt={user ? user.name : null} width="24px" />
+ Bem Vindo, {user ? user.name : null}
+ </UserBtnStyled>
+ <UserModalStyled modal={modal}>
+ <UserModalListStyled>
+ <UserItem title="Perfil" icon={<Perfil />} />
+ <UserItem title="Sair" icon={<Signoff />} onClick={handleModal} />
+ </UserModalListStyled>
+ </UserModalStyled>
+ <UserModal />
+ <ConfirmationModal title="Sair?" modal={modalConfirm} click={{ handleModal, handleLogout }}>
+ Deseja Sair do sistema?
+ </ConfirmationModal>
+ </>
);
};
diff --git a/frontend/src/components/PageTitle/UserBtn/UserItem.jsx b/frontend/src/components/PageTitle/UserBtn/UserItem.jsx
new file mode 100644
index 0000000..e243ad9
--- /dev/null
+++ b/frontend/src/components/PageTitle/UserBtn/UserItem.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { UserModalItemStyled } from "../PageTitle.style";
+
+const UserItem = ({ icon, title, onClick }) => {
+ return (
+ <UserModalItemStyled onClick={onClick}>
+ {icon}
+ {title}
+ </UserModalItemStyled>
+ );
+};
+
+export default UserItem;
+
diff --git a/frontend/src/components/UserModal/UserModal.jsx b/frontend/src/components/UserModal/UserModal.jsx
new file mode 100644
index 0000000..3c55f1c
--- /dev/null
+++ b/frontend/src/components/UserModal/UserModal.jsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { ModalOverlayStyled, UserModalStyled, UserBtns } from "./UserModal.style";
+
+import api from "../../services/api";
+import { AuthContext } from "../../context/Auth/AuthContext";
+import { Can } from "../Can";
+import BtnComponent from "../Base/BTN/Btn";
+
+import FormComponent from "../Base/Form/FormComponent";
+import InputComponent from "../Base/Form/Input/InputComponent";
+
+const style = {
+ width: "100%",
+ justifyContent: "flex-start",
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+}
+
+const UserModal = () => {
+ return (
+ <ModalOverlayStyled>
+ <UserModalStyled>
+ <div style={style}>
+ <h1>Imagem</h1>
+ <p>Desc</p>
+ </div>
+ <FormComponent method="get">
+ <InputComponent id="nome" label="Nome" type="text" />
+ <InputComponent id="email" label="E-mail" type="email" />
+ <InputComponent id="password" label="Senha" type="password" />
+ <UserBtns>
+ <BtnComponent text="Cancelar" />
+ <BtnComponent text="Salvar" />
+ </UserBtns>
+ </FormComponent>
+ </UserModalStyled>
+ </ModalOverlayStyled>
+ );
+};
+
+export default UserModal;
+
diff --git a/frontend/src/components/UserModal/UserModal.style.jsx b/frontend/src/components/UserModal/UserModal.style.jsx
new file mode 100644
index 0000000..1cd8e9c
--- /dev/null
+++ b/frontend/src/components/UserModal/UserModal.style.jsx
@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { color } from "../../style/varibles";
+
+const ModalOverlayStyled = styled.div`
+ /* display: ${({ modal }) => (modal ? "flex" : "none")}; */
+ display: flex;
+ position: absolute;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100vh;
+ background-color: #00000050;
+ z-index: 9999;
+ top: 0;
+ right: 0;
+`;
+const UserModalStyled = styled.div`
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ margin: 0 auto;
+ padding: 12px;
+ z-index: 10000;
+ border-radius: 5px;
+ background-color: ${color.pricinpal.grisOscuro};
+ width: 50%;
+`;
+const UserBtns = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+`;
+export { ModalOverlayStyled, UserModalStyled,UserBtns };
+
diff --git a/frontend/src/layout/index.js b/frontend/src/layout/index.js
index b52d238..bf1bdec 100644
--- a/frontend/src/layout/index.js
+++ b/frontend/src/layout/index.js
@@ -1,18 +1,18 @@
import React from "react";
import Loading from "../components/LoadingScreen/Loading";
-import MainContainer from "../components/Base/MainContainer";
+import MainContainer from "../components/Base/MainContainer/MainContainer";
import { AuthContext } from "../context/Auth/AuthContext";
import { i18n } from "../translate/i18n";
import MenuComponent from "../components/Menu/MenuComponent";
const LoggedInLayout = ({ children }) => {
const { handleLogout, loading, isAuth } = React.useContext(AuthContext);
- const { user } = React.useContext(AuthContext);
-
const logout = (e) => {
handleLogout();
};
+ const { user } = React.useContext(AuthContext);
+
if (loading) {
return <Loading />;
diff --git a/frontend/src/pages/Login/index.js b/frontend/src/pages/Login/index.js
index e61095d..217eb3f 100644
--- a/frontend/src/pages/Login/index.js
+++ b/frontend/src/pages/Login/index.js
@@ -2,7 +2,7 @@ import React from "react";
import { AuthContext } from "../../context/Auth/AuthContext";
import { i18n } from "../../translate/i18n";
-import ContainerLogin from "../../components/Base/ContainerLogin";
+import ContainerLogin from "../../components/Base/ContainerLogin/ContainerLogin";
import VideoComponent from "../../components/VideoTag/VideoComponent";
import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm";
import Company from "../../components/LoginComponents/CompanyLogo/Company";
diff --git a/frontend/src/style/varibles.jsx b/frontend/src/style/varibles.jsx
index cf09298..ecf66e6 100644
--- a/frontend/src/style/varibles.jsx
+++ b/frontend/src/style/varibles.jsx
@@ -50,7 +50,11 @@ export const color = {
warning: "#FFC700"
},
gradient:{
- bgOpacity:"#212F3CD8"
+ bgOpacity:"#212F3CD8",
+ placeholder:"#ffffff83"
+ },
+ shadow:{
+ dark:"2px 2px 4px 2px"
}
};