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
Hide whitespace changes
Inline Side-by-side
Showing
with 1717 additions and 227 deletions
src/Components/HelpCenter/TabsPlataformaMEC/Which.js
View file @ d47d2fa6
......@@ -16,36 +16,35 @@ 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, { Component, useState, useEffect } from 'react';
import styled from 'styled-components';
import React from "react";
import styled from "styled-components";
const parcas = [
{parceiro: "- Portal do Profesor"},
{parceiro:"- Domínio Público;"},
{parceiro: "- Banco internacional de objetos educacionais;"},
{parceiro:"- TV Escola;"}
]
{ parceiro: "- Portal do Profesor" },
{ parceiro: "- Domínio Público;" },
{ parceiro: "- Banco internacional de objetos educacionais;" },
{ parceiro: "- TV Escola;" }
];
export default function Which(props) {
return(
return (
<Card>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
<div style={{ marginBottom: "9px" }}>
<span>{props.title}</span>
</div>
<p>
A plataforma integra os Recursos Educacionais Digitais dos principais portais abertos. Conheça alguns deles:
A plataforma integra os Recursos Educacionais Digitais dos principais
portais abertos. Conheça alguns deles:
</p>
<ul>
{parcas.map((item)=>
{parcas.map(item => (
<li>{item.parceiro}</li>
)}
))}
</ul>
</Card>
);
}
......@@ -53,7 +52,7 @@ export default function Which(props) {
const Card = styled.div`
margin-bottom: 5px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
padding: 30px;
color: #666;
span {
......@@ -61,8 +60,6 @@ const Card = styled.div`
font-weight: bold;
}
ul {
padding-left: 0 !important;
margin-top: 0;
......@@ -79,7 +76,4 @@ const Card = styled.div`
margin: 0 0 10px;
font-size: 15px;
}
`
\ No newline at end of file
`;
src/Components/IllegalContentModal.js
View file @ d47d2fa6
......@@ -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 @ d47d2fa6
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 @ d47d2fa6
......@@ -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 @ d47d2fa6
/*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 @ d47d2fa6
......@@ -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 @ d47d2fa6
......@@ -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 @ d47d2fa6
......@@ -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 @ d47d2fa6
/*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 @ d47d2fa6
/*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 @ d47d2fa6
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;
`
src/Components/PageProfessorComponents/PartThree.js 0 → 100644
View file @ d47d2fa6
import React, {useState} from 'react'
import {Content, ButtonsArea} from './PartOne.js'
import {ButtonCancelar, ButtonGrey} from './PartTwo.js'
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Stepper from '../Stepper.js'
import FormInput from '../FormInput.js'
import styled from 'styled-components'
import {Button} from '@material-ui/core'
export default function PartThree (props) {
const [phoneNumber, setPhoneNumber] = useState(
{
flagInvalid : false,
number : ''
}
)
const handleChangePhoneNumber = (event) => {
const input = event.target.value.replace(/\D/,'')
setPhoneNumber({...phoneNumber,
flagInvalid : (input.length < 9 ? true : false),
number : (input.length > 9 ? phoneNumber.number : input),
})
}
const [cpf, setCpf] = useState( {
flagInvalid : false,
number : ''
})
const handleChangeCpf = (event) => {
const input = event.target.value.replace(/\D/,'')
setCpf({...cpf,
flagInvalid : (input.length < 11 ? true : false),
number : (input.length > 11 ? cpf.number : input),
})
}
const handleSubmit = () => {
const submit_phone = phoneNumber.number
const submit_cpf = cpf.number
props.handleSubmit(submit_phone, submit_cpf)
}
return (
<>
{console.log(props)}
<Content>
<h4>Vamos localizar o seu cadastro:</h4>
<Stepper items={props.stepper}/>
<form style={{textAlign:"start"}}>
<span>CENTRO EDUC INF MEU PEDACINHO DE CHAO</span>
<FormControl required style={{width:"100%"}}>
<p>Inserir o telefone da escola:</p>
<FormInput
inputType={'text'}
pattern="[0-9]"
name={'DDD e Número'}
placeholder={'DDD e Número'}
value={phoneNumber.number}
handleChange={handleChangePhoneNumber}
error={phoneNumber.flagInvalid}
>
</FormInput>
</FormControl>
<FormControl required style={{width:"100%"}}>
<p>Inserir o seu CPF</p>
<FormInput
inputType={'text'}
name={'11 dígitos'}
placeholder={'11 dígitos'}
value={cpf.number}
handleChange={handleChangeCpf}
mask={'999.999.999-99'}
error={cpf.flagInvalid}
>
</FormInput>
</FormControl>
<div style={{display:"flex", justifyContent:"space-evenly",paddingTop:"10px", paddingBottom:"10px"}}>
<div style={{display:"flex", justifyContent:"center"}}>
<ButtonConfirmar onClick={( (cpf.flagInvalid || phoneNumber.flagInvalid) ? () => {console.log('cpf.flagInvalid: ', cpf.flagInvalid, 'phoneNumber.flagInvalid: ', phoneNumber.flagInvalid)} : handleSubmit)}>BUSCAR</ButtonConfirmar>
</div>
<div style={{display:"flex", justifyContent:"center"}}>
<ButtonGrey onClick={() => props.goBack(false, true, false)}>VOLTAR</ButtonGrey>
<ButtonCancelar onClick={props.handleCancelar}>CANCELAR</ButtonCancelar>
</div>
</div>
</form>
</Content>
</>
)
}
const ButtonConfirmar = styled(Button)`
background-color : #00bcd4 !important;
color : #fff !important;
box-shadow : none !important;
font-family : 'Roboto',sans-serif !important;
font-size : 14px !important;
font-weight : bold !important;
height : 36px !important;
border-radius : 3px !important;
padding-left : 16px !important;
padding-right : 16px !important;
vertical-align : middle !important;
text-align : center !important;
align-items : center !important;
`
src/Components/PageProfessorComponents/PartTwo.js 0 → 100644
View file @ d47d2fa6
import React, {useState, useEffect} from 'react'
import {Content, ButtonsArea} from './PartOne.js'
import Divider from '@material-ui/core/Divider';
import Stepper from '../Stepper.js'
import CustomizedTables from '../Table.js'
import styled from 'styled-components'
import {Button} from '@material-ui/core'
import axios from 'axios'
import {simcaqAPIurl} from '../../env'
import {sortDict} from './PartOne.js'
export default function PartTwo (props) {
const [schoolList, setSchoolList] = useState([])
useEffect ( () => {
const code = (props.info.inep_code || '')
const uf = (props.info.school_uf.abbreviation || '')
const municipio = (props.info.school_city || '')
//console.log(code, uf, municipio)
//if user searched by inep code
if (code !== '') {
axios.get((`${simcaqAPIurl}/portal_mec_inep?filter=school_cod:` + code)
).then ((response) => {
setSchoolList(sortDict(response.data.result))
}, (error) => console.log('erro ao dar get na escola por inep code')
)}
else if (uf !== '' && municipio !== '') {
axios.get((`${simcaqAPIurl}/school?search=state_name:"` + uf + '",city_name:"' + municipio + '"&filter=year:2017')
).then((response)=> {
//console.log(response.data.result)
setSchoolList(sortDict(response.data.result))
}, (error) => console.log('erro ao dar get na escola por uf e municipio', code, uf, municipio)
)}
}, [])
const onClickTable = (city_name, id, name, state_name) => {
props.handleBuscar(city_name, id, name, state_name)
}
return (
<>
{console.log(props)}
<Content>
<h4>Vamos localizar o seu cadastro:</h4>
<Stepper items={props.stepper}/>
</Content>
<Content>
<InputContainer>
<p>Selecione a sua escola:</p>
<CustomizedTables
columns={['Codigo INEP', 'Escola', 'UF', 'Cidade']}
rows={schoolList} onClickTable={onClickTable}
/>
</InputContainer>
</Content>
<Divider/>
<ButtonsArea>
<ButtonGrey onClick={() => props.goBack(true, false, false)}>VOLTAR</ButtonGrey>
<ButtonCancelar onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
</ButtonsArea>
</>
)
}
export const ButtonCancelar = styled(Button)`
color: #666 !important;
font-family: 'Roboto',sans-serif !important;
font-size: 14px !important;
font-weight: bold !important;
height: 36px !important;
border-radius: 3px !important;
padding-left: 16px !important;
padding-right: 16px !important;
`
export const ButtonGrey = styled(Button)`
background-color : #fff !important;
border : 1.5px #666 solid !important;
color : #666 !important;
box-shadow : none !important;
font-family : 'Roboto',sans-serif !important;
font-size : 14px !important;
font-weight : bold !important;
height : 36px !important;
border-radius : 3px !important;
padding-left : 16px !important;
padding-right : 16px !important;
vertical-align : middle !important;
text-align : center !important;
align-items : center !important;
`
const InputContainer = styled.div`
max-width : 970px;
display : block;
flex : auto;
`
src/Components/PageProfessorComponents/SuccessfulRequest.js 0 → 100644
View file @ d47d2fa6
import React from 'react'
import styled from 'styled-components'
import {ButtonConfirmar} from './PartOne.js'
import Comentarios from '../../img/comentarios.png'
export default function SuccessfulRequest (props) {
const h4Text = 'Obrigado por fazer parte dessa rede!'
const pText = 'Em breve você poderá publicar os seus próprios reursos educacionais digitais. O MEC analisará as suas informações junto a escola e você será avisada(o) aqui na plataforma e em seu email: '
const redirect = () => {
props.history.push('/')
}
return (
<div style={{maxWidth:"575px", padding : "0 36px"}}>
<div style={{display : "flex", flexDirection : "column"}}>
<StyledH4>{h4Text}</StyledH4>
<TextDiv>
<p>{pText} <b>{props.email}</b>.</p>
</TextDiv>
<div style={{display : 'flex', flexDirection : 'row', justifyContent : "center"}}>
<ButtonConfirmar onClick={redirect}>VOLTAR À PAGINA INICIAL</ButtonConfirmar>
</div>
<ImageDiv/>
</div>
</div>
)
}
const ImageDiv = styled.div`
height : 500px;
background-image : url(${Comentarios});
background-repeat : no-repeat;
background-position : center center;
`
const TextDiv = styled.div`
display : flex;
flex-direction : row;
p {
text-align : justify;
font-family: Roboto;
font-style : normal;
font-weight : 400;
line-height : 21px;
font-size : 15px;
margin : 0 0 10px;
}
`
const StyledH4 = styled.h4`
font-family : Roboto;
font-style : normal;
font-weight : 300;
line-height : 36px;
font-size : 26px;
margin-top : 20px;
margin-bottom : 20px;
`
src/Components/PasswordRecoveryComponents/Default.js 0 → 100644
View file @ d47d2fa6
import React from 'react'
import {CompletarCadastroButton} from '../TabPanels/TabPanelSolicitarContaProfessor.js'
import FormInput from "../FormInput.js"
export default function Default (props) {
return (
<div style={{overflow:"hidden", display:"inline-block"}}>
<h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Vamos encontrar a sua conta</h2>
<form onSubmit={(e) => props.onSubmit(e)}>
<FormInput
inputType={"text"}
name={"email"}
value={props.value}
placeholder={"E-mail"}
handleChange={e => props.handleChange(e)}
required={true}
error = {props.error}
/>
<div style={{display:"flex", justifyContent:"center"}}>
<CompletarCadastroButton onClick={(e) => props.onSubmit(e, props.value)}>BUSCAR</CompletarCadastroButton>
</div>
</form>
</div>
)
}
src/Components/PasswordRecoveryComponents/Error.js 0 → 100644
View file @ d47d2fa6
import React from 'react'
import {CompletarCadastroButton} from '../TabPanels/TabPanelSolicitarContaProfessor.js'
import FormInput from "../FormInput.js"
export default function Default (props) {
return (
<div style={{overflow:"hidden", display:"inline-block"}}>
<h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Ops! Não encontramos essa conta</h2>
<p>{props.email}</p>
<p>Verifique se o e-mail foi digitado corretamente ou se você utilizou algum outro e-mail.</p>
<form onSubmit={(e) => props.onSubmit(e)}>
<FormInput
inputType={"text"}
name={"email"}
value={props.value}
placeholder={"E-mail"}
handleChange={e => props.handleChange(e)}
required={true}
error = {props.error}
/>
<div style={{display:"flex", justifyContent:"center"}}>
<CompletarCadastroButton onClick={(e) => props.onSubmit(e, props.value)}>BUSCAR</CompletarCadastroButton>
</div>
</form>
</div>
)
}
src/Components/PasswordRecoveryComponents/Success.js 0 → 100644
View file @ d47d2fa6
import React from 'react'
import {CompletarCadastroButton} from '../TabPanels/TabPanelSolicitarContaProfessor.js'
import FormInput from "../FormInput.js"
export default function Default (props) {
return (
<div style={{overflow:"hidden", display:"inline-block", fontSize:"14px", textAlign:"start"}}>
<h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Feito! Confira seu e-mail</h2>
<p> Enviamos um link para <span style={{color:"#00bcd4"}}>{props.email}</span> que permite alterar sua senha. </p>
<p style={{marginBottom:"30px"}}> Caso não chegue em sua caixa de entrada, dê uma olhada em outras pastas, como lixo eletrônico ou spam. </p>
<p> Não é o seu e-mail? <span style={{color:"#00bcd4", cursor:"pointer"}} onClick={() => {props.changeSwitch('default')}}> Tente Novamente.</span></p>
</div>
)
}
src/Components/PublicationPermissionsContent.js
View file @ d47d2fa6
......@@ -31,7 +31,7 @@ export default function PublicationPermissionsContent (props) {
<p>Ao prosseguir você concede a permissão de publicação do seu recurso ao nosso portal e se compromete a não infringir as políticas de conteúdos, estando então,
a partir desse momento passível de responsabilização pelo conteúdo a ser integrado a nossa rede. Para tanto atente-se as pontuações abaixo e verifique se o seu
recurso está de acordo, antecipadamente, com as nossas condições. É recomendável a leitura das políticas de conteúdo estabelecidas
(<a href="termos-de-uso#publicacoes-de-usuario"><strong>Políticas de Conteúdo</strong></a>)
(<a href="/termos" style={{color:"initial"}}><strong>Políticas de Conteúdo</strong></a>)
</p>
<Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)", fontSize:"22px"}}>
Para que o recurso seja publicado na plataforma é preciso que ele esteja de acordo com as diretrizes abaixo, a presença de quaisquer dos itens a seguir
......
src/Components/ResourceCard.js
View file @ d47d2fa6
......@@ -16,15 +16,15 @@ 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, {Component} from 'react';
import './CardsAnimation.css';
import {Container} from 'react-grid-system';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import FavoriteIcon from '@material-ui/icons/Favorite';
import React, { Component } from "react";
import "./CardsAnimation.css";
import { Container } from "react-grid-system";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardActions from "@material-ui/core/CardActions";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import FavoriteIcon from "@material-ui/icons/Favorite";
import animacao from "../img/laranja/ANIMACAO_SIMULACAO.jpg";
import apresentacao from "../img/laranja/APRESENTACAO.jpg";
import aplicativo from "../img/laranja/APP.jpg";
......@@ -39,104 +39,152 @@ import outros from "../img/laranja/OUTROS.jpg";
import software from "../img/laranja/SOFTWARE.jpg";
import texto from "../img/laranja/TEXTO.jpg";
import video from "../img/laranja/VIDEO.jpg";
import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import {apiDomain} from '../env';
import AddIcon from '@material-ui/icons/CreateNewFolder';
import Options from './CardOptions'
import Video from '@material-ui/icons/OndemandVideo';
import Rating from "@material-ui/lab/Rating";
import StarBorderIcon from "@material-ui/icons/StarBorder";
import { apiDomain } from "../env";
import AddIcon from "@material-ui/icons/CreateNewFolder";
import Options from "./CardOptions";
import Video from "@material-ui/icons/OndemandVideo";
import noAvatar from "../img/default_profile.png";
const types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao},
{label: "Aplicativo" , thumb: aplicativo}, {label: "Áudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label:"Livro digital", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software Educacional", thumb:software}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "Vídeo", thumb:video}]
const slideStyle={
const types = [
{ label: "Animação", thumb: animacao },
{ label: "Apresentação", thumb: apresentacao },
{ label: "Aplicativo", thumb: aplicativo },
{ label: "Áudio", thumb: audio },
{ label: "Vazio", thumb: vazio },
{ label: "Imagem", thumb: imagem },
{ label: "Gráfico", thumb: grafico },
{ label: "Jogo", thumb: jogo },
{ label: "Livro", thumb: livro },
{ label: "Livro digital", thumb: livro },
{ label: "Mapa", thumb: mapa },
{ label: "Outros", thumb: outros },
{ label: "Software Educacional", thumb: software },
{ label: "Software", thumb: software },
{ label: "Texto", thumb: texto },
{ label: "Vídeo", thumb: video }
];
const slideStyle = {
height: "50px",
width: "50px",
backgroundColor: "white",
borderRadius: "50%",
borderRadius: "50%"
};
const publisherStyle={
const publisherStyle = {
color: "white",
paddinLeft: "30px",
fontSize: "15px",
fontSize: "15px"
};
class ResourceCard extends Component {
constructor(props) {
super(props);
this.state={
this.state = {
thumbnail: null,
userStyle: "animatiOff",
userAvatar: null,
userAvatar: null
};
}
renderType(type){
if (!this.state.thumbnail && !this.props.thumbnail ) {
var aux = types.find(function(element){ return element.label === type});
this.setState({thumbnail: aux.thumb});
renderType(type) {
if (!this.state.thumbnail && !this.props.thumbnail) {
var aux = types.find(function(element) {
return element.label === type;
});
this.setState({ thumbnail: aux.thumb });
}
if (!this.state.thumbnail && this.props.thumbnail ) {
this.setState({thumbnail: apiDomain + this.props.thumbnail});
if (!this.state.thumbnail && this.props.thumbnail) {
this.setState({ thumbnail: apiDomain + this.props.thumbnail });
}
}
onHover(){
this.setState({userStyle: "animatiOn"});
onHover() {
this.setState({ userStyle: "animatiOn" });
}
onIddle(){
this.setState({userStyle: "animatiOff"})
onIddle() {
this.setState({ userStyle: "animatiOff" });
}
defAvatar(){
if (!this.state.userAvatar && (!this.props.avatar.length)){
this.setState({userAvatar: noAvatar});
defAvatar() {
if (!this.state.userAvatar && !this.props.avatar.length) {
this.setState({ userAvatar: noAvatar });
}
if (!this.state.userAvatar && (this.props.avatar) ) {
this.setState({userAvatar:apiDomain+this.props.avatar});
if (!this.state.userAvatar && this.props.avatar) {
this.setState({ userAvatar: apiDomain + this.props.avatar });
}
}
render(){
this.renderType(this.props.type);
this.defAvatar();
return (
<Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
<Container style={{padding:"0px", height:"175px", backgroundColor: "#ff7f00"}}>
<div className={this.state.userStyle}>
<img style={slideStyle} src={this.state.userAvatar} alt="Avatar"/>
<Typography style={publisherStyle}>Enviado por: <br/>{this.props.author}</Typography>
</div>
<img src={this.state.thumbnail} style={{height:"100%"}} alt="thumbnail do recurso"/>
</Container>
<CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
<Typography variant="body2" color="textSecondary" component="p" style={{height:"45px", overflow: "hidden", fontSize: "0.8em"}}>
{this.props.name}
</Typography>
</CardContent>
<Container style={{textAlign: "left"}}>
<Rating
name="customized-empty"
value={this.props.rating*10}
precision={0.5}
emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
</Container>
<CardActions style={{justifyContent: "space-between", padding: "0px"}}>
{ this.props.type ==="Vídeo"
? <Video style={{color:"#ff7f00"}} />
: <br/>}
<IconButton aria-label="Favoritar" size="small">
<FavoriteIcon />
</IconButton>
</CardActions>
<CardActions style={{borderTop:"1px solid #e5e5e5", justifyContent: "space-between"}}>
<IconButton aria-label="Guardar" size="small">
<AddIcon />
</IconButton>
<Options/>
</CardActions>
</Card>
);}
}
render() {
this.renderType(this.props.type);
this.defAvatar();
return (
<Card
onMouseOver={this.onHover.bind(this)}
onMouseOut={this.onIddle.bind(this)}
>
<Container
style={{
padding: "0px",
height: "175px",
backgroundColor: "#ff7f00"
}}
>
<div className={this.state.userStyle}>
<img style={slideStyle} src={this.state.userAvatar} alt="Avatar" />
<Typography style={publisherStyle}>
Enviado por: <br />
{this.props.author}
</Typography>
</div>
<img
src={this.state.thumbnail}
style={{ height: "100%" }}
alt="thumbnail do recurso"
/>
</Container>
<CardContent
style={{ height: "60%", textAlign: "left", paddingBottom: "0px" }}
>
<Typography
variant="body2"
color="textSecondary"
component="p"
style={{ height: "45px", overflow: "hidden", fontSize: "0.8em" }}
>
{this.props.name}
</Typography>
</CardContent>
<Container style={{ textAlign: "left" }}>
<Rating
name="customized-empty"
value={this.props.rating * 10}
precision={0.5}
emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
</Container>
<CardActions
style={{ justifyContent: "space-between", padding: "0px" }}
>
{this.props.type === "Vídeo" ? (
<Video style={{ color: "#ff7f00" }} />
) : (
<br />
)}
<IconButton aria-label="Favoritar" size="small">
<FavoriteIcon />
</IconButton>
</CardActions>
<CardActions
style={{
borderTop: "1px solid #e5e5e5",
justifyContent: "space-between"
}}
>
<IconButton aria-label="Guardar" size="small">
<AddIcon />
</IconButton>
<Options />
</CardActions>
</Card>
);
}
}
export default ResourceCard;
export default ResourceCard;
src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js 0 → 100644
View file @ d47d2fa6
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import IconButton from "@material-ui/core/IconButton";
const useStyles = makeStyles(theme => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
color: "#666"
}
}));
export default function SearchEPCompCurriculum() {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
const handleToggle = value => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
const filtrosComponente = [
{ exemplo: "Arte", value: "0" },
{ exemplo: "Biologia", value: "1" },
{ exemplo: "Ciências da Natureza", value: "2" },
{ exemplo: "Direitos Humanos", value: "3" },
{ exemplo: "Educação Ambiental", value: "4" },
{ exemplo: "Educação do Campo", value: "5" },
{ exemplo: "Educação Especial", value: "6" },
{ exemplo: "Educação Física", value: "7" },
{ exemplo: "Educação Indígena", value: "8" },
{ exemplo: "Educação Quilombola", value: "9" },
{ exemplo: "Educação Sexual", value: "10" },
{ exemplo: "Ensino Religioso", value: "11" },
{ exemplo: "Filosofia", value: "12" },
{ exemplo: "Física", value: "13" },
{ exemplo: "Geografia", value: "14" },
{ exemplo: "História", value: "15" },
{ exemplo: "Informática", value: "16" },
{ exemplo: "Língua Espanhola", value: "17" },
{ exemplo: "Língua Inglesa", value: "18" },
{ exemplo: "Língua Portuguesa", value: "19" },
{ exemplo: "Matemática", value: "20" },
{ exemplo: "Outras Línguas", value: "21" },
{ exemplo: "Outros", value: "22" },
{ exemplo: "Química", value: "23" },
{ exemplo: "Sociologia", value: "24" }
];
return (
<List className={classes.root}>
{filtrosComponente.map(item => {
const labelId = `checkbox-list-label-${item.value}`;
return (
<ListItem
key={item.exemplo}
role={undefined}
dense
button
onClick={handleToggle(item.value)}
>
<ListItemIcon>
<Checkbox
edge="start"
checked={checked.indexOf(item.value) !== -1}
tabIndex={-1}
disableRipple
inputProps={{ "aria-labelledby": labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={item.exemplo} />
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="comments"></IconButton>
</ListItemSecondaryAction>
</ListItem>
);
})}
</List>
);
}