Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • portalmec/portalmec-react
  • rfhferreira/cleaning-portal-mec-react
2 results
Show changes
Commits on Source (31)
Hide whitespace changes
Inline Side-by-side
Showing
with 1503 additions and 150 deletions
package-lock.json
View file @ f1162cd5
......@@ -2338,9 +2338,9 @@
"integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA=="
},
"@hapi/hoek": {
"version": "8.5.0",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz",
"integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw=="
"version": "8.5.1",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz",
"integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow=="
},
"@hapi/joi": {
"version": "15.1.1",
......@@ -12977,6 +12977,15 @@
"camelcase": "^5.0.0"
}
},
"react-input-mask": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
"integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
"requires": {
"invariant": "^2.2.4",
"warning": "^4.0.2"
}
},
"react-is": {
"version": "16.8.6",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
......@@ -15273,6 +15282,14 @@
"makeerror": "1.0.x"
}
},
"warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"requires": {
"loose-envify": "^1.0.0"
}
},
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
......
src/App.js
View file @ f1162cd5
......@@ -32,6 +32,8 @@ import TabResoursePub from './Pages/TabsHelp/TabResoursePub';
import TabResourseFind from './Pages/TabsHelp/TabResourseFind';
import TabNetPart from './Pages/TabsHelp/TabNetPart';
import TabManageAc from './Pages/TabsHelp/TabManageAc';
import PasswordRecoveryPage from './Pages/PasswordRecoveryPage.js'
import PageProfessor from './Pages/PageProfessor.js'
import ResourcePage from './Pages/ResourcePage';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import { Store } from './Store'
......@@ -39,6 +41,7 @@ import TermsPage from './Pages/TermsPage.js'
import PublicationPermissionsPage from './Pages/PublicationPermissionsPage.js'
import TabPlataformaMEC from './Pages/TabsHelp/TabPlataformaMEC';
import EditProfilePage from './Pages/EditProfilePage.js'
export default function App(){
// eslint-disable-next-line
......@@ -74,12 +77,13 @@ export default function App(){
<BrowserRouter>
<Header />
<div style={{backgroundImage: "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)", height:"5px"}}></div>
<link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
<Switch>
<Route path="/" exact={true} component={Home}/>
<Route path="/busca" component={Search} />
<Route path="/perfil-atualizacoes" component={UserPage} />
<Route path="/perfil" component={UserPage} />
<Route path="/editarperfil" component={EditProfilePage} />
<Route path="/recurso" component={ResourcePage}/>
<Route path="/termos-publicar-recurso" component={TermsPage}/>
<Route path="/permission" component={PublicationPermissionsPage}/>
{/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
......@@ -93,7 +97,8 @@ export default function App(){
<Route path="/participando-da-rede" component={TabNetPart}/>
<Route path="/gerenciando-conta" component={TabManageAc}/>
<Route path="/plataforma-mec" component={TabPlataformaMEC}/>
<Route path="/recuperar-senha" component={PasswordRecoveryPage}/>
<Route path='/professor' component={PageProfessor}/>
</Switch>
<EcFooter/>
<GNUAGPLfooter/>
......
src/Components/AreasSubPages.js
View file @ f1162cd5
......@@ -29,14 +29,17 @@ import { Carousel } from 'react-responsive-carousel';
import recursos from "../img/ilustra_recursos_digitais.png";
import materiais from "../img/ilustra_materiais.png";
import colecoes from "../img/ilustra_colecoes.png";
import Grid from '@material-ui/core/Grid';
const areaStyle={
paddingTop: "5px",
fontSize: "16px",
textAlign:"left",
backgroundColor: "inherit",
width: "700px",
width: "1000px",
margin: "auto",
padding: "20px",
minHeight: "150px"
minHeight: "190px"
}
class ReqResources extends Component{
......@@ -156,11 +159,19 @@ class SubPages extends Component{
<React.Fragment>
<div style={{backgroundColor: "#ff7f00"}}>
<Container style={areaStyle}>
<img src={recursos} alt="aba recursos" height="100" style={{float: "left"}}/>
<p>Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é,
a vídeos, animações e a outros recursos destinados à educação. São Recursos
de portais parceiros do MEC e de professores que, como você, atuam na
Educação Básica!</p>
<Grid container style={{display:"flex"}} spacing={5}>
<Grid item xs={3} >
<img src={recursos} alt="aba recursos" height="155" style={{float: "right"}}/>
</Grid>
<Grid item xs={9}>
<p style={{textAlign: "justify", color:"#fff"}}>
Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é,
a vídeos, animações e a outros recursos destinados à educação. São Recursos
de portais parceiros do MEC e de professores que, como você, atuam na
Educação Básica!
</p>
</Grid>
</Grid>
</Container>
</div>
<Container style={{padding:"20px"}}>
......@@ -180,7 +191,8 @@ class SubPages extends Component{
<React.Fragment>
<div style={{backgroundColor: "#e81f4f"}}>
<Container style={areaStyle}>
<img src={materiais} alt="aba materiais" height="100" style={{float: "left"}}/>
<img src={materiais} alt="aba materiais" height="165" style={{float: "right"}}/>
<p>Nesta área, você acessa livremente materiais completos de formação,
como cursos já oferecidos pelo MEC e seus parceiros. São conteúdos
elaborados por equipes multidisciplinares e de autoria de pesquisadores
......
src/Components/Checkbox.js
View file @ f1162cd5
......@@ -25,10 +25,9 @@ const StyledFormControlLabel = styled(FormControlLabel)`
.label {
font-size : 12px !important;
}
`
const StyledCheckbox = styled(Checkbox)`
color : #00bcd4 !important;
.MuiCheckbox-colorSecondary.Mui-checked {
color : #00bcd4 !important;
}
`
export default function LabeledCheckbox(props) {
......@@ -36,8 +35,7 @@ export default function LabeledCheckbox(props) {
return (
<StyledFormControlLabel
control={
<StyledCheckbox
disabled = {props.disabledCheckbox}
<Checkbox
value = {props.checked}
onChange = {props.handleChange}
/>
......
src/Components/ColaborarModal.js
View file @ f1162cd5
import React, {useContext} from 'react';
import React, {useContext, useState} from 'react';
import Modal from '@material-ui/core/Modal';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
......@@ -9,7 +9,7 @@ import CloseIcon from '@material-ui/icons/Close';
import LabeledCheckbox from "../Components/Checkbox.js"
const StyledDivContainer = styled.div`
background-color : rgb(255,255,255);;
background-color : rgb(255,255,255);
border-radius : 4px;
border-shadow : #000;
color : rgb(102,102,102);
......@@ -25,7 +25,7 @@ const StyledDivHeader = styled.div`
text-align : center;
display : flex;
justify-content : space-between;
padding : 10px 58px 0 58px;
padding : 10px 26px 0 26px;
color : #666;
font-size : 40px;
font-weight : 400;
......@@ -34,7 +34,7 @@ const StyledDivHeader = styled.div`
`
const StyledDivDialogContent = styled.div`
padding : 20px 30px;
padding : 20px 0;
`
const StyledButtonsDiv = styled.div`
......@@ -45,6 +45,7 @@ const StyledButtonsDiv = styled.div`
const StyledButton = styled(Button)`
background-color : #00acc1 !important;
width : 45%
`
const StyledH2 = styled.h2`
......@@ -77,6 +78,8 @@ const Styledspan = styled.span`
export default function ColaborarModal (props) {
const {state, dispatch} = useContext(Store)
const [checkbox, controlCheckbox] = useState(false)
const handleCheckbox = () => controlCheckbox(!checkbox)
return (
<StyledModal
......@@ -95,6 +98,7 @@ export default function ColaborarModal (props) {
<Fade in={props.open}>
<StyledDivContainer>
<StyledDivHeader>
<span style={{width:"32px"}}/>
<StyledH2>
Você é professor(a), da educação básica, e gostaria de colaborar com a Plataforma?
</StyledH2>
......@@ -111,7 +115,7 @@ export default function ColaborarModal (props) {
}}
>
<div style={{maxWidth:"350px", marginRight:"0", marginLeft:"auto", color:"#666"}}>
<p style={{textAlign:"start", fontSize:"15px", margin:"0 0 10"}}>
<p style={{textAlign:"justify", fontSize:"15px", margin:"0 0 10"}}>
Ao ser identificado como professor(a), você poderá
<span style={{color:"#00bcd4"}}> publicar e compartilhar recursos educacionais digitais </span>
na plataforma com toda a comunidade escolar do país.
......@@ -126,7 +130,7 @@ export default function ColaborarModal (props) {
</StyledButtonsDiv>
</div>
<div style={{display:"flex", alignItems:"flex-start"}}>
<LabeledCheckbox label={<Styledspan>Não perguntar novamente</Styledspan>} />
<LabeledCheckbox label={<Styledspan>Não perguntar novamente!</Styledspan>} checked={checkbox} handleChange={handleCheckbox}/>
</div>
</StyledDivContentInformation>
</StyledDivDialogContent>
......
src/Components/ComponentAlterarAvatar.js 0 → 100644
View file @ f1162cd5
/*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, {useContext,Component} from 'react';
import { Button } from '@material-ui/core';
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 {Store} from '../Store.js'
import axios from 'axios'
import {apiUrl} from '../env';
import CloseIcon from '@material-ui/icons/Close';
import Profile from '../img/default_profile0.png'
const ChangeAvatarDiv = styled.div`
color : rgba(255,255,255,.7);
background-color:rgba(0,0,0,.5);
position: absolute;
bottom: 0;
width: inherit;
text-align: center;
font-size: 18px;
padding-bottom: 5px;
font-weight: 400;
height: 30%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
`
const ModalDiv = styled.div`
background-color : #fff;
border-radius : 4px;
min-width : 560px;
color : #666;
display: flex;
flex-direction : column;
`
const StyledButtonConfirmar = styled(Button)`
background-color : #00acc1 !important;
color: #fff !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: 4px !important;
box-sizing: border-box !important;
user-select: none !important;
border: 0 !important;
padding: 0 6px !important;
margin: 6px 8px !important;
background: transparent !important;
background-color: transparent !important;
color: currentColor !important;
white-space: nowrap !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;
`
const ButtonCancelar = styled(Button)`
outline : none !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;
background:transparent !important;
color: currentColor !important;
white-space: nowrap !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;
`
const ButtonsDiv = styled.div`
display : flex;
justify-content:flex-end;
`
const AvatarCircleDiv = styled.div`
margin-bottom : 0;
border-radius : 50%;
height : 150px;
width : 150px;
position : relative;
overflow: hidden;
`
const DivFlowHolder =styled.div`
align-self : auto;
`
const DivAlterarFoto = styled.div`
display : flex;
margin-bottom : 30px;
flex-direction : row;
align-items : center;
justify-content :center;
`
const DialogDiv = styled.div`
padding : 20px 30px;
overflow : visible !important;
`
const HeaderDiv = styled.div`
display : flex;
flex-direction : row;
align-items : center;
align-content : center;
justify-content : center;
max-width : 100%;
`
const StyledH2 = styled.h2`
font-size : 26px;
font-weight : lighter;
margin-top : 20px;
margin-bottom : 10px;
font-family: inherit;
line-height: 1.1;
color: inherit;
`
const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
float : right !important;
margin-right : -8px !important;
background : transparent !important;
min-width: 0 !important;
width : 40px;
border-radius : 50%;
padding : 8px;
height : 40px;
margin : 0 6px;
`
export default function ComponentAlterarAvatar (props) {
return (
<ModalDiv style={{maxWidth:"500px", maxHeight:"500px"}}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<StyledH2>Editar Foto</StyledH2>
<StyledCloseModalButton onClick={props.handleClose}>
<CloseIcon/>
</StyledCloseModalButton>
</HeaderDiv>
<DialogDiv>
<div style={{marginTop:"0"}}>
<form>
<DivAlterarFoto>
<DivFlowHolder>
<AvatarCircleDiv>
{
props.userAvatar == '' || props.userAvatar == null ?
(
<img src={Profile} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
):
(
<img src={this.props.userAvatar} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
)
}
<input accept="image/*" id="icon-button-file"
type="file"
onChange={(e) => props.handleFile(e.target.files) }
style={{display:"none"}}/>
<label for="icon-button-file" style={{width:"inherit"}}>
<ChangeAvatarDiv >
<span>Alterar</span>
</ChangeAvatarDiv>
</label>
</AvatarCircleDiv>
</DivFlowHolder>
</DivAlterarFoto>
<ButtonsDiv>
<ButtonCancelar onClick={props.handleClose}><span>Cancelar</span></ButtonCancelar><StyledButtonConfirmar><span>Salvar Alterações</span></StyledButtonConfirmar>
</ButtonsDiv>
</form>
</div>
</DialogDiv>
</ModalDiv>
)
}
src/Components/FormInput.js
View file @ f1162cd5
......@@ -42,7 +42,7 @@ const useStyles = makeStyles(theme => ({
maxWidth: '100%',
fontSize : '15px',
fontWeight : 'lighter',
color : 'inherit',
color : '#00bcd4',
width : '100%',
},
}));
......@@ -52,7 +52,6 @@ export default function FormInput(props) {
return (
<StyledTextField
id="standard-basic"
label={props.placeholder}
......@@ -67,9 +66,14 @@ export default function FormInput(props) {
error = {props.error}
rowsMax = {props.rowsMax}
InputProps={{className: classes.input}}
required = {props.required}
error = {props.error}
helperText ={props.help}
style={{width:"100%"}}
multiline = {props.multi}
mask={props.mask}
multiline={props.multi}
rows={props.rows}
rowsMax={props.rowMax}
/>
);
}
src/Components/FormValidationFunction.js 0 → 100644
View file @ f1162cd5
import React from 'react'
//fieldName : form field name
//userInput : user input for a given field
//confirmation : optional password confirmation argument
export default function ValidateUserInput (fieldName, userInput, confirmation) {
let flag = false
switch(fieldName) {
case('username'):
if (userInput.length < 1) {
flag = true
}
break;
case('email'):
if(userInput.length < 7 || !(userInput.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i))) {
flag = true
}
break;
case('password'):
if (userInput.length < 8) {
flag = true
}
break;
case('confirmation'):
if (userInput !== confirmation) {
flag = true
}
break;
case('message'):
if(userInput.length === 0) {
flag = true
}
break;
case('aboutMe'):
if(userInput.length > 160) {
flag = true
}
break;
default:
break;
}
return flag
}
src/Components/Header.js
View file @ f1162cd5
......@@ -25,16 +25,32 @@ import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal'
import { Store } from '../Store';
import ColaborarModal from './ColaborarModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
//const StyledButton = styled(Button)`
// background : #ffa54c !important;
// boxShadow :none;
//`
function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export default function Header(props){
const { state, dispatch } = useContext(Store)
const [signUpOpen, setSignUp] = useState(false)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [modalColaborar, setModalColaborar] = useState(false)
const toggleSnackbar = (event, reason) => {
if (reason === 'clickaway') {
return;
}
handleSuccessfulLogin(false);
}
const handleSignUp = () => {
setSignUp(!signUpOpen)
......@@ -54,13 +70,18 @@ export default function Header(props){
return(
<>
<AcessibilityBar/>
<Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
anchorOrigin = {{ vertical:'top', horizontal:'middle' }}
>
<Alert severity="success" style={{backgroundColor:"#00acc1"}}>Você está conectado(a)!</Alert>
</Snackbar>
<MenuBar openSearchBar={handleClickSearch} openSignUp = {handleSignUp} openLogin = {handleLogin}/>
{ state.searchOpen &&
<SearchBar/>
}
<SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}/>
<LoginModal open={loginOpen} handleClose={handleLogin} openSignUp={handleSignUp}/>
{/*<ColaborarModal open={state.modalColaborarPlataformaOpen} handleClose={handleKyloren} />*/}
<LoginModal open={loginOpen} handleClose={handleLogin} openSignUp={handleSignUp} openSnackbar = {() => {handleSuccessfulLogin(true)}}/>
<ColaborarModal open={modalColaborar} handleClose={() => {setModalColaborar(!modalColaborar)}} />
</>
)
......
src/Components/IllegalContentModal.js
View file @ f1162cd5
......@@ -112,7 +112,7 @@ export default function IllegalContentModal (props) {
<Fade in={props.open}>
<StyledDivContainer >
<StyledDivContent>
<StyledH2>{state.loginInfo.username}!</StyledH2>
<StyledH2>{state.currentUser.username}!</StyledH2>
<div>
<StyledParagraph>Seu recurso não está de acordo com os termos</StyledParagraph>
</div>
......
src/Components/LoadingSpinner.js 0 → 100644
View file @ f1162cd5
import React from 'react';
import LoadingGif from '../img/loading_busca.gif'
const LoadingSpinner = (props) => (
<div style={{display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center"}}>
<img src={LoadingGif} />
<span style={{textTransform:"uppercase"}}>{props.text}</span>
</div>
);
export default LoadingSpinner;
src/Components/LoginContainer.js
View file @ f1162cd5
......@@ -24,6 +24,7 @@ import styled from 'styled-components'
import {device} from './device.js'
import LabeledCheckbox from './Checkbox.js'
import FormInput from "./FormInput.js"
import GoogleLogo from "../img/logo_google.svg"
//arrumar isso
const responseGoogle = (response) => {
......@@ -35,9 +36,9 @@ class LoginContainer extends Component {
super(props);
this.state = {
email : "",
senha : "",
checkboxChecked : true
email : localStorage.getItem("@portalmec/email") || "",
senha : localStorage.getItem("@portalmec/senha") ||"",
checkboxChecked : false
};
this.handleChecked = this.handleChecked.bind(this)
}
......@@ -54,8 +55,9 @@ class LoginContainer extends Component {
onSubmit = (e) => {
e.preventDefault();
const login = this.state
this.props.handleLoginInfo(this.state);
this.props.handleLoginInfo(login);
this.setState({
email: "",
......@@ -64,8 +66,11 @@ class LoginContainer extends Component {
}
handleChecked = (e) => {
const value = !this.state.checkboxChecked
console.log(this.state.checkboxChecked)
console.log(value)
this.setState({
checkboxChecked : !this.state.checkboxChecked
checkboxChecked :value
})
}
......@@ -73,15 +78,16 @@ class LoginContainer extends Component {
return (
<ContainerStyled >
<DialogHeaderStyled>
<span style={{width:"32px"}}/>
<H2Styled> Entrar
<StyledCloseModalButton onClick={this.props.handleClose}>
<CloseIcon/>
</StyledCloseModalButton>
</H2Styled>
<StyledCloseModalButton onClick={this.props.handleClose}>
<CloseIcon/>
</StyledCloseModalButton>
</DialogHeaderStyled>
<div style={{paddingTop: "20px"}}>
<div style={{marginTop:"0"}}>
<DialogContentDiv>
<SocialConnectDiv>
<StyledGoogleLoginButton
clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
......@@ -89,50 +95,54 @@ class LoginContainer extends Component {
onFailure={responseGoogle}
cookiePolicy={'single_host_origin'}
>
<span style={{textTransform:"none", fontSize:"13px"}}>Usando o Google</span>
<span style={{textTransform:"none", fontSize:"13px", color : "#666"}}>Usando o Google</span>
</StyledGoogleLoginButton>
</div>
</div>
<H3Styled>
<RightSideStrikedH3/>
<span style={{verticalAlign:"middle"}}>ou</span>
<LeftSideStrikedH3/>
</H3Styled>
<form ref="form" onSubmit={this.onSubmit}>
<FormInput
inputType={"text"}
name={"email"}
value={this.state.email}
placeholder={"E-mail *"}
handleChange={e => this.handleChange(e)}
/>
<br/>
<FormInput
inputType={"password"}
name={"senha"}
value={this.state.senha}
placeholder={"Senha *"}
handleChange={e => this.handleChange(e)}
/>
<br/>
<RememberRecover>
<LabeledCheckbox label={<StyledSpan>Lembrar-me</StyledSpan>} onchange={this.handleChecked}/>
<span style={{paddingTop:"15px"}}>Esqueceu a senha?<a href="recuperar-senha" style={{textAlign: "right", color:"#4cd0e1"}}>Clique aqui!</a></span>
</RememberRecover>
<ConfirmContainerStyled>
<StyledLoginButton onClick={e => this.onSubmit(e)} variant="contained">
<span style={{borderRadius:"3px", boxSizing:"border-box", fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}>ENTRAR</span>
</StyledLoginButton>
</ConfirmContainerStyled>
</form>
<DialogFooterStyled>
<span style={{textAlign:"center", fontSize: "14px", color:"rgb(102, 102, 102)"}}>Ainda não tem cadastro? <StyledAnchor href="" onClick={e => this.switchModal(e)}>CADASTRE-SE</StyledAnchor></span>
</DialogFooterStyled>
</SocialConnectDiv>
<H3Div>
<H3Styled>
<RightSideStrikedH3/>
<span style={{verticalAlign:"middle"}}>ou</span>
<LeftSideStrikedH3/>
</H3Styled>
</H3Div>
<form ref="form" onSubmit={this.onSubmit}>
<FormInput
inputType={"text"}
name={"email"}
value={this.state.email}
placeholder={"E-mail"}
handleChange={e => this.handleChange(e)}
required={true}
/>
<br/>
<FormInput
inputType={"password"}
name={"senha"}
value={this.state.senha}
placeholder={"Senha"}
handleChange={e => this.handleChange(e)}
required={true}
/>
<br/>
<RememberRecover>
<LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={this.handleChecked} />
<UserForgotTheirPasswordSpan>Esqueceu a senha? <a href="recuperar-senha" style={{textAlign: "right", color:"#4cd0e1"}}>Clique aqui!</a></UserForgotTheirPasswordSpan>
</RememberRecover>
<ConfirmContainerStyled>
<StyledLoginButton type="submit" variant="contained">
<span style={{borderRadius:"3px", boxSizing:"border-box", fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}>ENTRAR</span>
</StyledLoginButton>
</ConfirmContainerStyled>
</form>
<DialogFooterStyled>
<span style={{textAlign:"center", fontSize: "14px", color:"rgb(102, 102, 102)"}}>Ainda não tem cadastro? <StyledAnchor href="" onClick={e => this.switchModal(e)}>CADASTRE-SE</StyledAnchor></span>
</DialogFooterStyled>
</DialogContentDiv>
</ContainerStyled>
)
}
......@@ -144,24 +154,68 @@ const ContainerStyled = styled.div`
box-sizing : border-box;
background-color : white;
max-width : none;
display : flex;
flex-direction : column;
min-width : 440px;
min-height : 550px;
align : center;
padding-left : 25px;
padding-right:25px;
padding-bottom:10px;
padding : 10px;
border-radius: 4px;
line-height : 20px;
font-size : 14px;
@media ${device.mobileM} {
width : 100%;
height : 100%;
}
`
const DialogHeaderStyled = styled.div`
export const DialogHeaderStyled = styled.div`
text-align : center;
display : inline-flex;
display : flex;
flex-direction : row;
justify-content : space-between;
padding : 10px 26px 0 26px;
height : 64px;
`
const H2Styled = styled.h2`
align-self : center;
color : #666;
font-size : 26px;
font-weight : 100;
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
justify-content: space-between;
text-align: center;
letter-spacing: .005em;
`
export const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
float : right !important;
margin-right : -8px !important;
background : transparent !important;
min-width: 0 !important;
width : 40px;
`
export const DialogContentDiv = styled.div`
padding : 20px 30px;
overflow : visible !important;
`
export const SocialConnectDiv = styled.div`
margin-top : 0;
display : flex;
flex-direction : row;
`
export const StyledGoogleLoginButton = styled(GoogleLogin)`
background-color : #fff !important;
color : #666 !important;
border : 1px solid rgb(66, 133, 244);
box-shadow: 0 0 0 1px #4285f4 !important;
:hover {
background-color: #f4f4f4 !important;
}
`
const DialogFooterStyled = styled.div`
box-sizing : border-box;
......@@ -174,17 +228,6 @@ const DialogFooterStyled = styled.div`
line-height : 1.42857143
`
const H2Styled = styled.h2`
align-self : center;
color : #666;
font-size : 26px;
font-weight : 100;
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
justify-content: space-between;
padding: 10px 26px 0 26px;
text-align: center;
letter-spacing: .005em;
`
const RightSideStrikedH3 = styled.div`
display : inline-block;
......@@ -203,13 +246,10 @@ const LeftSideStrikedH3 = styled.div`
margin-left : 5px;
width : 45%;
`
const StyledGoogleLoginButton = styled(GoogleLogin)`
background-color: fff;
border : 1px solid rgb(66, 133, 244);
box-shadow: 0 0 0 1px #4285f4 !important;
:hover {
background-color: #f4f4f4 !important;
}
export const H3Div = styled.div`
margin-top : 0;
margin-bottom : 10px;
`
const H3Styled = styled.h3`
......@@ -224,24 +264,14 @@ 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;
`
const StyledLoginButton = styled(Button)`
background-color: #00bcd4 !important;
background-color : #00bcd4 !important;
box-shadow : none !important;
outline: none !important;
border : 0 !important;
......@@ -259,15 +289,32 @@ const StyledLoginButton = styled(Button)`
}
`
const RememberRecover = styled.div`
display : flex;
justify-content : space-between;
font-size: 12px;
font-weight : 400;
margin-bottom: 16px;
`
const StyledLabel = styled.div`
box-sizing : border-box;
position : relative;
vertical-align : middle !important;
color : #666;
`
const UserForgotTheirPasswordSpan = styled.span`
margin-top : 1em;
font-size : 12px;
font-weight : 400;
text-align : right;
color : #666;
`
const StyledSpan = styled.span`
font-size: 12px;
font-weight: 400;
padding-top: 2px;
font-size : 12px;
font-weight : 400;
padding-top : 2px;
`
src/Components/LoginContainerFunction.js 0 → 100644
View file @ f1162cd5
/*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 LabeledCheckbox from './Checkbox.js'
import FormInput from "./FormInput.js"
import GoogleLogo from "../img/logo_google.svg"
import ValidateUserInput from '../Components/FormValidationFunction.js'
export default function LoginContainer (props) {
const [formEmail, setEmail] = useState(
{
key : false,
value : localStorage.getItem("@portalmec/email") || "",
}
)
const [formSenha, setSenha] = useState(
{
key : false,
value : localStorage.getItem("@portalmec/senha") ||""
}
)
const [checkboxControl, setCheckbox] = useState(false)
const switchModal = (e) => {
e.preventDefault()
props.handleClose()
props.openSignUp()
}
const handleChange = (e, type) => {
const userInput = e.target.value
const flag = ValidateUserInput(type, userInput)
if(type === 'email') {
setEmail({...formEmail,
key : flag,
value : userInput
})
console.log(formEmail)
}
else if(type === 'password') {
setSenha({...formSenha,
key : flag,
value : userInput
})
console.log(formSenha)
}
}
const limpaCamposForm = () => {
setEmail({...formEmail,
key : false,
value : ''
});
setSenha({...formSenha,
key : false,
value : ''
})
}
const onSubmit = (e) => {
e.preventDefault()
const login = {email : formEmail.value, senha : formSenha.value, checkbox : checkboxControl}
if (!(formEmail.key || formSenha.key)) {
props.handleLoginInfo(login)
limpaCamposForm()
}
}
//arrumar isso
const responseGoogle = (response) => {
console.log(response);
}
return (
<div>
<ContainerStyled >
<DialogHeaderStyled>
<span style={{width:"32px"}}/>
<H2Styled> Entrar
</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", color : "#666"}}>Usando o Google</span>
</StyledGoogleLoginButton>
</SocialConnectDiv>
<H3Div>
<H3Styled>
<RightSideStrikedH3/>
<span style={{verticalAlign:"middle"}}>ou</span>
<LeftSideStrikedH3/>
</H3Styled>
</H3Div>
<form onSubmit={e => onSubmit(e)}>
<FormInput
inputType={"text"}
name={"email"}
value={formEmail.value}
placeholder={"E-mail"}
handleChange={e => handleChange(e, 'email')}
required={true}
error = {formEmail.key}
help = {formEmail.key ? ( formEmail.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}
placeholder={"Senha"}
handleChange={e => handleChange(e, 'password')}
required={true}
error = {formSenha.key}
help = {formSenha.key ? (formSenha.value.length == 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""}
/>
<br/>
<RememberRecover>
<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>
<ConfirmContainerStyled>
<StyledLoginButton type="submit" variant="contained">
<span style={{borderRadius:"3px", boxSizing:"border-box", fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}>ENTRAR</span>
</StyledLoginButton>
</ConfirmContainerStyled>
</form>
<DialogFooterStyled>
<span style={{textAlign:"center", fontSize: "14px", color:"rgb(102, 102, 102)"}}>Ainda não tem cadastro? <StyledAnchor href="" onClick={e => switchModal(e)}>CADASTRE-SE</StyledAnchor></span>
</DialogFooterStyled>
</DialogContentDiv>
</ContainerStyled>
</div>
)
}
const ContainerStyled = styled.div`
box-sizing : border-box;
background-color : white;
max-width : none;
display : flex;
flex-direction : column;
min-width : 440px;
align : center;
padding : 10px;
border-radius: 4px;
line-height : 20px;
font-size : 14px;
@media ${device.mobileM} {
width : 100%;
height : 100%;
}
`
export const DialogHeaderStyled = styled.div`
text-align : center;
display : flex;
flex-direction : row;
justify-content : space-between;
padding : 10px 26px 0 26px;
height : 64px;
`
const H2Styled = styled.h2`
align-self : center;
color : #666;
font-size : 26px;
font-weight : 100;
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
justify-content: space-between;
text-align: center;
letter-spacing: .005em;
`
export const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
float : right !important;
margin-right : -8px !important;
background : transparent !important;
min-width: 0 !important;
width : 40px;
`
export const DialogContentDiv = styled.div`
padding : 20px 30px;
overflow : visible !important;
`
export const SocialConnectDiv = styled.div`
margin-top : 0;
display : flex;
flex-direction : row;
`
export const StyledGoogleLoginButton = styled(GoogleLogin)`
background-color : #fff !important;
color : #666 !important;
border : 1px solid rgb(66, 133, 244);
box-shadow: 0 0 0 1px #4285f4 !important;
:hover {
background-color: #f4f4f4 !important;
}
`
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
`
export const RightSideStrikedH3 = styled.div`
display : inline-block;
border-bottom: 1px dotted #666;
vertical-align : middle;
font-weight : 500;
margin-right : 5px;
width : 45%;
`
export const LeftSideStrikedH3 = styled.div`
display : inline-block;
border-bottom: 1px dotted #666;
vertical-align : middle;
font-weight : 500;
margin-left : 5px;
width : 45%;
`
export const H3Div = styled.div`
margin-top : 0;
margin-bottom : 10px;
`
const H3Styled = styled.h3`
overflow : hidden;
text-align : center;
font-size : 14px;
color : #666;
margin : 10px 0;
`
const StyledAnchor = styled.a`
color : #00bcd4;
text-decoration : none;
`
const ConfirmContainerStyled = styled.div`
display : flex;
margin-top : 10px;
align-items : center;
justify-content : center;
`
const StyledLoginButton = styled(Button)`
background-color : #00bcd4 !important;
box-shadow : none !important;
outline: none !important;
border : 0 !important;
overflow : hidden !important;
width : 35% !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 RememberRecover = styled.div`
display : flex;
justify-content : space-between;
font-size: 12px;
font-weight : 400;
`
const StyledLabel = styled.div`
box-sizing : border-box;
position : relative;
vertical-align : middle !important;
color : #666;
`
const UserForgotTheirPasswordSpan = styled.span`
margin-top : 1em;
font-size : 12px;
font-weight : 400;
text-align : right;
color : #666;
`
const StyledSpan = styled.span`
font-size : 12px;
font-weight : 400;
padding-top : 2px;
`
src/Components/LoginModal.js
View file @ f1162cd5
......@@ -16,16 +16,18 @@ 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, {useContext} from 'react';
import React, {useContext, useState} from 'react';
import { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import Zoom from '@material-ui/core/Fade';
import styled from 'styled-components'
import LoginContainer from './LoginContainer'
import LoginContainer from './LoginContainerFunction.js'
import {Store} from '../Store.js'
import axios from 'axios'
import {apiUrl} from '../env';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
const StyledLogin = styled(Modal)`
margin : 0 !important;
......@@ -38,9 +40,22 @@ const StyledLogin = styled(Modal)`
border-radius : 4px;
`
export function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export default function LoginModal (props){
const {state, dispatch} = useContext(Store)
const {state, dispatch} = useContext(Store)
const [snackbarOpened, handleSnackbar] = useState(false)
const handleCloseSnackbar = (event, reason) => {
if (reason === 'clickaway') {
return;
}
handleSnackbar(false);
}
const handleLoginInfo = (login) => {
axios.post(`${apiUrl}/auth/sign_in`,
......@@ -53,22 +68,41 @@ export default function LoginModal (props){
type: "USER_LOGGED_IN",
userLoggedIn: !state.userIsLoggedIn,
login: {
username : login.username,
email : login.email,
id : response.data.id,
username : response.data.data.name,
email : response.data.data.email,
accessToken : response.headers['access-token'],
client : response.headers.client
clientToken : response.headers.client,
userAvatar : response.data.data.avatar_file_name,
userCover : response.data.data.cover_file_name
}
}
)
props.handleClose();
props.openSnackbar();
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
sessionStorage.setItem('@portalmec/clientToken', response.headers.client,)
sessionStorage.setItem('@portalmec/id', response.data.data.id)
sessionStorage.setItem('@portalmec/username', response.data.data.name)
sessionStorage.setItem('@portalmec/uid', response.data.data.uid)
if (login.checkboxChecked) {
localStorage.setItem('@portalmec/email', login.email)
localStorage.setItem('@portalmec/senha', login.senha) //MUDAR ISSO ASAP
}
}, (error) => {
console.log(':()')
{handleSnackbar(true)}
}
)
}
return (
<>
<Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
anchorOrigin = {{ vertical:'top', horizontal:'right' }}
>
<Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
</Snackbar>
<StyledLogin
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
......@@ -82,12 +116,13 @@ export default function LoginModal (props){
timeout: 500,
}}
>
<Fade in={props.open}>
<Zoom in={props.open} style={{ transitionDelay :"0.2ms"}}>
<LoginContainer handleClose={props.handleClose}
openSignUp={props.openSignUp}
handleLoginInfo={handleLoginInfo}
/>
</Fade>
</Zoom>
</StyledLogin>
</>
)
}
src/Components/MenuBar.js
View file @ f1162cd5
......@@ -29,7 +29,7 @@ import styled from 'styled-components'
import { Store } from '../Store';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import Notifications from "./Notifications.js"
import CustomizedMenus from './MenuList'
import MenuList from './MenuList'
const ContainerStyled = styled(Container)`
*{ text-decoration: none }
......@@ -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;
......@@ -107,13 +109,12 @@ export default function MenuBar(props){
]
const minhaArea = [
{ name: "Perfil e Atividades", href: "/perfil/atualizacoes"},
{ name: "Recursos Publicados", href: "/perfil/recursos-publicados"},
{ name: "Favoritos", href: "/perfil/favoritos"},
{ name: "Coleções", href: "/perfil/colecoes"},
{ name: "Rede", href: "/perfil/rede"},
{ name: "Configurações", href: "/perfil/cofiguracoes/editarperfil"},
{ name: "Sair", href:"/"}
{ name: "Perfil e Atividades", href: "/perfil", value : '0'},
{ name: "Recursos Publicados", href: "/perfil", value : '1'},
{ name: "Favoritos", href: "/perfil", value : '2'},
{ name: "Coleções", href: "/perfil", value : '3'},
{ name: "Rede", href: "/perfil", value : '4'},
{ name: "Configurações", href: "/editarperfil"},
]
return(
......@@ -137,7 +138,7 @@ export default function MenuBar(props){
<Link to="/termos-publicar-recurso">
<ButtonPublicarRecurso>
<CloudUploadIcon style={{color:"white", marginLeft : "0"}}/>
<span style={{color : "#fff", textAlign: "center", alignSelf : "center", fontWeight:"100"}} >
<span style={{color : "#fff", textAlign: "center", alignSelf : "center", fontWeight:"500"}} >
PUBLICAR RECURSO
</span>
......@@ -149,7 +150,7 @@ export default function MenuBar(props){
<Notifications/>
</div>
<CustomizedMenus items={minhaArea}/>
<MenuList items={minhaArea}/>
</>
]
......
src/Components/MenuList.js
View file @ f1162cd5
......@@ -42,7 +42,7 @@ const OverrideButton = styled(Button)`
text-transform : none !important;
`
export default function CustomizedMenus(props) {
export default function MenuList(props) {
const [anchorEl, setAnchorEl] = React.useState(null);
const { state, dispatch } = useContext(Store)
......@@ -55,6 +55,7 @@ export default function CustomizedMenus(props) {
};
const handleLogout = () => {
localStorage.removeItem('@portalmec/username');
dispatch( {
type: 'USER_LOGGED_OUT',
userLoggedOut: !state.userIsLoggedIn,
......@@ -77,7 +78,16 @@ export default function CustomizedMenus(props) {
onMouseEnter={handleClick}
>
<img src={Profile} alt={''} style={{maxWidth:"50px", maxHeight:"50px", borderRadius:"25px"}}/>
{
state.currentUser.userAvatar == '' || state.currentUser.userAvatar == null ?
(
<img src={Profile} alt={''} style={{maxWidth:"50px", maxHeight:"50px", borderRadius:"25px"}}/>
):
(
<img src={state.currentUser.userAvatar} alt={''}/>
)
}
<span style={{fontFamily:"inherit", fontWeight:"400", color:"#666"}}>Minha Área </span> <KeyboardArrowDownIcon/>
</OverrideButton>
......@@ -98,10 +108,13 @@ export default function CustomizedMenus(props) {
{
props.items.map((item)=>
<Link key={item.name} to={item.href} style={{textDecoration:"none"}} ><MenuItem style= {{fontSize:"14px", padding:"5px 20px", color:"#666"}}>{item.name}</MenuItem></Link>
)
<Link to={{
pathname : item.href,
state : item.value
}} style={{textDecoration:"none"}} ><MenuItem style= {{fontSize:"14px", padding:"5px 20px", color:"#666"}}>{item.name}</MenuItem></Link>
)
}
<Button onClick={handleLogout} style={{layout:"row", layoutAlign:"space-between-center"}}> <MenuItem>Sair<ExitToAppIcon style={{align:"right"}}/></MenuItem></Button>
<StyledButtonSair onClick={handleLogout}> <StyledMenuItem disableGutters={true}>Sair<StyledExitToAppIcon/></StyledMenuItem></StyledButtonSair>
</Menu>
......@@ -109,6 +122,37 @@ export default function CustomizedMenus(props) {
);
}
const StyledButtonSair = styled(Button)`
height : 31px;
width : 177px;
layout : row;
.listItem {
width : 100% !important;
display : flex !important;
justify-content: space-between !important;
font-size : 14px !important;
color : #a5a5a5 !important;
padding : 5px 20px !important;
}
`
const StyledExitToAppIcon = styled(ExitToAppIcon) `
fontSize : 24px;
color : rgb(162,165,165);
align : right;
display : flex;
justify-content : flex-end;
`
const StyledMenuItem = styled(MenuItem)`
display : flex !important;
justify-content: space-between !important;
width : 100% !important;
font-size : 14px !important;
color : #a5a5a5 !important;
padding : 5px 20px !important;
`
//import React from 'react';
//import Button from '@material-ui/core/Button';
//import ClickAwayListener from '@material-ui/core/ClickAwayListener';
......
src/Components/ModalAlterarAvatar.js 0 → 100644
View file @ f1162cd5
/*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, {useContext, useState} from 'react';
import { Button } from '@material-ui/core';
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 {Store} from '../Store.js'
import axios from 'axios'
import {apiUrl} from '../env';
import CloseIcon from '@material-ui/icons/Close';
import Profile from '../img/default_profile0.png'
import ComponentAlterarAvatar from './ComponentAlterarAvatar.js'
const StyledModal = styled(Modal)`
display : flex;
align-items: center;
justify-content : center;
text-align : center;
padding : 10px !important;
`
export default function ModarAlterarAvatar (props){
const {state, dispatch} = useContext(Store)
const [avatarFile, setFile] = useState('')
const handleLoginInfo = (login) => {
axios.post(`${apiUrl}`,
{
}
).then( (response) => {
dispatch ({
}, (error) => {
}
)
})
}
const handleFile = (selectorFiles : FileList) => {
console.log(selectorFiles)
{/*setFile()*/}
}
return (
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
animation={true}
centered={true}
onClose={props.handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
<ComponentAlterarAvatar
userAvatar={state.currentUser.userAvatar}
handleFile={handleFile}
handleClose={props.handleClose}
/>
</Fade>
</StyledModal>
)
}
src/Components/PageProfessorComponents/ModalConfirmarProfessor.js 0 → 100644
View file @ f1162cd5
/*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, {useContext, useState} from 'react';
import { Button } from '@material-ui/core';
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 axios from 'axios'
import {apiUrl} from '../../env';
import CloseIcon from '@material-ui/icons/Close';
const StyledModal = styled(Modal)`
display : flex;
align-items: center;
justify-content : center;
text-align : center;
padding : 10px !important;
`
export default function ModalConfirmarProfessor (props){
return (
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
animation={true}
centered={true}
onClose={props.handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
<>
<ConfirmarProfessorComponent>
<HeaderDiv>
<span style={{width:"32px"}}/>
<h2>Confirme os Dados</h2>
<Button style={{marginRight:"-8px", color:"000"}} onClick={props.handleClose}>
<CloseIcon style={{color:"#666", cursor:"pointer", verticalAlign:"middle"}}/>
</Button>
</HeaderDiv>
<DialogContentDiv>
<ContainerCentralized>
<p><strong>Município - UF:</strong> {props.info.school_uf.name} - {props.info.school_city} </p>
<p><strong>Escola:</strong> {props.info.school_name}</p>
<p><strong>Telefone da Escola:</strong> {props.info.school_phone}</p>
<p><strong>Seu CPF:</strong> {props.info.teacher_cpf}</p>
<ButtonsDiv>
<ConfirmButton onClick ={props.confirmar}>CONFIRMAR</ConfirmButton>
<CancelButton onClick = {props.cancelar}>CANCELAR</CancelButton>
</ButtonsDiv>
</ContainerCentralized>
</DialogContentDiv>
</ConfirmarProfessorComponent>
</>
</Fade>
</StyledModal>
)
}
const CancelButton = styled(Button)`
width : 140px !important;
color :#666 !important;
font-family : Roboto,sans-serif !important;
font-size : 14px !important;
font-weight : 500 !important;
height : 36px !important;
border-radius : 3px !important;
padding-left : 16px !important;
padding-right : 16px !important;
outline : none !important;
margin : 6px 8px !important;
display : inline-block !important;
`
const ConfirmButton = styled(Button)`
width : 140px !important;
background-color : #00bcd4 !important;
color : #fff !important;
font-family : Roboto,sans-serif !important;
font-size : 14px !important;
font-weight : 500 !important;
height : 36px !important;
border-radius : 3px !important;
padding-left : 32px !important;
padding-right : 32px !important;
outline : none !important;
margin : 6px 8px !important;
display : inline-block !important;
`
const ButtonsDiv = styled.div`
margin-top : 10px;
display : flex;
justify-content : center;
`
const ContainerCentralized = styled.div`
margin-top : 0;
padding-left : 20px;
padding-right : 30px;
p {
font-size : 15px;
margin : 0 0 10px;
}
`
const DialogContentDiv = styled.div`
padding : 20px 30px;
overflow : visible !important;
`
const HeaderDiv = styled.div`
text-align : center;
display : flex;
justify-content : space-between;
padding : 10px 26px 0 26px;
h2 {
font-size : 26px;
font-weight : lighter;
}
`
const ConfirmarProfessorComponent = styled.div`
min-width : 600px;
border-radius : 4px;
background-color : #fff;
color : #666;
`
src/Components/PageProfessorComponents/PartOne.js 0 → 100644
View file @ f1162cd5
import React, {useState, useEffect} from 'react'
import styled from 'styled-components'
import Stepper from '../Stepper.js'
import FormControl from '@material-ui/core/FormControl';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import InputLabel from '@material-ui/core/InputLabel';
import {Button} from '@material-ui/core'
import {RightSideStrikedH3, LeftSideStrikedH3} from '../LoginContainerFunction.js'
import Divider from '@material-ui/core/Divider';
import {ButtonCancelar} from './PartTwo.js'
import axios from 'axios'
import FormInput from '../FormInput.js'
export function sortDict (dict) {
const newDict = dict.sort((a, b) => (a.name) > (b.name) ? 1 : -1)
return newDict
}
const extractUFInfo = (ufs, name) => {
var id = ''
var abbreviation = ''
for (const obj of ufs) {
if (obj.name === name) {
id = obj.id
abbreviation = obj.abbreviation
}
}
return {id : id, abbreviation : abbreviation}
}
export default function PartOne (props) {
//stores initial get response (list of states, sorted alphabetically)
const [ufList, setStates] = useState([])
const handleSetStates = (states) => {setStates(states)}
//stores list of cities sorted alphabetically
const [municipioList, setMunicipioList] = useState([])
const handleSetMunicipioList = (municipios) => setMunicipioList(municipios)
//stores a single user selected state
const [uf, setUF] = useState(
{
algumFoiEscolhido : false,
name : '',
abbreviation : ''
}
)
//stores a single user selected city
const [municipio, setMunicipio] = useState(
{
algumFoiEscolhido : false,
name : ''
}
)
const [codigoINEP, setCodigoINEP] = useState(
{
codigoInvalido : false,
value : ''
}
)
const handleCodigoINEP = (event) => {
const code = event.target.value
setCodigoINEP({...codigoINEP,
codigoInvalido : false,
value : code
})
}
const validateINEP = () => {
const code = codigoINEP.value
axios.get(('https://www.simcaq.c3sl.ufpr.br/api/v1/portal_mec_inep?filter=school_cod:' + code)
).then( (response) => {
handleSubmit()
}, (error) => {
setCodigoINEP({...codigoINEP,
codigoInvalido : true,
value : ''
})
}
)
}
const handleSubmit = () => {
console.log('handle submit : ', uf.abbreviation, uf.name, municipio.name, codigoINEP.value)
props.handleBuscar(uf.abbreviation, uf.name, municipio.name, codigoINEP.value)
}
//on render component, call simcaq api and update ufList
useEffect ( () => {
axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/state')
).then( (response) => {
console.log(sortDict(response.data.result))
handleSetStates(sortDict(response.data.result))
},
(error) => console.log('erro acessando api do simcaq (estados)'))
}, [])
const handleChooseUF = (event) => {
const ufName = event.target.value
const {id, abbreviation} = extractUFInfo(ufList, ufName)
console.log(id, abbreviation)
setUF({...uf,
algumFoiEscolhido : true,
name : ufName,
abbreviation : abbreviation
}
)
axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/city?filter=state:' + id)
).then( (response) => {
handleSetMunicipioList(sortDict(response.data.result))
}, (error) => console.log('erro acessando api do simcaq (cidades)')
)
}
const handleChooseCity = (event) => {
const cityName = event.target.value
console.log(cityName)
setMunicipio({...municipio,
algumFoiEscolhido : true,
name : cityName
}
)
}
return (
<>
{/*/////////////////////////////PRIMEIRA PARTE/////////////////////////////*/}
<Content>
<h4>Vamos localizar o seu cadastro:</h4>
<Stepper items={props.stepper}/>
<form style={{textAlign:"start"}}>
<p>Localize pelo menos uma escola em que você tenha atuado até maio de 2017:</p>
<FormControl required style={{width:"100%"}}>
<InputLabel>Procure sua UF</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={uf.name}
onChange={handleChooseUF}
>
{
ufList.map( (ufs)=>
<MenuItem key={ufs.name} value={ufs.name}>{ufs.name}</MenuItem>
)
}
</Select>
</FormControl>
<FormControl required style={{width:"100%"}}>
<InputLabel>Busque o seu município</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={municipio.name}
onChange={handleChooseCity}
>
{
municipioList.map( (cidades)=>
<MenuItem key={cidades.name} value={cidades.name}>{cidades.name}</MenuItem>
)
}
</Select>
</FormControl>
<div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
<ButtonConfirmar
onClick={ ( (uf.algumFoiEscolhido && municipio.algumFoiEscolhido) ? handleSubmit : '')}
>
BUSCAR</ButtonConfirmar>
</div>
</form>
</Content>
<div style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
<LeftSideStrikedH3/><StrikeSpan>ou</StrikeSpan><RightSideStrikedH3/>
</div>
{/*/////////////////////////////SEGUNDA PARTE/////////////////////////////*/}
<Content>
<form>
<p>Localize pelo código INEP da escola:</p>
<FormControl required style={{width:"100%"}}>
<FormInput
inputType={'text'}
name={'Código INEP'}
value={codigoINEP.value}
handleChange = {handleCodigoINEP}
placeholder={'Código INEP'}
required={true}
error={codigoINEP.codigoInvalido}
help={codigoINEP.codigoInvalido ? <span style={{color:'red'}}>código INEP inválido</span> : ''}
>
</FormInput>
</FormControl>
<div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
<ButtonConfirmar
onClick={validateINEP}
>
BUSCAR</ButtonConfirmar>
</div>
</form>
</Content>
<Divider/>
<ButtonsArea>
<ButtonCancelar onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
</ButtonsArea>
</>
)
}
export const ButtonsArea = styled.div`
display : flex;
justify-content : center;
padding-top : 10px;
padding-bottom : 10px;
`
const StrikeSpan = styled.span`
vertical-align : middle;
font-family : Roboto;
font-style : normal;
font-weight : 500;
line-height : 22px;
font-size : 15px;
letter-spacing : .01em;
`
export const Content = styled.div`
margin-top : 16px;
margin-bottom : 16px;
margin-right : 10%;
margin-left : 10%;
h4 {
text-align : center;
magin-bottom : 20px;
font-family: Roboto;
font-style : normal;
font-weight : 300;
line-height : 36px;
font-size : 26px;
margin-top : 20px;
}
p {
font-family : Roboto;
font-style : normal;
font-weight : 400;
line-height : 21px;
font-size : 15px;
}
`
export const ButtonConfirmar = styled(Button)`
background-color : #00bcd4 !important;
color : #fff !important;
font-family : 'Roboto',sans-serif !important;
font-size : 14px !important;
font-weight : bolder !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;
`