diff --git a/src/Components/Checkbox.js b/src/Components/Checkbox.js index 3e0be625c424542d75bd13680417450a409f410d..b3626f391bd73b4167907e5c1058b5aab9b20b51 100644 --- a/src/Components/Checkbox.js +++ b/src/Components/Checkbox.js @@ -26,22 +26,23 @@ const StyledFormControlLabel = styled(FormControlLabel)` font-size : 12px !important; } .MuiCheckbox-colorSecondary.Mui-checked { - color : #00bcd4 !important; + color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"}; } ` export default function LabeledCheckbox(props) { return ( - <StyledFormControlLabel - control={ - <Checkbox - value = {props.checked} - onChange = {props.handleChange} - /> - } - label={<span style={{ fontSize: '12px' }}>{props.label}</span>} - /> + <StyledFormControlLabel + contrast={props.contrast} + control={ + <Checkbox + value={props.checked} + onChange={props.handleChange} + /> + } + label={<span style={{ fontSize: '12px' }}>{props.label}</span>} + /> ); } diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js index 0e79abf17cab7bbac7e4ca221e4baa119b0ea6e1..fd04a53f0e2270b6ea4c6d513cf72a9b261167db 100644 --- a/src/Components/LoginContainerFunction.js +++ b/src/Components/LoginContainerFunction.js @@ -15,40 +15,40 @@ 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 React, { useState } from "react"; import GoogleLogin from 'react-google-login' import { Button } from '@material-ui/core'; //import FacebookLogin from 'react-facebook-login'; import CloseIcon from '@material-ui/icons/Close'; import styled from 'styled-components' -import {device} from './device.js' +import { device } from './device.js' import LabeledCheckbox from './Checkbox.js' import FormInput from "./FormInput.js" import GoogleLogo from "../img/logo_google.svg" import ValidateUserInput from './HelperFunctions/FormValidationFunction.js' -import {Link} from 'react-router-dom' -import {apiUrl} from '../env.js' +import { Link } from 'react-router-dom' +import { apiUrl } from '../env.js' -async function handleGoogleAttempt () { - console.log("handleGoogleAttempt") - let request_url = ( +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 LoginContainer (props) { +export default function LoginContainer(props) { const [formEmail, setEmail] = useState( { - key : false, - value : localStorage.getItem("@portalmec/uid") || "", + key: false, + value: localStorage.getItem("@portalmec/uid") || "", } ) const [formSenha, setSenha] = useState( { - key : false, - value : localStorage.getItem("@portalmec/senha") ||"" + key: false, + value: localStorage.getItem("@portalmec/senha") || "" } ) @@ -64,37 +64,41 @@ export default function LoginContainer (props) { const userInput = e.target.value const flag = ValidateUserInput(type, userInput) - if(type === 'email') { - setEmail({...formEmail, - key : flag, - value : userInput + if (type === 'email') { + setEmail({ + ...formEmail, + key: flag, + value: userInput }) // {/*console.log(formEmail)*/} } - else if(type === 'password') { - setSenha({...formSenha, - key : flag, - value : userInput + else if (type === 'password') { + setSenha({ + ...formSenha, + key: flag, + value: userInput }) // {/*console.log(formSenha)*/} } } const limpaCamposForm = () => { - setEmail({...formEmail, - key : false, - value : '' + setEmail({ + ...formEmail, + key: false, + value: '' }); - setSenha({...formSenha, - key : false, - value : '' + setSenha({ + ...formSenha, + key: false, + value: '' }) } const onSubmit = (e) => { e.preventDefault() - const login = {email : formEmail.value, senha : formSenha.value, checkboxChecked : checkboxControl} + const login = { email: formEmail.value, senha: formSenha.value, checkboxChecked: checkboxControl } if (!(formEmail.key || formSenha.key)) { props.handleLoginInfo(login) @@ -105,70 +109,76 @@ export default function LoginContainer (props) { return ( <div> - <ContainerStyled > + <ContainerStyled contrast={props.contrast}> <DialogHeaderStyled> - <span style={{width:"32px"}}/> - <H2Styled> Entrar + <span style={{ width: "32px" }} /> + <H2Styled contrast={props.contrast}> + Entrar </H2Styled> - <StyledCloseModalButton onClick={props.handleClose}> - <CloseIcon/> + <StyledCloseModalButton + onClick={props.handleClose} + contrast={props.contrast} + > + <CloseIcon className="icon" /> </StyledCloseModalButton> </DialogHeaderStyled> <DialogContentDiv> <SocialConnectDiv> - <GoogleLoginButton onClick={handleGoogleAttempt}> - <img src={GoogleLogo} alt="google-logo" className="google-logo"/> - <span>Usando o Google</span> - </GoogleLoginButton> + <GoogleLoginButton contrast={props.contrast} onClick={handleGoogleAttempt}> + <img src={GoogleLogo} alt="google-logo" className="google-logo" /> + <span>Usando o Google</span> + </GoogleLoginButton> </SocialConnectDiv> <H3Div> - <H3Styled> - <RightSideStrikedH3/> - <span style={{verticalAlign:"middle"}}>ou</span> - <LeftSideStrikedH3/> + <H3Styled contrast={props.contrast}> + <RightSideStrikedH3 contrast={props.contrast} /> + <span style={{ verticalAlign: "middle" }}>ou</span> + <LeftSideStrikedH3 contrast={props.contrast} /> </H3Styled> </H3Div> <form onSubmit={e => onSubmit(e)}> <FormInput + contrast={props.contrast} inputType={"text"} name={"email"} value={formEmail.value} placeholder={"E-mail"} handleChange={e => handleChange(e, 'email')} required={true} - error = {formEmail.key} - help = {formEmail.key ? ( formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br/>Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""} + error={formEmail.key} + help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br />Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""} /> - <br/> + <br /> <FormInput + contrast={props.contrast} inputType={"password"} name={"senha"} value={formSenha.value} placeholder={"Senha"} handleChange={e => handleChange(e, 'password')} required={true} - error = {formSenha.key} - help = {formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""} + error={formSenha.key} + help={formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""} /> - <br/> + <br /> - <RememberRecover> - <LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)}/> - <UserForgotTheirPasswordSpan>Esqueceu a senha? <Link to={"/recuperar-senha"} style={{textAlign: "right", color:"#4cd0e1"}} onClick={props.handleClose}>Clique aqui!</Link></UserForgotTheirPasswordSpan> + <RememberRecover contrast={props.contrast}> + <LabeledCheckbox contrast={props.contrast} label={<StyledLabel contrast={props.contrast}><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)} /> + <UserForgotTheirPasswordSpan contrast={props.contrast}>Esqueceu a senha? <Link to={"/recuperar-senha"} style={props.contrast === "" ? { textAlign: "right", color: "#4cd0e1" } : { textAlign: "right", color: "yellow", textDecoration: "underline" }} onClick={props.handleClose}>Clique aqui!</Link></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 contrast={props.contrast} type="submit" variant="contained"> + <span style={props.contrast === "" ? { borderRadius: "3px", boxSizing: "border-box", fontFamily: "Roboto, sans serif", fontWeight: "500", color: "#fff" } : { borderRadius: "3px", boxSizing: "border-box", fontFamily: "Roboto, sans serif", fontWeight: "500", color: "yellow" }}>ENTRAR</span> </StyledLoginButton> </ConfirmContainerStyled> </form> - <DialogFooterStyled> - <span style={{textAlign:"center", fontSize: "14px", color:"rgb(102, 102, 102)"}}>Ainda não tem cadastro? <StyledAnchor href="" onClick={e => switchModal(e)}>CADASTRE-SE</StyledAnchor></span> + <DialogFooterStyled contrast={props.contrast}> + <span style={props.contrast === "" ? { textAlign: "center", fontSize: "14px", color: "rgb(102, 102, 102)" } : { textAlign: "center", fontSize: "14px", color: "white" }}>Ainda não tem cadastro? <StyledAnchor contrast={props.contrast} href="" onClick={e => switchModal(e)}>CADASTRE-SE</StyledAnchor></span> </DialogFooterStyled> </DialogContentDiv> </ContainerStyled> @@ -177,9 +187,9 @@ export default function LoginContainer (props) { } - const ContainerStyled = styled.div` +const ContainerStyled = styled.div` box-sizing : border-box; - background-color : white; + background-color: ${props => props.contrast === "" ? "white" : "black"}; max-width : none; display : flex; flex-direction : column; @@ -199,7 +209,7 @@ export default function LoginContainer (props) { } ` - export const DialogHeaderStyled = styled.div` +export const DialogHeaderStyled = styled.div` text-align : center; display : flex; flex-direction : row; @@ -207,9 +217,9 @@ export default function LoginContainer (props) { padding : 10px 26px 0 26px; height : 64px; ` - const H2Styled = styled.h2` +const H2Styled = styled.h2` align-self : center; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; font-size : 26px; font-weight : 100; font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important; @@ -218,7 +228,7 @@ export default function LoginContainer (props) { letter-spacing: .005em; ` - export const StyledCloseModalButton = styled(Button)` +export const StyledCloseModalButton = styled(Button)` display : inline-block; position : relative; float : right !important; @@ -226,18 +236,22 @@ export default function LoginContainer (props) { background : transparent !important; min-width: 0 !important; width : 40px; + + .icon{ + color: ${props => props.contrast === "" ? "#666" : "white"}; + } ` - export const DialogContentDiv = styled.div` +export const DialogContentDiv = styled.div` padding : 20px 30px; overflow : visible !important; ` - export const SocialConnectDiv = styled.div` +export const SocialConnectDiv = styled.div` margin-top : 0; display : flex; flex-direction : row; ` - export const StyledGoogleLoginButton = styled(GoogleLogin)` +export const StyledGoogleLoginButton = styled(GoogleLogin)` background-color : #fff !important; color : #666 !important; border : 1px solid rgb(66, 133, 244); @@ -247,12 +261,12 @@ export default function LoginContainer (props) { } ` - const DialogFooterStyled = styled.div` +const DialogFooterStyled = styled.div` box-sizing : border-box; font-family : 'Roboto', sans serif; margin : 20px -20px; padding-top : 20px; - border-top : 1px #e5e5e5 solid; + border-top: ${props => props.contrast === "" ? "1px #e5e5e5 solid" : "1px white solid"}; justify-content : center; text-align : center; line-height : 1.42857143 @@ -261,50 +275,52 @@ export default function LoginContainer (props) { export const RightSideStrikedH3 = styled.div` display : inline-block; - border-bottom: 1px dotted #666; + border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"}; vertical-align : middle; font-weight : 500; margin-right : 5px; width : 44%; ` - export const LeftSideStrikedH3 = styled.div` +export const LeftSideStrikedH3 = styled.div` display : inline-block; - border-bottom: 1px dotted #666; + border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"}; vertical-align : middle; font-weight : 500; margin-left : 5px; width : 44%; ` - export const H3Div = styled.div` +export const H3Div = styled.div` margin-top : 0; margin-bottom : 10px; ` - const H3Styled = styled.h3` +const H3Styled = styled.h3` overflow : hidden; text-align : center; font-size : 14px; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; margin : 10px 0; ` - const StyledAnchor = styled.a` - color : #00bcd4; - text-decoration : none; +const StyledAnchor = styled.a` + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; ` - const ConfirmContainerStyled = styled.div` +const ConfirmContainerStyled = styled.div` display : flex; margin-top : 10px; align-items : center; justify-content : center; ` - const StyledLoginButton = styled(Button)` - background-color : #00bcd4 !important; +const StyledLoginButton = styled(Button)` + background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"}; box-shadow : none !important; outline: none !important; - border : 0 !important; + border: ${props => props.contrast === "" ? 0 : "1px solid white !important"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"}; + color: ${props => props.contrast === "" ? "" : "yellow !important"}; overflow : hidden !important; width : 35% !important; display : inline-block !important; @@ -315,51 +331,50 @@ export const RightSideStrikedH3 = styled.div` border-radius: 3px !important; align-self : 50% !important; :hover { - background-color : #00acc1 !important; + background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"}; } ` - const RememberRecover = styled.div` +const RememberRecover = styled.div` display : flex; justify-content : space-between; font-size: 12px; font-weight : 400; ` - const StyledLabel = styled.div` +const StyledLabel = styled.div` box-sizing : border-box; position : relative; vertical-align : middle !important; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"}; ` - const UserForgotTheirPasswordSpan = styled.span` +const UserForgotTheirPasswordSpan = styled.span` margin-top : 1em; font-size : 12px; font-weight : 400; text-align : right; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; ` - const StyledSpan = styled.span` +const StyledSpan = styled.span` font-size : 12px; 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; + background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"}; + box-shadow: ${props => props.contrast === "" ? "0 0 0 1px #4285f4 !important" : "0 0 0 1px white !important"}; + color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"}; + text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"}; + font-weight : bolder !important; font-size : 12px !important; text-transform: none !important; width: 40%; - ${'' /* .MuiButton-root { - min-width : 88px; - } */} - .google-logo { max-height : 18px ; padding-right : 5px; diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js index 9ebce1910883371a5c81adb9f36c7166247adea5..eeb51a8c4f7bfc6d1968800f7872a965bfd8dc17 100644 --- a/src/Components/LoginModal.js +++ b/src/Components/LoginModal.js @@ -16,16 +16,16 @@ 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 React, { useContext, useState } from 'react'; import Modal from '@material-ui/core/Modal'; import Backdrop from '@material-ui/core/Backdrop'; import Zoom from '@material-ui/core/Fade'; import styled from 'styled-components' import LoginContainer from './LoginContainerFunction.js' -import {Store} from '../Store.js' +import { Store } from '../Store.js' import Snackbar from '@material-ui/core/Snackbar'; import MuiAlert from '@material-ui/lab/Alert'; -import {authentication} from './HelperFunctions/getAxiosConfig' +import { authentication } from './HelperFunctions/getAxiosConfig' const StyledLogin = styled(Modal)` margin : 0 !important; @@ -39,11 +39,11 @@ const StyledLogin = styled(Modal)` ` export function Alert(props) { - return <MuiAlert elevation={6} variant="filled" {...props} />; + return <MuiAlert elevation={6} variant="filled" {...props} />; } -export default function LoginModal (props){ - const {state, dispatch} = useContext(Store) +export default function LoginModal(props) { + const { state, dispatch } = useContext(Store) const [snackbarOpened, handleSnackbar] = useState(false) @@ -55,24 +55,24 @@ export default function LoginModal (props){ handleSnackbar(false); } - function handleSuccess (data) { - dispatch ({ + function handleSuccess(data) { + dispatch({ type: "USER_LOGGED_IN", userLoggedIn: !state.userIsLoggedIn, login: data.data - } + } ) props.handleClose(); props.openSnackbar(); } - function handleError (error) { + function handleError(error) { handleSnackbar(true) } const handleLoginInfo = (login) => { const url = `/auth/sign_in` const payload = { - email : login.email, - password : login.senha + email: login.email, + password: login.senha } authentication(url, payload, handleSuccess, handleError) @@ -81,30 +81,32 @@ export default function LoginModal (props){ 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" - open={props.open} - centered="true" - onClose={props.handleClose} - closeAfterTransition - BackdropComponent={Backdrop} - BackdropProps={{ - timeout: 500, - }} - > - <Zoom in={props.open} style={{ transitionDelay :"0.2ms"}}> - <LoginContainer handleClose={props.handleClose} - openSignUp={props.openSignUp} - handleLoginInfo={handleLoginInfo} - /> - </Zoom> - </StyledLogin> + <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" + open={props.open} + centered="true" + onClose={props.handleClose} + closeAfterTransition + BackdropComponent={Backdrop} + BackdropProps={{ + timeout: 500, + }} + > + <Zoom in={props.open} style={{ transitionDelay: "0.2ms" }}> + <LoginContainer + contrast={state.contrast} + handleClose={props.handleClose} + openSignUp={props.openSignUp} + handleLoginInfo={handleLoginInfo} + /> + </Zoom> + </StyledLogin> </> ) diff --git a/src/Components/SignUpContainerFunction.js b/src/Components/SignUpContainerFunction.js index 15974aee411a66d7431d73f4ce7d6ba8b87d56a0..3917b51941e88da9291a43d9b7f34011cc5da99c 100644 --- a/src/Components/SignUpContainerFunction.js +++ b/src/Components/SignUpContainerFunction.js @@ -16,55 +16,55 @@ 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 React, { useState } from "react"; 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 { device } from './device.js' import FormInput from "./FormInput.js" -import {StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, H3Div} from './LoginContainerFunction.js' -import {apiUrl} from '../env.js' -import {GoogleLoginButton} from './LoginContainerFunction' +import { StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, H3Div } from './LoginContainerFunction.js' +import { apiUrl } from '../env.js' +import { GoogleLoginButton } from './LoginContainerFunction' import ValidateUserInput from './HelperFunctions/FormValidationFunction.js' import GoogleLogo from "../img/logo_google.svg" import ReCaptcha from 'react-recaptcha' -async function handleGoogleAttempt () { - console.log("handleGoogleAttempt") - let request_url = ( +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) { +export default function SignUpContainer(props) { const [unavailableButton, setButtonAvailability] = useState(true); const [formNome, setNome] = useState( { - key : false, - value : "", + key: false, + value: "", } ) const [formEmail, setEmail] = useState( { - key : false, - value : "", + key: false, + value: "", } ) const [formSenha, setSenha] = useState( { - key : false, - value : "" + key: false, + value: "" } ) const [formConfirmation, setConfirmation] = useState( { - key : false, - value : "" + key: false, + value: "" } ) @@ -73,54 +73,62 @@ export default function SignUpContainer (props) { const flag = ValidateUserInput(type, userInput, confirmation) if (type === 'username') { - setNome({...formNome, - key : flag, - value : userInput + setNome({ + ...formNome, + key: flag, + value: userInput }) console.log(formNome) } - else if(type === 'email') { - setEmail({...formEmail, - key : flag, - value : userInput + else if (type === 'email') { + setEmail({ + ...formEmail, + key: flag, + value: userInput }) console.log(formEmail) } - else if(type === 'password') { - setSenha({...formSenha, - key : flag, - value : userInput + else if (type === 'password') { + setSenha({ + ...formSenha, + key: flag, + value: userInput }) console.log(formSenha) } - else if(type === 'confirmation') { - setConfirmation({...formConfirmation, - key : flag, - value : userInput + else if (type === 'confirmation') { + setConfirmation({ + ...formConfirmation, + key: flag, + value: userInput }) console.log(formConfirmation) } } const limpaCamposForm = () => { - setNome({...formNome, - key : false, - value : '' + setNome({ + ...formNome, + key: false, + value: '' }) - setEmail({...formEmail, - key : false, - value : '' + setEmail({ + ...formEmail, + key: false, + value: '' }); - setSenha({...formSenha, - key : false, - value : '' + setSenha({ + ...formSenha, + key: false, + value: '' }) - setConfirmation({...formConfirmation, - key : false, - value : '' + setConfirmation({ + ...formConfirmation, + key: false, + value: '' }) } @@ -132,7 +140,7 @@ export default function SignUpContainer (props) { const onSubmit = (e) => { e.preventDefault(); - const newLogin = {name : formNome.value, email : formEmail.value, password : formSenha.value, senha : formConfirmation.value} + const newLogin = { name: formNome.value, email: formEmail.value, password: formSenha.value, senha: formConfirmation.value } if (!(formNome.key || formEmail.key || formSenha.key || formConfirmation.key)) { props.handleLoginInfo(newLogin) @@ -140,41 +148,42 @@ export default function SignUpContainer (props) { } } - function captchaVerified (response) { + function captchaVerified(response) { if (response) { setButtonAvailability(false) } } return ( - <ContainerStyled > + <ContainerStyled contrast={props.contrast}> <DialogHeaderStyled> - <span style={{width:"32px"}}/> - <H2Styled> Cadastrar-se + <span style={{ width: "32px" }} /> + <H2Styled contrast={props.contrast}> Cadastrar-se </H2Styled> - <StyledCloseModalButton onClick={props.handleClose} > - <CloseIcon /> + <StyledCloseModalButton contrast={props.contrast} onClick={props.handleClose} > + <CloseIcon className="icon" /> </StyledCloseModalButton> </DialogHeaderStyled> <DialogContentDiv> <SocialConnectDiv> - <GoogleLoginButton onClick={handleGoogleAttempt}> - <img src={GoogleLogo} alt="google-logo" className="google-logo"/> - <span>Usando o Google</span> - </GoogleLoginButton> + <GoogleLoginButton contrast={props.contrast} onClick={handleGoogleAttempt}> + <img src={GoogleLogo} alt="google-logo" className="google-logo" /> + <span>Usando o Google</span> + </GoogleLoginButton> </SocialConnectDiv> <H3Div> - <H3Styled> - <RightSideStrikedH3/> - <span style={{verticalAlign:"middle"}}>ou</span> - <LeftSideStrikedH3/> + <H3Styled contrast={props.contrast}> + <RightSideStrikedH3 contrast={props.contrast} /> + <span style={{ verticalAlign: "middle" }}>ou</span> + <LeftSideStrikedH3 contrast={props.contrast} /> </H3Styled> </H3Div> <form onSubmit={onSubmit}> <FormInput + contrast={props.contrast} inputType={"text"} name={"name"} value={formNome.value} @@ -183,8 +192,9 @@ export default function SignUpContainer (props) { required={true} error={formNome.key} /> - <br/> + <br /> <FormInput + contrast={props.contrast} inputType={"text"} name={"email"} value={formEmail.value} @@ -192,10 +202,11 @@ export default function SignUpContainer (props) { handleChange={e => handleChange(e, 'email')} required={true} error={formEmail.key} - help = {formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br/>Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""} - /> - <br/> + help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br />Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""} + /> + <br /> <FormInput + contrast={props.contrast} inputType={"password"} name={"password"} value={formSenha.value} @@ -203,10 +214,11 @@ export default function SignUpContainer (props) { handleChange={e => handleChange(e, 'password')} required={true} error={formSenha.key} - help = {formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""} - /> - <br/> + help={formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""} + /> + <br /> <FormInput + contrast={props.contrast} inputType={"password"} name={"confirmation"} value={formConfirmation.value} @@ -214,10 +226,10 @@ export default function SignUpContainer (props) { handleChange={e => handleChange(e, 'confirmation', formSenha.value)} required={true} error={formConfirmation.key} - help = {formConfirmation.key ? (formConfirmation.value.length === 0 ? "Faltou digitar sua senha." : (formConfirmation.value !== formSenha.value ? "As senhas precisam ser iguais" : "A senha precisa ter no mínimo 8 caracteres.")) : ""} - /> - <br/> - <div style={{margin:"0 auto", width: "304px"}}> + help={formConfirmation.key ? (formConfirmation.value.length === 0 ? "Faltou digitar sua senha." : (formConfirmation.value !== formSenha.value ? "As senhas precisam ser iguais" : "A senha precisa ter no mínimo 8 caracteres.")) : ""} + /> + <br /> + <div style={{ margin: "0 auto", width: "304px" }}> { //<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env <ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production @@ -225,26 +237,34 @@ export default function SignUpContainer (props) { } </div> <ConfirmContainerStyled> - <StyledSignUpButton type="submit" variant="contained" disabled={unavailableButton} - style={unavailableButton ? { backgroundColor: "#e9e9e9" } : { backgroundColor: "#00bcd4" }} - > - <span - style={{paddingLeft:"16px", paddingRight:"16px", borderRadius:"3px", boxSizing:"border-box", - fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}} + { + !unavailableButton && + <StyledSignUpButton contrast={props.contrast} type="submit" variant="contained" disabled={unavailableButton} + style={unavailableButton ? { backgroundColor: "#e9e9e9" } : props.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }} > - CADASTRAR + <span + style={props.contrast === "" ? { + paddingLeft: "16px", paddingRight: "16px", borderRadius: "3px", boxSizing: "border-box", + fontFamily: "Roboto, sans serif", fontWeight: "500", color: "#fff" + } : { + paddingLeft: "16px", paddingRight: "16px", borderRadius: "3px", boxSizing: "border-box", + fontFamily: "Roboto, sans serif", fontWeight: "500", color: "yellow" + }} + > + CADASTRAR </span> - </StyledSignUpButton> + </StyledSignUpButton> + } </ConfirmContainerStyled> </form> - <TermosDeUsoStyled> + <TermosDeUsoStyled contrast={props.contrast}> <p>Ao se cadastrar, você está aceitando os Termos de Uso e de Política de Privacidade. <a href="/termos">Ler Termos</a>.</p> </TermosDeUsoStyled> <DialogFooterStyled> - <span style={{textAlign:"center", fontSize: "14px"}}>Já possui cadastro? <StyledAnchor href="" onClick={e => switchModal(e)}>ENTRAR</StyledAnchor></span> + <span style={props.contrast === "" ? { textAlign: "center", fontSize: "14px" } : { textAlign: "center", fontSize: "14px", color: "white" }}>Já possui cadastro? <StyledAnchor contrast={props.contrast} href="" onClick={e => switchModal(e)}>ENTRAR</StyledAnchor></span> </DialogFooterStyled> </DialogContentDiv> </ContainerStyled> @@ -253,7 +273,7 @@ export default function SignUpContainer (props) { const ContainerStyled = styled.div` box-sizing : border-box; - background-color : white; + background: ${props => props.contrast === "" ? "white" : "black"}; max-width : none; align : center; display : flex; @@ -285,17 +305,21 @@ const DialogFooterStyled = styled.div` const TermosDeUsoStyled = styled.div` font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; font-size : 13px; margin : 0 0 10px; max-width : 350px; margin-top : 10px; text-align : start; + a{ + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"} + } ` const H2Styled = styled.h2` align-self : center; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; font-size : 26px; font-weight : lighter; justify-content: space-between; @@ -308,12 +332,12 @@ const H3Styled = styled.h3` overflow : hidden; text-align : center; font-size : 14px; - color : #666; + color: ${props => props.contrast === "" ? "#666" : "white"}; margin : 10px 0; ` const RightSideStrikedH3 = styled.div` display : inline-block; - border-bottom: 1px dotted #666; + border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"}; vertical-align : middle; font-weight : 500; margin-right : 5px; @@ -322,7 +346,7 @@ const RightSideStrikedH3 = styled.div` const LeftSideStrikedH3 = styled.div` display : inline-block; - border-bottom: 1px dotted #666; + border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"}; vertical-align : middle; font-weight : 500; margin-left : 5px; @@ -330,8 +354,8 @@ const LeftSideStrikedH3 = styled.div` ` const StyledAnchor = styled.a` - color : #00bcd4; - text-decoration : none; + color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration: ${props => props.contrast === "" ? "none" : "underline"} ` //const StyledCloseModalButton = styled(Button)` // display : inline-block; @@ -355,7 +379,7 @@ const ConfirmContainerStyled = styled.div` const StyledSignUpButton = styled(Button)` box-shadow : none !important; outline: none !important; - border : 0 !important; + border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"}; overflow : hidden !important; width : 50% !important; display : inline-block !important; @@ -366,6 +390,6 @@ const StyledSignUpButton = styled(Button)` border-radius: 3px !important; align-self : 50% !important; :hover { - background-color : #00acc1 !important; + background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"}; } ` diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js index 61c4fb2865b34df44615e742507d94df28e43ad7..3114f8e578e5e8c83bd15bfa08f9c9db81ff1e7f 100644 --- a/src/Components/SignUpModal.js +++ b/src/Components/SignUpModal.js @@ -15,14 +15,14 @@ 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 React, { useContext, useState } from 'react'; import Modal from '@material-ui/core/Modal'; import Backdrop from '@material-ui/core/Backdrop'; import Fade from '@material-ui/core/Fade'; import styled from 'styled-components' import SignUpContainer from './SignUpContainerFunction.js' -import {Store} from '../Store.js' -import {authentication} from './HelperFunctions/getAxiosConfig' +import { Store } from '../Store.js' +import { authentication } from './HelperFunctions/getAxiosConfig' import Snackbar from '@material-ui/core/Snackbar'; import MuiAlert from '@material-ui/lab/Alert'; //import {postRequest} from './HelperFunctions/getAxiosConfig' @@ -31,7 +31,7 @@ export function Alert(props) { return <MuiAlert elevation={6} variant="filled" {...props} />; } -export default function SignUpModal (props) { +export default function SignUpModal(props) { const { state, dispatch } = useContext(Store) const [snackbarOpened, handleSnackbar] = useState(false) @@ -44,8 +44,8 @@ export default function SignUpModal (props) { handleSnackbar(false); } - function handleSuccess (data) { - dispatch ({ + function handleSuccess(data) { + dispatch({ type: 'USER_SIGNED_UP', userLoggedIn: !state.userIsLoggedIn, user: data.data @@ -53,17 +53,17 @@ export default function SignUpModal (props) { props.handleClose() } - function handleError (error) { + function handleError(error) { handleSnackbar(true) } const handleLoginInfo = (newLogin) => { const url = `/auth` const payload = { - name : newLogin.name, + name: newLogin.name, email: newLogin.email, - password : newLogin.password, - password_confirmation : newLogin.senha //, + password: newLogin.password, + password_confirmation: newLogin.senha //, // terms_of_service : true, // avatar: "" } @@ -74,7 +74,7 @@ export default function SignUpModal (props) { return ( <> <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar} - anchorOrigin = {{ vertical:'top', horizontal:'right' }} + anchorOrigin={{ vertical: 'top', horizontal: 'right' }} > <Alert severity="error">Ocorreu um erro ao se conectar!</Alert> </Snackbar> @@ -93,9 +93,10 @@ export default function SignUpModal (props) { > <Fade in={props.open}> <SignUpContainer - handleClose={props.handleClose} - openLogin={props.openLogin} - handleLoginInfo = {handleLoginInfo} + contrast={state.contrast} + handleClose={props.handleClose} + openLogin={props.openLogin} + handleLoginInfo={handleLoginInfo} /> </Fade> </StyledModalSignUp> diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js index e6c2e7cb6e9cb8f8583fd3b1d5c34a93c17332ac..39e92d5f74b541e04d7d890001ec8f1c530422e5 100644 --- a/src/Pages/UserTerms.js +++ b/src/Pages/UserTerms.js @@ -38,8 +38,7 @@ const BannerStyle = styled.div` background-size: cover; background-position: top center; height: 370px; - - verticalAlign: "middle" + vertical-align: "middle"; ` const AColorido = styled.a` @@ -51,7 +50,7 @@ const AColorido = styled.a` const ImagemSeçao2 = styled.div` - font-family: Roboto, sans-serif; + font-family: "Roboto", sans-serif; @media (min-width:1450px) { background-image: url(${Busca});