Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

finished login

Browse Source
This commit is contained in:
Alex Santos 2022-05-11 16:27:18 -03:00
parent c9f197db70
commit 25e254e9f7
5 changed files with 139 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/_document.tsx
View File

@ -40,6 +40,8 @@ export default class MyDocument extends Document {
<link rel="preconnect" href="https://fonts.googleapis.com"/> <link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='true' /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='true' />
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&family=Lobster&family=Poppins:ital,wght@0,500;0,600;0,800;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet" />
</Head> </Head>
<body> <body>
<Main /> <Main />

89
pages/index.tsx
View File

@ -1,47 +1,94 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import {AiOutlineEyeInvisible, AiOutlineEye} from 'react-icons/ai';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { LoginView} from '../styles/layouts/Login/LoginView';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import InputAdornment from '@mui/material/InputAdornment';
import LoginButton from '../src/components/buttons/loginButton/LoginButton';
import FormControl from '@mui/material/FormControl';
import IconButton from '@mui/material/IconButton';
import TextField from '@mui/material/TextField';
import {AiOutlineEyeInvisible, AiOutlineEye} from 'react-icons/ai';
import { LoginView, LoginContainer} from '../styles/layouts/Login/LoginView';
export default function Home() { export default function Home() {
const [state, setstate]=useState(false); const [state, setstate]=useState(false);
const toggleBtn = ()=> { const toggleBtn = ()=> {
setstate(prevState => !prevState); setstate(prevState => !prevState);
} }
const [values, setValues] = React.useState({
amount: '',
password: '',
weight: '',
weightRange: '',
showPassword: false,
});
const router = useRouter() const router = useRouter()
const rota = router.pathname const rota = router.pathname
const handleChange = (prop) => (event) => {
setValues({ ...values, [prop]: event.target.value });
};
const handleClickShowPassword = () => {
setValues({
...values,
showPassword: !values.showPassword,
});
};
const handleMouseDownPassword = (event) => {
event.preventDefault();
};
return ( return (
<LoginView auth={rota} > <LoginView auth={rota} >
<Image src='/assets/marca1.svg' width={500} height={600}/> <Image src='/assets/marca1.svg' width={500} height={500} />
<section className="container"> <LoginContainer>
<h1>Bem-Vindo</h1> <h1>Bem-Vindo</h1>
<h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2> <h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }}label="Login" variant="outlined" />
<FormControl sx={{ m: 1, width: '90%' }} variant="outlined">
<InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
<OutlinedInput
id="outlined-adornment-password"
type={values.showPassword ? 'text' : 'password'}
value={values.password}
onChange={handleChange('password')}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{values.showPassword ? <AiOutlineEye /> : <AiOutlineEyeInvisible />}
</IconButton>
</InputAdornment>
}
label="Password"
/>
</FormControl>
<span>Esqueceu a senha ?</span>
<input type="text" placeholder='Login'/>
<input className="password-field" type={state?"text":"password"} placeholder= "Senha" />
<button className='btnInput' onClick={toggleBtn}>
{state ? <AiOutlineEyeInvisible /> :
<AiOutlineEye />
}
</button>
<span>Esqueceu a senha ?</span>
<Link href='/dashboard' > <Link href='/dashboard' >
<button className='button'>ENTRAR</button> <LoginButton title='ENTRAR' />
</Link> </Link>
<fieldset> <fieldset className="line">
<legend>Ou</legend> <legend className="text">Ou</legend>
</fieldset> </fieldset>
<p>+55(41) 3012-5900 <p>+55(41) 3012-5900<br/>www.energiasmart.com.br</p>
<br /> www.energiasmart.com.br</p>
</section> </LoginContainer>
</LoginView> </LoginView>
) )
} }

17
src/components/buttons/loginButton/LoginButtonView.ts
View File

@ -1,19 +1,24 @@
import styled from 'styled-components' import styled from 'styled-components'
export const LoginButtonView = styled.button` export const LoginButtonView = styled.button`
width: 100%; width: 90%;
height: 95px; height:100%;
min-height: 4rem;
border-radius: 8px; border-radius: 8px;
background: linear-gradient(88.75deg, #254F7F 0.18%, #888888 99.28); background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(37,79,127,1) 35%, rgba(136,136,136,1) 100%);
font-family: 'Nunito Sans'; font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: calc(99.98% + 10px);
line-height: 44px; line-height: 44px;
text-align: center; text-align: center;
letter-spacing: 0.03em; border: none;
cursor: pointer;
color: #FFFFFF; color: #FFFFFF;
` `

4
src/components/graph/Chart.tsx
View File

@ -54,12 +54,12 @@ export default function Chart({ title }: ChartInterface) {
{ {
label: '2020', label: '2020',
data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })), data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })),
backgroundColor: 'rgba(53, 162, 235, 5)', backgroundColor: '#C2D5FB',
}, },
{ {
label: '2021', label: '2021',
data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })), data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })),
backgroundColor: 'rgba(0, 81, 255, 1)', backgroundColor: '#255488',
}, },
], ],
}) })

