diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js index 971001ebc2f52aad912ac0d9deb1791aafd68396..3eb206b99c272fd8fcf179c1808f778ecbcd3152 100644 --- a/src/Components/ContactForm.js +++ b/src/Components/ContactForm.js @@ -16,10 +16,19 @@ 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, useContext} from 'react' +import {Store} from '../Store.js' import styled from 'styled-components'; import FormInput from "../Components/FormInput.js" import {postRequest} from './HelperFunctions/getAxiosConfig' +import LoginModal from './LoginModal.js' +import Snackbar from '@material-ui/core/Snackbar'; +import SignUpModal from './SignUpModal' +import MuiAlert from '@material-ui/lab/Alert'; + +function Alert(props) { + return <MuiAlert elevation={6} variant="filled" {...props} />; +} const Button = styled.button` @@ -95,6 +104,10 @@ const Button = styled.button` } function Formulario (props){ + const {state} = useContext(Store) + const [loginOpen, setLogin] = useState(false) + const [successfulLoginOpen, handleSuccessfulLogin] = useState(false) + const [signUpOpen, setSignUp] = useState(false) const [nome, handleNome] = useState( { @@ -119,132 +132,165 @@ const Button = styled.button` }) - const preencheNome = (e) => { - const aux2 = e.target.value - const flag = validateNome(aux2) - handleNome({...nome, dict : { - key : flag, - value : e.target.value - }}) - console.log(nome) - } + const preencheNome = (e) => { + const aux2 = e.target.value + const flag = validateNome(aux2) + handleNome({...nome, dict : { + key : flag, + value : e.target.value + }}) + console.log(nome) + } - const preencheEmail = (e) => { - const aux = e.target.value - const flag = validateEmail(aux) - handleEmail({...email, dict : { - key : flag, - value : e.target.value - }}) - console.log(email) - } + const preencheEmail = (e) => { + const aux = e.target.value + const flag = validateEmail(aux) + handleEmail({...email, dict : { + key : flag, + value : e.target.value + }}) + console.log(email) + } - const preencheMensagem = (e) => { - const msg = e.target.value - console.log(msg) - let flag = validateMensagem(msg) - handleMensagem({...mensagem, dict : { - key : flag, - value : msg - }}) - console.log(mensagem) - } + const preencheMensagem = (e) => { + const msg = e.target.value + console.log(msg) + let flag = validateMensagem(msg) + handleMensagem({...mensagem, dict : { + key : flag, + value : msg + }}) + console.log(mensagem) + } - const limpaTudo = () => { - - handleNome({ - dict : { - key: false, - value:"" - }} - ); - - handleEmail({ - dict : { - key: false, - value:"" - }} - ) - - handleMensagem({ - dict : { - key: false, - value:"" - }} - ) + const limpaTudo = () => { - } + handleNome({ + dict : { + key: false, + value:"" + }} + ); + handleEmail({ + dict : { + key: false, + value:"" + }} + ) + handleMensagem({ + dict : { + key: false, + value:"" + }} + ) - const onSubmit = (e) => { - //on submit we should prevent the page from refreshing - e.preventDefault(); //though this is arguable - console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key )) - // Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário - if (!(nome.dict.key || email.dict.key || mensagem.dict.key )) { - let payload = { - contact : { - name: nome.dict.value, - email: email.dict.value, - message: mensagem.dict.value - } - } - postRequest(`/contacts`, payload, (data) => {limpaTudo()}, (error) => {console.log(error)}) - } -} + } + + const handleSignUp = () => { + setSignUp(!signUpOpen) + } + const handleLogin = () => { + setLogin(!loginOpen) + } + + const toggleSnackbar = (event, reason) => { + if (reason === 'clickaway') { + return; + } + handleSuccessfulLogin(false); + } + const onSubmit = (e) => { + //on submit we should prevent the page from refreshing + e.preventDefault(); //though this is arguable + console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key )) + // Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário + if (!(nome.dict.key || email.dict.key || mensagem.dict.key )) { + let payload = { + contact : { + name: nome.dict.value, + email: email.dict.value, + message: mensagem.dict.value + } + } + postRequest(`/contacts`, payload, (data) => {limpaTudo()}, (error) => {console.log(error)}) + } + } - return( - <form onSubmit={e => onSubmit(e)}> - <FormInput - inputType={"text"} - name={"nome"} - value={nome.dict.value} - placeholder={"Nome *"} - error = {nome.dict.key} - help = {nome.dict.key ? "insira seu nome para o contato " : ""} - handleChange={e => preencheNome(e)} - /> - <br/> - <FormInput - inputType={"text"} - name={"email"} - value={email.dict.value} - placeholder={"E-mail *"} - error = {email.dict.key} - help = {email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""} - handleChange={e => preencheEmail(e)} + return( + <React.Fragment> + <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar} + anchorOrigin={{ vertical: 'top', horizontal: 'center' }} + > + <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> + </Snackbar> + {/*-------------------------------MODALS---------------------------------------*/} + <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + openSnackbar={() => { handleSuccessfulLogin(true) }} /> - <br/> - <br/> - <FormInput - inputType={"text"} - name={"mensagem"} - value={mensagem.dict.value} - placeholder={"Mensagem *"} - multi = {true} - rows = "5" - rowsMax = "6" - error = {mensagem.dict.key} - help = {mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crítica ou dúvida." : "Escreva sua mensagem no campo acima."} - handleChange={e => preencheMensagem(e)} - /> - <br/> - <br/> - <div style={{display: "flex", justifyContent: "center"}}> - <Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button> - </div> - </form> - + <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + {/*----------------------------------------------------------------------------*/} + + + <form onSubmit={e => onSubmit(e)}> + <FormInput + inputType={"text"} + name={"nome"} + value={nome.dict.value} + placeholder={"Nome *"} + error = {nome.dict.key} + help = {nome.dict.key ? "insira seu nome para o contato " : ""} + handleChange={e => preencheNome(e)} + /> + <br/> + <FormInput + inputType={"text"} + name={"email"} + value={email.dict.value} + placeholder={"E-mail *"} + error = {email.dict.key} + help = {email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""} + handleChange={e => preencheEmail(e)} + /> + <br/> + <br/> + <FormInput + inputType={"text"} + name={"mensagem"} + value={mensagem.dict.value} + placeholder={"Mensagem *"} + multi = {true} + rows = "5" + rowsMax = "6" + error = {mensagem.dict.key} + help = {mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crítica ou dúvida." : "Escreva sua mensagem no campo acima."} + handleChange={e => preencheMensagem(e)} + /> + <br/> + <br/> + <div style={{display: "flex", justifyContent: "center"}}> + { + state.currentUser.id !== '' ? ( + <Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button> + ) + : + ( + <Button onClick={e => {e.preventDefault(); handleLogin(true);}} >ENVIAR MENSAGEM</Button> + ) + } + </div> + </form> + </React.Fragment> - ); + ); } export default Formulario; diff --git a/src/Components/Header.js b/src/Components/Header.js index 3b278a89aafd110ca6f354b989e89a85ee178311..57cc42f248418e141996fa0023bb6793938441a2 100644 --- a/src/Components/Header.js +++ b/src/Components/Header.js @@ -137,7 +137,13 @@ export default function Header(props) { ) : ( - <MenuBarMobile openSignUp={handleSignUp} openLogin={handleLogin} /> + <React.Fragment> + <MenuBarMobile openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} /> + { + state.searchOpen && + <SearchBar /> + } + </React.Fragment> ) } <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js index 13449817cb95cd33fce90e5af36715cf5c3db3bc..0f1b536b4d1e45139a9a73b28bb63b6d27319cb8 100644 --- a/src/Components/MenuBar.js +++ b/src/Components/MenuBar.js @@ -101,9 +101,6 @@ export default function MenuBar(props) { const { state } = useContext(Store) const buildMyAreaTabs = () => { - let canUserAdmin = false; - let index = 0; - const userRoles = [...state.currentUser.roles] const minhaArea = [ { name: "Perfil e Atividades", href: "/perfil", value: '0' }, { name: "Recursos Publicados", href: "/perfil", value: '1' }, @@ -113,35 +110,41 @@ export default function MenuBar(props) { { name: "Configurações", href: "/editarperfil", value: '5'}, ] - while (!canUserAdmin && index < userRoles.length) { - if(userRoles[index].id === 3 || userRoles[index].id === 7) - canUserAdmin = true - index++ + if (state.currentUser.roles) { + let canUserAdmin = false; + let index = 0; + const userRoles = [...state.currentUser.roles] + + while (!canUserAdmin && index < userRoles.length) { + if(userRoles[index].id === 3 || userRoles[index].id === 7) + canUserAdmin = true + index++ + } + + if(canUserAdmin) + minhaArea.push({ + name: "Administrador", + href: "/admin/home", + value: '6', + }) } - if(canUserAdmin) - minhaArea.push({ - name: "Administrador", - href: "/admin/home", - value: '6', - }) - return minhaArea; } const menuSobre = [ - { name: "Sobre a Plataforma", href: "sobre" }, - { name: "Portais Parceiros", href: "sobre#portaisparceiros" }, - { name: "Termos de Uso", href: "termos" }, - { name: "Contato", href: "contato" } + { name: "Sobre a Plataforma", href: "/sobre" }, + { name: "Portais Parceiros", href: "/sobre#portaisparceiros" }, + { name: "Termos de Uso", href: "/termos" }, + { name: "Contato", href: "/contato" } ] const menuAjuda = [ - { name: "Central de Ajuda", href: "ajuda" }, - { name: "Publicando Recursos", href: "publicando-recurso" }, - { name: "Encontrando Recursos", href: "encontrando-recurso" }, - { name: "Participando da Rede", href: "participando-da-rede" }, - { name: "Gerenciando a Conta", href: "gerenciando-conta" } + { name: "Central de Ajuda", href: "/ajuda" }, + { name: "Publicando Recursos", href: "/publicando-recurso" }, + { name: "Encontrando Recursos", href: "/encontrando-recurso" }, + { name: "Participando da Rede", href: "/participando-da-rede" }, + { name: "Gerenciando a Conta", href: "/gerenciando-conta" } ] const minhaArea = buildMyAreaTabs() diff --git a/src/Components/MenuBarMobile.js b/src/Components/MenuBarMobile.js index c314ab6afc7ee67a628a033860c5328875fb5877..0e263606db82b52e09b2d108727784bf0aadab05 100644 --- a/src/Components/MenuBarMobile.js +++ b/src/Components/MenuBarMobile.js @@ -23,6 +23,7 @@ import { Button } from '@material-ui/core' import logo from '../img/logo_small.svg' import { Link } from 'react-router-dom' import MobileDrawerMenu from './MobileDrawerMenu'; +import IconSearch from '@material-ui/icons/Search' export default function MenuBarMobile(props) { @@ -52,6 +53,9 @@ export default function MenuBarMobile(props) { <img src={logo} alt="logo" style={{ border: "0", verticalAlign: "middle" }} /> </Link> </DrawerButtonDiv> + <Button style={{ color: "#00bcd4", position: "absolute", right: 0}} onClick={props.openSearchBar}> + <IconSearchStyled/> + </Button> </OuterDiv> </> ) @@ -79,3 +83,11 @@ const DrawerButtonDiv = styled.div` margin-left:auto; margin-right:auto; ` + +const IconSearchStyled = styled(IconSearch)` + color: #16b8dd; + height : 38px; + width : 45.55px; + margin-left:auto; + margin-right:auto; +` \ No newline at end of file diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js index 67e0b6cdfdaf0ab040abb2e85ee29c47cc673780..469fa378e9dd7787829eee223147c59710c96b30 100644 --- a/src/Components/MobileDrawerMenu.js +++ b/src/Components/MobileDrawerMenu.js @@ -33,15 +33,11 @@ import DefaultAvatar from '../img/default_profile0.png' import SettingsIcon from '@material-ui/icons/Settings'; import { apiDomain } from '../env.js' import { deleteRequest } from './HelperFunctions/getAxiosConfig' -import SearchIcon from '@material-ui/icons/Search'; export default function MobileDrawerMenu(props) { const { state, dispatch } = useContext(Store) const buildMyAreaTabs = () => { - let canUserAdmin = false; - let index = 0; - const userRoles = [...state.currentUser.roles] const minhaArea = [ { name: "Perfil e Atividades", href: "/perfil", value: '0' }, { name: "Recursos Publicados", href: "/perfil", value: '1' }, @@ -51,29 +47,35 @@ export default function MobileDrawerMenu(props) { { name: "Configurações", href: "/editarperfil", value: '5' }, ] - while (!canUserAdmin && index < userRoles.length) { - if (userRoles[index].id === 3 || userRoles[index].id === 7) - canUserAdmin = true - index++ - } + if (state.currentUser.roles) { + let canUserAdmin = false; + let index = 0; + const userRoles = [...state.currentUser.roles] - if (canUserAdmin) - minhaArea.push({ - name: "Administrador", - href: "/admin/home", - value: '6', - }) + while (!canUserAdmin && index < userRoles.length) { + if (userRoles[index].id === 3 || userRoles[index].id === 7) + canUserAdmin = true + index++ + } + + if (canUserAdmin) + minhaArea.push({ + name: "Administrador", + href: "/admin/home", + value: '6', + }) + } return minhaArea; } 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 /> }, - { name: "Busca", href: `busca?query=${state.search.query}&search_class=${state.search.class}`, icon: <SearchIcon /> } + { 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 /> }, + //{ name: "Busca", href: `/busca?query=${state.search.query}&search_class=${state.search.class}`, icon: <SearchIcon /> } ] // {/*used in dynamic css selection*/} diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js index c3db15164b8c1a02f768146d5b533e08b93bc725..8dc8b65cd2463abab60df99007a8b5f17bb387b0 100644 --- a/src/Components/SearchBar.js +++ b/src/Components/SearchBar.js @@ -163,34 +163,39 @@ export default function SearchBar(props) { <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled> </Link> - <Flex style={{ "justifyContent": 'middle', 'flexDirection': 'column' }}> - <div>Pressione "Enter"</div> - <div>ou click na lupa</div> - </Flex> - <DividerVertical /> {state.windowSize.width >= 900 ? - <RadioGroupStyled row={true} - aria-label="Tipo" - name="types" value={searchClass} - onChange={ - (event) => setSearchClass(event.target.value) - } - > - <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos" /> - <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções" /> - <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" /> - </RadioGroupStyled> - : - <FormControl> - <SelectStyled - value={searchClass} - onChange={(event) => setSearchClass(event.target.value)} + <React.Fragment> + <Flex style={{ "justifyContent": 'middle', 'flexDirection': 'column' }}> + <div>Pressione "Enter"</div> + <div>ou click na lupa</div> + </Flex> + <DividerVertical /> + <RadioGroupStyled row={true} + aria-label="Tipo" + name="types" value={searchClass} + onChange={ + (event) => setSearchClass(event.target.value) + } > - <MenuItemStyled value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled> - <MenuItemStyled value="Collection" aria-label="Coleções">Coleções</MenuItemStyled> - <MenuItemStyled value="User" aria-label="Usuários">Usuários</MenuItemStyled> - </SelectStyled> - </FormControl> + <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos" /> + <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções" /> + <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" /> + </RadioGroupStyled> + </React.Fragment> + : + <React.Fragment> + <DividerVertical /> + <FormControl> + <SelectStyled + value={searchClass} + onChange={(event) => setSearchClass(event.target.value)} + > + <MenuItemStyled value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled> + <MenuItemStyled value="Collection" aria-label="Coleções">Coleções</MenuItemStyled> + <MenuItemStyled value="User" aria-label="Usuários">Usuários</MenuItemStyled> + </SelectStyled> + </FormControl> + </React.Fragment> } </Flex> </Bar> diff --git a/src/Components/SignUpContainerFunction.js b/src/Components/SignUpContainerFunction.js index d336d3417c5075122c4090f03be9695458746620..89343fe5ea8d726c1cdb503b68cb280e82b10c46 100644 --- a/src/Components/SignUpContainerFunction.js +++ b/src/Components/SignUpContainerFunction.js @@ -58,9 +58,16 @@ export default function SignUpContainer (props) { } ) - const handleChange = (e, type) => { + const [formConfirmation, setConfirmation] = useState( + { + key : false, + value : "" + } + ) + + const handleChange = (e, type, confirmation) => { const userInput = e.target.value - const flag = ValidateUserInput(type, userInput) + const flag = ValidateUserInput(type, userInput, confirmation) if (type === 'username') { setNome({...formNome, @@ -83,6 +90,13 @@ export default function SignUpContainer (props) { }) console.log(formSenha) } + else if(type === 'confirmation') { + setConfirmation({...formConfirmation, + key : flag, + value : userInput + }) + console.log(formConfirmation) + } } const limpaCamposForm = () => { @@ -100,6 +114,11 @@ export default function SignUpContainer (props) { key : false, value : '' }) + + setConfirmation({...formConfirmation, + key : false, + value : '' + }) } const switchModal = (e) => { @@ -110,9 +129,9 @@ export default function SignUpContainer (props) { const onSubmit = (e) => { e.preventDefault(); - const newLogin = {name : formNome.value, email : formEmail.value, password : formSenha.value} + const newLogin = {name : formNome.value, email : formEmail.value, password : formSenha.value, senha : formConfirmation.value} - if (!(formNome.key || formEmail.key || formSenha.key)) { + if (!(formNome.key || formEmail.key || formSenha.key || formConfirmation.key)) { props.handleLoginInfo(newLogin) limpaCamposForm() } @@ -178,6 +197,17 @@ 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/> + <FormInput + inputType={"password"} + name={"confirmation"} + value={formConfirmation.value} + placeholder={"Confirme a Senha"} + 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/> <ConfirmContainerStyled> <StyledSignUpButton type="submit" variant="contained"> <span @@ -192,7 +222,7 @@ export default function SignUpContainer (props) { <TermosDeUsoStyled> <p>Ao se cadastrar, você está aceitando os Termos de Uso e de Política - de Privacidade. <a href="./">Ler Termos</a>.</p> + de Privacidade. <a href="/termos">Ler Termos</a>.</p> </TermosDeUsoStyled> <DialogFooterStyled> diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js index d3ed47c79a2b85273ff94601d99092d6e52bbacc..e01678072f356a5f7aa4a76da8edfd3052e01167 100644 --- a/src/Components/SignUpModal.js +++ b/src/Components/SignUpModal.js @@ -23,6 +23,7 @@ import styled from 'styled-components' import SignUpContainer from './SignUpContainerFunction.js' import {Store} from '../Store.js' import {authentication} from './HelperFunctions/getAxiosConfig' +//import {postRequest} from './HelperFunctions/getAxiosConfig' export default function SignUpModal (props) { const { state, dispatch } = useContext(Store) @@ -41,11 +42,12 @@ export default function SignUpModal (props) { name : newLogin.name, email: newLogin.email, password : newLogin.password, - password_confirmation : newLogin.senha, - terms_of_service:true, - avatar: "" + password_confirmation : newLogin.senha //, + // terms_of_service : true, + // avatar: "" } authentication(url, payload, handleSuccess, (error) => {console.log(error)}) + //postRequest(url, payload, handleSuccess, (error) => {console.log(error)}) } return ( diff --git a/src/Pages/Search.js b/src/Pages/Search.js index 4180c2328f6cbab7a0c073f360094b85ab3185ae..b1ba6498171ed7fa92fc4cec260a2af5ece18d74 100644 --- a/src/Pages/Search.js +++ b/src/Pages/Search.js @@ -126,6 +126,8 @@ export default function Search(props) { class: searchClass, }, }); + state.search.query = query + state.search.class = searchClass } currOption = searchClass setOption(searchClass) @@ -137,7 +139,7 @@ export default function Search(props) { type: "HANDLE_SEARCH_BAR", opened: false, }); - }, [window.history.state.key, state.currentUser.id]) + }, [window.history.state === null ? true : window.history.state.key, state.currentUser.id]) useEffect(() => { setIsLoading(true);