diff --git a/src/Components/ActivityListItem.js b/src/Components/ActivityListItem.js
index 24a00b77a9afb3cc534a52925e70a622b06a4ff7..7af740cd4b41cc5cb29d28312a11fbdeb5d696a2 100644
--- a/src/Components/ActivityListItem.js
+++ b/src/Components/ActivityListItem.js
@@ -115,15 +115,15 @@ export default function ActivityListItem (props) {
}, [] )
return (
- <StyledListItem>
+ <StyledListItem onMenuBar={props.onMenuBar}>
{
!props.onMenuBar &&
<>
-
+
<ListItemAvatar>
<Avatar alt='user avatar' src={props.avatar ? props.avatar : noAvatar}/>
</ListItemAvatar>
- getNotificationIcon(activity.icon)
+ {getNotificationIcon(activity.icon)}
</>
}
@@ -150,7 +150,7 @@ export default function ActivityListItem (props) {
}
const StyledListItem = styled(ListItem)`
- padding : 20px 60px !important ;
+ padding : ${props => props.onMenuBar ? "8px 16px !important" : "20px 60px !important"};
border-bottom : 1px solid #eee;
display : flex;
justify-content : flex-start;
diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js
index 76b5b750be97631f4262bc89408dac4524116fdb..37dc26977cd9133db5b644dad03eb6860f40ea04 100644
--- a/src/Components/ColCardOwnerOptions.js
+++ b/src/Components/ColCardOwnerOptions.js
@@ -28,6 +28,7 @@ import {Link} from 'react-router-dom'
import MoreVertIcon from '@material-ui/icons/MoreVert';
import styled from 'styled-components'
import ModalExcluirColecao from './ModalExcluirColecao.js'
+import ModalEditarColecao from './ModalEditarColecao.js'
export default function ColCardOwnerOptions (props) {
const [anchorEl, setAnchorEl] = React.useState(null);
@@ -43,11 +44,17 @@ export default function ColCardOwnerOptions (props) {
const [modalExcluirOpen, toggleModalExcluir] = useState(false)
const openModalExcluir = () => {toggleModalExcluir(true)}
+ const [modalEditarOpen, toggleModalEditar] = useState(false)
+
+
return (
<>
<ModalExcluirColecao id={props.id}
open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}}
/>
+ <ModalEditarColecao id={props.id}
+ open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}}
+ />
<div style={{fontSize: "12px"}}>
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
@@ -66,7 +73,7 @@ export default function ColCardOwnerOptions (props) {
</Link>
</StyledMenuItem>
- <StyledMenuItem onClick={() => {console.log('TODO: MODAL EDITAR COLECAO')}}>
+ <StyledMenuItem onClick={() => {toggleModalEditar(true)}}>
<ListItemIcon><CreateIcon /></ListItemIcon>Editar
</StyledMenuItem>
diff --git a/src/Components/ColaborarModal.js b/src/Components/ColaborarModal.js
index cc2e2950c326e7c898f65ea3b8f6d8a40a26a761..3c971a28dfef4319067a57617677d4494c2ab7fa 100644
--- a/src/Components/ColaborarModal.js
+++ b/src/Components/ColaborarModal.js
@@ -7,6 +7,7 @@ import Backdrop from '@material-ui/core/Backdrop';
import { Store } from '../Store.js';
import CloseIcon from '@material-ui/icons/Close';
import LabeledCheckbox from "../Components/Checkbox.js"
+import {Link} from 'react-router-dom'
const StyledDivContainer = styled.div`
background-color : rgb(255,255,255);
@@ -86,7 +87,6 @@ export default function ColaborarModal (props) {
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
-
centered="true"
onClose={props.handleClose}
closeAfterTransition
@@ -121,9 +121,16 @@ export default function ColaborarModal (props) {
na plataforma com toda a comunidade escolar do paÃs.
</p>
<StyledButtonsDiv>
- <StyledButton>
- <span style={{color:"#fff"}}>SIM</span>
- </StyledButton>
+
+ <Link to={{
+ pathname : "/termos-publicar-recurso",
+ state : true
+ }}>
+ <StyledButton>
+ <span style={{color:"#fff"}}>SIM</span>
+ </StyledButton>
+ </Link>
+
<StyledButton>
<span style={{color:"#fff"}}>NÃO</span>
</StyledButton>
diff --git a/src/Components/Dropdown.js b/src/Components/Dropdown.js
index 60624e7f2d2c8cb5e5a55f80a00cacbcc48a67bc..f186c6938796c5ad275bd3b7881f0c929ae3459a 100644
--- a/src/Components/Dropdown.js
+++ b/src/Components/Dropdown.js
@@ -85,11 +85,11 @@ function Dropdown(props) {
<ExpandMoreIcon/>
</Button>
{ open &&
- <Popper open={open} keepMounted transition disablePortal>
+ <Popper open={open} keepMounted transition disablePortal placement={'bottom'}>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
- style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
+ style={{ transformOrigin: 'center top !important', anchorOrigin : "center bottom !important"}}
>
<Paper id="menu-list-grow">
<MenuList>
diff --git a/src/Components/EditarColecaoForm.js b/src/Components/EditarColecaoForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..f40f811c1c953e8770092d131c6bef6e6a9a8b5a
--- /dev/null
+++ b/src/Components/EditarColecaoForm.js
@@ -0,0 +1,232 @@
+/*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, useContext, useEffect} from 'react'
+import {Store} from '../Store.js'
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import TextField from '@material-ui/core/TextField';
+import axios from 'axios'
+import {apiUrl} from '../env';
+import {getAxiosConfig} from './HelperFunctions/getAxiosConfig'
+
+export default function EditarColecaoForm (props) {
+ const {state} = useContext(Store)
+
+ useEffect(() => {
+ axios.get(`${apiUrl}/collections/${props.id}`).then(
+ (res) => {
+ setColName({key : false, value : res.data.name})
+ setValue( res.data.privacy === 'public' ? 'pública' : 'privada')
+ handleColDescription(res.data.description)
+ },
+ (err) => {console.log(err)}
+ )
+ }, [])
+
+ const [value, setValue] = React.useState(-1);
+
+ /*values are set according to backend complaint id*/
+ const [options] = React.useState([
+ {value : "pública", text :'Pública (Sua coleção estará disponÃvel para todos)'},
+ {value : "privada", text : 'Privada (Somente você poderá visualizar esta coleção)'}
+ ])
+
+ const handleChange = (event) => {
+ setValue(event.target.value);
+ };
+
+ const [colName, setColName] = React.useState({
+ key : false,
+ value : "",
+ })
+
+ const handleColName = (e) => {
+ const userInput = e.target.value
+
+ const flag = userInput.length == 0 ? true : false
+
+ setColName({...colName,
+ key : flag,
+ value : userInput
+ })
+ }
+
+ const formSubmit = (e) => {
+ e.preventDefault()
+
+ {/*if user didn't select either one, default to privada*/}
+ const finalRadioValue = value === 'pública' ? 'public' : 'private'
+ const finalColName = colName
+
+ console.log(finalRadioValue, finalColName.value)
+ if(!(finalColName.key)) {
+ let payload = {
+ "collection" : {
+ "name" : finalColName.value,
+ "owner_id" : state.currentUser.id,
+ "owner_type" : "User",
+ "privacy" : finalRadioValue
+ }
+ }
+ let config = getAxiosConfig()
+
+ axios.put( (`${apiUrl}/collections/${props.id}`), payload, config
+ ).then(
+ (response) => {
+ console.log(response)
+ if ( response.headers['access-token'] ) {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ }
+ props.finalize(response.data.id)
+ }, (error) =>{console.log(error)})
+ }
+ }
+
+ const [colDescription, handleColDescription] = React.useState("")
+ const setColDescription = (e) => {handleColDescription(e.target.value)}
+
+ return (
+ <form onSubmit={(e) => {formSubmit(e)}} style={{textAlign : "left"}}>
+
+ <StyledTextField
+ id = {"col-name"}
+ label={"Nome"}
+ type = {"text"}
+ value = {colName.value}
+ onChange = {e => handleColName(e)}
+ error = {colName.key}
+ required = {true}
+ style={{width:"100%"}}
+ />
+
+ <StyledTextField
+ id = {"col-description"}
+ label={"Descrição"}
+ type = {"text"}
+ value = {colDescription}
+ multiline
+ rows={5}
+ onChange = {e => setColDescription(e)}
+ style={{width:"100%"}}
+ />
+
+ <span style={{fontSize : "12px", color : "#b3b3b3"}}>Esta coleção é:</span>
+ <StyledFormControl component="fieldset">
+ <RadioGroup value={value} onChange={handleChange}>
+ {
+ options.map(option =>
+ <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7"/>} label={option.text} />
+ )
+ }
+ </RadioGroup>
+ </StyledFormControl>
+
+
+ <ButtonsDiv>
+ <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar type="submit">SALVAR</ButtonEnviar>
+ </ButtonsDiv>
+ </form>
+ );
+}
+
+export const ButtonsDiv = styled.div`
+ display : flex;
+ flex-direction : row;
+ justify-content : center;
+ align-items : center;
+`
+
+export const ButtonCancelar = styled(Button)`
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+ }
+ height : 36px !important;
+ padding-left : 16px !important;
+ padding-right : 16px !important;
+ font-weight : 500 !important;
+ border-radius : 3px !important;
+ color :#666 !important;
+ background-color: transparent;
+ min-width : 88px !important;
+ height : 36px !important;
+`
+
+export const ButtonEnviar = styled(Button)`
+ background-color : #673ab7 !important;
+ color : #fff !important;
+ font-size: 14px !important;
+ font-weight: 500 !important;
+ height: 36px !important;
+ border-radius: 3px !important;
+ padding-left: 16px !important;
+ padding-right: 16px !important;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ outline : none !important;
+ min-width : 88px !important;
+ vertical-align : middle !important;
+ margin : 6px 8px !important;
+ text-decoration : none !important;
+
+ .MuiButton-label {
+ padding-right : 16px;
+ padding-left : 16px;
+ }
+`
+export const StyledTextField = styled(TextField)`
+ margin : 18px 0 !important;
+
+ .MuiFormHelperText-root {
+ text-align : right;
+ }
+
+ label.Mui-focused {
+ color : #673ab7;
+ }
+
+ label.Mui-focused.Mui-error {
+ color : red;
+ }
+
+ .MuiInput-underline::after {
+ border-bottom: 2px solid #673ab7;
+ }
+`
+
+export const StyledFormControl = styled(FormControl)`
+ display : block !important;
+
+ .MuiFormControlLabel-root {
+ color : #666;
+ }
+ .MuiIconButton-label {
+ color : #666;
+ }
+ .PrivateRadioButtonIcon-checked {
+ color : orange;
+ }
+
+ .MuiTypography-body1 {
+ font-size : 14px;
+ }
+`
diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js
index e43a63fc3a122cf882407e8f59d6c3676fc35955..93d38cb6c95c28ac224175c36a5cb7db4452e112 100644
--- a/src/Components/GuardarModal.js
+++ b/src/Components/GuardarModal.js
@@ -27,7 +27,6 @@ import {Store} from '../Store.js'
import axios from 'axios'
import {apiUrl, apiDomain} from '../env';
import CloseIcon from '@material-ui/icons/Close';
-import Grid from '@material-ui/core/Grid';
import PublicIcon from '@material-ui/icons/Public';
import LockIcon from '@material-ui/icons/Lock';
import LoadingSpinner from './LoadingSpinner.js'
diff --git a/src/Components/Header.js b/src/Components/Header.js
index 7da2d87ff8f320342adf75d9494d096874239dbc..e9aa87d2d56b11e1b0ec94553c1f7f5c3a6be88b 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -29,6 +29,8 @@ import ColaborarModal from './ColaborarModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
import {useLocation} from 'react-router-dom'
+import MenuBarMobile from './MenuBarMobile.js'
+
//const StyledButton = styled(Button)`
// background : #ffa54c !important;
// boxShadow :none;
@@ -45,10 +47,21 @@ export default function Header(props){
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [modalColaborar, setModalColaborar] = useState(false)
- let loc = useLocation()
+ useEffect ( () => {
+ if (state.currentUser.askTeacherQuestion == true) {
+ dispatch({
+ type: "TOGGLE_MODAL_COLABORAR_PLATAFORMA",
+ modalColaborarPlataformaOpen: true
+ });
+ }
+ }, [state.currentUser.askTeacherQuestion])
+ const redirect = () => {
+ props.history.push('/')
+ }
+
+ let loc = useLocation()
useEffect(() => {
- console.log(loc)
let query = new URLSearchParams(loc.search)
//POR PARAMETRO
@@ -94,7 +107,7 @@ export default function Header(props){
sessionStorage.setItem('@portalmec/id', response.data.data.id)
sessionStorage.setItem('@portalmec/username', response.data.data.name)
sessionStorage.setItem('@portalmec/uid', response.data.data.uid)
-
+ redirect()
},
(err) => {
console.log(err)
@@ -126,23 +139,40 @@ export default function Header(props){
})
}
- return(
- <>
- <AcessibilityBar/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin = {{ vertical:'top', horizontal:'center' }}
- >
+ let windowWidth = window.innerWidth
+
+ return (
+ <React.Fragment>
+ {
+ windowWidth > 990 &&
+ <AcessibilityBar/>
+ }
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+ anchorOrigin = {{ vertical:'top', horizontal:'center' }}
+ >
<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={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => {handleSuccessfulLogin(true)}}/>
- <ColaborarModal open={modalColaborar} handleClose={() => {setModalColaborar(!modalColaborar)}} />
-
- </>
+ </Snackbar>
+ {
+ windowWidth > 990 ?
+ (
+ <React.Fragment>
+ <MenuBar openSearchBar={handleClickSearch} openSignUp = {handleSignUp} openLogin = {handleLogin}/>
+ {
+ state.searchOpen &&
+ <SearchBar/>
+ }
+ </React.Fragment>
+
+ )
+ :
+ (
+ <MenuBarMobile openSignUp = {handleSignUp} openLogin = {handleLogin}/>
+ )
+ }
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}/>
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => {handleSuccessfulLogin(true)}}/>
+ <ColaborarModal open={modalColaborar} handleClose={() => {setModalColaborar(!modalColaborar)}} />
+ </React.Fragment>
)
}
diff --git a/src/Components/LoginContainer.js b/src/Components/LoginContainer.js
deleted file mode 100644
index aaf89d2182dfb74eedb1da3228ea950ae5880e76..0000000000000000000000000000000000000000
--- a/src/Components/LoginContainer.js
+++ /dev/null
@@ -1,320 +0,0 @@
-/*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, {Component} 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"
-
-//arrumar isso
-const responseGoogle = (response) => {
- console.log(response);
-}
-
-class LoginContainer extends Component {
- constructor (props) {
- super(props);
-
- this.state = {
- email : localStorage.getItem("@portalmec/email") || "",
- senha : localStorage.getItem("@portalmec/senha") ||"",
- checkboxChecked : false
- };
- this.handleChecked = this.handleChecked.bind(this)
- }
-
- switchModal = (e) => {
- e.preventDefault()
- this.props.handleClose()
- this.props.openSignUp()
- }
-
- handleChange = e => {
- this.setState({[e.target.name]: e.target.value})
- }
-
- onSubmit = (e) => {
- e.preventDefault();
- const login = this.state
-
- this.props.handleLoginInfo(login);
-
- this.setState({
- email: "",
- senha: ""
- })
- }
-
- handleChecked = (e) => {
- const value = !this.state.checkboxChecked
- console.log(this.state.checkboxChecked)
- console.log(value)
- this.setState({
- checkboxChecked :value
- })
- }
-
- render () {
- return (
- <ContainerStyled >
- <DialogHeaderStyled>
- <span style={{width:"32px"}}/>
- <H2Styled> Entrar
- </H2Styled>
- <StyledCloseModalButton onClick={this.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={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>
- )
- }
-}
-
-export default LoginContainer
-
-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 : 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
-`
-
-
-const RightSideStrikedH3 = styled.div`
- display : inline-block;
- border-bottom: 1px dotted #666;
- vertical-align : middle;
- font-weight : 500;
- margin-right : 5px;
- width : 45%;
-`
-
-const LeftSideStrikedH3 = styled.div`
- display : inline-block;
- border-bottom: 1px dotted #666;
- vertical-align : middle;
- font-weight : 500;
- margin-left : 5px;
- width : 45%;
-`
-
-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;
-`
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index 3f8c41a24701af567f385b699ff616e44de6a1fd..331a53c917cddd8717d54b8e74083a35b196a0ef 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -27,7 +27,7 @@ import FormInput from "./FormInput.js"
import GoogleLogo from "../img/logo_google.svg"
import ValidateUserInput from '../Components/FormValidationFunction.js'
import {Link} from 'react-router-dom'
-import {apiUrl} from '../env';
+import {apiUrl} from '../env.js'
async function handleGoogleAttempt () {
console.log("handleGoogleAttempt")
@@ -103,11 +103,6 @@ export default function LoginContainer (props) {
}
- //arrumar isso
- const handleGoogleResponse = (response) => {
- console.log(response);
- }
-
return (
<div>
<ContainerStyled >
@@ -122,7 +117,10 @@ export default function LoginContainer (props) {
<DialogContentDiv>
<SocialConnectDiv>
- <Button onClick={handleGoogleAttempt}>login com google</Button>
+ <GoogleLoginButton onClick={handleGoogleAttempt}>
+ <img src={GoogleLogo} alt="google-logo" className="google-logo"/>
+ <span>Usando o Google</span>
+ </GoogleLoginButton>
</SocialConnectDiv>
<H3Div>
@@ -196,6 +194,8 @@ export default function LoginContainer (props) {
width : 100%;
min-width : unset;
height : 100%;
+ min-width : unset !important;
+
}
`
@@ -265,7 +265,7 @@ export const RightSideStrikedH3 = styled.div`
vertical-align : middle;
font-weight : 500;
margin-right : 5px;
- width : 45%;
+ width : 44%;
`
export const LeftSideStrikedH3 = styled.div`
@@ -274,7 +274,7 @@ export const RightSideStrikedH3 = styled.div`
vertical-align : middle;
font-weight : 500;
margin-left : 5px;
- width : 45%;
+ width : 44%;
`
export const H3Div = styled.div`
@@ -347,3 +347,21 @@ export const RightSideStrikedH3 = styled.div`
font-weight : 400;
padding-top : 2px;
`
+export const GoogleLoginButton = styled(Button)`
+ background-color : #fff;
+ box-shadow : 0 0 0 1px #4285f4 !important;
+ color : #666 !important;
+ font-weight : bolder !important;
+
+ .MuiButton-root {
+ min-width : 88px !important;
+ font-size : 14px !important;
+ }
+
+ .google-logo {
+ max-height : 24px !important;
+ padding-right : 5px;
+
+ }
+
+`
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 8ea5f1620e085fcf23fa8ae0b867a8bb3df1ef84..b8769636af14f756f890dea66a0366e1dcd9b701 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -40,7 +40,7 @@ const ContainerStyled = styled(Container)`
`
-const ButtonStyled = styled(Button)`
+export const ButtonStyled = styled(Button)`
text-transform: capitalize !important;
margin : 0 8px !important;
font-weight : normal !important;
@@ -86,7 +86,7 @@ const Left = styled.span `
align-items: center;
`
-const ButtonPubRecursoStyled = styled(Button)`
+export const ButtonPubRecursoStyled = styled(Button)`
font-weight : 500 !important;
border : 1.5px #666 solid !important;
color: #666;
@@ -117,11 +117,10 @@ export default function MenuBar(props){
const minhaArea = [
{ name: "Perfil e Atividades", href: "/perfil", value : '0'},
- { name: "Status e Conquistas", href: "/perfil", value: '1'},
- { name: "Recursos Publicados", href: "/perfil", value : '2'},
- { name: "Favoritos", href: "/perfil", value : '3'},
- { name: "Coleções", href: "/perfil", value : '4'},
- { name: "Rede", href: "/perfil", value : '5'},
+ { 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"},
]
diff --git a/src/Components/MenuBarMobile.js b/src/Components/MenuBarMobile.js
new file mode 100644
index 0000000000000000000000000000000000000000..ea3196dd0c45a6658adb77cc48c2358665beb616
--- /dev/null
+++ b/src/Components/MenuBarMobile.js
@@ -0,0 +1,100 @@
+/*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 from 'react'
+import MenuIcon from '@material-ui/icons/Menu';
+import styled from 'styled-components'
+import {Button} from '@material-ui/core'
+import logo from '../img/logo_small.svg'
+import {Link} from 'react-router-dom'
+import Grid from '@material-ui/core/Grid';
+import MobileDrawerMenu from './MobileDrawerMenu';
+
+export default function MenuBarMobile (props) {
+
+ const [drawerOpen, setDrawerStatus] = React.useState(false);
+
+ const toggleDrawer = (open) => (event) => {
+ if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
+ return;
+ }
+ setDrawerStatus(open);
+ };
+
+ return (
+ <OuterDiv>
+ <Grid container>
+ <Grid item xs={3} style={{display : "flex"}}>
+ <Button style={{color : "#00bcd4"}} onClick={toggleDrawer(true)}>
+ <MenuIcon className="icon"/>
+ </Button>
+ </Grid>
+
+ <Grid item xs={9} justify={'center'}>
+ <div className="logo">
+ <Link to="/">
+ <img src={logo} alt={"Plataforma Integrada"}/>
+ </Link>
+ </div>
+ </Grid>
+ </Grid>
+ <MobileDrawerMenu anchor={'left'} open={drawerOpen}
+ onClose={toggleDrawer(false)}
+ openSignUp = {props.openSignUp} openLogin = {props.openLogin}
+ />
+ </OuterDiv>
+ )
+}
+
+const OuterDiv = styled.div `
+ height : 48px;
+ margin : 5px 2px;
+ display : flex;
+ flex-direction : column;
+ align-content : stretch;
+ justify-content : center;
+
+ .logo {
+ height : 50px;
+ width : 150px;
+ padding : 5px;
+ padding-top : 15px;
+ text-align : center;
+
+ img {
+ height : 38px;
+ overflow : hidden;
+ }
+ }
+
+ .icon {
+ vertical-align : middle !important;
+ font-weight : normal !important;
+ font-style : normal !important;
+ font-size : 24px !important;
+ line-height : 1 !important;
+ letter-spacing : normal !important;
+ text-transform : none !important;
+ display : inline-block !important;
+ white-space : nowrap !important;
+ word-wrap : normal !important;
+ direction : ltr !important;
+ padding-right : 2px;
+ color : inherit !important;
+ }
+`
diff --git a/src/Components/MenuList.js b/src/Components/MenuList.js
index 796b57b386e93056825e0ced50a2b1d8b4a4cae0..402fa2e747ff3f45f7357d675d64db260472f556 100644
--- a/src/Components/MenuList.js
+++ b/src/Components/MenuList.js
@@ -28,7 +28,9 @@ import { Store } from '../Store';
import { Redirect } from "react-router-dom";
import Profile from '../img/default_profile0.png'
import styled from 'styled-components'
-import {apiDomain} from '../env.js'
+import {apiDomain, apiUrl} from '../env.js'
+import {getAxiosConfig} from './HelperFunctions/getAxiosConfig'
+import axios from 'axios'
const iconStyles = {
fontSize : "xxx-large",
@@ -56,20 +58,29 @@ export default function MenuList(props) {
};
const handleLogout = () => {
- localStorage.removeItem('@portalmec/username');
- sessionStorage.removeItem('@portalmec/uid');
- sessionStorage.removeItem('@portalmec/senha');
- dispatch( {
- type: 'USER_LOGGED_OUT',
- userLoggedOut: !state.userIsLoggedIn,
- login: {
- username : '',
- email : '',
- accessToken : '',
- client : ''
+ let config = getAxiosConfig()
+ axios.delete(`${apiUrl}/auth/sign_out`, config).then(
+ (res) => {
+
+ localStorage.removeItem('@portalmec/username');
+ sessionStorage.removeItem('@portalmec/uid');
+ sessionStorage.removeItem('@portalmec/senha');
+ dispatch( {
+ type: 'USER_LOGGED_OUT',
+ userLoggedOut: !state.userIsLoggedIn,
+ login: {
+ username : '',
+ email : '',
+ accessToken : '',
+ client : ''
}
- }
+ })
+ },
+ (err) => {
+ console.log(err)
+ }
)
+
}
return (
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
new file mode 100644
index 0000000000000000000000000000000000000000..19201b3d77e7722d4a4f414394a25565b9c950f9
--- /dev/null
+++ b/src/Components/MobileDrawerMenu.js
@@ -0,0 +1,280 @@
+/*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 { Store } from '../Store';
+import Drawer from '@material-ui/core/Drawer';
+import styled from 'styled-components'
+import {Link} from 'react-router-dom'
+import HomeIcon from '@material-ui/icons/Home';
+import InfoIcon from '@material-ui/icons/Info';
+import MailOutlineIcon from '@material-ui/icons/MailOutline';
+import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import {ButtonStyled} from './MenuBar'
+import ExitToAppIcon from '@material-ui/icons/ExitToApp'
+import { Button } from '@material-ui/core';
+import MenuItem from '@material-ui/core/MenuItem';
+import DefaultAvatar from '../img/default_profile0.png'
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import CloudDoneIcon from '@material-ui/icons/CloudDone';
+import HistoryIcon from '@material-ui/icons/History';
+import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
+import FolderOpenIcon from '@material-ui/icons/FolderOpen';
+import SettingsIcon from '@material-ui/icons/Settings';
+import {apiDomain, apiUrl} from '../env.js'
+import {getAxiosConfig} from './HelperFunctions/getAxiosConfig'
+import axios from 'axios'
+
+export default function MobileDrawerMenu (props) {
+ const {state, dispatch} = useContext(Store)
+
+ const menuSobre = [
+ { name : "Página Inicial", href : "/", icon : <HomeIcon/>},
+ { name : "Sobre a Plataforma", href : "sobre", icon : <InfoIcon/>},
+ { name : "Contato", href : "contato", icon : <MailOutlineIcon/>},
+ { name : "Central de Ajuda", href : "ajuda", icon : <HelpOutlineIcon/>},
+ { name : "Termos de Uso", href : "termos", icon : <AssignmentIcon/>},
+ ]
+
+ {/*used in dynamic css selection*/}
+ const [selectedIndex, setSelectedIndex] = React.useState(-1);
+ const handleMenuItemClick = (event, index) => {
+ setSelectedIndex(index);
+ };
+
+ const getUserAvatar = () => {
+ if (state.currentUser.userAvatar == '' || state.currentUser.userAvatar == null) {
+ return DefaultAvatar
+ }
+ else {
+ return apiDomain + state.currentUser.userAvatar
+ }
+ }
+
+ {/*main user actions array */}
+ const minhaArea = [
+ { name: "Publicar Recurso", href: "/termos-publicar-recurso", icon : <CloudUploadIcon/>},
+ { name: "Recursos Publicados", href: "/perfil", icon : <CloudDoneIcon/>, value : '1'},
+ { name: "Perfil e Atividades", href: "/perfil", icon : <HistoryIcon/>, value : '0'},
+ { name: "Favoritos", href: "/perfil", icon : <FavoriteBorderIcon/>, value : '2'},
+ { name: "Coleções", href: "/perfil", icon : <FolderOpenIcon/>, value : '3'},
+ ]
+
+ {/*dispatches log out actions to Store.js*/}
+ const handleLogout = () => {
+ let config = getAxiosConfig()
+ axios.delete(`${apiUrl}/auth/sign_out`, config).then(
+ (res) => {
+
+ localStorage.removeItem('@portalmec/username');
+ sessionStorage.removeItem('@portalmec/uid');
+ sessionStorage.removeItem('@portalmec/senha');
+ dispatch( {
+ type: 'USER_LOGGED_OUT',
+ userLoggedOut: !state.userIsLoggedIn,
+ login: {
+ username : '',
+ email : '',
+ accessToken : '',
+ client : ''
+ }
+ })
+ },
+ (err) => {
+ console.log(err)
+ }
+ )
+ }
+
+ return (
+ <StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}>
+ <MenuBody>
+ {/*Renders menuSobre array options*/}
+ {
+ menuSobre.map( (item, index) =>
+ <Link to={item.href} className={`menu-buttons ${selectedIndex === index ? 'selected' : ''}`} onClick={(event) => handleMenuItemClick(event, index)}>
+ {item.icon}
+ {item.name}
+ </Link>
+ )
+ }
+ </MenuBody>
+
+
+ <div style={{borderTop : "1px solid #e5e5e5", borderBottom : "1px solid #e5e5e5", marginTop : "10px", paddingTop : "10px", marginBottom : "10px"}}>
+ {
+ /*If user is logged in, render user actions menu; else render log in/sign in buttons*/
+ state.userIsLoggedIn ?
+ (
+ <div style={{display : "flex", flexDirection : "column", color : "#666", paddingBottom : "10px"}}>
+ <MyArea>
+ <div className="user-avatar">
+ <img alt="user-avatar"
+ src={getUserAvatar()}
+ />
+ </div>
+ <span className="text">Minha área</span>
+ </MyArea>
+
+ {
+ minhaArea.map( (item, index) =>
+ <Link to={{
+ pathname : item.href,
+ state: item.value
+ }}
+ className={`menu-buttons ${selectedIndex === (index + menuSobre.length) ? 'selected' : ''}`}
+ onClick={(event) => handleMenuItemClick(event, index + menuSobre.length)}
+ >
+ {item.icon}
+ {item.name}
+ </Link>
+ )
+ }
+
+ </div>
+ )
+ :
+ (
+ <React.Fragment>
+ <div style={{display : "flex", justifyContent : "center", marginTop : "10px"}}>
+ <ButtonPublicarRecurso onClick={props.openLogin}>
+ PUBLICAR RECURSO?
+ </ButtonPublicarRecurso>
+ </div>
+
+ <div style={{display : "flex", flexDirection : "row", margin : "10px 0", justifyContent : "center"}}>
+ <div style={{borderRight : "1px solid #e5e5e5"}}>
+ <ButtonStyled onClick={props.openLogin}>
+ <ExitToAppIcon style={{color:"#00bcd4"}}/>Entrar
+ </ButtonStyled>
+ </div>
+
+ <div>
+ <ButtonStyled onClick={props.openSignUp}>
+ Cadastre-se
+ </ButtonStyled>
+ </div>
+ </div>
+ </React.Fragment>
+ )
+ }
+ </div>
+ {
+ /*Renders settings and log off buttons */
+ state.userIsLoggedIn &&
+ <React.Fragment>
+ <Link to={"/editarperfil"} className={`menu-buttons`}>
+ <SettingsIcon/> Configurações
+ </Link>
+
+ <Link to={"/"} className={`menu-buttons`} onClick={handleLogout}>
+ <ExitToAppIcon/> Sair
+ </Link>
+ </React.Fragment>
+ }
+ </StyledDrawer>
+ )
+}
+
+const MyArea = styled.div`
+ margin : 0 16px;
+ display : flex;
+ flex-direction : row;
+
+ .text {
+ font-size : 16px;
+ color : #666;
+ align-self : center;
+ }
+
+ .user-avatar {
+ margin-right : 10px;
+ align-self : center;
+ border-radius : 50%;
+ border : 1px solid #fff;
+ max-width : 50px;
+ max-height : 50px;
+ overflow : hidden;
+
+ img {
+ width : 100%;
+ height : 100%;
+ vertical-align : middle;
+ }
+ }
+`
+
+const ButtonPublicarRecurso = styled(Button)`
+ font-weight : 500 !important;
+ border : 1.5px #666 solid !important;
+ color: #666;
+ box-shadow: none;
+ margin : 0 8px !important;
+ padding : 6px 25px !important;
+
+`
+
+const StyledDrawer = styled(Drawer)`
+ .MuiPaper-root {
+ width : 65% !important;
+ }
+
+ .menu-buttons {
+ padding : 10px 16px;
+ font-size : 14px;
+ font-weight : 500;
+ cursor : pointer;
+ outline : 0;
+ color : #666 !important;
+ text-decoration : none !important;
+ background-color : transparent;
+ font-family : 'Roboto', sans serif;
+
+ .MuiSvgIcon-root {
+ color : #a5a5a5 !important;
+ margin-right : 20px;
+ vertical-align : middle !important;
+ font-weight : normal !important;
+ font-style : normal !important;
+ font-size : 24px !important;
+ line-height : 1 !important;
+ letter-spacing : normal !important;
+ text-transform : none !important;
+ display : inline-block !important;
+ white-space : nowrap !important;
+ word-wrap : normal !important;
+ direction : ltr !important;
+ }
+ }
+
+ .selected {
+ color : #fff !important;
+ background-color : #00bcd4;
+ .MuiSvgIcon-root {
+ color : #fff !important;
+ }
+ }
+`
+
+const MenuBody = styled.div`
+ margin-top : 20px;
+ display : flex;
+ flex-direction : column;
+ color : #666;
+`
diff --git a/src/Components/ModalEditarColecao.js b/src/Components/ModalEditarColecao.js
new file mode 100644
index 0000000000000000000000000000000000000000..4353e8dd233dacfc78629ff003248f5a732d207c
--- /dev/null
+++ b/src/Components/ModalEditarColecao.js
@@ -0,0 +1,125 @@
+/*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 { 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 CloseIcon from '@material-ui/icons/Close';
+import CloseModalButton from './CloseModalButton'
+import EditarColecaoForm from './EditarColecaoForm.js'
+export default function ModalEditarColecao (props) {
+
+ return (
+ <StyledModal
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ open={props.open}
+
+ centered="true"
+ onClose={props.handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Fade in={props.open}>
+ <Container>
+ <Header>
+ <span style={{width:"32px"}}/>
+ <h2>Editar Coleção</h2>
+ <CloseModalButton handleClose={props.handleClose} id={props.id}/>
+ </Header>
+ <Content style={{paddingTop : "0"}}>
+ <EditarColecaoForm id={props.id} handleClose={props.handleClose} finalize={props.handleClose}/>
+ </Content>
+ </Container>
+ </Fade>
+ </StyledModal>
+ )
+}
+
+const Content = styled.div`
+ padding : 20px 30px;
+ overflow-y: visible;
+
+`
+
+const Header = styled.div`
+ display : flex;
+ flex-direction : row;
+ padding : 10px 26px 0 26px;
+ align-items : center;
+ justify-content : space-between;
+ height : 64px;
+
+ h2 {
+ font-size : 26px;
+ font-weight : lighter;
+ color : #666
+ }
+`
+
+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;
+`
+
+const StyledModal = styled(Modal)`
+ .djXaxP{
+ margin : 0 !important;
+ }
+ display : flex;
+ align-items: center;
+ justify-content : center;
+ text-align : center;
+ padding : 10px !important;
+ max-width : none;
+ max-height : none;
+`
+
+const Container = styled.div`
+ box-sizing : border-box;
+ box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+ background-color : white;
+ align : center;
+ display : flex;
+ flex-direction : column;
+ min-width : 240px;
+ max-height : none;
+ position : relative;
+ padding : 10px;
+ border-radius : 4px;
+
+ @media screen and (min-width : 96px) {
+ width : 500px;
+ }
+
+ @media screen and (max-width : 699px) {
+ width : 100%;
+ height : 100%;
+ }
+`
diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js
index 03f16486b99a2b9efdd96b6def38d08c97f507b4..87d20942268212fae9e5a745d4abd363567d3464 100644
--- a/src/Components/Notifications.js
+++ b/src/Components/Notifications.js
@@ -31,6 +31,9 @@ import {apiDomain, apiUrl} from '../env.js'
import axios from 'axios'
import ActivityListItem from './ActivityListItem.js'
import {getAxiosConfig} from './HelperFunctions/getAxiosConfig.js'
+import { withStyles } from '@material-ui/core/styles';
+import {Link} from 'react-router-dom'
+
const StyledBadge = styled(Badge) `
.MuiBadge-dot-45{
height : 9px ;
@@ -55,14 +58,36 @@ const StyledNotificationButton = styled(Button)`
}
`
+const StyledMenu = withStyles({
+ paper: {
+ border: '1px solid #d3d4d5',
+ },
+})((props) => (
+ <Menu
+ elevation={0}
+ getContentAnchorEl={null}
+ anchorOrigin={{
+ horizontal: 'center',
+ vertical: "bottom",
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
+ }}
+ {...props}
+ />
+));
+
export default function Notification (props) {
const [anchorEl, setAnchorEl] = React.useState(null);
const [notifications, setNotifications] = useState([]);
const [notificatonsLength, setLength] = useState(0);
useEffect(() => {
- let config = getAxiosConfig()
- axios.get(`${apiUrl}/feed?offset=0&limit=30`, config)
- .then( (response) => {
+
+ setTimeout(() => {
+ let config = getAxiosConfig()
+ axios.get(`${apiUrl}/feed?offset=0&limit=30`, config)
+ .then( (response) => {
if ( response.headers['access-token'] ) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
@@ -71,13 +96,15 @@ export default function Notification (props) {
setNotifications(response.data)
setLength(response.data.length)
- },
- (error) => {
- console.log('error while running getNotifications')
- }
- )
- }, [])
+ },
+ (error) => {
+ console.log('error while running getNotifications')
+ }
+ )
+ }, 1000);
+ }, [sessionStorage.getItem('@portalmec/uid')])
function handleClick(event) {
+ console.log('event.currentTarget: ', event.currentTarget)
setAnchorEl(event.currentTarget);
}
@@ -118,6 +145,13 @@ export default function Notification (props) {
/>
)
}
+ <div style={{padding : "0 15px", borderTop : "1px solid #dadada"}}>
+ <Link to="/perfil">
+ <NoPadButton>
+ MOSTRAR TODAS
+ </NoPadButton>
+ </Link>
+ </div>
</ContainerDiv>
</StyledMenu>
</React.Fragment>
@@ -125,8 +159,8 @@ export default function Notification (props) {
}
-const StyledMenu = styled(Menu)`
-
+const NoPadButton = styled(Button)`
+ padding : 6px 0 !important;
`
const ContainerDiv = styled.div`
@@ -134,15 +168,16 @@ const ContainerDiv = styled.div`
right : 5%;
width : 360px;
max-height : 400px;
- position : absolute;
box-shadow : 8px 8px 8px 8px
rgba(0,0,0,.1);
overflow-y : scroll;
padding : 5px 5px 5px 5px;
min-width : 160px;
+ background-color : #f1f1f1;
.cabecalho {
- border-bottom : 1px solid #666;
+ border-bottom : 1px solid #dadada;
+ padding : 10px 15px;
.cabecalho-marcar {
font-family: Lato,bold;
diff --git a/src/Components/PublicationPermissionsContent.js b/src/Components/PublicationPermissionsContent.js
index fe3536dc8c3afb0eb810835cb5f5c56430660d21..bf115152247bea197475a22ddcc2da38681123c9 100644
--- a/src/Components/PublicationPermissionsContent.js
+++ b/src/Components/PublicationPermissionsContent.js
@@ -32,7 +32,6 @@ const BlueRadio = withStyles({
})((props) => <Radio color="default" {...props} />);
export default function PublicationPermissionsContent (props) {
- {/*To DO change to get https://api.portalmec.c3sl.ufpr.br/v1/questions*/}
const [questionsArr, setQuestionsArr] = useState([])
const handleSetQuestionsArr = (newArr) => {setQuestionsArr(newArr)}
@@ -86,7 +85,7 @@ export default function PublicationPermissionsContent (props) {
</RadioGroup>
</Grid>
</React.Fragment>
-
+
)
}
</Grid>
diff --git a/src/Components/ShareModal.js b/src/Components/ShareModal.js
index 1f3b771286cd3f95c331295e9691277914e11842..fd9e6441c4bf4b0ecc52d8d9f3eb3e38b72b92c0 100644
--- a/src/Components/ShareModal.js
+++ b/src/Components/ShareModal.js
@@ -33,11 +33,14 @@ import LinkIcon from '../img/link_icon.svg'
import CloseModalButton from './CloseModalButton.js'
export default function ReportModal (props) {
- const refContainer = useRef(props.link);
-
- function copyToClipboard(e) {
- let copyText = document.getElementById('p-text')
- console.log(copyText)
+ const textAreaRef = useRef(props.link);
+
+ const copyToClipboard = (e) => {
+ textAreaRef.current.select();
+ document.execCommand('copy');
+ // This is just personal preference.
+ // I prefer to not show the whole text area selected.
+ e.target.focus();
};
return (
@@ -97,10 +100,14 @@ export default function ReportModal (props) {
{/*Get shareable link*/}
<Grid item xs={4}>
+ {
+ document.queryCommandSupported('copy') &&
<ShareButton onClick={copyToClipboard}>
<img src={LinkIcon} alt="link-icon"/>
- <p id="p-text" value={props.link}>COPIAR LINK</p>
+ <p>COPIAR LINK</p>
+ <textarea ref={textAreaRef} value={props.link} readOnly style={{height: "0", position: "absolute",zIndex: "-1"}}/>
</ShareButton>
+ }
</Grid>
</Grid>
</ShareInfo>
diff --git a/src/Components/SignUpContainer.js b/src/Components/SignUpContainer.js
deleted file mode 100644
index 9d01f58daf46303a7b3967d3eb8adc5d2e7e9ec0..0000000000000000000000000000000000000000
--- a/src/Components/SignUpContainer.js
+++ /dev/null
@@ -1,326 +0,0 @@
-/*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, {Component} from "react";
-import GoogleLogin from 'react-google-login'
-import { Button } from '@material-ui/core';
-//import FacebookLogin from 'react-facebook-login';
-import CloseIcon from '@material-ui/icons/Close';
-import styled from 'styled-components'
-import {device} from './device.js'
-import FormInput from "./FormInput.js"
-import {StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, StyledGoogleLoginButton, H3Div} from './LoginContainer.js'
-const responseGoogle = (response) => {
- console.log(response);
-}
-
-const responseFacebook = (response) => {
- console.log(response);
-}
-
-var Recaptcha = require('react-recaptcha')
-
-//alterar funcao do callback
-var callback = function () {
- console.log('Done!!!!');
-};
-
-function validateUserInfo (name, email, password) {
- const errors = []
-
- if(name.lenght === 0 ) {
- errors.push({name : "name", msg : "Faltou preencher seu nome completo."})
- }
- if(email.length === 0) {
- errors.push({name : "email", msg : "Faltou preencher seu e-mail."})
- }
- else if ( (email.split("").filter(x => x === "@").length !== 1) || (email.indexOf(".") === -1) ){
- errors.push({name : "email", msg : "Insira um endereço de email válido."})
- errors.push({name : "email", msg : "Por exemplo: seunome@gmail.com, seunome@hotmail.com"})
- }
- if(password.length === 0) {
- errors.push({ name : "password", msg : "Faltou definir uma senha."})
- }
-
- return errors
-}
-
-class SignUpContainer extends Component {
- constructor (props) {
- super(props);
-
- this.state = {
- name: "",
- email: "",
- password: "",
-
- errors : []
- };
- };
-
- switchModal = (e) => {
- e.preventDefault()
- this.props.handleClose()
- this.props.openLogin()
- };
-
- handleChange = e => {
- this.setState({[e.target.name]: e.target.value})
-
- };
-
- onSubmit = (e) => {
- //on submit we should prevent the page from refreshing
- e.preventDefault(); //though this is arguable
- const { name, email, password } = this.state;
- const errors = validateUserInfo(name, email, password)
- console.log(this.state)
- if ( errors.length < 1) {
- //pass user info to Store.js and clear all text fields
- this.props.handleLoginInfo(this.state)
- this.setState({
- name: "",
- email: "",
- password: ""
- })
- }
- else {
- this.setState({errors})
- }
-
- }
-
- render () {
- const { errors } = this.state;
- return (
- <ContainerStyled >
- <DialogHeaderStyled>
- <span style={{width:"32px"}}/>
- <H2Styled> Cadastrar-se
- </H2Styled>
- <StyledCloseModalButton onClick={this.props.handleClose} >
- <CloseIcon />
- </StyledCloseModalButton>
- </DialogHeaderStyled>
-
- <DialogContentDiv>
- <SocialConnectDiv>
- <StyledGoogleLoginButton
- clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
- onSuccess={responseGoogle}
- onFailure={responseGoogle}
- cookiePolicy={'single_host_origin'}
- >
- <span style={{textTransform:"none", fontSize:"13px"}}>Usando o Google</span>
- </StyledGoogleLoginButton>
- </SocialConnectDiv>
-
- <H3Div>
- <H3Styled>
- <RightSideStrikedH3/>
- <span style={{verticalAlign:"middle"}}>ou</span>
- <LeftSideStrikedH3/>
- </H3Styled>
- </H3Div>
-
- <form ref="form" onSubmit={this.onSubmit}>
- {errors.map(error => (
- <p key={error.name}>Error: {error.msg}</p>
- ))}
- <FormInput
- inputType={"text"}
- name={"name"}
- value={this.state.name}
- placeholder={"Nome Completo"}
- handleChange={e => this.handleChange(e)}
- required={true}
- />
- <br/>
- <FormInput
- inputType={"text"}
- name={"email"}
- value={this.state.email}
- placeholder={"E-mail"}
- handleChange={e => this.handleChange(e)}
- required={true}
- />
- <br/>
- <FormInput
- inputType={"password"}
- name={"password"}
- value={this.state.password}
- placeholder={"Senha"}
- handleChange={e => this.handleChange(e)}
- required={true}
- />
- <br/>
- <Recaptcha
- sitekey="6LcyFr8UAAAAAOd0Po6rmZC1D_nYik8nLCAkNKsc"
- size="normal"
- render="explicit"
- onloadCallback={callback}
- />
- <ConfirmContainerStyled>
- <StyledSignUpButton type="submit" variant="contained">
- <span
- style={{paddingLeft:"16px", paddingRight:"16px", borderRadius:"3px", boxSizing:"border-box",
- fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}
- >
- CADASTRAR
- </span>
- </StyledSignUpButton>
- </ConfirmContainerStyled>
- </form>
-
- <TermosDeUsoStyled>
- <p>Ao se cadastrar, você está aceitando os Termos de Uso e de PolÃtica
- de Privacidade. <a href="./">Ler Termos</a>.</p>
- </TermosDeUsoStyled>
-
- <DialogFooterStyled>
- <span style={{textAlign:"center", fontSize: "14px"}}>Já possui cadastro? <StyledAnchor href="" onClick={e => this.switchModal(e)}>ENTRAR</StyledAnchor></span>
- </DialogFooterStyled>
- </DialogContentDiv>
- </ContainerStyled>
- )
- }
-}
-
-export default SignUpContainer
-
-const ContainerStyled = styled.div`
- box-sizing : border-box;
- background-color : white;
- max-width : none;
- align : center;
- display : flex;
- flex-direction : column;
- min-width : 450px;
-
- max-height : none;
- position : relative;
- padding : 10px;
- @media ${device.mobileM} {
- width : 100%;
- height : 100%;
- }
-`
-
-const DialogFooterStyled = styled.div`
- box-sizing : border-box;
- font-family : 'Roboto', sans serif;
- margin : 20px -20px;
- padding-top : 20px;
- border-top : 1px #e5e5e5 solid;
- justify-content : center;
- text-align : center;
- line-height : 1.42857143
-`
-
-const TermosDeUsoStyled = styled.div`
- font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif;
- color : #666;
- font-size : 13px;
- margin : 0 0 10px;
- max-width : 350px;
- margin-top : 10px;
- text-align : start;
-`
-
-const H2Styled = styled.h2`
- align-self : center;
- color : #666;
- font-size : 26px;
- font-weight : lighter;
- justify-content: space-between;
- font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
- text-align: center;
- letter-spacing: .005em;
-`
-
-const H3Styled = styled.h3`
- overflow : hidden;
- text-align : center;
- font-size : 14px;
- color : #666;
- margin : 10px 0;
-`
-const RightSideStrikedH3 = styled.div`
- display : inline-block;
- border-bottom: 1px dotted #666;
- vertical-align : middle;
- font-weight : 500;
- margin-right : 5px;
- width : 45%;
-`
-
-const LeftSideStrikedH3 = styled.div`
- display : inline-block;
- border-bottom: 1px dotted #666;
- vertical-align : middle;
- font-weight : 500;
- margin-left : 5px;
- width : 45%;
-`
-
-const StyledAnchor = styled.a`
- color : #00bcd4;
- text-decoration : none;
-`
-//const StyledCloseModalButton = styled(Button)`
-// display : inline-block;
-// position : relative;
-// float : right !important;
-// margin-right : -8px;
-// background : transparent;
-// min-width: 0 !important;
-// width : 40px;
-//`
-
-const ConfirmContainerStyled = styled.div`
- display : flex;
- margin-top : 10px;
- align-items : center;
- justify-content : center;
- box-sizing : border-box;
- font-size : 13px;
-`
-
-const StyledSignUpButton = styled(Button)`
- background-color: #00bcd4 !important;
- box-shadow : none !important;
- outline: none !important;
- border : 0 !important;
- overflow : hidden !important;
- width : 50% !important;
- display : inline-block !important;
- font-family : 'Roboto', sans serif !important;
- font-size: 14px !important;
- height : 36px !important;
- align-items : center !important;
- border-radius: 3px !important;
- align-self : 50% !important;
- :hover {
- background-color : #00acc1 !important;
- }
-`
-
-const StyledRecaptcha = styled(Recaptcha)`
- display : flex !important;
- justify-content : center !important;
-`
diff --git a/src/Components/SignUpContainerFunction.js b/src/Components/SignUpContainerFunction.js
index 965e21f62ec1338acda820e3d29a9c82289db267..7f49992a254ab10e2e4d38d295a8e390925525e5 100644
--- a/src/Components/SignUpContainerFunction.js
+++ b/src/Components/SignUpContainerFunction.js
@@ -24,15 +24,21 @@ import CloseIcon from '@material-ui/icons/Close';
import styled from 'styled-components'
import {device} from './device.js'
import FormInput from "./FormInput.js"
-import {StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, H3Div} from './LoginContainer.js'
+import {StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, StyledGoogleLoginButton, H3Div} from './LoginContainerFunction.js'
+import {apiUrl} from '../env.js'
+import {GoogleLoginButton} from './LoginContainerFunction'
import ValidateUserInput from '../Components/FormValidationFunction.js'
+import GoogleLogo from "../img/logo_google.svg"
var Recaptcha = require('react-recaptcha')
-var callback = function () {
- console.log('Done!!!!');
-};
-
+async function handleGoogleAttempt () {
+ console.log("handleGoogleAttempt")
+ let request_url = (
+ `${apiUrl}/omniauth/google_oauth2?auth_origin_url=` + window.location.href + '&omniauth_window_type=sameWindow&resource_class=User'
+ )
+ window.location.replace(request_url)
+}
export default function SignUpContainer (props) {
const [formNome, setNome] = useState(
{
@@ -132,8 +138,10 @@ export default function SignUpContainer (props) {
<DialogContentDiv>
<SocialConnectDiv>
- <Button onClick={() => {console.log('handleGoogleAttempt')}}>cadastro com google</Button>
-
+ <GoogleLoginButton onClick={handleGoogleAttempt}>
+ <img src={GoogleLogo} alt="google-logo" className="google-logo"/>
+ <span>Usando o Google</span>
+ </GoogleLoginButton>
</SocialConnectDiv>
<H3Div>
@@ -177,12 +185,6 @@ export default function SignUpContainer (props) {
help = {formSenha.key ? (formSenha.value.length == 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
/>
<br/>
- <Recaptcha
- sitekey="6LcyFr8UAAAAAOd0Po6rmZC1D_nYik8nLCAkNKsc"
- size="normal"
- render="explicit"
- onloadCallback={callback}
- />
<ConfirmContainerStyled>
<StyledSignUpButton type="submit" variant="contained">
<span
@@ -224,6 +226,8 @@ const ContainerStyled = styled.div`
width : 100%;
min-width : unset;
height : 100%;
+ min-width : unset !important;
+
}
`
@@ -272,7 +276,7 @@ const RightSideStrikedH3 = styled.div`
vertical-align : middle;
font-weight : 500;
margin-right : 5px;
- width : 45%;
+ width : 44%;
`
const LeftSideStrikedH3 = styled.div`
@@ -281,7 +285,7 @@ const LeftSideStrikedH3 = styled.div`
vertical-align : middle;
font-weight : 500;
margin-left : 5px;
- width : 45%;
+ width : 44%;
`
const StyledAnchor = styled.a`
diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
new file mode 100644
index 0000000000000000000000000000000000000000..43ff66284eca688e2582703fa8c988bcb6798027
--- /dev/null
+++ b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
@@ -0,0 +1,219 @@
+/*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 {Store} from '../../../Store.js'
+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.js'
+import CloseIcon from '@material-ui/icons/Close';
+import ExcluirAvatar from '../../../img/Excluir.png'
+import GreyButton from '../../GreyButton'
+import FormInput from '../../FormInput'
+import {Link} from 'react-router-dom'
+import SnackbarComponent from '../../SnackbarComponent.js'
+import {getAxiosConfig} from '../../HelperFunctions/getAxiosConfig'
+
+function CloseModalButton (props) {
+ return (
+ <StyledCloseModalButton onClick={props.handleClose}>
+ <CloseIcon/>
+ </StyledCloseModalButton>
+ )
+}
+
+export default function ModalExcluirConta (props) {
+ const {state, dispatch} = useContext(Store)
+
+ const [formEmail, setEmail] = useState(
+ {
+ key : false,
+ value : "",
+ }
+ )
+ const handleChange = (e) => {
+ const userInput = e.target.value
+ let flag = !(userInput === state.currentUser.email)
+
+ setEmail({...formEmail,
+ key : flag,
+ value : userInput
+ })
+ }
+
+ const [snackbarOpen, toggleSnackbar] = useState(false)
+
+ const deletedAccountText = `A conta ${state.currentUser.email} foi deletada com sucesso`
+
+ const deleteAccount = () => {
+ let config = getAxiosConfig()
+
+ axios.delete( (`${apiUrl}/auth/`), config
+ ).then( (response) => {
+ console.log(response)
+ toggleSnackbar(true)
+
+ dispatch({
+ type: "USER_DELETED_ACCOUNT",
+ });
+
+ props.handleClose()
+ }, (error) => {console.log(error);})
+ }
+
+ return (
+ <React.Fragment>
+ <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={deletedAccountText}/>
+ <StyledModal
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ open={props.open}
+ centered="true"
+ onClose={props.handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Fade in={props.open}>
+ <Container>
+ <Header>
+ <span style={{width:"32px"}}/>
+ <h2>Excluir a Conta Definitivamente</h2>
+ <CloseModalButton handleClose={props.handleClose}/>
+ </Header>
+ <Content>
+ <div style={{display : "flex", flexDirection : "column", color : "#666", textAlign : "left"}}>
+ <div style={{display : "flex", flexDirection : "row", margin : "0 30px", justifyContent : "center", alignContent : "center"}}>
+ <div style={{height : "90px", position : "relative"}}>
+ <img src={ExcluirAvatar} alt="excluir-avatar" style={{height : "inherit", objectFit : "contain", verticalAlign : "middle"}}/>
+ </div>
+ <p style={{paddingLeft : "10px"}}>Você é muito importante para a rede, ficarÃamos felizes se você ficasse. Quer contar o que aconteceu? Talvez possamos ajudar. <StyledLink to="/contato">Entre em contato.</StyledLink></p>
+ </div>
+ <p style={{marginTop : "20px"}}>
+ Saiba que a exclusão da conta removerá o seu perfil permanentemente. Se você publicou algum recurso, ele ainda ficará disponÃvel para os usuários da plataforma.
+ </p>
+ <p style={{marginTop : "20px"}}>
+ É necessário que você digite seu e-mail para confirmar a exclusão:
+ </p>
+ <FormInput
+ inputType={"text"}
+ name={"email"}
+ value={formEmail.value}
+ placeholder={"Digite seu e-mail de cadastro"}
+ handleChange={e => handleChange(e)}
+ required={true}
+ error = {formEmail.key}
+ help = {formEmail.key ? ( formEmail.value.length == 0 ? "Faltou preencher seu e-mail." : "O e-mail deve ser o mesmo no qual você cadastrou esta conta") : ""}
+ />
+ <div style={{display : "flex", flexDirection : "row", justifyContent : "space-evenly", paddingTop : "15px"}}>
+ <GreyButton callback={props.handleClose} text={"Cancelar"}/>
+ <RedButton disabled={formEmail.key} onClick = {() => {deleteAccount()}}>EXCLUIR PERMANENTEMENTE</RedButton>
+ </div>
+ </div>
+ </Content>
+ </Container>
+ </Fade>
+ </StyledModal>
+ </React.Fragment>
+ )
+}
+
+const RedButton = styled(Button)`
+ background-color : rgb(230,60,60) !important;
+ color : #fff !important;
+ font-weight : bolder;
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+`
+
+const Content = styled.div`
+ padding : 20px 30px;
+
+`
+
+const Header = styled.div`
+ display : flex;
+ flex-direction : row;
+ padding : 10px 26px 0 26px;
+ align-items : center;
+ justify-content : space-between;
+ height : 64px;
+
+ h2 {
+ font-size : 26px;
+ font-weight : lighter;
+ color : #666
+ }
+`
+
+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;
+`
+
+const StyledModal = styled(Modal)`
+ .djXaxP{
+ margin : 0 !important;
+ }
+ display : flex;
+ align-items: center;
+ justify-content : center;
+ text-align : center;
+ padding : 10px !important;
+ max-width : none;
+ max-height : none;
+`
+
+const Container = styled.div`
+ box-sizing : border-box;
+ box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+ background-color : white;
+ align : center;
+ display : flex;
+ flex-direction : column;
+ min-width : 240px;
+ max-height : none;
+ position : relative;
+ padding : 10px;
+ border-radius : 4px;
+
+ @media screen and (min-width : 700px) {
+ max-width : 600px;
+ max-height : 600px;
+ }
+
+ @media screen and (max-width : 699px) {
+ overflow-y : scroll;
+ width : 100%;
+ height : 100%;
+ }
+`
+const StyledLink = styled(Link)`
+ text-decoration : none !important;
+ color : #00bcd4 !important;
+`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
index 38080f38f5e14aec7ff2768d86d3b945b4186843..7e7b7b00cbebbe058420cdbb184d808920c2c7cf 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
@@ -108,6 +108,7 @@ export default function TabPanelAtividades (props) {
{
notificationsSlice.map( (notification) =>
<ActivityListItem
+ onMenuBar={false}
avatar = {notification.owner.avatar ? apiDomain + notification.owner.avatar : null}
activity = {notification.activity}
actionType = {notification.trackable_type}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
index ee09ebe4b676c6ef8cff4013bbe67d82cbd38ef7..e111f1a941dada230b02d11f440a3bd424dd3da6 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
@@ -23,6 +23,7 @@ import FormInput from "../../FormInput.js"
import {CompletarCadastroButton} from './PanelSolicitarContaProfessor.js'
import {ButtonCancelar} from './PanelEditarPerfil.js'
import ValidateUserInput from '../../FormValidationFunction.js'
+import ModalExcluirConta from './ModalExcluirConta.js'
export default function TabPanelGerenciarConta (props) {
const [senhaAtual, setSenhaAtual] = useState(
@@ -128,6 +129,8 @@ export default function TabPanelGerenciarConta (props) {
}
+ const [modalExcluir, setModalExcluir] = useState(false)
+
return (
<>
<Paper elevation={3} style= {{width:"100%"}}>
@@ -210,7 +213,8 @@ export default function TabPanelGerenciarConta (props) {
<span style={{margin:"0", display:"flex", justifyContent:"flex-start"}}>Antes de excluir a sua conta, saiba que ela será removida permanentemente.</span>
</div>
<div style={{margin:"0", display:"flex", justifyContent:"flex-start"}}>
- <ButtonCancelar style={{color:'#eb4034'}}>EXCLUIR CONTA</ButtonCancelar>
+ <ModalExcluirConta open={modalExcluir} handleClose={() => {setModalExcluir(false)}}/>
+ <ButtonCancelar style={{color:'#eb4034'}} onClick={() => {setModalExcluir(true)}}>EXCLUIR CONTA</ButtonCancelar>
</div>
</div>
</div>
@@ -218,3 +222,4 @@ export default function TabPanelGerenciarConta (props) {
</>
)
}
+
diff --git a/src/Pages/TermsPage.js b/src/Pages/TermsPage.js
index 7a168814b56a521e46b8a86e5dd2155b25e168f4..b8296f954e3a0a15201504828ddcd2c13bf68e11 100644
--- a/src/Pages/TermsPage.js
+++ b/src/Pages/TermsPage.js
@@ -97,7 +97,7 @@ export default function TermsContainer (props) {
userAgreement: true
})
- if (props.cameFromPublishButton) {
+ if (props.location.state) {
props.history.push('/professor')
}else {
props.history.push('/permission')
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 83acf71d2e65b3e60dc654cfb92a9ba0f54b6661..6c1359d6b64ae45c734d83c0108e66f964f29a07 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -65,7 +65,7 @@ export default function UserPage (props){
Number(props.location.state) || 0
);
const [tabs, setTabs] = useState([
- 'Atividades', 'Status e Conquistas', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede'
+ 'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede'
])
const handleChangeTab = (event, newValue) => {
setTabValue(newValue)
@@ -84,7 +84,7 @@ export default function UserPage (props){
if((response.data.role_ids.includes(4))) {
setTabs([
- 'Atividades', 'Status e Conquistas', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede', 'Curadoria'
+ 'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede', 'Curadoria'
])
}
},
@@ -162,16 +162,14 @@ export default function UserPage (props){
{tabValue === 0 &&
<TabPanelAtividades id={id} config={GetHeaderConfig()}/>}
{tabValue === 1 &&
- <TabPanelStatusEConquistas id={id} config={GetHeaderConfig()}/>}
- {tabValue === 2 &&
<TabPanelMeusRecursos id={id} config={GetHeaderConfig()}/>}
- {tabValue === 3 &&
+ {tabValue === 2 &&
<TabPanelFavoritos id={id} config={GetHeaderConfig()}/>}
- {tabValue === 4 &&
+ {tabValue === 3 &&
<TabPanelColecoes id={id} config={GetHeaderConfig()}/>}
- {tabValue === 5 &&
+ {tabValue === 4 &&
<TabPanelRede id={id} config={GetHeaderConfig()}/>}
- {tabValue === 6 &&
+ {tabValue === 5 &&
<TabPanelCuradoria id={id} config={GetHeaderConfig()}/>}
</Grid>
</Grid>
diff --git a/src/Store.js b/src/Store.js
index 2d5aaa81d7419740f6f4a34618975773ea836cac..3838a6b5245ef2be9598ec739fdde53c14f217ea 100644
--- a/src/Store.js
+++ b/src/Store.js
@@ -35,7 +35,7 @@ const initialState = {
height: 0
},
currentUser: {
- askTeacherQuestion : true,
+ askTeacherQuestion : false,
id : '',
username : '',
email : '',
@@ -81,10 +81,13 @@ function reducer(state, action) {
currentUser:action.login
}
case 'USER_LOGGED_OUT':
+ sessionStorage.clear()
return {
...state,
userIsLoggedIn:action.userLoggedOut,
- currentUser:action.login
+ currentUser:action.login,
+ userAgreedToPublicationTerms: false,
+ userAgreedToPublicationPermissions: false
}
case 'USER_AGREED_TO_PUBLICATION_TERMS':
return {
@@ -106,6 +109,32 @@ function reducer(state, action) {
...state,
currentUser : action.currUser
}
+ case 'USER_DELETED_ACCOUNT':
+ localStorage.clear()
+ return {
+ ...state,
+ userIsLoggedIn:false,
+ currentUser: {
+ askTeacherQuestion : true,
+ id : '',
+ username : '',
+ email : '',
+ accessToken : '',
+ clientToken : '',
+ userAvatar : '',
+ userCover : '',
+ uid : '',
+ followCount : 0,
+ collectionsCount : 0,
+ submitter_request : 'default',
+ roles : []
+ },
+ }
+ case 'TOGGLE_MODAL_COLABORAR_PLATAFORMA':
+ return {
+ ...state,
+ modalColaborarPlataformaOpen : action.modalColaborarPlataformaOpen
+ }
default:
return state
}
diff --git a/src/img/Excluir.png b/src/img/Excluir.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd6fb1bd51208e07d3565f89b5e517f8e1386145
Binary files /dev/null and b/src/img/Excluir.png differ