From 4454d7f3872d45a2a442c5676200f9ceb0bd8fde Mon Sep 17 00:00:00 2001
From: Gustavo Hornig <ghm16@inf.ufpr.br>
Date: Wed, 23 May 2018 11:54:52 -0300
Subject: [PATCH] Add login page
---
smppir-checkin-portal/public/index.html | 3 +-
.../src/Components/Button.js | 3 +-
smppir-checkin-portal/src/Pages/Login.js | 40 ++++++++++++++++++-
smppir-checkin-portal/src/Pages/MainPage.js | 12 +++---
.../src/Pages/Styles/MainPage.css | 8 ----
smppir-checkin-portal/src/Styles/Button.css | 17 ++++++++
smppir-checkin-portal/src/Styles/Login.css | 11 +++++
7 files changed, 75 insertions(+), 19 deletions(-)
create mode 100644 smppir-checkin-portal/src/Styles/Login.css
diff --git a/smppir-checkin-portal/public/index.html b/smppir-checkin-portal/public/index.html
index 6c4b316..dbe0b29 100644
--- a/smppir-checkin-portal/public/index.html
+++ b/smppir-checkin-portal/public/index.html
@@ -27,7 +27,8 @@
-->
<title>Portal SMPPIR</title>
</head>
- <body>
+ <body style="background-color: #eeeeee">
+
<noscript>
You need to enable JavaScript to run this app.
</noscript>
diff --git a/smppir-checkin-portal/src/Components/Button.js b/smppir-checkin-portal/src/Components/Button.js
index 70031b7..1eea0a8 100644
--- a/smppir-checkin-portal/src/Components/Button.js
+++ b/smppir-checkin-portal/src/Components/Button.js
@@ -1,12 +1,13 @@
import React, { Component } from 'react';
import '../Styles/Button.css'
+import { width } from 'window-size';
class AppFooter extends Component {
render() {
return (
<div>
-
+ <a id='loginButton' className='z-depth-1 waves-effect waves-light' href='/login' > LOGIN </a>
</div>
);
}
diff --git a/smppir-checkin-portal/src/Pages/Login.js b/smppir-checkin-portal/src/Pages/Login.js
index b14e16a..774aa97 100644
--- a/smppir-checkin-portal/src/Pages/Login.js
+++ b/smppir-checkin-portal/src/Pages/Login.js
@@ -1,15 +1,51 @@
import React, { Component } from 'react';
import './Styles/MainPage.css';
import BarraBrasil from '../Components/BarraBrasil'
-import { Card, Row, Col, Button, Preloader } from 'react-materialize'
+import { Card, Row, Col, Preloader, Input, Breadcrumb, MenuItem } from 'react-materialize'
import logo from '../Images/logo.png'
import AppFooter from '../Components/AppFooter'
+import Button from '../Components/Button'
+import '../Styles/Login.css'
class MainPage extends Component {
render() {
return (
- <h1> TESTE </h1>
+ <div>
+ <BarraBrasil/>
+ <div>
+ <Card id='mainBannerCard' className='white' textClassName='white-text' >
+ <Row>
+ <Col s={12} m={6}>
+ <img alt='Logo do SMPPIR-Checkin com descrição' id={'bannerLogo'} src={logo} style={{width: 70}}/>
+ </Col>
+ <Col s={12} m={4} offset={'m1'}>
+ <p id='bannerText'>
+ Teste SMPPIR-Checkin
+ </p>
+ </Col>
+ </Row>
+ </Card>
+ </div>
+ <Breadcrumb>
+ <MenuItem href='/'>Home </MenuItem>
+ <MenuItem>Login</MenuItem>
+ </Breadcrumb>
+ <Row>
+ <Col offset={"s1 m3"} s={10} m={6}>
+ <Card title='Entrar' className='white' textClassName='black-text'>
+ <Row>
+ <Input type="email" label="E-mail" s={12} />
+ <Input type="password" label="Senha" s={12} />
+ <Row >
+ <Button/>
+ </Row>
+ </Row>
+ </Card>
+ </Col>
+ </Row>
+ <AppFooter/>
+ </div>
);
}
}
diff --git a/smppir-checkin-portal/src/Pages/MainPage.js b/smppir-checkin-portal/src/Pages/MainPage.js
index 77e67cd..4cc91b1 100644
--- a/smppir-checkin-portal/src/Pages/MainPage.js
+++ b/smppir-checkin-portal/src/Pages/MainPage.js
@@ -1,16 +1,17 @@
import React, { Component } from 'react';
import './Styles/MainPage.css';
import BarraBrasil from '../Components/BarraBrasil'
-import { Card, Row, Col, Button, Preloader } from 'react-materialize'
+import { Card, Row, Col, Preloader } from 'react-materialize'
import logo from '../Images/logo.png'
import AppFooter from '../Components/AppFooter'
-
+import Button from '../Components/Button'
class MainPage extends Component {
render() {
return (
<div>
<BarraBrasil />
+ <div>
<Card id='mainBannerCard' className='white' textClassName='white-text' >
<Row>
<Col s={12} m={6}>
@@ -22,10 +23,11 @@ class MainPage extends Component {
</p>
</Col>
<Col s={12} m={2} offset={'m1'}>
- <a id='loginButton' className='z-depth-1 waves-effect waves-light' href='/login'> LOGIN </a>
+ <Button/>
</Col>
</Row>
</Card>
+ </div>
<Row>
<Col id='map' s={4}>
<Preloader size='big'/>
@@ -36,10 +38,6 @@ class MainPage extends Component {
</div>
);
}
-
- loginRedirect(){
- window.location="localhost:3000/login"
- }
}
export default MainPage;
\ No newline at end of file
diff --git a/smppir-checkin-portal/src/Pages/Styles/MainPage.css b/smppir-checkin-portal/src/Pages/Styles/MainPage.css
index 6422330..72237ef 100644
--- a/smppir-checkin-portal/src/Pages/Styles/MainPage.css
+++ b/smppir-checkin-portal/src/Pages/Styles/MainPage.css
@@ -13,14 +13,6 @@
margin-top: 1%;
}
-#loginButton{
- margin-left: 180%;
- margin-top: 5%;
- background-color: green;
- color: white;
- padding: 10px;
-}
-
#map{
margin-left: 50%;
}
\ No newline at end of file
diff --git a/smppir-checkin-portal/src/Styles/Button.css b/smppir-checkin-portal/src/Styles/Button.css
index e69de29..8b456cb 100644
--- a/smppir-checkin-portal/src/Styles/Button.css
+++ b/smppir-checkin-portal/src/Styles/Button.css
@@ -0,0 +1,17 @@
+#loginButton{
+ width: 100px;
+ text-align: center;
+ margin-left: 180%;
+ margin-top: 5%;
+ background-color: green;
+ color: white;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 10px;
+ padding-right: 10px;
+ border-radius: 2px;
+}
+
+#loginButton:hover{
+ background-color: rgb(0, 85, 0);
+}
\ No newline at end of file
diff --git a/smppir-checkin-portal/src/Styles/Login.css b/smppir-checkin-portal/src/Styles/Login.css
new file mode 100644
index 0000000..7bf5b4e
--- /dev/null
+++ b/smppir-checkin-portal/src/Styles/Login.css
@@ -0,0 +1,11 @@
+.breadcrumb{
+ color: #212121;
+}
+
+.breadcrumb:last-child{
+ color: #212121;
+}
+
+.breadcrumb::before{
+ color: black;
+}
\ No newline at end of file
--
GitLab