Add Feature Livewire and Taiwindcss

app/Livewire/Auth/Login.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Livewire\Auth;
+
+use Illuminate\Support\Facades\Auth;
+use Livewire\Component;
+
+class Login extends Component
+{
+    public $email = '';
+    public $password = '';
+    public $remember = false;
+
+    protected $rules = [
+        'email' => 'required|email',
+        'password' => 'required',
+    ];
+
+    public function login()
+    {
+        $this->validate();
+
+        if (Auth::attempt(['email' => $this->email, 'password' => $this->password], $this->remember)) {
+            request()->session()->regenerate();
+            return redirect()->intended('/dashboard');
+        }
+
+        $this->addError('email', 'Email hoặc mật khẩu không đúng.');
+    }
+
+    public function render()
+    {
+        return view('livewire.auth.login')->layout('layouts.app');
+    }
+}

composer.json

@@ -10,6 +10,7 @@
         "laravel/framework": "^12.0",
         "laravel/passport": "^12.4",
         "laravel/tinker": "^2.10.1",
+        "livewire/livewire": "^3.6",
         "nyholm/psr7": "^1.8",
         "spatie/laravel-permission": "^6.20",
         "symfony/psr-http-message-bridge": "^7.3"

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "e57d75f79375c6497db5d8bb69248aaf",
+    "content-hash": "793fd8330a69031c0815315a2c7e9c80",
     "packages": [
         {
             "name": "brick/math",
@@ -2491,6 +2491,82 @@
             ],
             "time": "2024-12-08T08:18:47+00:00"
         },
+        {
+            "name": "livewire/livewire",
+            "version": "v3.6.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/livewire/livewire.git",
+                "reference": "56aa1bb63a46e06181c56fa64717a7287e19115e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/livewire/livewire/zipball/56aa1bb63a46e06181c56fa64717a7287e19115e",
+                "reference": "56aa1bb63a46e06181c56fa64717a7287e19115e",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/database": "^10.0|^11.0|^12.0",
+                "illuminate/routing": "^10.0|^11.0|^12.0",
+                "illuminate/support": "^10.0|^11.0|^12.0",
+                "illuminate/validation": "^10.0|^11.0|^12.0",
+                "laravel/prompts": "^0.1.24|^0.2|^0.3",
+                "league/mime-type-detection": "^1.9",
+                "php": "^8.1",
+                "symfony/console": "^6.0|^7.0",
+                "symfony/http-kernel": "^6.2|^7.0"
+            },
+            "require-dev": {
+                "calebporzio/sushi": "^2.1",
+                "laravel/framework": "^10.15.0|^11.0|^12.0",
+                "mockery/mockery": "^1.3.1",
+                "orchestra/testbench": "^8.21.0|^9.0|^10.0",
+                "orchestra/testbench-dusk": "^8.24|^9.1|^10.0",
+                "phpunit/phpunit": "^10.4|^11.5",
+                "psy/psysh": "^0.11.22|^0.12"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "aliases": {
+                        "Livewire": "Livewire\\Livewire"
+                    },
+                    "providers": [
+                        "Livewire\\LivewireServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/helpers.php"
+                ],
+                "psr-4": {
+                    "Livewire\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Caleb Porzio",
+                    "email": "calebporzio@gmail.com"
+                }
+            ],
+            "description": "A front-end framework for Laravel.",
+            "support": {
+                "issues": "https://github.com/livewire/livewire/issues",
+                "source": "https://github.com/livewire/livewire/tree/v3.6.3"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/livewire",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-04-12T22:26:52+00:00"
+        },
         {
             "name": "monolog/monolog",
             "version": "3.9.0",

package.json

@@ -7,11 +7,14 @@
         "dev": "vite"
     },
     "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.10",
         "@tailwindcss/vite": "^4.0.0",
+        "autoprefixer": "^10.4.21",
         "axios": "^1.8.2",
         "concurrently": "^9.0.1",
         "laravel-vite-plugin": "^1.2.0",
-        "tailwindcss": "^4.0.0",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^4.1.10",
         "vite": "^6.2.4"
     }
 }

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+};

resources/css/app.css

@@ -1,11 +1,14 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
-@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
+/* Khai báo nguồn các file Blade để Tailwind nhận dạng các class CSS */
-@source '../../storage/framework/views/*.php';
+@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";
-@source '../**/*.blade.php';
+@source "../../storage/framework/views/*.php";
-@source '../**/*.js';
+@source "../**/*.blade.php";
+@source "../**/*.js";
 
+/* Khai báo biến tùy chỉnh cho theme, ví dụ font mặc định */
 @theme {
-    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-        'Segoe UI Symbol', 'Noto Color Emoji';
 }
+
+/* Các lớp tùy chỉnh thêm vào đây nếu muốn */

resources/views/layouts/app.blade.php

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="vi">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Đăng nhập hệ thống</title>
+
+    @vite('resources/css/app.css')
+    @livewireStyles
+</head>
+
+<body class="bg-gray-100 antialiased">
+    <div class="min-h-screen flex items-center justify-center py-12">
+        {{ $slot }}
+    </div>
+
+    @livewireScripts
+</body>
+
+</html>

resources/views/livewire/auth/login.blade.php

@@ -0,0 +1,32 @@
+<div class="max-w-md w-full bg-white shadow-xl rounded-lg p-8">
+    <h2 class="text-2xl font-semibold text-center text-gray-900 mb-6">Đăng nhập hệ thống</h2>
+
+    <form wire:submit.prevent="login" class="space-y-4">
+        <div>
+            <label class="block text-sm font-medium text-gray-700">Email:</label>
+            <input type="email" wire:model="email" required
+                   class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm py-2 px-3 focus:ring-indigo-500 focus:border-indigo-500">
+            @error('email')
+                <div class="text-red-500 text-sm">{{ $message }}</div>
+            @enderror
+        </div>
+
+        <div>
+            <label class="block text-sm font-medium text-gray-700">Mật khẩu:</label>
+            <input type="password" wire:model="password" required
+                   class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm py-2 px-3 focus:ring-indigo-500 focus:border-indigo-500">
+            @error('password')
+                <div class="text-red-500 text-sm">{{ $message }}</div>
+            @enderror
+        </div>
+
+        <div class="flex items-center">
+            <input type="checkbox" wire:model="remember" id="remember" class="h-4 w-4 text-indigo-600 border-gray-300 rounded">
+            <label for="remember" class="ml-2 text-sm text-gray-900">Ghi nhớ đăng nhập</label>
+        </div>
+
+        <button type="submit" class="w-full py-2 px-4 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition duration-200">
+            Đăng nhập
+        </button>
+    </form>
+</div>

routes/web.php

@@ -1,7 +1,9 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
+use App\Livewire\Auth\Login;
 
 Route::get('/', function () {
     return view('welcome');
 });
+Route::get('/login', Login::class)->name('login')->middleware('guest');

tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  content: [
+    "./resources/**/*.blade.php",
+    "./resources/**/*.js",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};