Recipe 203

app/Http/Controllers/Auth/AuthController.php

@@ -6,6 +6,8 @@
 use Illuminate\Support\Facades\Validator;
 use Socialite;
 use Auth;
+use Illuminate\Http\Request;
+use Response;
 
 class AuthController extends Controller
 {
@@ -29,6 +31,7 @@ public function redirectToFacebook()
     {
         return Socialite::with('facebook')->redirect();
     }
+
     public function getFacebookCallback()
     {
         $data = Socialite::with('facebook')->user();
@@ -52,4 +55,38 @@ public function getFacebookCallback()
         return redirect('/')->with('success', 'Successfully logged in!');
     }
 
+    public function getRegister() {
+        return view('auth/ajax_register');
+    }
+
+    public function postRegister(Request $request) {
+
+        $validator = Validator::make($request->all(), [
+            'email' => 'required|email|unique:users,email',
+            'name' => 'required|min:2',
+            'password' => 'required|alphaNum|min:6|same:password_confirmation',
+        ]);
+
+        if ($validator->fails()) {
+            $message = ['errors' => $validator->messages()->all()];
+            $response = Response::json($message,202);
+        } else {
+
+            // Create a new user
+
+            $user = new User([
+                'name' => $request->name,
+                'email' => $request->email,
+                'facebook_id' => $request->email
+            ]);
+            $user->save();
+
+            Auth::login($user);
+
+            $message = ['success' => 'Thank you for joining us!', 'url' => '/', 'name' => $request->name];
+            $response = Response::json($message,200);
+        }
+        return $response;
+    }
+
 }

public/js/custom_script.js

@@ -17,4 +17,37 @@ Ladda.bind('.ladda-button', {
             }
         }, 200);
     }
-});
+});
+
+$(document).ready(function () {
+
+    var form = $('#registration');
+
+    form.submit(function (e) {
+        e.preventDefault();
+
+        $.ajax({
+            url: form.attr('action'),
+            type: "POST",
+            data: form.serialize(),
+            dataType: "json"
+        })
+            .done(function (response) {
+                if (response.success) {
+                    swal({
+                        title: "Hi " + response.name,
+                        text: response.success,
+                        timer: 2000,
+                        showConfirmButton: false,
+                        type: "success"
+                    });
+                    window.location.replace(response.url);
+                } else {
+                    swal("Oops!", response.errors, 'error');
+                }
+            })
+            .fail(function () {
+                swal("Fail!", "Cannot register now!", 'error');
+            });
+    });
+});

resources/views/auth/ajax_register.blade.php

@@ -0,0 +1,62 @@
+@extends('layouts.app')
+
+@section('content')
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+                <div class="panel panel-default">
+                    <div class="panel-heading">AJAX Register</div>
+                    <div class="panel-body">
+                        <form class="form-horizontal" id="registration" method="POST" action="{{ url('users/register') }}" data-parsley-validate>
+                            {!! csrf_field() !!}
+
+                            <div class="form-group">
+                                <label class="col-md-4 control-label">Name</label>
+
+                                <div class="col-md-6">
+                                    <input type="text" class="form-control" name="name" required>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label class="col-md-4 control-label">E-Mail Address</label>
+
+                                <div class="col-md-6">
+                                    <input type="email" class="form-control" name="email" required>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label class="col-md-4 control-label">Password</label>
+
+                                <div class="col-md-6">
+                                    <input type="password" class="form-control" name="password" id="password" required>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label class="col-md-4 control-label">Confirm Password</label>
+
+                                <div class="col-md-6">
+                                    <input type="password" class="form-control" name="password_confirmation" data-parsley-equalto="#password" required>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <div class="col-md-6 col-md-offset-4">
+                                    <button type="submit" class="btn btn-primary ladda-button" data-style="expand-left"
+                                            data-size="s" data-color="green">
+                                        <i class="fa fa-btn fa-user"></i> Register
+                                    </button>
+                                    <a href="/login/facebook"> <div class="btn btn-md btn-primary ladda-button"
+                                                                    data-style="expand-left" data-size="s" data-color="blue">
+                                            <i class="fa fa-facebook"></i> Login with Facebook </div></a>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection

resources/views/layouts/app.blade.php

@@ -5,9 +5,11 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
     <link rel="stylesheet" href="/css/ladda.min.css">
     <link rel="stylesheet" href="/css/sweetalert.css">
+    <link rel="stylesheet" href="/css/app.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
 
     <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.6.2/parsley.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>

resources/views/shared/navbar.blade.php

@@ -27,6 +27,8 @@
                         @if (Auth::guest())
                             <li><a href="{{ url('/login') }}">Login</a></li>
                             <li><a href="{{ url('/register') }}">Register</a></li>
+                            <li><a href="{{ url('/users/login') }}">AJAX Login</a></li>
+                            <li><a href="{{ url('/users/register') }}">AJAX Register</a></li>
                         @else
                             <li class="dropdown">
                             <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>

routes/api.php

@@ -19,6 +19,4 @@
 
 Route::group(['prefix' => 'v1', 'middleware' => 'cors'], function(){
     Route::resource('posts', 'PostsController');
-});
-
-
+});

routes/web.php

@@ -28,4 +28,7 @@
 
 Route::get('json', function () {
     return App\Post::paginate();
-});
+});
+
+Route::get('users/register', 'Auth\AuthController@getRegister');
+Route::post('users/register', 'Auth\AuthController@postRegister');