From 453c7035b1ec5948e5c99117d9631fb8c14b48f8 Mon Sep 17 00:00:00 2001
From: Riba <mrp19@inf.ufpr.br>
Date: Tue, 4 Feb 2020 11:27:16 -0300
Subject: [PATCH] Fixed color change on Forms
---
src/Components/FormInput.js | 9 +-
src/Pages/Contact.js | 55 ++-
src/Pages/Teste.js | 814 ++++++++++--------------------------
3 files changed, 265 insertions(+), 613 deletions(-)
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 696551c5..60b74706 100644
--- a/src/Components/FormInput.js
+++ b/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"
@@ -69,12 +64,12 @@ export default function FormInput(props) {
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>
);
}
diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js
index 327d1c74..f4894202 100644
--- a/src/Pages/Contact.js
+++ b/src/Pages/Contact.js
@@ -143,7 +143,25 @@ const Seção3 = styled.div `
`
-
+function validateUserInfo (name, email, mensagem, flag) {
+ 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(mensagem.length === 0) {
+ errors.push({ name : "mensagem", msg : "Faltou escrever sua mensagem de sugestão, crÃtica ou dúvida"})
+ }
+
+ return errors
+}
@@ -156,36 +174,52 @@ class Contact extends Component {
this.state = {
nome: "",
email: "",
- mensagem: ""
+ mensagem: "",
+ flag: false,
+
+ errors : []
};
this.handleChange = this.handleChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
};
handleChange = e => {
+ const mensagem = e.target.value
+ console.log(mensagem)
this.setState({[e.target.name]: e.target.value})
+ console.log(this.state)
};
onSubmit = (e) => {
//on submit we should prevent the page from refreshing
e.preventDefault(); //though this is arguable
+ const {nome, email, mensagem, flag} = this.state
+ const errors = validateUserInfo(nome, email, mensagem, flag)
//pass user info to Store.js and clear all text fields
-
- console.log(this.state);
-
-
- this.setState({
+ if (errors.length < 1) {
+ //submeter o formulario
+ this.setState({
nome: "",
email: "",
mensagem: ""
- })
+ })
+ }
+ else {
+ this.setState({
+ flag : true
+ })
+ }
+ console.log(this.state);
+
+
}
render() {
+ const { errors} = this.state;
return(
<>
<link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
@@ -196,7 +230,7 @@ class Contact extends Component {
<Seção2>
- <Formulário>
+ <Formulário noValidate autoComplete="off">
<h2>Entre em contato para enviar dúvidas,<br/>sugestões ou crÃticas</h2>
<form onSubmit={this.onSubmit}>
<FormInput
@@ -221,7 +255,8 @@ class Contact extends Component {
multi = {true}
rows = "3"
rowsMax = "5"
- help="Escreva sua mensagem no campo acima."
+ error = {this.state.flag}
+ help= {this.state.flag ? "Faltou escrever sua mensagem de sugestão, crÃtica ou dúvida." : "Escreva sua mensagem no campo acima."}
handleChange={e => this.handleChange(e)}
/>
<button onClick={e => this.onSubmit(e)} >Enviar Mensagem</button>
diff --git a/src/Pages/Teste.js b/src/Pages/Teste.js
index 38f6b402..4ca9cab8 100644
--- a/src/Pages/Teste.js
+++ b/src/Pages/Teste.js
@@ -16,661 +16,283 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {Component} from 'react';
+import React, { Component, useState, useEffect } from 'react';
import styled from 'styled-components';
-import Grid from '@material-ui/core/Grid';
-/*Importação de imagens para o componente*/
-import Handshake from "../img/termos/handshake.svg"
-import Pessoa from "../img/termos/Pessoa.svg"
-import Email from "../img/termos/Email.svg"
-import Seguranca from "../img/termos/Seguranca.svg"
-import Aberto from "../img/termos/Aberto.png";
-import Fechado from "../img/termos/Fechado.png";
-import Arrow_down from "../img/termos/Arrow_down.svg";
-import Arrow_double from "../img/termos/Arrow_double.svg";
-import Arrow_O from "../img/termos/Arrow_O que é a plataforma.png";
-import Arrow_O_1 from "../img/termos/Arrow_O que é a plataforma-1.png";
-
-
-const Slide = styled.div`
-
-position: absolute;
-height: 500px;
-width: 1366px;
-
-h2{
- font-family: "Pompiere", regular;
- font-size: 44px;
- line-height: 120%;
- color: #FFFFFF;
-}
-
-h3{
- font-family: "Roboto", regular;
- font-size: 27px;
- line-height: 120%;
- color: #FFFFFF;
-}
-
-p{
- font-family: "Roboto", regular;
- font-size: 20px;
- line-height: 120%;
- color: #FFFFFF;
- text-align: left;
-}
-
-.container{
- position: absolute;
- height: auto;
- width: auto;
- margin: 70px 180px 90px;
-}
-
-
-.tmpl1{
- background-color: #00BCD4;
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
-
-
- .box-text{
- position: relative;
- float: left;
- padding-right: 10px;
- padding-left: 10px;
+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;
}
- .box-image{
- position: relative;
- float: right;
+ h3 {
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-family: Roboto,sans-serif;
+ font-size: 30px;
+ font-weight: lighter;
+
}
-}
+`
-.tmpl2{
- height: inherit;
- width: inherit;
+const Seção2 = styled.div `
+ height: 708px;
+ background-color: #f4f4f4;
display: flex;
+ justify-content: center;
align-items: center;
- background-color: #673AB7;
-
- .title{
- padding-bottom: 50px;
- }
-
- .images{
- position: relative;
- display: table-row;
- }
-
- .arrow{
- display: table-row;
- position: absolute;
- margin-left: 15px;
- margin-top: -15px;
- }
-
- .circle{
- display: table-row;
- position: absolute;
- margin-top: -100px;
- margin-left: 755px;
- }
-
- .box-text{
- p{
- font-size: 18px;
- line-height: 25px;
- }
-
- position: relative;
+`
+const Button = styled.button`
- }
+`
-}
+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: 520px;
+ width: 420px;
+ color: #666;
-.tmpl3{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #E81F4F;
+ form .inputBlock {
+ margin-block: 22px;
- .title{
- position: relative;
- padding-left: 10px;
- h3{
- line-height: 40px;
- }
}
- .box-text1{
- .text{
- padding-top: 20px;
- }
-
- .content{
- display: table-row;
-
- p{
- display: table-cell;
- font-size: 18px;
- line-height: 25px;
- vertical-align: middle;
- }
-
- img{
- position: relative;
- left: 0;
- margin-right: 20px;
- display: table-cell;
- vertical-align: middle;
- margin: 10px 20px 10px -10px;
- }
- }
+ form .inputBlock label {
+ font-size: 14px;
+ font-weight: bold;
+ display: block;
}
- .box-text2{
- top: -50px;
- .content{
- p{
- padding-bottom: 20px;
- }
-
- img{
- margin-left: -65px;
- margin-top: 25px;
- }
-
- .twoArrow{
- margin-top: -5px;
- }
- }
-
+ form .inputBlock input {
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ border: 0;
+ border-bottom: 1px solid #eee;
}
-
-
-}
-
-.tmpl4{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #FF7F00;
-
- h2{
- padding-bottom: 20px;
+ form .inputBlock.Message input {
+ height: 131px;
}
- p{
- font-size: 20px;
- line-height: 25px;
- vertical-align: middle;
- }
+ 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;
- .box-images{
- height: inherit;
- display: table-row;
- padding-top: 50px;
}
- img{
- display: table-cell;
- vertical-align: middle;
- top: 40px;
+ form buttom[type=submit]:hover {
+ background: #6931ac
}
-}
-
-.tmpl5{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #1AB9DE;
-
- .title{
- display: table-row;
- align-items: center;
-
- img{
- display: table-cell;
- margin-right: 30px;
- }
-
- h2{
- display: table-cell;
- text-align: center;
- vertical-align: middle;
- }
- }
-
- .box-text {
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ margin-bottom: 50px;
margin-top: 20px;
- p{
- font-size: 17px;
- font-weight: 15px;
- }
+ text-align: center;
+
}
+`
-}
-.tmpl6{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #673AB7;
- .box-text-1{
- h3{
- margin-bottom: 20px;
- font-size: 27px;
- }
- p{
- margin-bottom: 20px;
- font-size: 18px;
- }
+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;
- .licences{
- padding: 35px 150px 50px 35px;
- margin-top: 50pz;
- background-image: url("../../img/termos/Entenda.svg");
- background-repeat: no-repeat;
- background-size: cover;
- p::before{
- content: url(../../img/termos/V.svg);
- }
- p{
- padding-left: 20px;
- font-family: "Kalam", regular;
- font-size: 24px;
- white-space: nowrap;
- }
- .row{
- padding-bottom: 5px;
- }
- }
+ p {
+ margin: 0 0 10px 0;
}
- .box-text-2{
- background-image: url("../../img/termos/OrthogonalLineUp.png"),url("../../img/termos/OrthogonalLineDown.png");
- background-repeat: no-repeat;
- background-position: left top, right bottom;
- padding-top: 30px;
- padding-left: 50px;
- p{
- font-size: 15px;
- padding-bottom: 15px;
- }
+`
- .licenses_type{
- margin-left: -20px;
- font-size: 22px;
- font-weight: bold;
- text-align: right;
- white-space: nowrap;
+function validateUserInfo (mensagem) {
+ let flag = false
+ if(mensagem.length === 0) {
+ flag = true
}
- }
+ return flag
}
-.tmpl7{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #E81F4F;
-
- .title{
- h2{
- font-family: Roboto;
- font-size: 44px;
- }
- }
-
- .box-text{
- margin-top: 20px;
- p{
- line-height: 20px;
- font-family: "Roboto";
- font-size: 18px;
- }
- }
-
- .rodape{
- margin-top: 40px;
- p{
- line-height: 20px;
- font-family: "Pompiere", regular;
- font-size: 28px;
- text-align: center;
- }
- span{
- text-decoration: underline;
- font-family: "Pompiere", regular;
- line-height: 20px;
- font-size: 28px;
- cursor: pointer;
- }
+function validateEmail (email) {
+ let flag = false
+ if (email.split("").filter(x => x === "@").length !== 1) {
+ flag = true
}
+ return flag
}
-`
-
-
-
-
-const Slide1 = styled.div`
- background:#00BCD4;
- height:500px;
- width:1366px;
-`
-
-
-
-const Slide3 = styled.div`
-
- background:#e81f4f;
- height:500px;
- width:1366px;
-
-
- .tmpl3{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #E81F4F;
-
- .title{
- position: relative;
- padding-left: 10px;
- h3{
- line-height: 40px;
- }
- }
-
- .box-text1{
- .text{
- padding-top: 20px;
- }
-
- .content{
- display: table-row;
-
- p{
- display: table-cell;
- font-size: 18px;
- line-height: 25px;
- vertical-align: middle;
- }
-
- img{
- position: relative;
- left: 0;
- margin-right: 20px;
- display: table-cell;
- vertical-align: middle;
- margin: 10px 20px 10px -10px;
- }
- }
-
- }
-
- .box-text2{
- top: -50px;
- .content{
- p{
- padding-bottom: 20px;
- }
-
- img{
- margin-left: -65px;
- margin-top: 25px;
- }
-
- .twoArrow{
- margin-top: -5px;
- }
- }
- }
+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: true,
+ value:""
+ }
+ })
+
+
+ const preencheNome = (e) => {
+ handleNome({...nome, dict : {
+ key : true,
+ 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 Slide4 = styled.div`
-
-
- background:#ff7f00;
- height:500px;
- width:1366px;
-
- position: absolute;
- height: 500px;
- width: 1366px;
-
- .container{
- position: absolute;
- height: auto;
- width: auto;
- margin: 70px 180px 90px;
- }
- .tmpl4{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #FF7F00;
-
- h2{
- padding-bottom: 20px;
- font-family: Pompiere,regular;
- font-size: 44px;
- line-height: 120%;
- color:#fff;
- margin-top: 20px;
- margin-bottom: 10px
- }
-
- p{
- font-size: 20px;
- line-height: 25px;
- vertical-align: middle;
- font-size: 20px;
- font-family: Roboto,regular;
- color:#fff;
- margin: 0 0 10px;
- text-align: left;
- line-height: 25px;
- padding-right: 10px;
- }
-
- .box-images{
- height: inherit;
- display: table-row;
- padding-top: 50px;
- }
-
- img{
- display: table-cell;
- vertical-align: middle;
- top: 40px;
- }
-
+ const preencheMensagem = (e) => {
+ const msg = e.target.value
+ console.log(msg)
+ let flag = validateUserInfo(msg)
+ handleMensagem({...mensagem, dict : {
+ key : flag,
+ value : msg
+ }})
+ console.log(mensagem)
+ }
- }
-`
+ const onSubmit = (e) => {
+ //on submit we should prevent the page from refreshing
+ e.preventDefault(); //though this is arguable
-class Teste extends Component {
- render() {
- return (
- <div>
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
-
- <Slide>
- <div class="tmpl1">
- <div class="container">
- <Grid container spacing={0}>
- <Grid item xs={6} >
- <div class="box-text">
- <p>A Plataforma Integrada MEC RED é parte do Compromisso 6 do 3º Plano de Ação da Parceria para Governo Aberto (OGP-Brasil), que tem por objetivo “incorporar na polÃtica educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileiraâ€.</p>
- </div>
- </Grid>
- <Grid item xs={6}>
- <div class="box-image">
- <img src={Handshake} alt="handshake"/>
- </div>
- </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
-
- <Slide>
- <div class="tmpl2">
- <div class="container">
- <div class="title">
- <h2>O que é a Plataforma Integrada MEC RED e como ela está organizada?</h2>
- <div class="images">
- <div class="arrow">
- <img src={Arrow_O} alt="Arrow_O"/>
- </div>
- <div class="circle">
- <img src={Arrow_O_1} alt="Arrow_O_1"/>
- </div>
- </div>
- </div>
- <div class="box-text col-md-6">
- <p>Uma plataforma interativa, colaborativa e criada em software livre, que disponibiliza conteúdos do acervo do MEC e indica conteúdos de parceiros com o objetivo de formar uma rede ativa de educadores interessados em usar, criar e compartilhar recursos educacionais digitais.</p>
- </div>
- <div class="box-text col-md-6">
- <p><strong>Repositório</strong> de recursos educacionais digitais que permite aos usuários cadastrados a publicação de seus materiais e <strong>Referatório</strong> que aponta links para conteúdos em sites externos.</p>
- </div>
- </div>
- </div>
- </Slide>
-
- <Slide3>
- <div class="tmpl3">
- <div class="container">
- <div class="title">
- <h3>As recursos educacionais disponibilizados<br/> podem ser de dois tipos:</h3>
- </div>
- <Grid container spacing={5}>
-
-
- <Grid class="text" item md={8}>
- <div class="content">
- <img src={Aberto} alt="Aberto "/>
- <p><strong>Abertos</strong>: recursos sem nenhuma restrição de acesso e<br/> com flexibilidade quanto ao uso ou reuso.</p>
- </div>
- <div class="content">
- <img src={Fechado} alt="Fechado"/>
- <p><strong>Fechados</strong>: recursos com alguma restrição de acesso, uso<br/> ou reuso, como aqueles que, para acesso, há demanda de<br/> cadastro ou que têm licenças restritivas.</p>
- </div>
- </Grid>
-
-
-
- <Grid item md={4}>
- <div class="content">
- <img src={Arrow_down}/>
- <p>Como repositório, a Plataforma hospeda somente Recursos Educacionais Abertos (REA). Todo conteúdo inserido por usuários deve ser aberto.</p>
- </div>
- <div class="content">
- <img class="twoArrow" src={Arrow_double}/>
- <p>Como referatório, a Plataforma aponta links para parceiros, e<br/> esses recursos podem ser abertos ou fechados.</p>
- </div>
- </Grid>
-
-
- </Grid>
- </div>
- </div>
- </Slide3>
-
- <Slide>
- <div class="tmpl4">
- <div class="container">
- <Grid container spacing={5}>
- <Grid item xs={6}>
- <h2>Como se cadastrar?</h2>
- <div>
- <p>Para criar uma conta, o usuário deverá clicar no botão “Cadastre-se†na página inicial da Plataforma e fazer um cadastro utilizando um endereço de e-mail e criando uma senha.</p>
- </div>
- </Grid>
- <Grid item xs={2} style={{alignSelf:"center"}}> <img src={Pessoa} alt="Pessoa" /> </Grid>
- <Grid item xs={2} style={{alignSelf:"center"}}> <img src={Email} alt="Email" /> </Grid>
- <Grid item xs={2} style={{alignSelf:"center"}}> <img src={Seguranca} alt="Seguranca" /> </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
-
- <div style={{background:"#00BCD4", height:"500px", width:"1366px"}}>
- <h2>O que publicar?</h2>
-
- <p>Conteúdos de cunho educacional e pertinentes ao assunto no qual estão inseridos, de autoria do usuário, de autoria coletiva (com consentimento dos demais autores) ou que estejam no domÃnio público. </p>
-
- <h2>O que não publicar?</h2>
-
- <p>Materiais ofensivos, pornográficos, relacionados a atividades ilegais, que invadam a privacidade de terceiros, que violem a legislação de Direito Autoral ou os Direitos Humanos. Propagandas, conteúdos com vÃrus, spam ou comentários abusivos.</p>
- </div>
-
- <div style={{background:"#673ab7", height:"500px", width:"1366px"}}>
- <h3>Direitos do autor e licenças de uso</h3>
-
- <p>Ao inserir um novo material de sua autoria no Repositório, o usuário deverá escolher um dos tipos de licença aberta disponÃveis na Plataforma:</p>
-
- <p>CC-BY</p>
-
- <p>CC-BY-SA</p>
-
- <p>CC-BY-NC</p>
-
- <p>CC-BY-NC-SA</p>
-
- <p>CC-BY</p>
-
- <p> significa que o autor permite que distribuam, remixem, adaptem e criem a partir do seu trabalho, desde que lhe atribuam o devido crédito pela criação original</p>
-
- <p>NC</p>
-
- <p> indica que as criações elaboradas a partir do trabalho do autor podem ser utilizadas somente para fins não comerciais (se não houver esta especificação, o novo recurso poderá ser utilizado para fins comerciais)</p>
-
- <p>SA</p>
+ }
- <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p>
- </div>
- <div style={{background:"#e81f4f", height:"500px", width:"1366px"}}>
- <h2>Respeitamos<br/> a sua privacidade</h2>
- <p>Além de solicitar alguns dados pessoais para o cadastro, a Plataforma coleta, de forma automática, os dados não pessoais relativos à interação dos usuários no sistema. Esses dados nunca serão fornecidos para fins comerciais, assim como nunca serão compartilhados quaisquer dados pessoais que possam identificar o usuário.</p>
- <p>Os dados anônimos poderão ser utilizados para fins de melhoria da plataforma, transparência e para o uso em pesquisas.</p>
+ 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={onSubmit}>
+ <FormInput
+ inputType={"text"}
+ name={"nome"}
+ value={nome.value}
+ placeholder={"Nome *"}
+ error = {nome.dict.key}
+ help = {nome.dict.key ? "insira seu nome para o contato " : ""}
+ handleChange={e => preencheNome(e)}
+ />
+ <FormInput
+ inputType={"text"}
+ name={"email"}
+ value={email.value}
+ placeholder={"E-mail *"}
+ error = {email.dict.key}
+ help = {email.dict.key ? "escreve certo po" : "boa parça"}
+ handleChange={e => preencheEmail(e)}
+ />
+ <FormInput
+ inputType={"text"}
+ name={"mensagem"}
+ value={mensagem.value}
+ placeholder={"Mensagem *"}
+ multi = {true}
+ rows = "3"
+ rowsMax = "5"
+ 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)}
+ />
+ <Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
+ </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>
+ </>
+ );
- <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>
- </div>
- </div>
- );
- }
- }
+}
-export default Teste;
+export default Contact;
--
GitLab