adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Login page close to finish

pull/2/head
RenatoDiGiacomo 2022-07-12 09:46:22 -03:00
parent c1c5ede9f0
commit 2f7f202630
26 changed files with 327 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/App.js
View File

@ -1,12 +1,11 @@
import React from "react";
import Routes from "./routes";
import "react-toastify/dist/ReactToastify.css";
import GlobalStyled from "./style/GlobalStyle";
const App = () => {
return (
<>
<GlobalStyled />
<Routes />
</>
);

3
frontend/src/assets/icons/email.svg 100644
View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.8334 3.49998C12.8334 2.85831 12.3084 2.33331 11.6667 2.33331H2.33341C1.69175 2.33331 1.16675 2.85831 1.16675 3.49998V10.5C1.16675 11.1416 1.69175 11.6666 2.33341 11.6666H11.6667C12.3084 11.6666 12.8334 11.1416 12.8334 10.5V3.49998ZM11.6667 3.49998L7.00008 6.41665L2.33341 3.49998H11.6667ZM11.6667 10.5H2.33341V4.66665L7.00008 7.58331L11.6667 4.66665V10.5Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 488 B

3
frontend/src/assets/icons/key.svg 100644
View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.8333 11.0834H9.33333V8.75002H7.77C7.105 10.1617 5.67 11.0834 4.08333 11.0834C1.83167 11.0834 0 9.25169 0 7.00002C0 4.74835 1.83167 2.91669 4.08333 2.91669C5.67 2.91669 7.09917 3.83835 7.77 5.25002H14V8.75002H12.8333V11.0834ZM10.5 9.91669H11.6667V7.58335H12.8333V6.41669H6.965L6.83083 6.02585C6.4225 4.86502 5.31417 4.08335 4.08333 4.08335C2.47333 4.08335 1.16667 5.39002 1.16667 7.00002C1.16667 8.61002 2.47333 9.91669 4.08333 9.91669C5.31417 9.91669 6.4225 9.13502 6.83083 7.97419L6.965 7.58335H10.5V9.91669ZM4.08333 8.75002C3.12083 8.75002 2.33333 7.96252 2.33333 7.00002C2.33333 6.03752 3.12083 5.25002 4.08333 5.25002C5.04583 5.25002 5.83333 6.03752 5.83333 7.00002C5.83333 7.96252 5.04583 8.75002 4.08333 8.75002ZM4.08333 6.41669C3.7625 6.41669 3.5 6.67919 3.5 7.00002C3.5 7.32085 3.7625 7.58335 4.08333 7.58335C4.40417 7.58335 4.66667 7.32085 4.66667 7.00002C4.66667 6.67919 4.40417 6.41669 4.08333 6.41669Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
frontend/src/assets/icons/visibility.svg 100644
View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.99992 3.49998C9.21075 3.49998 11.1824 4.74248 12.1449 6.70831C11.1824 8.67415 9.21075 9.91665 6.99992 9.91665C4.78909 9.91665 2.81742 8.67415 1.85492 6.70831C2.81742 4.74248 4.78909 3.49998 6.99992 3.49998ZM6.99992 2.33331C4.08325 2.33331 1.59242 4.14748 0.583252 6.70831C1.59242 9.26915 4.08325 11.0833 6.99992 11.0833C9.91658 11.0833 12.4074 9.26915 13.4166 6.70831C12.4074 4.14748 9.91658 2.33331 6.99992 2.33331ZM6.99992 5.24998C7.80492 5.24998 8.45825 5.90331 8.45825 6.70831C8.45825 7.51331 7.80492 8.16665 6.99992 8.16665C6.19492 8.16665 5.54158 7.51331 5.54158 6.70831C5.54158 5.90331 6.19492 5.24998 6.99992 5.24998ZM6.99992 4.08331C5.55325 4.08331 4.37492 5.26165 4.37492 6.70831C4.37492 8.15498 5.55325 9.33331 6.99992 9.33331C8.44659 9.33331 9.62492 8.15498 9.62492 6.70831C9.62492 5.26165 8.44659 4.08331 6.99992 4.08331Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 966 B

BIN
frontend/src/assets/images/Logo.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
frontend/src/assets/videos/video.mp4 100644
View File

Binary file not shown.

15
frontend/src/components/Base/ContainerLogin.jsx
View File

@ -1,19 +1,8 @@
import React from "react";
import styled from "styled-components";
const ContainerLoginStyled = styled.div`
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
`;
import ContainerLoginStyled from "./ContainerLogin.style";
const ContainerLogin = ({ children }) => {
return (
<>
<ContainerLoginStyled>{children}</ContainerLoginStyled>
</>
);
return <ContainerLoginStyled>{children}</ContainerLoginStyled>;
};
export default ContainerLogin;

9
frontend/src/components/Base/ContainerLogin.style.jsx 100644
View File

@ -0,0 +1,9 @@
import styled from "styled-components";
const ContainerLoginStyled = styled.div`
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
align-items: center;
`;
export default ContainerLoginStyled

16
frontend/src/components/LoginComponents/AvatarCompany/AvatarBlock.style.jsx 100644
View File

@ -0,0 +1,16 @@
import styled from "styled-components";
import logo from "../../../assets/images/Logo.png";
const AvatarBlock = styled.div`
display: flex;
justify-content: center;
background-image: url(${logo});
background-size: contain;
background-repeat: no-repeat;
background-color: white;
border-radius: 50%;
width: 45px;
height: 45px;
`;
export default AvatarBlock;

17
frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.jsx 100644
View File

@ -0,0 +1,17 @@
import React from "react";
import AvatarLoginStyle from "./AvatarLogin.style";
import AvatarBlock from "./AvatarBlock.style";
import H1Title from "./H1Title.style";
const AvatarLogin = () => {
return (
<AvatarLoginStyle>
<AvatarBlock />
<H1Title>OmniHit</H1Title>
</AvatarLoginStyle>
);
};
export default AvatarLogin;

10
frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.style.jsx 100644
View File

@ -0,0 +1,10 @@
import styled from "styled-components";
const AvatarLoginStyle = styled.div`
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
`;
export default AvatarLoginStyle;

8
frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx 100644
View File

@ -0,0 +1,8 @@
import styled from "styled-components";
const H1Title = styled.h1`
font-size: 32px;
font-family: "HelveticaHeavy";
text-transform: uppercase;
`;
export default H1Title

9
frontend/src/components/LoginComponents/CompanyLogo/Company.jsx 100644
View File

@ -0,0 +1,9 @@
import React from 'react'
const Company = () => {
return (
<div>Company</div>
)
}
export default Company

9
frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.jsx 100644
View File

@ -0,0 +1,9 @@
import React from "react";
import BtnSubmitStyled from "./BtnSubmit.style";
const BtnSubmit = ({ submit }) => {
return <BtnSubmitStyled type={submit}>Login</BtnSubmitStyled>;
};
export default BtnSubmit;

20
frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx 100644
View File

@ -0,0 +1,20 @@
import styled from "styled-components";
import { color } from "../../../../style/varibles";
const BtnSubmitStyled = styled.button`
cursor: pointer;
width: 342px;
padding: 12px;
margin-top: 16px;
background-color: ${color.complement.azulCielo};
color: ${color.pricinpal.blanco};
border: none;
border-radius: 6px;
font-size: 14px;
font-family: "HelveticaRoman";
box-shadow: -1px 0px 8px 0px rgba(255,255,255,.25);
`;
export default BtnSubmitStyled;

19
frontend/src/components/LoginComponents/LoginForm/Inputs/InputBlock.style.jsx 100644
View File

@ -0,0 +1,19 @@
import styled from "styled-components";
import { color } from "../../../../style/varibles";
const InputBlockStyled = styled.div`
width: 320px;
display: flex;
flex-direction: row;
background: ${color.complement.azulOscuro};
color: ${color.complement.azulCielo};
font-size: 11px;
margin: 8px 0;
padding: 12px;
border: none;
border-radius: 5px;
gap: 12px;
`;
export default InputBlockStyled;

31
frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.jsx 100644
View File

@ -0,0 +1,31 @@
import React from "react";
import { ReactComponent as EmailIcon } from "../../../../assets/icons/email.svg";
import { ReactComponent as KeyIcon } from "../../../../assets/icons/key.svg";
import { ReactComponent as VisibilityIcon } from "../../../../assets/icons/visibility.svg";
import InputBlockStyled from "./InputBlock.style";
import InputComponentStyled from "./InputComponent.style";
const InputComponent = ({ name, type, placeholder, icon, ...props }) => {
const [password, setPassword] = React.useState(true);
if (name === "email") {
return (
<InputBlockStyled>
<EmailIcon />
<InputComponentStyled type={type} name={name} placeholder={placeholder} {...props} />
</InputBlockStyled>
);
} else {
return (
<InputBlockStyled>
<KeyIcon />
<InputComponentStyled type={password ? "password" : "text"} name={name} {...props} />
<VisibilityIcon onClick={() => setPassword(!password)} />
</InputBlockStyled>
);
}
};
export default InputComponent;

12
frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.style.jsx 100644
View File

@ -0,0 +1,12 @@
import styled from "styled-components";
import { color } from "../../../../style/varibles";
const InputComponentStyled = styled.input`
width: 100%;
background: transparent;
border: none;
color: ${color.complement.azulCielo};
`;
export default InputComponentStyled;

9
frontend/src/components/LoginComponents/LoginForm/LoginBlock.style.jsx 100644
View File

@ -0,0 +1,9 @@
import styled from "styled-components";
const LoginBlockStyled = styled.div`
width: 100%;
display: flex;
flex-direction: column;
`;
export default LoginBlockStyled;

41
frontend/src/components/LoginComponents/LoginForm/LoginForm.jsx 100644
View File

@ -0,0 +1,41 @@
import React from "react";
import AvatarLogin from "../AvatarCompany/AvatarLogin";
import BtnSubmit from "./Btn/BtnSubmit";
import InputComponent from "./Inputs/InputComponent";
import LoginBlockStyled from "./LoginBlock.style";
import LoginFormStyled from "./LoginForm.style";
const LoginForm = ({ user,password, handlSubmit, handleChangeInput }) => {
return (
<LoginBlockStyled>
<AvatarLogin />
<LoginFormStyled noValidate onSubmit={handlSubmit}>
<InputComponent
type="text"
name="email"
placeholder="Digite o e-email de acesso"
icon="email"
value={user}
onChange={handleChangeInput}
requered
/>
<InputComponent
type="password"
name="password"
placeholder="Digite o e-email de acesso"
icon="key"
value={password}
onChange={handleChangeInput}
requered
/>
{/*! Esqueceu a senha é relevante? */}
<BtnSubmit type="submit" />
</LoginFormStyled>
</LoginBlockStyled>
);
};
export default LoginForm;

8
frontend/src/components/LoginComponents/LoginForm/LoginForm.style.jsx 100644
View File

@ -0,0 +1,8 @@
import styled from "styled-components";
const LoginFormStyled = styled.form`
display: flex;
flex-direction: column;
margin-top: 16px;
`;
export default LoginFormStyled;

15
frontend/src/components/LoginComponents/VideoTag/VideoLogin.jsx 100644
View File

@ -0,0 +1,15 @@
import React from "react";
import StyleVideo from "./VideoLogin.style";
import bgvideo from "../../../assets/videos/video.mp4";
const VideoLogin = () => {
return (
<StyleVideo autoPlay muted loop id="bglogin">
<source src={bgvideo} type="video/mp4" />
</StyleVideo>
);
};
export default VideoLogin;

17
frontend/src/components/LoginComponents/VideoTag/VideoLogin.style.jsx 100644
View File

@ -0,0 +1,17 @@
import styled from "styled-components";
const StyleVideo = styled.video`
width: 350px;
height: 100vh;
object-fit: cover;
filter: grayscale(1) brightness(.3);
margin-right: 60px;
@media screen and (max-width: 992px) {
display: none;
}
`;
export default StyleVideo;

6
frontend/src/index.js
View File

@ -2,12 +2,14 @@ import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import GlobalStyled from "./style/GlobalStyle";
import App from "./App";
ReactDOM.render(
<CssBaseline>
<>
<GlobalStyled />
<App />
</CssBaseline>,
</>,
document.getElementById("root")
);

110
frontend/src/pages/Login/index.js
View File

@ -1,8 +1,12 @@
import React from "react";
import { AuthContext } from "../../context/Auth/AuthContext";
import { i18n } from "../../translate/i18n";
import ContainerLogin from "../../components/Base/ContainerLogin";
import VideoLogin from "../../components/LoginComponents/VideoTag/VideoLogin";
import { Input } from "@mui/material";
import AvatarLogin from "../../components/LoginComponents/AvatarCompany/AvatarLogin";
import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm";
//! Can i Delete this comment above?
// const Copyright = () => {
@ -39,104 +43,24 @@ import ContainerLogin from "../../components/Base/ContainerLogin";
// }));
const Login = () => {
// const classes = useStyles();
const [user, setUser] = React.useState({ email: "", password: "" });
const [showPassword, setShowPassword] = React.useState(false);
// const [user, setUser] = useState({ email: "", password: "" });
// const [showPassword, setShowPassword] = useState(false);
const { handleLogin } = React.useContext(AuthContext);
// const { handleLogin } = useContext(AuthContext);
const handleChangeInput = (e) => {
setUser({ ...user, [e.target.name]: e.target.value });
};
// const handleChangeInput = (e) => {
// setUser({ ...user, [e.target.name]: e.target.value });
// };
// const handlSubmit = (e) => {
// e.preventDefault();
// handleLogin(user);
// };
const handlSubmit = (e) => {
e.preventDefault();
handleLogin(user);
};
return (
// <Container component="main" maxWidth="xs">
// <CssBaseline />
// <div className={classes.paper}>
// <Avatar className={classes.avatar} style={{ backgroundColor: "#ec5114" }}>
// <PersonOutlineOutlined/>
// </Avatar>
// <Typography component="h1" variant="h5">
// {i18n.t("login.title")}
// </Typography>
// <form className={classes.form} noValidate onSubmit={handlSubmit}>
// <TextField
// variant="outlined"
// margin="normal"
// required
// fullWidth
// id="email"
// label={i18n.t("login.form.email")}
// name="email"
// value={user.email}
// onChange={handleChangeInput}
// autoComplete="email"
// autoFocus
// />
// <TextField
// variant="outlined"
// margin="normal"
// required
// fullWidth
// name="password"
// label={i18n.t("login.form.password")}
// id="password"
// value={user.password}
// onChange={handleChangeInput}
// autoComplete="current-password"
// type={showPassword ? 'text' : 'password'}
// InputProps={{
// endAdornment: (
// <InputAdornment position="end">
// <IconButton
// aria-label="toggle password visibility"
// onClick={() => setShowPassword((e) => !e)}
// >
// {showPassword ? <VisibilityOff /> : <Visibility />}
// </IconButton>
// </InputAdornment>
// )
// }}
// />
// <Button
// type="submit"
// fullWidth
// variant="contained"
// color="primary"
// className={classes.submit}
// >
// {i18n.t("login.buttons.submit")}
// </Button>
// <Grid container>
// <Grid item>
// <Link
// href="#"
// variant="body2"
// component={RouterLink}
// to="/signup"
// >
// {/* {i18n.t("login.buttons.register")} */}
// </Link>
// </Grid>
// </Grid>
// </form>
// </div>
// <Box mt={8}>{/* <Copyright /> */}</Box>
// </Container>
<ContainerLogin>
<h1>teste</h1>
<h2>teste</h2>
<p>Teste paragraph</p>
<VideoLogin />
<LoginForm handleChangeInput={handleChangeInput} handlSubmit={handlSubmit} user={user.email} password={user.password} />
</ContainerLogin>
);
};

44
frontend/src/style/GlobalStyle.jsx
View File

@ -9,6 +9,50 @@ import HelveticaHeavy from "../assets/fonts/Helvetica_Neue_LT_Pro-Heavy.otf";
import HelveticaBlack from "../assets/fonts/Helvetica_Neue_LT_Pro-Black.otf";
const GlobalStyled = createGlobalStyle`
//RESET
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
//FONTS
@font-face {