start with client site login

client/app/app.js

@@ -5,7 +5,7 @@ import {Router, Route, browserHistory, IndexRoute} from 'react-router';
 import Api from './api';
 import Home from './sites/home';
 import Category from './sites/category';
-import Admin from './sites/admin';
+import Auth from './sites/auth/auth';
 import Header from './partials/header';
 import Footer from './partials/footer';
 
@@ -15,7 +15,7 @@ class Flox extends React.Component {
     super();
 
     this.state = {
-      logged: true
+      logged: false
     };
 
     this.checkLogin();
@@ -44,7 +44,7 @@ render((
   <Router history={browserHistory} onUpdate={() => window.scrollTo(0, 0)}>
     <Route component={Flox} path={config.uri}>
       <IndexRoute component={Home} />
-      <Route path="admin" component={Admin} />
+      <Route path="admin" component={Auth} />
       <Route path=":category" component={Category} />
     </Route>
   </Router>

client/app/partials/footer.js

@@ -12,7 +12,7 @@ class Footer extends React.Component {
             <a href="https://www.themoviedb.org/" target="_blank"><i className="icon-tmdb"></i></a> This product uses the TMDb API but is not endorsed or certified by TMDb
           </span>
           <a className="icon-github" href="https://github.com/devfake/flox" target="_blank"></a>
-          <Link to={config.uri + 'admin'} className="admin-link">Admin Login</Link>
+          <Link to={config.uri + 'admin'} className="admin-link">Login</Link>
         </div>
       </footer>
 

client/app/sites/auth/admin.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import Api from '../api';
 
 class Admin extends React.Component {
 
@@ -11,7 +10,7 @@ class Admin extends React.Component {
     return (
 
       <div>
-        {this.props.logged ? 'Eingeloggt' : 'Ausgeloggt'}
+        Admin bereich
       </div>
 
     );

client/app/sites/auth/auth.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Login from './login';
+import Admin from './admin';
+
+class Auth extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+
+      <div>
+        {this.props.logged ? <Admin /> : <Login />}
+      </div>
+
+    );
+  }
+}
+
+export default Auth;

client/app/sites/auth/login.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Api from '../../api';
+
+class Login extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: '',
+      password: ''
+    }
+  }
+
+  componentDidMount() {
+    ReactDOM.findDOMNode(this.refs.username).focus();
+  }
+
+  render() {
+    return (
+
+      <div className="login-wrap">
+        <form className="login-form" onSubmit={this.onSubmit.bind(this)}>
+          <input type="text" className="login-input" placeholder="Username" ref="username" value={this.state.username} onChange={this.setUsername.bind(this)} />
+          <input type="password" className="login-input" placeholder="Password" value={this.state.password} onChange={this.setPassword.bind(this)} />
+          <input type="submit" value="Login" className="login-submit" />
+        </form>
+      </div>
+
+    );
+  }
+
+  onSubmit(event) {
+    event.preventDefault();
+
+    let username = this.state.username;
+    let password = this.state.password;
+
+    if( ! username || ! password) {
+      return;
+    }
+
+    alert("submit");
+  }
+
+  setUsername(event) {
+    this.setState({
+      username: event.target.value
+    });
+  }
+
+  setPassword(event) {
+    this.setState({
+      password: event.target.value
+    });
+  }
+}
+
+export default Login;

client/assets/sass/_auth.scss

@@ -0,0 +1,36 @@
+.login-wrap {
+  width: 300px;
+  margin: 0 auto;
+}
+
+.login-form {
+  float: left;
+  width: 100%;
+  margin: 200px 0 0 0;
+}
+
+.login-input {
+  background: #0e0e0e;
+  border: none;
+  padding: 10px 20px;
+  font-size: 17px;
+  width: 100%;
+  color: #909090;
+  margin: 0 0 10px 0;
+
+  &:focus {
+    background: lighten(#0e0e0e, 1%);
+  }
+}
+
+.login-submit {
+  float: left;
+  clear: both;
+  color: #fff;
+  font-size: 16px;
+  text-transform: uppercase;
+  background: $main;
+  border: none;
+  padding: 8px 25px;
+  margin: 20px 0 0 0;
+}

client/assets/sass/app.scss

@@ -8,6 +8,7 @@
 'sprite',
 
 'header',
+'auth',
 'content',
 'item',
 'modal',