diff --git a/src/App.js b/src/App.js
index 96fcaca9a3e0c03ec95e1414350360d6a649f3ea..a02de52141ef6696607bd8fd1c676ff67dc34188 100644
--- a/src/App.js
+++ b/src/App.js
@@ -73,16 +73,10 @@ export default function App(){
<Route path="/busca" component={Search} />
<Route path="/perfil-atualizacoes" component={UserPage} />
<Route path="/recurso" component={ResourcePage}/>
-
<Route path="/termos-publicar-recurso" component={TermsPage}/>
<Route path="/permission" component={PublicationPermissionsPage}/>
- {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
-
-
<Route path="/termos" component={UserTerms}/>
<Route path="/teste" component={Teste}/>
-
-
</Switch>
<EcFooter/>
<GNUAGPLfooter/>
diff --git a/src/Components/Checkbox.js b/src/Components/Checkbox.js
index 9e497b4cc68267ba337fb8d3c89b72fbcf22ecf5..d2d9b96ee7647fe8d452a97e4fa789c44a16c11b 100644
--- a/src/Components/Checkbox.js
+++ b/src/Components/Checkbox.js
@@ -36,10 +36,11 @@ export default function LabeledCheckbox(props) {
return (
<StyledFormControlLabel
control={
- <StyledCheckbox
+ <Checkbox
disabled = {props.disabledCheckbox}
value = {props.checked}
onChange = {props.handleChange}
+ style = { { color : props.disabledCheckbox ? "#000" : "#00bcd4"}}
/>
}
label={<span style={{ fontSize: '12px' }}>{props.label}</span>}
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 2a5a600c3df0615fc212f9de9870c4e2bed65bf9..e6bd1c688ce1ffe05d6a5eb4e55325ac2c4c534d 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -21,12 +21,6 @@ import {makeStyles} from '@material-ui/styles';
import styled from 'styled-components'
import TextField from '@material-ui/core/TextField';
-const FormContainerStyled = styled.form`
- display: flex;
- flex-wrap : wrap;
- padding : 2px;
-`
-
const StyledTextField = styled(TextField)`
max-width: 100%;
font-size : 15px;
@@ -47,7 +41,7 @@ const useStyles = makeStyles(theme => ({
maxWidth: '100%',
fontSize : '15px',
fontWeight : 'lighter',
- color : 'inherit',
+ color : '#00bcd4',
width : '100%',
},
}));
@@ -56,8 +50,6 @@ export default function FormInput(props) {
const classes = useStyles();
return (
- <FormContainerStyled noValidate autoComplete="off">
-
<StyledTextField
id="standard-basic"
label={props.placeholder}
@@ -68,9 +60,8 @@ export default function FormInput(props) {
value = {props.value}
onChange = {props.handleChange}
InputProps={{className: classes.input}}
+ required = {props.required}
style={{width:"100%"}}
/>
-
- </FormContainerStyled>
);
}
diff --git a/src/Components/Header.js b/src/Components/Header.js
index 623b91e17f4f2d69f68badcef2e427b4aaeec4d8..386a3e4afd50c508a94a90fc4a72e86b7481d263 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -25,16 +25,31 @@ import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal'
import { Store } from '../Store';
import ColaborarModal from './ColaborarModal.js'
-
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
//const StyledButton = styled(Button)`
// background : #ffa54c !important;
// boxShadow :none;
//`
+function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+
export default function Header(props){
const { state, dispatch } = useContext(Store)
const [signUpOpen, setSignUp] = useState(false)
const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+
+ const toggleSnackbar = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
+ }
+
+ handleSuccessfulLogin(false);
+ }
const handleSignUp = () => {
setSignUp(!signUpOpen)
@@ -54,12 +69,17 @@ export default function Header(props){
return(
<>
<AcessibilityBar/>
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+ anchorOrigin = {{ vertical:'top', horizontal:'middle' }}
+ >
+ <Alert severity="success" style={{backgroundColor:"#00acc1"}}>Você está conectado(a)!</Alert>
+ </Snackbar>
<MenuBar openSearchBar={handleClickSearch} openSignUp = {handleSignUp} openLogin = {handleLogin}/>
{ state.searchOpen &&
<SearchBar/>
}
<SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}/>
- <LoginModal open={loginOpen} handleClose={handleLogin} openSignUp={handleSignUp}/>
+ <LoginModal open={loginOpen} handleClose={handleLogin} openSignUp={handleSignUp} openSnackbar = {() => {handleSuccessfulLogin(true)}}/>
{/*<ColaborarModal open={state.modalColaborarPlataformaOpen} handleClose={handleKyloren} />*/}
</>
diff --git a/src/Components/LoginContainer.js b/src/Components/LoginContainer.js
index c148704c53c34f48bec95f21d711922e16c79820..8546fc4c22d5be46445bbe09f7aeaad57395e905 100644
--- a/src/Components/LoginContainer.js
+++ b/src/Components/LoginContainer.js
@@ -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) => {
@@ -37,7 +38,7 @@ class LoginContainer extends Component {
this.state = {
email : "",
senha : "",
- checkboxChecked : true
+ checkboxChecked : false
};
this.handleChecked = this.handleChecked.bind(this)
}
@@ -73,15 +74,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 +91,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>} onchange={this.handleChecked} disabledCheckbox={this.state.checkboxChecked}/>
+ <UserForgotTheirPasswordSpan>Esqueceu a senha? <a href="recuperar-senha" style={{textAlign: "right", color:"#4cd0e1"}}>Clique aqui!</a></UserForgotTheirPasswordSpan>
+ </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>
+ </DialogContentDiv>
</ContainerStyled>
)
}
@@ -144,24 +150,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 +224,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 +242,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 +260,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 +285,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;
`
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index 17540183d5908724a5cfdedff6895a71de01d713..65ff4e34b33250219905568d4dc5d47e681ca498 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.js
@@ -16,7 +16,7 @@ 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';
@@ -26,6 +26,8 @@ import LoginContainer from './LoginContainer'
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,21 @@ const StyledLogin = styled(Modal)`
border-radius : 4px;
`
+function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
export default function LoginModal (props){
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 +67,32 @@ 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.name,
+ email : response.data.email,
accessToken : response.headers['access-token'],
- client : response.headers.client
+ clientToken : response.headers.client,
+ userAvatar : response.data.avatar_file_name,
+ userCover : response.data.cover_file_name
}
}
)
props.handleClose();
+ props.openSnackbar();
}, (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"
@@ -89,5 +113,6 @@ export default function LoginModal (props){
/>
</Zoom>
</StyledLogin>
+ </>
)
}
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 75550ecfa33bf8355e542b1907b02623c215346d..17b4d9e26b3c78b80e1ad0bd324b679da1fce955 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -113,7 +113,6 @@ export default function MenuBar(props){
{ name: "Coleções", href: "/perfil/colecoes"},
{ name: "Rede", href: "/perfil/rede"},
{ name: "Configurações", href: "/perfil/cofiguracoes/editarperfil"},
- { name: "Sair", href:"/"}
]
return(
diff --git a/src/Components/MenuList.js b/src/Components/MenuList.js
index ee25a683be17fe2bc9318fe7e07ba597f4ff43ab..1268edb7f95a8b0d33f34430d5be57ee5834689f 100644
--- a/src/Components/MenuList.js
+++ b/src/Components/MenuList.js
@@ -78,7 +78,7 @@ export default function MenuList(props) {
>
{
- state.currentUser.userAvatar === '' ?
+ state.currentUser.userAvatar == '' || state.currentUser.userAvatar == null ?
(
<img src={Profile} alt={''} style={{maxWidth:"50px", maxHeight:"50px", borderRadius:"25px"}}/>
@@ -110,7 +110,7 @@ export default function MenuList(props) {
<Link key={item.name} to={item.href} 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>
@@ -118,6 +118,37 @@ export default function MenuList(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;
+ justify-content: space-between;
+ width : 100%;
+ font-size : 14px;
+ color : #a5a5a5;
+ padding : 5px 20px;
+`
+
//import React from 'react';
//import Button from '@material-ui/core/Button';
//import ClickAwayListener from '@material-ui/core/ClickAwayListener';
diff --git a/src/Components/PublicationPermissionsContent.js b/src/Components/PublicationPermissionsContent.js
index c40d49d7e16a0f6235b198be07fccb60ec6133e4..3b62deef23b511ad971908294c360ad7f4ffe887 100644
--- a/src/Components/PublicationPermissionsContent.js
+++ b/src/Components/PublicationPermissionsContent.js
@@ -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
diff --git a/src/Components/SignUpContainer.js b/src/Components/SignUpContainer.js
index f87f002efb76eb4ee4313705ab6f9e81003b4b9b..c41f36557ac58675bd9a97152794379346513347 100644
--- a/src/Components/SignUpContainer.js
+++ b/src/Components/SignUpContainer.js
@@ -24,7 +24,7 @@ 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);
}
@@ -40,14 +40,36 @@ 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 = {
- nomeCompleto: "",
+ name: "",
email: "",
- senha: ""
+ password: "",
+
+ errors : []
};
};
@@ -59,80 +81,97 @@ class SignUpContainer extends Component {
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
-
- //pass user info to Store.js and clear all text fields
- this.props.handleLoginInfo(this.state)
- this.setState({
- nomeCompleto: "",
- email: "",
- senha: ""
- })
+ const { name, email, password } = this.state;
+ const errors = validateUserInfo(name, email, password)
+ console.log(this.state)
+ if ( errors.length < 0) {
+ //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
- <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"
-
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={'single_host_origin'}
>
<span style={{textTransform:"none", fontSize:"13px"}}>Usando o Google</span>
</StyledGoogleLoginButton>
- </div>
- </div>
+ </SocialConnectDiv>
- <H3Styled>
- <RightSideStrikedH3/>
- <span style={{verticalAlign:"middle"}}>ou</span>
- <LeftSideStrikedH3/>
- </H3Styled>
+ <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={"nomeCompleto"}
- value={this.state.nomeCompleto}
- placeholder={"Nome Completo *"}
+ 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 *"}
+ placeholder={"E-mail"}
handleChange={e => this.handleChange(e)}
+ required={true}
/>
<br/>
<FormInput
inputType={"password"}
- name={"senha"}
- value={this.state.senha}
- placeholder={"Senha *"}
+ name={"password"}
+ value={this.state.password}
+ placeholder={"Senha"}
handleChange={e => this.handleChange(e)}
+ required={true}
/>
<br/>
- <StyledRecaptcha
+ <Recaptcha
sitekey="6LcyFr8UAAAAAOd0Po6rmZC1D_nYik8nLCAkNKsc"
+ size="normal"
render="explicit"
onloadCallback={callback}
/>
@@ -156,6 +195,7 @@ class SignUpContainer extends Component {
<DialogFooterStyled>
<span style={{textAlign:"center", fontSize: "14px"}}>Já possui cadastro? <StyledAnchor href="" onClick={e => this.switchModal(e)}>ENTRAR</StyledAnchor></span>
</DialogFooterStyled>
+ </DialogContentDiv>
</ContainerStyled>
)
}
@@ -168,24 +208,19 @@ const ContainerStyled = styled.div`
background-color : white;
max-width : none;
align : center;
- padding-left : 25px;
- padding-right:25px;
- padding-bottom:10px;
- border-radius: 4px;
+ display : flex;
+ flex-direction : column;
+ min-width : 450px;
+ min-height : 690px;
+ max-height : none;
+ position : relative;
+ padding : 10px;
@media ${device.mobileM} {
width : 100%;
height : 100%;
}
`
-const DialogHeaderStyled = styled.div`
- text-align : center;
- display : inline-flex;
- justify-content : space-between;
- padding : 10px 26px 0 26px;
- height : 64px;
-`
-
const DialogFooterStyled = styled.div`
box-sizing : border-box;
font-family : 'Roboto', sans serif;
@@ -197,15 +232,6 @@ const DialogFooterStyled = styled.div`
line-height : 1.42857143
`
-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;
- }
-`
-
const TermosDeUsoStyled = styled.div`
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color : #666;
@@ -223,7 +249,6 @@ const H2Styled = styled.h2`
font-weight : lighter;
justify-content: space-between;
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
- padding: 10px 26px 0 26px;
text-align: center;
letter-spacing: .005em;
`
@@ -257,15 +282,15 @@ 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 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;
@@ -273,6 +298,7 @@ const ConfirmContainerStyled = styled.div`
align-items : center;
justify-content : center;
box-sizing : border-box;
+ font-size : 13px;
`
const StyledSignUpButton = styled(Button)`
diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js
index 5300aab687c5626792b5ef4c9f3164fe52241047..8a9ffb206bf1fdef960ffa9784ced176603fbb39 100644
--- a/src/Components/SignUpModal.js
+++ b/src/Components/SignUpModal.js
@@ -63,26 +63,32 @@ export default function SignUpModal (props) {
const { state, dispatch } = useContext(Store)
const handleLoginInfo = (newLogin) => {
-
+ console.log(state.currentUser)
axios.post(`${apiUrl}/auth`,
{
- name : newLogin.nomeCompleto,
+ name : newLogin.name,
email: newLogin.email,
- password : newLogin.senha,
- password_confirmation : newLogin.senha
+ password : newLogin.password,
+ password_confirmation : newLogin.senha,
+ terms_of_service:true,
+ avatar: ""
}
).then( (response) => {
dispatch ( {
type: 'USER_SIGNED_UP',
userLoggedIn: !state.userIsLoggedIn,
login: {
- username : newLogin.username,
- email : newLogin.email,
+ id : response.data.id,
+ username : response.data.name,
+ email : response.data.email,
accessToken : response.headers['access-token'],
- client : response.headers.client
+ clientToken : response.headers.client,
+ userAvatar : response.data.avatar_file_name,
+ userCover : response.data.cover_file_name
}
}
)
+ console.log(state.currentUser)
props.handleClose()
}, (error) => {
console.log(':(')
diff --git a/src/Components/TabAtividades.js b/src/Components/TabAtividades.js
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/Components/TabPanelAtividades.js b/src/Components/TabPanelAtividades.js
new file mode 100644
index 0000000000000000000000000000000000000000..24fa2b0c07594ec9011b6bf15c789d95429581df
--- /dev/null
+++ b/src/Components/TabPanelAtividades.js
@@ -0,0 +1,52 @@
+import React, {useContext} from 'react'
+import styled from 'styled-components'
+import { Container } from 'react-grid-system'
+
+const MainContentContainer = styled(Container)`
+ background-color : #f4f4f4;
+ color : #666;
+ padding-bottom : 30px;
+`
+const DivNoPad = styled.div`
+ margin-bottom : 0;
+ padding-bottom : 0;
+`
+
+const ColMDNoPad = styled.div`
+ padding : 0;
+ width : 100%;
+ float : left;
+`
+
+const TituloDiv = styled.div`
+ font-size : 14px;
+ font-weight : 500;
+ letter-spacing : .01em;
+ line-height : 1.2em;
+`
+
+const SubHeader = styled.div`
+ padding-top : 16px;
+ background-color : #fff;
+ padding-bottom : 0;
+`
+
+export default function TabPanelAtividades (props) {
+ return (
+
+ <MainContentContainer>
+ <DivNoPad>
+ <ColMDNoPad>
+ <TituloDiv>
+ <SubHeader>
+ <div style={{display:"block", zIndex:"1", position:"relative"}}>
+ <p style={{marginBottom:"40px"}}>Todas Notificações</p>
+ </div>
+ </SubHeader>
+ </TituloDiv>
+ </ColMDNoPad>
+ </DivNoPad>
+ </MainContentContainer>
+
+ )
+}
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index f30f99e97fadf1863592caa310a2c0ab4b0eadf1..0b7ab04730ff173ce6c3d6fa1d668eaff6d598ca 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -31,10 +31,10 @@ import EditIcon from '@material-ui/icons/Edit';
import CheckDecagram from '../img/check-decagram-gray.svg'
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
+import TabPanelAtividades from '../Components/TabPanelAtividades.js'
export default function UserPage (props){
const {state, dispatch} = useContext(Store)
- const coverImg = ''
const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
const [value, setValue] = useState(0);
@@ -77,10 +77,10 @@ export default function UserPage (props){
<ContainerUserProfile>
<HeaderContainer>
<CoverContainer>
- {coverImg == "" && <span>cover art</span>}
+ <img src={state.currentUser.userCover} alt = "user cover avatar" style= {{width:"100%", height:"100%", objectFit : "cover" }}/>
<input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" />
<label htmlFor="icon-button-file">
- <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden"}}>ALTERAR CAPA</span>} placement="left">
+ <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
<IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
<PhotoCamera />
</IconButton>
@@ -88,7 +88,7 @@ export default function UserPage (props){
</label>
</CoverContainer>
<ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
- <img src={state.currentUser.userAvatar}/>
+ <img src={state.currentUser.userAvatar} alt = "user avatar" style={{border:"0", verticalAlign:"middle"}}/>
<ChangeAvatarDiv style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
<span>Alterar Foto</span>
</ChangeAvatarDiv>
@@ -155,6 +155,7 @@ export default function UserPage (props){
</ContainerUserProfile>
</MainContainerDesktop>
</div>
+ <TabPanelAtividades value={value} index = {0}/>
</HeaderDiv>
</React.Fragment>
]
diff --git a/src/Store.js b/src/Store.js
index eaacb6bbe6105fc36d51008561821c1e38d015de..6c19780f8b870ab98eacf665cf8a773329ffa76a 100644
--- a/src/Store.js
+++ b/src/Store.js
@@ -35,13 +35,15 @@ const initialState = {
height: 0
},
currentUser: {
+ id : '',
username : 'Horstmann',
email : '',
accessToken : '',
- client : '',
+ clientToken : '',
education : '',
isCollaborativeTeacher : false,
- userAvatar : ''
+ userAvatar : '',
+ userCover : ''
}
}
diff --git a/src/img/logo_google.svg b/src/img/logo_google.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a939ddc19ab24537dcd45e107724c7f55431a89a
--- /dev/null
+++ b/src/img/logo_google.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#4285f4;}.cls-2{fill:#34a853;}.cls-3{fill:#fbbc05;}.cls-4{fill:#ea4335;}.cls-5{fill:none;}</style></defs><title>btn_google_dark_normal_ios</title><g id="Google-Button"><g id="btn_google_dark_normal" data-name="btn google dark normal"><g id="logo_googleg_48dp" data-name="logo googleg 48dp"><path id="Shape" class="cls-1" d="M18.64,10.2a10.341,10.341,0,0,0-.164-1.841H10v3.481h4.844a4.14,4.14,0,0,1-1.8,2.716V16.82h2.909A8.777,8.777,0,0,0,18.64,10.2h0Z" transform="translate(-1 -1)"/><path id="Shape-2" data-name="Shape" class="cls-2" d="M10,19a8.592,8.592,0,0,0,5.956-2.18l-2.909-2.258A5.43,5.43,0,0,1,4.964,11.71H1.957v2.332A9,9,0,0,0,10,19h0Z" transform="translate(-1 -1)"/><path id="Shape-3" data-name="Shape" class="cls-3" d="M4.964,11.71a5.321,5.321,0,0,1,0-3.42V5.958H1.957a9.011,9.011,0,0,0,0,8.084L4.964,11.71h0Z" transform="translate(-1 -1)"/><path id="Shape-4" data-name="Shape" class="cls-4" d="M10,4.58a4.862,4.862,0,0,1,3.44,1.346l2.581-2.581A8.649,8.649,0,0,0,10,1,9,9,0,0,0,1.957,5.958L4.964,8.29A5.364,5.364,0,0,1,10,4.58h0Z" transform="translate(-1 -1)"/><path id="Shape-5" data-name="Shape" class="cls-5" d="M1,1H19V19H1V1Z" transform="translate(-1 -1)"/></g></g></g></svg>
\ No newline at end of file