did sessions, login/logout, validation, bootstrap

app/Http/Controllers/MessageController.php

@@ -8,23 +8,28 @@ use App\Models\Message;
 
 class MessageController extends Controller
 {
-    public function create(Request $request){
+	public function create(Request $request){
 
-    	$message = new Message();
+		$message = new Message();
+		$validatedData = $request -> validate([
+			'title' => ['required', 'max:100'], 
+			'content' => ['required', 'max:255'],
+		]);
+		$message -> title = $request -> title;
+		$message -> content = $request -> content;
 
-    	$message -> title = $request -> title;
-    	$message -> content = $request -> content;
+		$request-> user()->posts() -> save($message);
 
-    	$request-> user()->posts() -> save($message);
+    	// $request -> session()-> flash('message', 'Tweet has been posted');
 
-    	return redirect('');
-    } 
+		return redirect('')->with('message', 'Tweet has been posted!');
+	} 
 
-    public function view($id){
-    	$message = Message::findOrFail($id);
+	public function view($id){
+		$message = Message::findOrFail($id);
 
-    	return view('message', [
-    		'message' => $message
-    	]);
-    }
+		return view('message', [
+			'message' => $message
+		]);
+	}
 }

package.json

@@ -11,9 +11,14 @@
     },
     "devDependencies": {
         "axios": "^0.19",
+        "bootstrap": "^4.0.0",
         "cross-env": "^7.0",
+        "jquery": "^3.2",
         "laravel-mix": "^5.0.1",
         "lodash": "^4.17.19",
-        "resolve-url-loader": "^3.1.0"
+        "popper.js": "^1.12",
+        "resolve-url-loader": "^3.1.0",
+        "sass": "^1.15.2",
+        "sass-loader": "^8.0.0"
     }
 }

resources/js/bootstrap.js

@@ -1,5 +1,18 @@
 window._ = require('lodash');
 
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.Popper = require('popper.js').default;
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}
+
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the

resources/sass/_variables.scss

@@ -0,0 +1,19 @@
+// Body
+$body-bg: #f8fafc;
+
+// Typography
+$font-family-sans-serif: 'Nunito', sans-serif;
+$font-size-base: 0.9rem;
+$line-height-base: 1.6;
+
+// Colors
+$blue: #3490dc;
+$indigo: #6574cd;
+$purple: #9561e2;
+$pink: #f66d9b;
+$red: #e3342f;
+$orange: #f6993f;
+$yellow: #ffed4a;
+$green: #38c172;
+$teal: #4dc0b5;
+$cyan: #6cb2eb;

resources/sass/app.scss

@@ -0,0 +1,8 @@
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+// Variables
+@import 'variables';
+
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';

resources/views/home.blade.php

@@ -1,5 +1,5 @@
 @extends('layouts.app')
-
+@extends('page')
 @section('content')
 <div class="container">
     <div class="row justify-content-center">
@@ -16,8 +16,19 @@
                     @endif
 
                     {{ __('You are logged in!') }}
+
+                    <a href="{{ url('/logout') }}"> <button>logout</button> </a>
                     
-                    <h3>post a message:</h3>
+                    <h3>post a message:</h3>@if ($errors->any())
+                    <div class="alert alert-danger">
+                        <ul>
+                            @foreach ($errors->all() as $error)
+                            <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                    @endif
+
                     <form action="/create" method="post">
 
                         <input type="text" name="title" placeholder="Title"> 
@@ -33,17 +44,18 @@
 
                     </form>
                     <br>
-
+                    @if(session()->has('message'))
+                    <div class="alert alert-success">{{session()->get('message')}}</div>
+                    @endif
                     <h3>Recent Messages:</h3>
 
-
                     <ul>
                         @foreach($messages as $message)
 
                         <li>
                             {{ $message->title }}
                             <br> 
-                             user: {{ $message -> user_id }}
+                            user: {{ $message -> user-> name}}
                             <br>
                             {{ $message -> content }}
                             <br>
@@ -61,4 +73,4 @@
         </div>
     </div>
 </div>
-@endsection
+@endsection

resources/views/message.blade.php

@@ -1,13 +1,14 @@
 @extends('page')
 
-@section('title', $message->title) 
+ @section('title', $message->title) 
 
-@section('posts')
-<h3>{{ $message->title }}</h3>
-<p>{{ $message -> user_id}}</p>
+ @section('tweet') 
+{{ $message->title }}
+<p>{{ $message -> user ->name }}</p>
 <h4>{{ $message->content }}</h4>
 <p>{{ $message->created_at->diffForHumans() }}</p>
 
-<a href="/"><button>return home</button></a>
+<a  class="btn btn-primary" href="/">return home</a>
+
+@endsection
 
-@endsection

resources/views/page.blade.php

@@ -5,9 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible">
 	<title> @yield('title')</title>
-	<style type="text/css">
-		* {font-family: 'Comic Sans MS'}
-	</style>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
 </head>
 <body>
 

routes/api.php

@@ -14,6 +14,7 @@ use Illuminate\Support\Facades\Route;
 |
 */
 
-Route::middleware('auth:api')->get('/user', function (Request $request) {
+/*Route::middleware('auth:api')->get('/user', function (Request $request) {
     return $request->user();
 });
+*/

routes/web.php

@@ -16,7 +16,6 @@ use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\HController;
 use App\Http\Controllers\MessageController;
 
-Route::get('/posts', [ HController::class, 'dash' ]);
 
 Route::post('/create', [ MessageController::class, 'create' ]);
 
@@ -26,5 +25,4 @@ Route::get('/message/{id}', [ MessageController::class, 'view' ]);
 Auth::routes();
 
 Route::get('/', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
-
-
+Route::get('/logout', '\App\Http\Controllers\Auth\LoginController@logout');

webpack.mix.js

@@ -6,12 +6,10 @@ const mix = require('laravel-mix');
  |--------------------------------------------------------------------------
  |
  | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel applications. By default, we are compiling the CSS
+ | for your Laravel application. By default, we are compiling the Sass
  | file for the application as well as bundling up all the JS files.
  |
  */
 
 mix.js('resources/js/app.js', 'public/js')
-    .postCss('resources/css/app.css', 'public/css', [
-        //
-    ]);
+    .sass('resources/sass/app.scss', 'public/css');