Login System implements

app/Http/Controllers/AuthController.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\ValidationException;
+
+class AuthController extends Controller
+{
+    public function authenticate(Request $request)
+    {
+        try {
+            $credits = $request->validate([
+                "email" => "required|email",
+                "password" => "required"
+            ]);
+
+            if (Auth::attempt(["email" => $credits["email"], "password" => $credits["password"]])) {
+                $user = Auth::user();
+
+                return response()->json(["account" => $user->name], 200);
+            }
+
+            return response()->json(["error" => "Invalid email or password."], 401);
+        } catch (\Illuminate\Validation\ValidationException $exception) {
+            return response()->json(['error' => $exception->errors()], 422);
+        } catch (\Exception $exception) {
+            return response()->json(['error' => 'An unexpected error occurred.'], 500);
+        }
+
+    }
+}

resources/js/app.js

@@ -1 +1,9 @@
 import 'flowbite';
+import axios from 'axios';
+import Swal from 'sweetalert2';
+import 'animate.css';
+
+window.axios = axios;
+window.Swal = Swal;
+
+console.log('Libraries are now available globally:', { axios, Swal });

resources/views/smart/login.blade.php

@@ -20,17 +20,17 @@
                 <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
                     Secure Login
                 </h1>
-                <form class="space-y-4 md:space-y-6">
+                <form id="loginForm" class="space-y-4 md:space-y-6">
                     <div>
                         <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your Account Email</label>
-                        <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="admin@domain.com" required="">
+                        <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="admin@domain.com">
                     </div>
                     <div>
                         <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your Account Password</label>
-                        <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
+                        <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                     </div>
                     <div class="w-full d-flex justify-center">
-                    <button type="button" onclick="submit()"  class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
+                        <button type="submit" class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
                             <span class="relative px-5 py-2.5 transition-all ease-in duration-100 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
                                 Authentication
                             </span>
@@ -42,6 +42,56 @@
     </div>
 </section>
 
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const form = document.getElementById('loginForm');
+        if (form) {
+            form.addEventListener('submit', (event) => {
+                event.preventDefault(); // Prevent default form submission
+
+                const email = document.getElementById('email').value;
+                const password = document.getElementById('password').value;
+
+                axios.post("{{ route('post_login') }}", {
+                    email: email,
+                    password: password
+                })
+                    .then(function (response) {
+                        Swal.fire({
+                            title: "Success!",
+                            text: "You are Logged in as " + response.data.account,
+                            icon: "success"
+                        });
+                        console.log(response);
+                    })
+                    .catch(function (error) {
+                        Swal.fire({
+                            title: "Error!",
+                            text: error.response?.data?.message || "An error occurred.",
+                            icon: "error",
+                            showClass: {
+                                popup: `
+                                    animate__animated
+                                    animate__fadeInUp
+                                    animate__faster
+                                `
+                            },
+                            hideClass: {
+                                popup: `
+                                    animate__animated
+                                    animate__fadeOutDown
+                                    animate__faster
+                                `
+                            }
+                        });
+                        console.log(error);
+                    });
+            });
+        }
+    });
+</script>
+
+
 </body>
 
 </html>

routes/web.php

@@ -7,13 +7,27 @@ Route::get('/', function () {
     return redirect('cp');
 });
 
+// The Login form when you are not Logged in
+
 Route::Group(['prefix' => 'cp', 'middleware' => 'web'], function () {
     Route::get('/', function (\Illuminate\Http\Request $request) {
         if (!Auth::check()) {
             return redirect()->route('auth');
         } else {
-            return redirect()->route('dashboard');
+            return redirect()->route('internal');
         }
     });
     Route::get('auth/',[\App\Http\Controllers\SmartController::class, 'index'])->name('auth');
 });
+
+// Calls for Controllers
+
+Route::Group(['prefix' => 'call', 'middleware' => 'web'], function () {
+    Route::post('login', [\App\Http\Controllers\AuthController::class, 'authenticate'])->name('post_login');
+});
+
+// Internal Area when do you have permissions and logged in
+
+Route::Group(['prefix' => 'internal', 'middleware' => 'auth'], function () {
+    Route::get('dashboard/', [\App\Http\Controllers\SmartController::class, 'dashboard'])->name('dashboard');
+});