finished login
This commit is contained in:
Alex Santos
parent
c9f197db70
commit
25e254e9f7
@ -40,6 +40,8 @@ export default class MyDocument extends Document {
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<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=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>
|
||||
<body>
|
||||
<Main />
|
||||
|
||||
@ -1,47 +1,94 @@
|
||||
import React, { useState } from 'react'
|
||||
import {AiOutlineEyeInvisible, AiOutlineEye} from 'react-icons/ai';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
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() {
|
||||
|
||||
const [state, setstate]=useState(false);
|
||||
const toggleBtn = ()=> {
|
||||
setstate(prevState => !prevState);
|
||||
}
|
||||
const [values, setValues] = React.useState({
|
||||
amount: '',
|
||||
password: '',
|
||||
weight: '',
|
||||
weightRange: '',
|
||||
showPassword: false,
|
||||
});
|
||||
|
||||
const router = useRouter()
|
||||
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 (
|
||||
<LoginView auth={rota} >
|
||||
<Image src='/assets/marca1.svg' width={500} height={600}/>
|
||||
<section className="container">
|
||||
<Image src='/assets/marca1.svg' width={500} height={500} />
|
||||
<LoginContainer>
|
||||
<h1>Bem-Vindo</h1>
|
||||
<h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
|
||||
|
||||
<input type="text" placeholder='Login'/>
|
||||
<input className="password-field" type={state?"text":"password"} placeholder= "Senha" />
|
||||
<button className='btnInput' onClick={toggleBtn}>
|
||||
{state ? <AiOutlineEyeInvisible /> :
|
||||
<AiOutlineEye />
|
||||
<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>
|
||||
}
|
||||
</button>
|
||||
label="Password"
|
||||
/>
|
||||
</FormControl>
|
||||
<span>Esqueceu a senha ?</span>
|
||||
|
||||
<Link href='/dashboard' >
|
||||
<button className='button'>ENTRAR</button>
|
||||
<LoginButton title='ENTRAR' />
|
||||
</Link>
|
||||
|
||||
<fieldset>
|
||||
<legend>Ou</legend>
|
||||
<fieldset className="line">
|
||||
<legend className="text">Ou</legend>
|
||||
</fieldset>
|
||||
|
||||
<p>+55(41) 3012-5900
|
||||
<br /> www.energiasmart.com.br</p>
|
||||
<p>+55(41) 3012-5900<br/>www.energiasmart.com.br</p>
|
||||
|
||||
</section>
|
||||
</LoginContainer>
|
||||
</LoginView>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,19 +1,24 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
export const LoginButtonView = styled.button`
|
||||
width: 100%;
|
||||
height: 95px;
|
||||
width: 90%;
|
||||
height:100%;
|
||||
min-height: 4rem;
|
||||
|
||||
|
||||
|
||||
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-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
font-size: calc(99.98% + 10px);
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.03em;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
color: #FFFFFF;
|
||||
|
||||
`
|
||||
|
||||
@ -54,12 +54,12 @@ export default function Chart({ title }: ChartInterface) {
|
||||
{
|
||||
label: '2020',
|
||||
data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })),
|
||||
backgroundColor: 'rgba(53, 162, 235, 5)',
|
||||
backgroundColor: '#C2D5FB',
|
||||
},
|
||||
{
|
||||
label: '2021',
|
||||
data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })),
|
||||
backgroundColor: 'rgba(0, 81, 255, 1)',
|
||||
backgroundColor: '#255488',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
@ -1,38 +1,47 @@
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const LoginView = styled.main<{auth: string}>`
|
||||
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'};
|
||||
|
||||
.container{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
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) {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
background-color: #f9f9f9;
|
||||
|
||||
padding: 0;
|
||||
|
||||
@media (max-width: 1196px) {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.container {
|
||||
margin: 0;
|
||||
}
|
||||
align-items: center;
|
||||
|
||||
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{
|
||||
margin-bottom:5px;
|
||||
@ -44,62 +53,11 @@ export const LoginView = styled.main<{auth: string}>`
|
||||
font-size: 21px;
|
||||
margin-bottom: 3rem;
|
||||
color: #092C4C;
|
||||
}
|
||||
input{
|
||||
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;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.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 {
|
||||
.line {
|
||||
border-top: 0.7px solid #E1E1E1;
|
||||
border-bottom: none;
|
||||
border-left: none;
|
||||
@ -109,37 +67,31 @@ export const LoginView = styled.main<{auth: string}>`
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
.line .text {
|
||||
padding: 19px 56px;
|
||||
color: #ABB3BB;
|
||||
font-size: 14px;
|
||||
}
|
||||
.input-element-wrapper{
|
||||
span{
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.password-field{
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
|
||||
|
||||
}
|
||||
.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;
|
||||
align-self: flex-end;
|
||||
margin-right: 5%;
|
||||
justify-content: flex-end;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
p{
|
||||
color: #8B8B8B;
|
||||
text-align: center;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
@media (max-width: 1196px) {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user