Revert "Layout/login"
Renato Di Giacomo
RenatoDiGiacomo
parent
76df0db703
commit
c4a18eebfd
|
|
@ -1,15 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import LabelComponent from "../Label/LabelComponent";
|
|
||||||
import { InputComponentStyled, InputContainerStyled } from "./InputComponent.style";
|
|
||||||
|
|
||||||
const InputComponent = ({ type, id, label, value, ...props }) => {
|
|
||||||
return (
|
|
||||||
<InputContainerStyled>
|
|
||||||
<LabelComponent forhtml={id} label={label} />
|
|
||||||
<InputComponentStyled type={type} id={id} value={value} {...props} />
|
|
||||||
</InputContainerStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default InputComponent;
|
|
||||||
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import styled from "styled-components";
|
|
||||||
|
|
||||||
const MainContainerStyled = styled.main`
|
|
||||||
padding-left: 97px;
|
|
||||||
padding-top: 26px;
|
|
||||||
margin-right: 16px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
height: 96vh;
|
|
||||||
@media only screen and (max-height: 790px) {
|
|
||||||
padding-top: 12px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
const TitleContainerStyled = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
`;
|
|
||||||
const ContentContainerStyled = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-top: 16px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default MainContainerStyled;
|
|
||||||
|
|
||||||
export { TitleContainerStyled, ContentContainerStyled };
|
|
||||||
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
import styled from "styled-components";
|
|
||||||
import { color } from "../../style/varibles";
|
|
||||||
|
|
||||||
//Nav
|
|
||||||
const MenuStyled = styled.nav`
|
|
||||||
position: absolute;
|
|
||||||
width: 76px;
|
|
||||||
height: 100vh;
|
|
||||||
background: ${color.pricinpal.grisOscuro}; //Same background login
|
|
||||||
z-index: 100;
|
|
||||||
animation: ${(props) => (props.hover ? "hover" : "hoveroff")} 0.5s forwards;
|
|
||||||
@keyframes hover {
|
|
||||||
from {
|
|
||||||
width: 76px;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
width: 218px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes hoveroff {
|
|
||||||
from {
|
|
||||||
width: 218px;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
width: 76px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
//UL
|
|
||||||
const MenuListStyled = styled.ul`
|
|
||||||
margin-top: 16px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 100;
|
|
||||||
`;
|
|
||||||
|
|
||||||
//LI
|
|
||||||
const MenuListItemStyled = styled.li`
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin: 12px 28px;
|
|
||||||
gap: 6px;
|
|
||||||
color: ${color.pricinpal.blanco};
|
|
||||||
transition: all 0.1s linear;
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: ${color.pricinpal.blanco};
|
|
||||||
gap: 12px;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-transform: capitalize;
|
|
||||||
font-family: "Helvetica55";
|
|
||||||
font-size: 14px;
|
|
||||||
opacity: ${(props) => (props.hover ? "1" : "0")};
|
|
||||||
display: ${(props) => (props.hover ? "block" : "none")};
|
|
||||||
}
|
|
||||||
svg {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
fill: ${color.pricinpal.blanco};
|
|
||||||
transition: all 0.1s linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover a p,
|
|
||||||
&:hover a svg {
|
|
||||||
color: ${color.pricinpal.naranja};
|
|
||||||
fill: ${color.pricinpal.naranja};
|
|
||||||
transition: all 0.1s linear;
|
|
||||||
}
|
|
||||||
@media only screen and (max-height: 790px) {
|
|
||||||
margin: 6px 28px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export { MenuStyled, MenuListStyled, MenuListItemStyled };
|
|
||||||
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
import styled from "styled-components";
|
|
||||||
import { color } from "../../style/varibles";
|
|
||||||
|
|
||||||
const PageTitleStyled = styled.div`
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
`;
|
|
||||||
const UserBtnStyled = styled.button`
|
|
||||||
display: flex;
|
|
||||||
width: 218px;
|
|
||||||
padding: 16px;
|
|
||||||
text-align: left;
|
|
||||||
background-color: ${color.pricinpal.grisOscuro};
|
|
||||||
color: ${color.pricinpal.blanco};
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-family: "Helvetica55";
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
font-size: 14px;
|
|
||||||
text-transform: capitalize;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
img {
|
|
||||||
background-color: white;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
object-fit: contain;
|
|
||||||
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;
|
|
||||||
z-index: 999;
|
|
||||||
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,
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
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 [modalUser, setModalUser] = React.useState(false);
|
|
||||||
const { handleLogout } = React.useContext(AuthContext);
|
|
||||||
|
|
||||||
const handleModal = () => {
|
|
||||||
setModalConfirm(!modalConfirm);
|
|
||||||
};
|
|
||||||
const handleModalUser = (e)=>{
|
|
||||||
e.preventDefault()
|
|
||||||
setModalUser(!modalUser)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<UserBtnStyled onClick={modalSet}>
|
|
||||||
<img src={img} alt={user ? user.name : null} width="24px" />
|
|
||||||
Bem Vindo, {user ? user.name : null}
|
|
||||||
</UserBtnStyled>
|
|
||||||
<UserModalStyled modal={modal} onMouseLeave={modalSet}>
|
|
||||||
<UserModalListStyled>
|
|
||||||
<UserItem title="Perfil" icon={<Perfil />} onClick={handleModalUser} />
|
|
||||||
<UserItem title="Sair" icon={<Signoff />} onClick={handleModal} />
|
|
||||||
</UserModalListStyled>
|
|
||||||
</UserModalStyled>
|
|
||||||
<UserModal modal={modalUser} click={handleModalUser}/>
|
|
||||||
<ConfirmationModal title="Sair?" modal={modalConfirm} click={{ handleModal, handleLogout }}>
|
|
||||||
Deseja Sair do sistema?
|
|
||||||
</ConfirmationModal>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UserBtn;
|
|
||||||
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { color } from "../../style/varibles";
|
|
||||||
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";
|
|
||||||
import UserModalComponent from "./UserModalImg/UserModalComponent";
|
|
||||||
|
|
||||||
import UserImg from "../../assets/images/User/user.jpg";
|
|
||||||
|
|
||||||
const UserModal = ({ modal, click }) => {
|
|
||||||
const { user } = React.useContext(AuthContext);
|
|
||||||
|
|
||||||
const initalData = {
|
|
||||||
name: user.name,
|
|
||||||
email: user.email,
|
|
||||||
perfil:user.profile,
|
|
||||||
}
|
|
||||||
console.log(user);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ModalOverlayStyled modal={modal}>
|
|
||||||
<UserModalStyled>
|
|
||||||
<UserModalComponent img={UserImg} desc="Clique na imagem para alterar" />
|
|
||||||
<FormComponent method="get">
|
|
||||||
<InputComponent id="nome" label="Nome" type="text" value={initalData.name}/>
|
|
||||||
<InputComponent id="email" label="E-mail" type="email" value={initalData.email}/>
|
|
||||||
<InputComponent id="password" label="Senha" type="password" />
|
|
||||||
<UserBtns>
|
|
||||||
<BtnComponent text="Cancelar" onClick={click} />
|
|
||||||
<BtnComponent
|
|
||||||
text="Salvar"
|
|
||||||
bgcolor={color.status.yes}
|
|
||||||
fontcolor={color.pricinpal.blanco}
|
|
||||||
/>
|
|
||||||
</UserBtns>
|
|
||||||
</FormComponent>
|
|
||||||
</UserModalStyled>
|
|
||||||
</ModalOverlayStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UserModal;
|
|
||||||
|
|
||||||
/*{name: 'teste', id: 2, email: 'teste@teste.com', profile: 'master', tokenVersion: 0, …}
|
|
||||||
email: "teste@teste.com"
|
|
||||||
id: 2
|
|
||||||
name: "teste"
|
|
||||||
profile: "master"
|
|
||||||
queues: []
|
|
||||||
tokenVersion: 0 */
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
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: 100;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
`;
|
|
||||||
const UserModalStyled = styled.div`
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 12px;
|
|
||||||
z-index: 101;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: ${color.pricinpal.grisOscuro};
|
|
||||||
width: 650px;
|
|
||||||
`;
|
|
||||||
const UserBtns = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
`;
|
|
||||||
export { ModalOverlayStyled, UserModalStyled, UserBtns };
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue