Skip to content
Snippets Groups Projects
Commit 0b9cf195 authored by Lucas Eduardo Schoenfelder's avatar Lucas Eduardo Schoenfelder
Browse files

login e signup transformados em funcao; primeira aba de editar perfil quase pronta

parent 7d22f4b9
No related branches found
No related tags found
4 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!18Branch do lucas,!17Branch do lucas
Hide whitespace changes
Inline Side-by-side
src/Components/LoginContainerFunction.js
+ 13
− 12
View file @ 0b9cf195
...@@ -48,7 +48,7 @@ export default function LoginContainer (props) { ...@@ -48,7 +48,7 @@ export default function LoginContainer (props) {
{ {
dict : { dict : {
key : false, key : false,
value : "" value : localStorage.getItem("@portalmec/email") || "",
} }
} }
) )
...@@ -57,12 +57,12 @@ export default function LoginContainer (props) { ...@@ -57,12 +57,12 @@ export default function LoginContainer (props) {
{ {
dict : { dict : {
key : false, key : false,
value : "" value : localStorage.getItem("@portalmec/senha") ||""
} }
} }
) )
const [checkboxControl, handleCheckbox] = useState(false) const [checkboxControl, setCheckbox] = useState(false)
const switchModal = (e) => { const switchModal = (e) => {
e.preventDefault() e.preventDefault()
...@@ -104,16 +104,13 @@ export default function LoginContainer (props) { ...@@ -104,16 +104,13 @@ export default function LoginContainer (props) {
const onSubmit = (e) => { const onSubmit = (e) => {
e.preventDefault() e.preventDefault()
const login = {email : formEmail.dict.value, senha : formSenha.dict.value} const login = {email : formEmail.dict.value, senha : formSenha.dict.value, checkbox : checkboxControl}
if (!(formEmail.dict.key && formSenha.dict.key)) { if (!(formEmail.dict.key || formSenha.dict.key)) {
props.handleLoginInfo(login) props.handleLoginInfo(login)
limpaCamposForm() limpaCamposForm()
} }
{/*if (checkboxControl) {
props.lembrarMe()
}*/}
} }
//arrumar isso //arrumar isso
...@@ -153,28 +150,32 @@ export default function LoginContainer (props) { ...@@ -153,28 +150,32 @@ export default function LoginContainer (props) {
</H3Styled> </H3Styled>
</H3Div> </H3Div>
<form ref="form" onSubmit={e => onSubmit(e)}> <form onSubmit={e => onSubmit(e)}>
<FormInput <FormInput
inputType={"text"} inputType={"text"}
name={"email"} name={"email"}
value={formEmail} value={formEmail.dict.value}
placeholder={"E-mail"} placeholder={"E-mail"}
handleChange={e => handleChange(e, 'email')} handleChange={e => handleChange(e, 'email')}
required={true} required={true}
error = {formEmail.dict.key}
help = {formEmail.dict.key ? ( formEmail.dict.value.length == 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br/>Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
/> />
<br/> <br/>
<FormInput <FormInput
inputType={"password"} inputType={"password"}
name={"senha"} name={"senha"}
value={formSenha} value={formSenha.dict.value}
placeholder={"Senha"} placeholder={"Senha"}
handleChange={e => handleChange(e, 'senha')} handleChange={e => handleChange(e, 'senha')}
required={true} required={true}
error = {formSenha.dict.key}
help = {formSenha.dict.key ? "Faltou digitar sua senha." : ""}
/> />
<br/> <br/>
<RememberRecover> <RememberRecover>
<LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} onchange={() => {handleCheckbox(!checkboxControl)}} disabledCheckbox={checkboxControl}/> <LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)}/>
<UserForgotTheirPasswordSpan>Esqueceu a senha? <a href="recuperar-senha" style={{textAlign: "right", color:"#4cd0e1"}}>Clique aqui!</a></UserForgotTheirPasswordSpan> <UserForgotTheirPasswordSpan>Esqueceu a senha? <a href="recuperar-senha" style={{textAlign: "right", color:"#4cd0e1"}}>Clique aqui!</a></UserForgotTheirPasswordSpan>
</RememberRecover> </RememberRecover>
......
src/Components/LoginModal.js
+ 1
− 1
View file @ 0b9cf195
...@@ -22,7 +22,7 @@ import Modal from '@material-ui/core/Modal'; ...@@ -22,7 +22,7 @@ import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop'; import Backdrop from '@material-ui/core/Backdrop';
import Zoom from '@material-ui/core/Fade'; import Zoom from '@material-ui/core/Fade';
import styled from 'styled-components' import styled from 'styled-components'
import LoginContainer from './LoginContainer.js' import LoginContainer from './LoginContainerFunction.js'
import {Store} from '../Store.js' import {Store} from '../Store.js'
import axios from 'axios' import axios from 'axios'
import {apiUrl} from '../env'; import {apiUrl} from '../env';
......
src/Components/MenuBar.js
+ 2
− 0
View file @ 0b9cf195
...@@ -51,6 +51,7 @@ const ButtonPublicarRecurso = styled(Button)` ...@@ -51,6 +51,7 @@ const ButtonPublicarRecurso = styled(Button)`
border : 1px transparent solid; border : 1px transparent solid;
background-color : #ff7f00 !important; background-color : #ff7f00 !important;
align-content : center; align-content : center;
font-weight : 500 !important;
text-transform: capitalize !important; text-transform: capitalize !important;
font-stretch : expanded; font-stretch : expanded;
max-width: 200 !important; max-width: 200 !important;
...@@ -81,6 +82,7 @@ const Left = styled.span ` ...@@ -81,6 +82,7 @@ const Left = styled.span `
` `
const ButtonPubRecursoStyled = styled(Button)` const ButtonPubRecursoStyled = styled(Button)`
font-weight : 500 !important;
border : 1.5px #666 solid !important; border : 1.5px #666 solid !important;
color: #666; color: #666;
box-shadow: none; box-shadow: none;
......
src/Components/SignUpContainerFunction.js 0 → 100644
+ 364
− 0
View file @ 0b9cf195
/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana
This file is part of Plataforma Integrada MEC.
Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {useState} from "react";
import GoogleLogin from 'react-google-login'
import { Button } from '@material-ui/core';
//import FacebookLogin from 'react-facebook-login';
import CloseIcon from '@material-ui/icons/Close';
import styled from 'styled-components'
import {device} from './device.js'
import FormInput from "./FormInput.js"
import {StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, StyledGoogleLoginButton, H3Div} from './LoginContainer.js'
var Recaptcha = require('react-recaptcha')
var callback = function () {
console.log('Done!!!!');
};
function validateUserInput(type, input) {
let flag = false
if (type === 'nome') {
if(input.length < 1) {
flag = true
}
}
else if (type === 'email') {
if(input.split("").filter(x => x === "@").length !== 1) {
flag = true
}
}
else if (type === 'senha') {
if(input.length < 1) {
flag = true
}
}
return flag
}
export default function SignUpContainer (props) {
const [formNome, setNome] = useState(
{
dict : {
key : false,
value : "",
}
}
)
const [formEmail, setEmail] = useState(
{
dict : {
key : false,
value : "",
}
}
)
const [formSenha, setSenha] = useState(
{
dict : {
key : false,
value : ""
}
}
)
const handleChange = (e, type) => {
const userInput = e.target.value
const flag = validateUserInput(type, userInput)
if (type === 'nome') {
setNome({...formNome, dict : {
key : flag,
value : userInput
}})
console.log(formNome)
}
else if(type === 'email') {
setEmail({...formEmail, dict : {
key : flag,
value : userInput
}})
console.log(formEmail)
}
else if(type === 'senha') {
setSenha({...formSenha, dict : {
key : flag,
value : userInput
}})
console.log(formSenha)
}
}
const limpaCamposForm = () => {
setNome({...formNome, dict : {
key : false,
value : ''
}})
setEmail({...formEmail, dict : {
key : false,
value : ''
}});
setSenha({...formSenha, dict : {
key : false,
value : ''
}})
}
const responseGoogle = (response) => {
console.log(response);
}
const switchModal = (e) => {
e.preventDefault()
props.handleClose()
props.openLogin()
};
const onSubmit = (e) => {
e.preventDefault();
const newLogin = {name : formNome.dict.value, email : formEmail.dict.value, password : formSenha.dict.value}
if (!(formNome.dict.key || formEmail.dict.key || formSenha.dict.key)) {
props.handleLoginInfo(newLogin)
limpaCamposForm()
}
}
return (
<ContainerStyled >
<DialogHeaderStyled>
<span style={{width:"32px"}}/>
<H2Styled> Cadastrar-se
</H2Styled>
<StyledCloseModalButton onClick={props.handleClose} >
<CloseIcon />
</StyledCloseModalButton>
</DialogHeaderStyled>
<DialogContentDiv>
<SocialConnectDiv>
<StyledGoogleLoginButton
clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={'single_host_origin'}
>
<span style={{textTransform:"none", fontSize:"13px"}}>Usando o Google</span>
</StyledGoogleLoginButton>
</SocialConnectDiv>
<H3Div>
<H3Styled>
<RightSideStrikedH3/>
<span style={{verticalAlign:"middle"}}>ou</span>
<LeftSideStrikedH3/>
</H3Styled>
</H3Div>
<form onSubmit={onSubmit}>
<FormInput
inputType={"text"}
name={"name"}
value={formNome.dict.value}
placeholder={"Nome Completo"}
handleChange={e => handleChange(e, 'nome')}
required={true}
error={formNome.dict.key}
/>
<br/>
<FormInput
inputType={"text"}
name={"email"}
value={formEmail.dict.value}
placeholder={"E-mail"}
handleChange={e => handleChange(e, 'email')}
required={true}
error={formEmail.dict.key}
help = {formEmail.dict.key ? (formEmail.dict.value.length == 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br/>Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
/>
<br/>
<FormInput
inputType={"password"}
name={"password"}
value={formSenha.dict.value}
placeholder={"Senha"}
handleChange={e => handleChange(e, 'senha')}
required={true}
error={formSenha.dict.key}
help={formSenha.dict.key ? "Faltou definir uma senha." : ""}
/>
<br/>
<Recaptcha
sitekey="6LcyFr8UAAAAAOd0Po6rmZC1D_nYik8nLCAkNKsc"
size="normal"
render="explicit"
onloadCallback={callback}
/>
<ConfirmContainerStyled>
<StyledSignUpButton type="submit" variant="contained">
<span
style={{paddingLeft:"16px", paddingRight:"16px", borderRadius:"3px", boxSizing:"border-box",
fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}
>
CADASTRAR
</span>
</StyledSignUpButton>
</ConfirmContainerStyled>
</form>
<TermosDeUsoStyled>
<p>Ao se cadastrar, você está aceitando os Termos de Uso e de Política
de Privacidade. <a href="./">Ler Termos</a>.</p>
</TermosDeUsoStyled>
<DialogFooterStyled>
<span style={{textAlign:"center", fontSize: "14px"}}>Já possui cadastro? <StyledAnchor href="" onClick={e => switchModal(e)}>ENTRAR</StyledAnchor></span>
</DialogFooterStyled>
</DialogContentDiv>
</ContainerStyled>
)
}
const ContainerStyled = styled.div`
box-sizing : border-box;
background-color : white;
max-width : none;
align : center;
display : flex;
flex-direction : column;
min-width : 450px;
max-height : none;
position : relative;
padding : 10px;
@media ${device.mobileM} {
width : 100%;
height : 100%;
}
`
const DialogFooterStyled = styled.div`
box-sizing : border-box;
font-family : 'Roboto', sans serif;
margin : 20px -20px;
padding-top : 20px;
border-top : 1px #e5e5e5 solid;
justify-content : center;
text-align : center;
line-height : 1.42857143
`
const TermosDeUsoStyled = styled.div`
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color : #666;
font-size : 13px;
margin : 0 0 10px;
max-width : 350px;
margin-top : 10px;
text-align : start;
`
const H2Styled = styled.h2`
align-self : center;
color : #666;
font-size : 26px;
font-weight : lighter;
justify-content: space-between;
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
text-align: center;
letter-spacing: .005em;
`
const H3Styled = styled.h3`
overflow : hidden;
text-align : center;
font-size : 14px;
color : #666;
margin : 10px 0;
`
const RightSideStrikedH3 = styled.div`
display : inline-block;
border-bottom: 1px dotted #666;
vertical-align : middle;
font-weight : 500;
margin-right : 5px;
width : 45%;
`
const LeftSideStrikedH3 = styled.div`
display : inline-block;
border-bottom: 1px dotted #666;
vertical-align : middle;
font-weight : 500;
margin-left : 5px;
width : 45%;
`
const StyledAnchor = styled.a`
color : #00bcd4;
text-decoration : none;
`
//const StyledCloseModalButton = styled(Button)`
// display : inline-block;
// position : relative;
// float : right !important;
// margin-right : -8px;
// background : transparent;
// min-width: 0 !important;
// width : 40px;
//`
const ConfirmContainerStyled = styled.div`
display : flex;
margin-top : 10px;
align-items : center;
justify-content : center;
box-sizing : border-box;
font-size : 13px;
`
const StyledSignUpButton = styled(Button)`
background-color: #00bcd4 !important;
box-shadow : none !important;
outline: none !important;
border : 0 !important;
overflow : hidden !important;
width : 50% !important;
display : inline-block !important;
font-family : 'Roboto', sans serif !important;
font-size: 14px !important;
height : 36px !important;
align-items : center !important;
border-radius: 3px !important;
align-self : 50% !important;
:hover {
background-color : #00acc1 !important;
}
`
const StyledRecaptcha = styled(Recaptcha)`
display : flex !important;
justify-content : center !important;
`
src/Components/SignUpModal.js
+ 1
− 1
View file @ 0b9cf195
...@@ -22,7 +22,7 @@ import Modal from '@material-ui/core/Modal'; ...@@ -22,7 +22,7 @@ import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop'; import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade'; import Fade from '@material-ui/core/Fade';
import styled from 'styled-components' import styled from 'styled-components'
import SignUpContainer from './SignUpContainer.js' import SignUpContainer from './SignUpContainerFunction.js'
import {Store} from '../Store.js' import {Store} from '../Store.js'
import axios from 'axios' import axios from 'axios'
import {apiUrl} from '../env'; import {apiUrl} from '../env';
......
src/Components/TabPanels/TabPanelEditarPerfil.js
+ 226
− 1
View file @ 0b9cf195
import React, {useContext} from 'react' import React, {useContext, useState} from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { Store } from '../../Store.js'; import { Store } from '../../Store.js';
import {Link} from 'react-router-dom'
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import PhotoCamera from '@material-ui/icons/PhotoCamera'; import PhotoCamera from '@material-ui/icons/PhotoCamera';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@material-ui/core/Tooltip';
import FormInput from "../FormInput.js"
function validateUserInput(type, input) {
let flag = false
if (type === 'nome') {
if(input.length < 1) {
flag = true
}
}
else if (type === 'aboutMe') {
if(input.length > 160) {
flag = true
}
}
return flag
}
export default function TabPanelEditarPerfil (props) { export default function TabPanelEditarPerfil (props) {
const {state, dispatch} = useContext(Store) const {state, dispatch} = useContext(Store)
const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
const [formNome, setNome] = useState({
dict : {
key : false,
value : ""
}
})
const [formAboutMe, setAboutMe] = useState({
dict : {
key : false,
value : "",
}
})
const handleHoverAlterarFoto = () => {
handleAlterarFoto(!hoverAlterarFoto)
}
const updateCover = (selectorFiles : FileList) => { const updateCover = (selectorFiles : FileList) => {
console.log(selectorFiles) console.log(selectorFiles)
console.log(selectorFiles[0].name) console.log(selectorFiles[0].name)
} }
const handleChange = (e, type) => {
const userInput = e.target.value
const flag = validateUserInput(type, userInput)
if(type === 'nome') {
setNome({...formNome, dict : {
key : flag,
value : userInput
}})
console.log(formNome)
}
else if (type === 'aboutMe') {
setAboutMe({...formAboutMe, dict : {
key : flag,
value : userInput,
}})
console.log(formAboutMe)
}
}
const limpaCamposForm = () => {
setNome({...formNome, dict: {
key : false,
value : ''
}})
setAboutMe({...formAboutMe, dict: {
key : false,
value : ''
}})
}
const handleSubmit = (e) => {
e.preventDefault()
const info = {nome : formNome.dict.value, aboutMe : formAboutMe.dict.value}
const flagNome = formNome.dict.key
const flagAboutMe = formAboutMe.dict.key
if (!(flagNome || flagAboutMe)) {
console.log(info)
limpaCamposForm()
}
}
return ( return (
<ContainerDIv> <ContainerDIv>
<h1 style={{fontSize:"30px", fontWeight:"300", marginTop:"0", marginBottom:"10px"}}>Editar Perfil </h1> <h1 style={{fontSize:"30px", fontWeight:"300", marginTop:"0", marginBottom:"10px"}}>Editar Perfil </h1>
...@@ -31,13 +113,156 @@ export default function TabPanelEditarPerfil (props) { ...@@ -31,13 +113,156 @@ export default function TabPanelEditarPerfil (props) {
</Tooltip> </Tooltip>
</label> </label>
</div> </div>
<ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
<img src={state.currentUser.userAvatar} alt = "user avatar" style={{border:"0", verticalAlign:"middle"}}/>
<ChangeAvatarDiv style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
<span>Alterar Foto</span>
</ChangeAvatarDiv>
</ProfileAvatarDiv>
</HeaderContainer> </HeaderContainer>
<br/>
<br/>
<br/>
<br/>
</div>
<div style={{paddingTop:"90px"}}>
<div style={{display:"flex", flexDirection:"row"}}>
<form onSubmit={e => handleSubmit(e)}>
<FormInput
inputType={"text"}
name={"Nome Completo"}
value={formNome.dict.value}
placeholder={"Nome Completo"}
handleChange={e => handleChange(e, 'nome')}
required={true}
error={formNome.dict.key}
/>
<FormInput
inputType={"text"}
name={"Sobre Mim"}
value={formAboutMe.dict.value}
multi = {true}
rows="3"
rowsMax = "3"
error={formAboutMe.dict.key}
placeholder={"Sobre Mim"}
handleChange={e => handleChange(e, 'aboutMe')}
required={false}
help = {formAboutMe.dict.value.length + '/160'}
/>
</form>
</div>
<ButtonsDiv>
<Link to="perfil" ><ButtonCancelar ><span>CANCELAR</span></ButtonCancelar></Link>
<ButtonConfirmar onClick={e => handleSubmit(e)}><span>SALVAR ALTERAÇÕES</span></ButtonConfirmar>
</ButtonsDiv>
</div> </div>
</ContentDiv> </ContentDiv>
</ContainerDIv> </ContainerDIv>
) )
} }
const ButtonConfirmar = styled(Button)`
background-color : #00bcd4 !important;
color : #fff !important;
font-family : 'Roboto',sans-serif !important;
font-size : 14px !important;
font-weight : 500 !important;
padding-left : 16px !important;
padding-right : 16px !important;
outline : none !important;
margin : 6px 8px !important;
white-space : nowrap !important;
text-transform : uppercase !important;
font-weight : bold !important;
font-size : 14px !important;
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
text-decoration : none !important;
overflow : hidden !important;
display : inline-block !important;
position : relative !important;
cursor : pointer !important;
min-height : 36px !important;
min-width : 88px !important;
line-height : 36px !important;
vertical-align : middle !important;
align-items : center !important;
text-align : center !important;
border-radius : 3px !important;
box-sizing : border-box !important;
border : 0 !important;
`
const ButtonCancelar = styled(Button)`
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : bold !important;
border-radius : 3px !important;
outline : none !important;
text-transform : uppercase !important;
font-weight : 500 !important;
font-size : 14px !important;
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
text-decoration : none !important;
overflow : hidden !important;
display : inline-block !important;
position : relative !important;
cursor : pointer !important;
min-height : 36px !important;
min-width : 88px !important;
line-height : 36px !important;
vertical-align : middle !important;
align-items : center !important;
text-align : center !important;
border-radius : 3px !important;
box-sizing : border-box !important;
user-select : none !important;
border : 0 !important;
padding : 0 6px !important;
margin : 6px 8px !important;
:hover{
background-color : #f1f1f1 !important;
}
`
const ButtonsDiv = styled.div`
text-align : right;
margin-top : 80px;
`
const ChangeAvatarDiv = styled.div`
height : 40px;
position: absolute;
width : 100%;
bottom : 0;
display : flex;
background-color : #000;
color : #fff;
justify-content : center;
`
const ProfileAvatarDiv = styled.div`
bottom : -10px;
left : 120px !important;
border-radius : 100%;
position : absolute;
width : 100px !important;
height : 100px !important;
overflow : hidden;
border : 8px solid #fff;
outline : 0;
cursor : pointer;
z-index : 10;
background-color : #fff !important;
`
const HeaderContainer = styled.div` const HeaderContainer = styled.div`
background-color : #afeeee; background-color : #afeeee;
position : relative; position : relative;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment