Merge branch '15-criar-tela-de-contato' into Develop

src/App.js

@@ -24,7 +24,7 @@ import EcFooter from './Components/EcFooter';
 import GNUAGPLfooter from './Components/AGPLFooter';
 import UserPage from './Pages/UserPage';
 import UserTerms from './Pages/UserTerms';
-
+import Contact from './Pages/Contact';
 import Teste from './Pages/Teste';
 
 import ResourcePage from './Pages/ResourcePage';
@@ -78,7 +78,7 @@ export default function App(){
         <Route path="/permission" component={PublicationPermissionsPage}/>
         {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
 
-
+        <Route path="/contato" component={Contact}/>
       	<Route path="/termos" component={UserTerms}/>
         <Route path="/teste" component={Teste}/>
 

src/Components/Carousel.js

@@ -426,7 +426,13 @@ const CarouselStyled = styled(Carousel)`
     display: inline-block;
     border-top: 8px solid transparent;
     border-bottom: 8px solid transparent;
-    content: '';
+    content: '    ';
+  }
+  .carousel .control-arrow {
+    background: transparent !important;
+  }
+  .m4d-icons {
+    size: 50px
   }
 
 
@@ -648,7 +654,7 @@ class TermsCarousel extends Component {
                           </Grid>
                         </Grid>
                         <div class="rodape col-md-12">
-                          <p>Dúvidas? Leia a íntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <span ui-sref="contato">formulário de contato</span>.</p>
+                          <p>Dúvidas? Leia a íntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <a style={{color: "#fff"}} href="contato">formulário de contato</a>.</p>
                         </div>
                       </div>
                     </div>

src/Components/FormInput.js

@@ -21,11 +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%;
@@ -56,7 +51,7 @@ export default function FormInput(props) {
   const classes = useStyles();
 
   return (
-    <FormContainerStyled noValidate autoComplete="off">
+
 
         <StyledTextField
           id="standard-basic"
@@ -67,10 +62,14 @@ export default function FormInput(props) {
           type = {props.inputType}
           value = {props.value}
           onChange = {props.handleChange}
+          helperText = {props.help}
+          rows = {props.rows}
+          error = {props.error}
+          rowsMax = {props.rowsMax}
           InputProps={{className: classes.input}}
           style={{width:"100%"}}
+          multiline = {props.multi}
         />
 
-    </FormContainerStyled>
   );
 }

src/Pages/Contact.js

+/*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, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Banner1 from '../img/banner-sobre.jpg';
+import { TextField } from '@material-ui/core';
+import FormInput from "../Components/FormInput.js"
+import axios from 'axios'
+import {apiUrl} from '../env';
+
+
+const Seção1 =  styled.div `
+  width: 100%;
+  background-image: url(${Banner1});
+  background-size: cover;
+  background-position: bottom center;
+  height: 250px;
+  color:#fff;
+  line-height: 1.1;
+  text-align: center;
+  padding-top: 120px;
+
+  h2 {
+    font-family: Pompiere,cursive;
+    font-size: 52px;
+    color:#fff;
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
+    font-weight: 500;
+  }
+
+  h3 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+    font-family: Roboto,sans-serif;
+    font-size: 30px;
+    font-weight: lighter;
+
+  }
+`
+
+const Seção2 = styled.div `
+  height: 708px;
+  background-color: #f4f4f4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+const Button = styled.button`
+
+  background-color: #00acc1;
+  color:#fff;
+  font-family: Roboto,sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  height: 36px;
+  border-radius: 3px;
+  padding-left: 16px;
+  padding-right: 16px;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+  outline: none;
+  position: relative;
+  cursor: pointer;
+  min-height: 36px;
+  min-width: 88px;
+  line-height: 36px;
+  vertical-align: middle;
+  align-items: center;
+  text-align: center;
+  border-radius: 3px;
+  box-sizing: border-box;
+  user-select: none;
+  border: 0;
+  padding: 0 6px;
+  padding-right: 6px;
+  padding-left: 6px;
+  margin: 6px 8px;
+
+  white-space: nowrap;
+  text-transform: uppercase;
+  font-weight: 500;
+  font-size: 14px;
+  font-style: inherit;
+  font-variant: inherit;
+  font-family: inherit;
+  text-decoration: none;
+  overflow: hidden;
+  transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
+
+
+`
+
+const Formulário = styled.div `
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 40px;
+  height: 560px;
+  width: 480px;
+  color: #666;
+
+  form .inputBlock {
+    margin-block: 22px;
+
+  }
+
+  form .inputBlock label {
+    font-size: 14px;
+    font-weight: bold;
+    display: block;
+
+  }
+
+  form .inputBlock input {
+    width: 100%;
+    height: 32px;
+    font-size: 14px;
+    border: 0;
+    border-bottom: 1px solid #eee;
+
+  }
+
+  form .inputBlock.Message input {
+    height: 131px;
+  }
+
+  form buttom[type=submit] {
+    width: 100%;
+    border: 0;
+    margin-top: 30px;
+    background: #7d40e7
+    border-radius: 2px;
+    padding: 15px 20px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+    cursor: pointer;
+    transition: background 0.5s;
+
+  }
+
+  form buttom[type=submit]:hover {
+    background: #6931ac
+  }
+
+
+  h2 {
+    font-size: 24px;
+    font-weight: lighter;
+    margin-bottom: 50px;
+    margin-top: 20px;
+    text-align: center;
+
+  }
+`
+
+
+
+const Seção3 = styled.div `
+  height: 127px;
+  background-color: #f4f4f4;
+  color:#666;
+  line-height: 1.42857143;
+  font-size:18px;
+  text-align: center;
+  padding-top: 70px;
+
+
+  p {
+    margin: 0 0 10px 0;
+  }
+
+
+`
+
+function validateNome (nome) {
+    let flag = false
+    if(nome.length === 0) {
+        flag = true
+    }
+
+    return flag
+}
+
+
+function validateMensagem (mensagem) {
+    let flag = false
+    if(mensagem.length === 0) {
+        flag = true
+    }
+
+    return flag
+}
+
+function validateEmail (email) {
+  let flag = false
+  if (email.split("").filter(x => x === "@").length !== 1) {
+    flag = true
+  }
+  return flag
+}
+
+
+
+function Contact (props) {
+
+    const [nome, handleNome] = useState(
+      {
+        dict : {
+         key:false,
+         value:""
+       }
+     })
+    const [email, handleEmail] = useState(
+      {
+        dict : {
+         key:false,
+         value:""
+     }
+    })
+    const [mensagem, handleMensagem] = useState(
+      {
+        dict : {
+         key: false,
+         value:""
+       }
+      })
+
+
+  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 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 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 ) && ((nome.dict.value.length > 0) && (email.dict.value.length > 0) && (mensagem.dict.value.length > 0))) {
+
+        axios.post(`${apiUrl}/contacts`,
+            {
+              contact : {
+                name: nome.dict.value,
+                email: email.dict.value,
+                message: mensagem.dict.value
+              }
+
+        }
+        ).then()
+
+
+
+        limpaTudo();
+
+      }
+
+
+
+  }
+
+
+
+    return(
+      <>
+      <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
+        <Seção1>
+          <h2>CONTATO</h2>
+          <h3>Quer enviar uma mensagem?</h3>
+        </Seção1>
+
+        <Seção2>
+
+          <Formulário noValidate autoComplete="off">
+            <h2>Entre em contato para enviar dúvidas,<br/>sugestões ou críticas</h2>
+            <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"}}>
+                <Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
+              </div>
+            </form>
+
+          </Formulário>
+        </Seção2>
+
+        <Seção3>
+
+          <span>MEC - Ministério da Educação </span>
+          <p>Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP: 70.047-900 - Brasília/DF. Telefone: 0800 616161</p>
+
+        </Seção3>
+      </>
+    );
+
+}
+
+export default Contact;

src/Pages/UserTerms.js

@@ -46,6 +46,7 @@ const center={
   width: "100%",
   textAlign: "center"
 }
+
 const container={
   paddingInline: "15px",
   paddingBlock: "20px",
@@ -54,6 +55,7 @@ const container={
   width:"750px"
 
 }
+
 const secao2={
   height: "100%",
   alignItems: "center",
@@ -67,6 +69,7 @@ const AColorido = styled.a`
     text-decoration:none;
 
 `
+
 const ImagemSeçao2 = styled.div`
 
   font-family: Roboto, sans-serif;
@@ -107,6 +110,7 @@ const ImagemSeçao2 = styled.div`
   }
 }
 `
+
 const Secao3 = styled.div`
   background-color: #FF7F00;
   @media (min-width: 1000px) {