Add login page

4454d7f3 · Gustavo Hornig · 340e16c7 · 4454d7f3 · 4454d7f3 · 4454d7f3
Commit 4454d7f3 authored 6 years ago by Gustavo Hornig
--- 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>

--- a/smppir-checkin-portal/src/Components/Button.js
+++ b/smppir-checkin-portal/src/Components/Button.js
 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>
    );
  }

--- a/smppir-checkin-portal/src/Pages/Login.js
+++ b/smppir-checkin-portal/src/Pages/Login.js
 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>
    );
  }
 }

--- a/smppir-checkin-portal/src/Pages/MainPage.js
+++ b/smppir-checkin-portal/src/Pages/MainPage.js
 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
--- 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
--- a/smppir-checkin-portal/src/Styles/Button.css
+++ b/smppir-checkin-portal/src/Styles/Button.css
+#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
--- a/smppir-checkin-portal/src/Styles/Login.css
+++ b/smppir-checkin-portal/src/Styles/Login.css
+.breadcrumb{
+    color: #212121;
+}
+
+.breadcrumb:last-child{
+    color: #212121;
+}
+
+.breadcrumb::before{
+    color: black;
+}
\ No newline at end of file