160
styles/layouts/Login/LoginView.ts
View File

@ -1,38 +1,47 @@
import styled from 'styled-components'; import styled from 'styled-components';
export const LoginView = styled.main<{auth: string}>` export const LoginView = styled.main<{auth: string}>`
display: flex; display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
width: 100%;
min-height: fit-content;
height: 100vh;
background-color: #f9f9f9;
padding: 0;
overflow: hidden;
display: ${props => props.auth == '/'? null : 'none'}; display: ${props => props.auth == '/'? null : 'none'};
justify-content: flex-end;
align-items: center;
.container{ width: 100%;
display: flex; height: 100vh;
align-items: center;
background-color: #f9f9f9;
padding: 0;
@media (max-width: 1196px) {
flex-direction: column; flex-direction: column;
background-color: #FFFFFF;
height: 33rem;
text-align: center;
border-radius: 4px;
width: 100%;
max-width: 34rem;
margin-left: 13rem;
}
@media screen and (max-width: 1008px) {
justify-content: center; justify-content: center;
.container { align-items: center;
margin: 0;
} height: 100%;
padding: 20px;
} }
`;
export const LoginContainer = styled.section`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 40%;
margin-left: 60px;
/* padding: 0 0 px 0; */
border-radius: 10px;
background-color: #FFF;
h1{ h1{
margin-bottom:5px; margin-bottom:5px;
@ -44,62 +53,11 @@ export const LoginView = styled.main<{auth: string}>`
font-size: 21px; font-size: 21px;
margin-bottom: 3rem; margin-bottom: 3rem;
color: #092C4C; color: #092C4C;
} font-weight: 300;
input{ text-align: center;
font-size: 1rem;
width: 90%;
height: 18rem;
border-radius: 5px;
margin-bottom: 10px;
border-style: none;
border: solid #D0D0D0 1px;
padding: 9px 20px;
}
input::placeholder {
color: #ABB3BB;
font-size: 12px;
padding: 10px;
}
input:hover
{
border: 1px solid #254F7F;
}
.IconButton{
width: 10px;
} }
.line {
.button{
width: 90%;
height: 24rem;
background-image: linear-gradient(to right, #254F7F 10%, #888888 100%);
color: white;
font-size: 15px;
border-radius: 5px;
border: 0;
margin-top: 2.5rem;
cursor: pointer;
}
span {
font-size: 12px;
color: #254F7F;
margin-left: 23rem;
cursor: pointer;
}
p {
color:#8B8B8B;
font-size: 12px;
margin-top: 3px;
}
fieldset {
border-top: 0.7px solid #E1E1E1; border-top: 0.7px solid #E1E1E1;
border-bottom: none; border-bottom: none;
border-left: none; border-left: none;
@ -109,37 +67,31 @@ export const LoginView = styled.main<{auth: string}>`
width: 90%; width: 90%;
} }
fieldset legend { .line .text {
padding: 19px 56px; padding: 19px 56px;
color: #ABB3BB; color: #ABB3BB;
font-size: 14px; font-size: 14px;
} }
.input-element-wrapper{ span{
display:flex; display: flex;
margin-top: 5px; align-self: flex-end;
margin-right: 5%;
justify-content: flex-end;
cursor: pointer;
}
p{
color: #8B8B8B;
text-align: center;
margin-top: 1px;
} }
.password-field{ @media (max-width: 1196px) {
padding: 0.5rem 1rem; flex-direction: column;
font-size: 1rem; justify-content: center;
align-items: center;
width: 100%;
margin: 0;
} }
.btnInput{
color: #ABB3BB;
font-size: 20px;
background-color: transparent;
border: none;
display: flex;
position: absolute;
justify-content: center;
height: 64px;
margin-left: 26rem;
margin-top: 16rem;
cursor: pointer;
}
`; `;