diff --git a/src/App.js b/src/App.js
index c12655e9d74fc4423e5f3f0e8b66391bd9321c09..fda1a7b4426d6115fa81adb6d7076101f2054652 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,12 +3,16 @@ import { HashRouter, Route } from 'react-router-dom';
import CreateForm from './pages/CreateForm';
import AnswerForm from './pages/AnswerForm';
+import SignIn from './pages/SignIn';
+import Header from './components/header/Header.jsx';
function App() {
return (
<HashRouter>
+ <Header />
<Route path="/create" component={CreateForm} />
<Route path="/answer/:id" component={AnswerForm} />
+ <Route path='/signIn' component={SignIn} />
</HashRouter>
);
}
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..96a5dacbbfba51cdda00765f5c65654c4f6e3184
--- /dev/null
+++ b/src/components/header/Header.jsx
@@ -0,0 +1,104 @@
+import React from "react";
+import Grid from "@material-ui/core/Grid";
+import logo from "./../../logo.svg";
+import { makeStyles } from "@material-ui/core";
+
+const useStyles = makeStyles(theme => ({
+ header: {
+ background: "#05a5dd",
+ width: "auto",
+ display: "flex",
+ flexDirection: "column"
+ },
+ simmc: {
+ marginTop: "16px",
+ fontSize: "15px",
+ color: "#ffffff",
+ ["@media (max-width:1040px)"]: {
+ display: "none"
+ }
+ },
+ simmcSmall: {
+ marginTop: "16px",
+ fontSize: "15px",
+ color: "#ffffff",
+ display: "none",
+ ["@media (max-width:1040px)"]: {
+ display: "flex",
+ marginTop: "35%",
+ fontSize: "20px",
+ ["@media (max-width:380px)"]: {
+ display: "none"
+ }
+ }
+ },
+ form_creator: {
+ color: "#ffffff",
+ marginTop: "20px",
+ ["@media (max-width:1040px)"]: {
+ marginTop: "24px",
+ fontSize: "21px",
+ ["@media (max-width:599px)"]: {
+ marginTop: "5%"
+ }
+ }
+ },
+ link: {
+ textDecoration: "none"
+ }
+}));
+
+// `${classes.header} titlebatman`
+export default function Header() {
+ const classes = useStyles();
+ return (
+ <header className={classes.header}>
+ <Grid container item>
+ <Grid container item xs={7} sm={4} md={4}>
+ <a
+ href="https://simmc.c3sl.ufpr.br/"
+ title="Ir para a página inicial do SIMMC"
+ >
+ <img
+ src={logo}
+ alt="logo"
+ href="localhost3000/#/signup"
+ width="100px"
+ maxWidth="100px"
+ />
+ </a>
+ <Grid
+ container
+ item
+ xs={5}
+ sm={6}
+ md={8}
+ alignContent="flexstart"
+ alignItems="start"
+ >
+ <a
+ href="https://simmc.c3sl.ufpr.br/"
+ title="Ir para a página inicial do SIMMC"
+ className={classes.link}
+ >
+ <h2 className={classes.simmc}>
+ Sistema Integrado de Monitoramento do Ministério da Ciência,
+ Tecnologia, Inovações e Comunicações
+ </h2>
+ <h2 className={classes.simmcSmall}>SIMMC</h2>
+ </a>
+ </Grid>
+ </Grid>
+ <Grid container item xs={5} sm={6} md={4} justify="center">
+ <a
+ href="https://google.com.br"
+ title="Ir para a página inicial do Gerenciador de Formulários"
+ className={classes.link}
+ >
+ <h2 className={classes.form_creator}>Gerenciador de Formulários</h2>
+ </a>
+ </Grid>
+ </Grid>
+ </header>
+ );
+}
diff --git a/src/pages/SignIn.js b/src/pages/SignIn.js
new file mode 100644
index 0000000000000000000000000000000000000000..f1e7fb04d42b3b4f234e858f689dde60d7c615ac
--- /dev/null
+++ b/src/pages/SignIn.js
@@ -0,0 +1,148 @@
+import React from "react";
+import Grid from "@material-ui/core/Grid";
+import TextField from "@material-ui/core/TextField";
+import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";
+import IconButton from "@material-ui/core/IconButton";
+import { makeStyles } from "@material-ui/core/styles";
+import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
+
+const useStyles = makeStyles(theme => ({
+ register: {
+ maxWidth: "1000px",
+ background: "#ffffff",
+ boxShadow: "0 0 3px 0 #35c7fc",
+ borderRadius: "2px",
+ padding: "2% 1%",
+ margin: "0 auto",
+ marginTop: "9%",
+ width: "85%"
+ },
+ custom_strong: {
+ fontSize: "25px",
+ textAlign: "center",
+ display: "block",
+ color: "#46525d"
+ },
+ strong_description: {
+ fontSize: "14px",
+ color: "#c2c6ca"
+ },
+ form: {
+ marginTop: "3%",
+ alignItems: "center",
+ textAlign: "center"
+ },
+ button: {
+ type: "submit",
+ width: "30%",
+ marginTop: "4%",
+ background: "#6ec46c",
+ borderRadius: "2px",
+ padding: "10px 20px",
+ fontSize: "18px",
+ color: "#ffffff",
+ width: "45%",
+ "&:hover": {
+ backgroundColor: "rgb(25, 109, 23)"
+ }
+ }
+}));
+export default function SignUp() {
+ const classes = useStyles();
+ const [values, setValues] = React.useState({
+ email: "",
+ password: "",
+ });
+ const handleChange = prop => event => {
+ setValues({ ...values, [prop]: event.target.value });
+ };
+
+ function checkEmail() {
+ if (/^[a-zA-Z0-9._-]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test(values.email)) {
+ return true;
+ }
+ alert("E-mail inválido");
+ return false;
+ }
+ function verifyValues() {
+ if (
+ values.email &&
+ values.password
+ ) {
+ return true;
+ }
+ return false;
+ }
+ function verifyValueContent() {
+ if (checkEmail()) {
+ return true;
+ }
+ return false;
+ }
+ function submit() {
+ if (verifyValues()) {
+ if (verifyValueContent()) {
+ // backend integration
+ }
+ }
+ }
+ const theme = createMuiTheme({
+ overrides: {
+ MuiInput: {
+ underline: {
+ "&:before": {
+ borderBottom: "1px solid #35c7fc"
+ },
+ "&:after": {
+ borderBottom: "1px solid #3f51b5"
+ }
+ }
+ }
+ }
+ });
+ return (
+ <MuiThemeProvider theme={theme}>
+ <Grid className={classes.register} justify="center">
+ <strong className={classes.custom_strong}>
+ Conecte-se
+ <p className={classes.strong_description}>
+ Insira as informações abaixo
+ </p>
+ </strong>
+ <form className={classes.form} autocomplete="off">
+ <Grid>
+ <TextField
+ required
+ onChange={handleChange("email")}
+ style={{ width: "45%" }}
+ id="standart-basic"
+ label="E-mail"
+ ></TextField>
+ </Grid>
+ <Grid>
+ <TextField
+ required
+ onChange={handleChange("password")}
+ style={{ width: "45%" }}
+ id="standart-basic"
+ label="Senha"
+ type="password"
+ autocomplete="off"
+ ></TextField>
+ </Grid>
+ <Grid>
+ <IconButton
+ type="submit"
+ size="medium"
+ className={classes.button}
+ onClick={() => submit()}
+ >
+ <KeyboardArrowRightIcon />
+ Conectar
+ </IconButton>
+ </Grid>
+ </form>
+ </Grid>
+ </MuiThemeProvider>
+ );
+}