Skip to content

Juan Montilla / TBW2223_equipo12

Go to a project
Commit ff7a9893 by Manuel Ruiz Toribio
Options

Google cloud y Ajax en login

parent d197e2c3
Inline Side-by-side
Showing with 77 additions and 19 deletions
.env
...@@ -22,7 +22,9 @@ CI_ENVIRONMENT = development ...@@ -22,7 +22,9 @@ CI_ENVIRONMENT = development
# app.baseURL = '' # app.baseURL = ''
# If you have trouble with `.`, you could also use `_`. # 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.forceGlobalSecureRequests = false
# app.CSPEnabled = false # app.CSPEnabled = false
......
app/Config/Routes.php
...@@ -33,6 +33,7 @@ use App\Controllers\User; ...@@ -33,6 +33,7 @@ use App\Controllers\User;
$routes->match(['get'], '/', [User::class, 'login']); $routes->match(['get'], '/', [User::class, 'login']);
$routes->match(['get', 'post'], '/login', [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', 'post'], '/register', [User::class, 'register']);
$routes->match(['get'], '/home', [User::class, 'user_ok']); $routes->match(['get'], '/home', [User::class, 'user_ok']);
......
app/Controllers/User.php
...@@ -23,6 +23,10 @@ class User extends BaseController ...@@ -23,6 +23,10 @@ class User extends BaseController
public function login() public function login()
{ {
return view('pages/login', []);
}
public function loginAjax(){
$validation = \Config\Services::validation(); $validation = \Config\Services::validation();
$rules = [ $rules = [
"email" => [ "email" => [
...@@ -46,18 +50,28 @@ class User extends BaseController ...@@ -46,18 +50,28 @@ class User extends BaseController
if ($user) { if ($user) {
$session->set('logged_in', TRUE); $session->set('logged_in', TRUE);
$session->set('user', $user); $session->set('user', $user);
return redirect()->to(base_url('/home')); return $this->response->setStatusCode(200)->setJSON([
} else { 'text' => 'Usuario logeado'
$session->setFlashdata('msg', 'Credenciales incorrectas'); ]);
} else {
return $this->response->setStatusCode(403)->setJSON([
'text' => 'Usuario no logeado'
]);
} }
} else { } 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() public function user_ok()
{ {
return view('templates/header') return view('templates/header')
......
app/Views/pages/login.php
...@@ -10,13 +10,13 @@ ...@@ -10,13 +10,13 @@
integrity="sha512-Wq3znUOIZtqZkpWpkTVRtRwQ2YyPCvT03zWlj+iS9dH1eNTjiOVlG2xgC4np4FXwL+Hgx1pjcTXy09pgH5u5HA==" integrity="sha512-Wq3znUOIZtqZkpWpkTVRtRwQ2YyPCvT03zWlj+iS9dH1eNTjiOVlG2xgC4np4FXwL+Hgx1pjcTXy09pgH5u5HA=="
crossorigin="anonymous" referrerpolicy="no-referrer" /> crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="<?= base_url("css/login.css") ?>"> <link rel="stylesheet" href="<?= base_url("css/login.css") ?>">
<style> <style>
body { body {
background-image: url("imagenes/fondoLogin.jpg"); background-image: url("imagenes/fondoLogin.jpg");
background-size: 100% auto; background-size: 100% auto;
} }
</style> </style>
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head> </head>
...@@ -71,18 +71,16 @@ ...@@ -71,18 +71,16 @@
src="<?= base_url("iconos/apple.ico") ?>" width="52" height="52"></a> src="<?= base_url("iconos/apple.ico") ?>" width="52" height="52"></a>
</div> </div>
<span>o usa tu correo</span> <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;" id="email-form" 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="password-form" class="form-control" name="password" type="password"
placeholder="Contraseña" /> placeholder="Contraseña" />
<a href="#">¿Olvidaste tu contraseña?</a> <a href="#">¿Olvidaste tu contraseña?</a>
<span class="error"> <div class="login-error">
<?php if (session()->getFlashdata('msg')): ?> <div class="alert-danger">
<div class="alert alert-danger"> <p>Login incorrecto</p>
<?= session()->getFlashdata('msg') ?>
</div> </div>
<?php endif; ?> </div>
</span>
<button id="signin-button" type="submit">Iniciar Sesión</button> <button id="signin-button" type="submit">Iniciar Sesión</button>
</form> </form>
......
app/Views/templates/header.php
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
<!-- Template Main CSS File --> <!-- Template Main CSS File -->
<link href="<?= base_url("css/style.css") ?>" rel="stylesheet"> <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> </head>
......
public/css/login.css
...@@ -89,6 +89,15 @@ input { ...@@ -89,6 +89,15 @@ input {
width: 100%; 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 { .container {
background-color: #fff; background-color: #fff;
......
public/js/login.js
...@@ -16,4 +16,37 @@ document.querySelector('form').addEventListener('submit', function(event) { ...@@ -16,4 +16,37 @@ document.querySelector('form').addEventListener('submit', function(event) {
alert('La contraseña debe tener más de 8 caracteres'); alert('La contraseña debe tener más de 8 caracteres');
event.preventDefault(); 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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment