add login page

7 files changed, 68 insertions, 20 deletions

diff --git a/front-end/src/app.jsx b/front-end/src/app.jsx
index 1b5d21b..755df8e 100644
--- a/front-end/src/app.jsx
+++ b/front-end/src/app.jsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import { BrowserRouter as Router, Route, Link, Redirect, Switch } from 'react-router-dom';
-import { spring, AnimatedRoute ,AnimatedSwitch} from 'react-router-transition';
+import {BrowserRouter as Router, Route, Link, Redirect, Switch} from 'react-router-dom';
+import {spring, AnimatedRoute, AnimatedSwitch} from 'react-router-transition';
 // layout
 import Layout from 'component/layout/index.jsx'
 // page
+import Login from './page/login/index.jsx'
 import Home from './page/home/index.jsx'
+
 import Status from './page/status/index.jsx'
 
 
@@ -45,37 +47,36 @@ const bounceTransition = {
     },
 };
 
-class App extends React.Component{
-    constructor(props){
+class App extends React.Component {
+    constructor(props) {
         super(props);
     }
 
 
-    render(){
+    render() {
         let LayoutRouter = (
             <Layout>
-                <AnimatedSwitch
-                    atEnter={bounceTransition.atEnter}
-                    atLeave={bounceTransition.atLeave}
-                    atActive={bounceTransition.atActive}
-                    mapStyles={mapStyles}
-                    className="route-wrapper"
-                >
                     <Route exact path="/" component={Home}/>
+                    <Route exact path="/login" component={Login}/>
                     <Route exact path="/home" component={Home}/>
                     <Route exact path="/status" component={Status}/>
                     {/*<Redirect exact from="/order" to="/order/index"/>*/}
                     {/*<Redirect exact from="/user" to="/user/index"/>*/}
                     {/*<Route component={ErrorPage}/>*/}
-                </AnimatedSwitch>
             </Layout>
         );
         return (
             <Router>
-                <Switch>
+                <AnimatedSwitch
+                    atEnter={bounceTransition.atEnter}
+                    atLeave={bounceTransition.atLeave}
+                    atActive={bounceTransition.atActive}
+                    mapStyles={mapStyles}
+                    className="route-wrapper"
+                >
                     {/*<Route path="/login" component={Login}/>*/}
                     <Route path="/" render={ props => LayoutRouter}/>
-                </Switch>
+                </AnimatedSwitch>
             </Router>
         )
     }
diff --git a/front-end/src/component/layout/theme.css b/front-end/src/component/layout/theme.css
index 20cf25c..d179450 100644
--- a/front-end/src/component/layout/theme.css
+++ b/front-end/src/component/layout/theme.css
@@ -78,8 +78,10 @@ p {
 
 
 .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
-    background-color: #2497BA;
-    border-color: #428bca;
+    /*background-color: #2497BA;*/
+    /*border-color: #428bca;*/
+    background-color: #fff;
+    border-color: #fff;
 }
 
 .breadcrumb {
diff --git a/front-end/src/component/nav-top/index.jsx b/front-end/src/component/nav-top/index.jsx
index 768f3f6..b95dfa1 100644
--- a/front-end/src/component/nav-top/index.jsx
+++ b/front-end/src/component/nav-top/index.jsx
@@ -86,7 +86,7 @@ class NavTop extends React.Component {
                 <ul className="nav navbar-top-links navbar-right">
 
                     <li className="dropdown sign-in">
-                        <a className="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
+                        <a className="dropdown-toggle" data-toggle="dropdown" href="/https/git.postgresql.org/login" aria-expanded="false">
                             Sign in
                         </a>
 
diff --git a/front-end/src/component/result-filter/index.css b/front-end/src/component/result-filter/index.css
index 5899d0b..e7c5e9a 100644
--- a/front-end/src/component/result-filter/index.css
+++ b/front-end/src/component/result-filter/index.css
@@ -5,7 +5,7 @@
 /* select */
 .select {
     padding: 5px 10px;
-    border: #ddd 1px solid;
+    /*border: #ddd 1px solid;*/
     border-radius: 4px;
     width: 100%;
     /*margin: 5% auto;*/
diff --git a/front-end/src/component/result-filter/index.jsx b/front-end/src/component/result-filter/index.jsx
index e5e57c7..400631e 100644
--- a/front-end/src/component/result-filter/index.jsx
+++ b/front-end/src/component/result-filter/index.jsx
@@ -42,7 +42,7 @@ class ResultFilter extends React.Component {
                                 </a>
                                 <div className="title-selected-result">
                                     <span>--</span>
-                                    <button data-toggle="button" className="btn btn-primary-warn title-selected-btn" disabled={ this.state.isClear ? class1 : class2 }>
+                                    <button data-toggle="button" className="btn btn-primary-warn title-selected-btn" disabled={ this.state.isClear ? 'class1' : 'class2' }>
                                         clear
                                     </button>
                                     <button data-toggle="button" className="btn btn-primary title-selected-btn">apply
diff --git a/front-end/src/page/login/index.css b/front-end/src/page/login/index.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/front-end/src/page/login/index.css
diff --git a/front-end/src/page/login/index.jsx b/front-end/src/page/login/index.jsx
new file mode 100644
index 0000000..3ebfe04
--- /dev/null
+++ b/front-end/src/page/login/index.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+// import './index.css';
+
+class Login extends React.Component{
+    render(){
+        return (
+            <div id="page-wrapper" >
+                <div className="row">
+                    <div className="col-lg-16">
+                        <div className="panel panel-default">
+                            <div className="panel-heading">
+                                login to manage your machines!
+                            </div>
+                            <div className="panel-body">
+                                <div className="row">
+                                    {/*<!-- /.col-lg-6 (nested) -->*/}
+                                    <div className="col-lg-12">
+                                        <h4>Login Form</h4>
+                                        <form role="form">
+                                            <div className="form-group has-success">
+                                                {/*<label className="control-label" for="inputLogin"> login input</label>*/}
+                                                <input type="text" className="form-control" id="inputLogin" placeholder="Username or email"/>
+                                            </div>
+                                            <div className="form-group has-warning">
+                                                <input type="text" className="form-control" id="inputPwd" placeholder="password"/>
+                                            </div>
+                                            <button type="submit" className="btn btn-primary">Button</button>
+                                        </form>
+                                    </div>
+                                    {/*<!-- /.col-lg-6 (nested) -->*/}
+                                </div>
+                                {/*<!-- /.row (nested) -->*/}
+                            </div>
+                            {/*<!-- /.panel-body -->*/}
+                        </div>
+                        {/*<!-- /.panel -->*/}
+                    </div>
+                    {/*<!-- /.col-lg-12 -->*/}
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Login;
\ No newline at end of file