Google cloud y Ajax en login

.env

@@ -22,7 +22,9 @@ CI_ENVIRONMENT = development
 
 # app.baseURL = ''
 # If you have trouble with `.`, you could also use `_`.
-  app_baseURL = 'https://tbw2223-12-mrtjcmh.oa.r.appspot.com'
+#  app_baseURL = 'https://tbw2223-12-mrtjcmh.oa.r.appspot.com'
+  app_baseURL = 'http://localhost'
+
 # app.forceGlobalSecureRequests = false
 # app.CSPEnabled = false
 

app/Config/Routes.php

@@ -33,6 +33,7 @@ use App\Controllers\User;
 
 $routes->match(['get'], '/', [User::class, 'login']);
 $routes->match(['get', 'post'], '/login', [User::class, 'login']);
+$routes->match(['get', 'post'], '/loginAjax', [User::class, 'loginAjax']);
 $routes->match(['get', 'post'], '/register', [User::class, 'register']);
 $routes->match(['get'], '/home', [User::class, 'user_ok']);
 

app/Controllers/User.php

@@ -23,6 +23,10 @@ class User extends BaseController
 
     public function login()
     {
+        return view('pages/login', []);
+    }
+
+    public function loginAjax(){
         $validation = \Config\Services::validation();
         $rules = [
             "email" => [
@@ -46,18 +50,28 @@ class User extends BaseController
                 if ($user) {
                     $session->set('logged_in', TRUE);
                     $session->set('user', $user);
-                    return redirect()->to(base_url('/home'));
-                } else {
-                    $session->setFlashdata('msg', 'Credenciales incorrectas');
+                    return $this->response->setStatusCode(200)->setJSON([
+                        'text' => 'Usuario logeado'
+                    ]);
+                            } else {
+                    return $this->response->setStatusCode(403)->setJSON([
+                        'text' => 'Usuario no logeado'
+                    ]);
                 }
             } else {
-                $data["errors"] = $validation->getErrors();
-            }
+                return $this->output->set_content_type('application/json')
+                ->set_status_header(400)
+                ->set_output(json_encode([
+                    'text' => 'Email o pasword incorrecto'
+                ]));
         }
-        return view('pages/login', $data);
+        }
+        return $this->response->setStatusCode(400)->setJSON([
+            'text' => 'Solo se aceptan post request'
+        ]);
 
-    }
 
+    }
     public function user_ok()
     {
         return view('templates/header')

app/Views/pages/login.php

@@ -10,13 +10,13 @@
 		integrity="sha512-Wq3znUOIZtqZkpWpkTVRtRwQ2YyPCvT03zWlj+iS9dH1eNTjiOVlG2xgC4np4FXwL+Hgx1pjcTXy09pgH5u5HA=="
 		crossorigin="anonymous" referrerpolicy="no-referrer" />
 	<link rel="stylesheet" href="<?= base_url("css/login.css") ?>">
-
 	<style>
 		body {
 			background-image: url("imagenes/fondoLogin.jpg");
 			background-size: 100% auto;
 		}
 	</style>
+	<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
 
 </head>
 
@@ -71,18 +71,16 @@
 								src="<?= base_url("iconos/apple.ico") ?>" width="52" height="52"></a>
 					</div>
 					<span>o usa tu correo</span>
-					<input style="background-color: #eee;" class="form-control" name="email" type="email" placeholder="Email" />
-					<input style="background-color: #eee;" class="form-control" name="password" type="password"
+					<input style="background-color: #eee;" id="email-form" class="form-control" name="email" type="email" placeholder="Email" />
+					<input style="background-color: #eee;" id="password-form" class="form-control" name="password" type="password"
 						placeholder="Contraseña" />
 					<a href="#">¿Olvidaste tu contraseña?</a>
 					
-					<span class="error">
-						<?php if (session()->getFlashdata('msg')): ?>
-							<div class="alert alert-danger">
-								<?= session()->getFlashdata('msg') ?>
+					<div class="login-error">
+							<div class="alert-danger">
+								<p>Login incorrecto</p>
 							</div>
-						<?php endif; ?>
-					</span>
+					</div>
 
 					<button id="signin-button"  type="submit">Iniciar Sesión</button>
 				</form>

app/Views/templates/header.php

@@ -28,6 +28,7 @@
 
   <!-- Template Main CSS File -->
   <link href="<?= base_url("css/style.css") ?>" rel="stylesheet">
+	<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
 
 
 </head>

public/css/login.css

@@ -89,6 +89,15 @@ input {
 	width: 100%;
 }
 
+.login-error{
+	display: none;
+	background-color: #ff9999;
+	color: #ff0000;
+	border: 1px solid #ff0000;
+	padding: 0.3em 0.3em 0.3em 0.3em;
+	margin-bottom: 0.3em;
+  
+}
 
 .container {
 	background-color: #fff;

public/js/login.js

@@ -16,4 +16,37 @@ document.querySelector('form').addEventListener('submit', function(event) {
         alert('La contraseña debe tener más de 8 caracteres');
         event.preventDefault();
     }
-});
\ No newline at end of file
+});
+
+$("#signin-button").on("click", function(e){
+    e.preventDefault();
+    // Get form data
+    var formData = {
+        email: $('#email-form').val(),
+        password: $('#password-form').val()
+    };
+
+    $.ajax({
+        type: 'POST',
+        url: '/loginAjax',
+        data: formData,
+        dataType: 'json',
+        success: function(response) {
+            // Handle success response
+            console.log(response);
+            window.location.assign('/home');
+        },
+        error: function(xhr, status, error) {
+            // Handle error response
+            console.log(xhr.responseText);
+            $('.login-error').fadeIn(1000, function() {
+                // Fade out the error message after 2 seconds
+                setTimeout(function() {
+                    $('.login-error').fadeOut();
+                }, 2000);
+            });
+                        
+        }
+    });
+
+})
\ No newline at end of file