implement auth

backend/app/Http/Controllers/AuthController.php

@@ -0,0 +1,40 @@
+<?php
+
+  namespace Flox\Http\Controllers;
+
+  use Flox\Http\Requests\LoginRequest;
+  use Illuminate\Contracts\Auth\Guard;
+
+  class AuthController extends Controller {
+
+    private $auth;
+
+    public function __construct(Guard $auth)
+    {
+      $this->auth = $auth;
+    }
+
+    public function login(LoginRequest $request)
+    {
+      $username = $request->input('username');
+      $password = $request->input('password');
+
+      if($this->auth->attempt(['username' => $username, 'password' => $password], true)) {
+        return response('Success', 200);
+      }
+
+      return response('Unauthorized', 401);
+    }
+
+    public function logout()
+    {
+      $this->auth->logout();
+    }
+
+    public function checkLogin()
+    {
+      return [
+        'logged' => $this->auth->check()
+      ];
+    }
+  }

backend/app/Http/Controllers/FloxController.php

@@ -5,19 +5,11 @@
   use Flox\Item;
   use Flox\Category;
   use Flox\Http\Controllers\Controller;
-  use Illuminate\Support\Facades\Auth;
   use Illuminate\Support\Facades\Request;
   use Illuminate\Support\Str;
 
   class FloxController extends Controller {
 
-    public function checkLogin()
-    {
-      return [
-        'logged' => Auth::check()
-      ];
-    }
-
     public function homeItems($category, $orderBy, $loading = 5)
     {
       return $this->getItems($category, $orderBy, $loading);

backend/app/Http/Requests/LoginRequest.php

@@ -0,0 +1,30 @@
+<?php
+
+  namespace Flox\Http\Requests;
+
+  class LoginRequest extends Request {
+
+    public function authorize()
+    {
+      return true;
+    }
+
+    /**
+     * Login rules.
+     */
+    public function rules()
+    {
+      return [
+        'username' => 'required',
+        'password' => 'required',
+      ];
+    }
+
+    /**
+     * Login error.
+     */
+    public function response(array $errors)
+    {
+      return response('Login error', 422);
+    }
+  }

backend/app/Http/routes.php

@@ -15,7 +15,9 @@
 
     Route::group(['prefix' => 'api'], function() {
 
-      Route::get('check-login', 'FLoxController@checkLogin');
+      Route::post('login', 'AuthController@login');
+      Route::get('logout', 'AuthController@logout');
+      Route::get('check-login', 'AuthController@checkLogin');
 
       Route::get('all-categories', 'FloxController@allCategories');
       Route::get('home-items/{category}/{orderBy}/{loading?}', 'FloxController@homeItems');

backend/app/User.php

@@ -16,6 +16,8 @@ class User extends Model implements AuthenticatableContract,
 {
     use Authenticatable, Authorizable, CanResetPassword;
 
+    public $timestamps = false;
+
     /**
      * The database table used by the model.
      *

client/app/api.js

@@ -6,6 +6,10 @@ class Api extends React.Component {
     return $.get(config.api + 'check-login');
   }
 
+  static login(username, password) {
+    return $.post(config.api + 'login', {username, password, _token: $('meta[name="csrf_token"]').attr('content')})
+  }
+
   static categories() {
     return $.get(config.api + 'all-categories');
   }

client/app/app.js

@@ -25,7 +25,7 @@ class Flox extends React.Component {
     return (
       <div>
         <Header logged={this.state.logged} />
-        {React.cloneElement(this.props.children, {logged: this.state.logged})}
+        {React.cloneElement(this.props.children, {logged: this.state.logged, checkLogin: this.checkLogin.bind(this)})}
         <Footer />
       </div>
     );

client/app/sites/auth/auth.js

@@ -12,7 +12,7 @@ class Auth extends React.Component {
     return (
 
       <div>
-        {this.props.logged ? <Admin /> : <Login />}
+        {this.props.logged ? <Admin /> : <Login checkLogin={this.props.checkLogin} />}
       </div>
 
     );

client/app/sites/auth/login.js

@@ -9,7 +9,8 @@ class Login extends React.Component {
 
     this.state = {
       username: '',
-      password: ''
+      password: '',
+      error: ''
     }
   }
 
@@ -24,6 +25,7 @@ class Login extends React.Component {
         <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)} />
+          <span className="login-error">{this.state.error}</span>
           <input type="submit" value="Login" className="login-submit" />
         </form>
       </div>
@@ -38,10 +40,20 @@ class Login extends React.Component {
     let password = this.state.password;
 
     if( ! username || ! password) {
-      return;
+      return this.setState({
+        error: 'Username and Password are required'
+      });
     }
 
-    alert("submit");
+    Api.login(username, password).done((value) => {
+      this.props.checkLogin();
+    }).fail((value) => {
+      if(value.status === 422 || value.status === 401) {
+        this.setState({
+          error: 'Login not correct'
+        });
+      }
+    });
   }
 
   setUsername(event) {

client/assets/sass/_auth.scss

@@ -1,5 +1,5 @@
 .login-wrap {
-  width: 300px;
+  width: 400px;
   margin: 0 auto;
 }
 
@@ -33,4 +33,12 @@
   border: none;
   padding: 8px 25px;
   margin: 20px 0 0 0;
+}
+
+.login-error {
+  float: left;
+  clear: both;
+  color: #c64b4b;
+  font-size: 15px;
+  margin: 10px 0;
 }