diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index c55da4507389e9b53083a5ab09ef594b92ce886f..aae88a65bbcfb175bacac2748510cdd7d8741b92 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -48,7 +48,7 @@ export default function LoginContainer (props) {
{
dict : {
key : false,
- value : ""
+ value : localStorage.getItem("@portalmec/email") || "",
}
}
)
@@ -57,12 +57,12 @@ export default function LoginContainer (props) {
{
dict : {
key : false,
- value : ""
+ value : localStorage.getItem("@portalmec/senha") ||""
}
}
)
- const [checkboxControl, handleCheckbox] = useState(false)
+ const [checkboxControl, setCheckbox] = useState(false)
const switchModal = (e) => {
e.preventDefault()
@@ -104,16 +104,13 @@ export default function LoginContainer (props) {
const onSubmit = (e) => {
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)
limpaCamposForm()
}
- {/*if (checkboxControl) {
- props.lembrarMe()
- }*/}
}
//arrumar isso
@@ -153,28 +150,32 @@ export default function LoginContainer (props) {
</H3Styled>
</H3Div>
- <form ref="form" onSubmit={e => onSubmit(e)}>
+ <form onSubmit={e => onSubmit(e)}>
<FormInput
inputType={"text"}
name={"email"}
- value={formEmail}
+ 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={"senha"}
- value={formSenha}
+ value={formSenha.dict.value}
placeholder={"Senha"}
handleChange={e => handleChange(e, 'senha')}
required={true}
+ error = {formSenha.dict.key}
+ help = {formSenha.dict.key ? "Faltou digitar sua senha." : ""}
/>
<br/>
<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>
</RememberRecover>
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index 3b0482fd647207cd6bb133d2b22c79487087925d..90601b6459a4f622aa9d91e29ec81e75763b0be8 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.js
@@ -22,7 +22,7 @@ import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Zoom from '@material-ui/core/Fade';
import styled from 'styled-components'
-import LoginContainer from './LoginContainer.js'
+import LoginContainer from './LoginContainerFunction.js'
import {Store} from '../Store.js'
import axios from 'axios'
import {apiUrl} from '../env';
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 6ea7dc37bede18111c57957fb5210db42eabb85a..0b13e96acbdafe9eb5c71b72c082f93d42133e98 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -51,6 +51,7 @@ const ButtonPublicarRecurso = styled(Button)`
border : 1px transparent solid;
background-color : #ff7f00 !important;
align-content : center;
+ font-weight : 500 !important;
text-transform: capitalize !important;
font-stretch : expanded;
max-width: 200 !important;
@@ -81,6 +82,7 @@ const Left = styled.span `
`
const ButtonPubRecursoStyled = styled(Button)`
+ font-weight : 500 !important;
border : 1.5px #666 solid !important;
color: #666;
box-shadow: none;
diff --git a/src/Components/SignUpContainerFunction.js b/src/Components/SignUpContainerFunction.js
new file mode 100644
index 0000000000000000000000000000000000000000..23e63006373da066a010ab31f71c88a249a0fb6b
--- /dev/null
+++ b/src/Components/SignUpContainerFunction.js
@@ -0,0 +1,364 @@
+/*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;
+`
diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js
index 49386ce7845097df7c023c79ccbefea2197d90ca..a04c9420701da16cc97f9e678121f18b460abd8e 100644
--- a/src/Components/SignUpModal.js
+++ b/src/Components/SignUpModal.js
@@ -22,7 +22,7 @@ import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
-import SignUpContainer from './SignUpContainer.js'
+import SignUpContainer from './SignUpContainerFunction.js'
import {Store} from '../Store.js'
import axios from 'axios'
import {apiUrl} from '../env';
diff --git a/src/Components/TabPanels/TabPanelEditarPerfil.js b/src/Components/TabPanels/TabPanelEditarPerfil.js
index dc90dc092553f362523a045052f04c812ab971c4..e2503a7252962bc381be94d6a0c25fd94d4ac411 100644
--- a/src/Components/TabPanels/TabPanelEditarPerfil.js
+++ b/src/Components/TabPanels/TabPanelEditarPerfil.js
@@ -1,19 +1,101 @@
-import React, {useContext} from 'react'
+import React, {useContext, useState} from 'react'
import styled from 'styled-components'
import { Store } from '../../Store.js';
+import {Link} from 'react-router-dom'
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import PhotoCamera from '@material-ui/icons/PhotoCamera';
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) {
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) => {
console.log(selectorFiles)
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 (
<ContainerDIv>
<h1 style={{fontSize:"30px", fontWeight:"300", marginTop:"0", marginBottom:"10px"}}>Editar Perfil </h1>
@@ -31,13 +113,156 @@ export default function TabPanelEditarPerfil (props) {
</Tooltip>
</label>
</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>
+ <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>
</ContentDiv>
</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`
background-color : #afeeee;
position : relative;