Files
BarangaySystem/legacy/pages-blade-views/views/login.blade.php
2026-06-06 18:43:00 +08:00

520 lines
15 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title></title>
<link rel="preload" href="/dist/css/bootstrap.min.css" as="style">
<link rel="preload" href="/dist/css/adminlte.min.css" as="style">
<link rel="preload" href="/dist/css/jquery.dataTables.min.css" as="style">
<link rel="preload" href="/dist/css/print.min.css" as="style">
<link rel="preload" href="/dist/css/select2.min.css" as="style">
<link rel="preload" href="/dist/css/toastr.min.css" as="style">
<link rel="preload" href="/dist/alt-theme/styles.css" as="style">
<link rel="preload" href="/assets/user-list.png" as="image">
<link rel="preload" href="/assets/NewLeads.png" as="image">
<link rel="preload" href="/assets/ListLeads.png" as="image">
<link rel="preload" href="https://fonts.gstatic.com/s/plusjakartasans/v7/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2"
as="font">
<link rel="preload" href="/dist/alt-theme/icons-alipay.css" as="style">
<link rel="preload" href="/dist/alt-theme/fonts.css" as="style">
<link rel="stylesheet"
href="/plugins/googlefonts/fonts.googleapis.com_css_familySourceSansPro300400400i700&amp;displayfallback.css">
<link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
<link rel="preload" href="/plugins/jquery/jquery.min.js" as="script">
<style>
/* Basic reset and body styling */
body,
html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
height: 100%;
width: 100%;
}
/* Centering the container */
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
box-sizing: border-box;
}
.login-card-body {
max-width: 400px;
width: 100%;
padding: 20px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
.login-box-msg {
font-size: 1.5rem;
margin-bottom: 20px;
text-align: center;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
.form-control {
width: 100%;
padding: 12px;
border: 1px solid #ced4da;
border-radius: 5px;
font-size: 1rem;
box-sizing: border-box;
}
.input-group {
display: flex;
flex-direction: column;
}
.custom-control {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.custom-control-input {
position: relative;
width: 1.5rem;
height: 1.5rem;
margin-right: 10px;
cursor: pointer;
appearance: none;
border: 1px solid #ced4da;
border-radius: 0.25rem;
background: #ffffff;
transition: background-color 0.3s, border-color 0.3s;
}
.custom-control-input:checked {
background-color: #007bff;
border-color: #007bff;
}
.custom-control-input:checked::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.75rem;
height: 0.75rem;
background: #ffffff;
border-radius: 0.25rem;
}
.custom-control-label {
margin: 0;
font-size: 0.875rem;
color: #333;
}
.btn-primary {
display: block;
width: 100%;
padding: 12px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #ffffff;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-primary:hover {
background-color: #0056b3;
}
/* Responsive Design */
@media (max-width: 480px) {
.login-card-body {
padding: 15px;
}
.form-control {
font-size: 0.875rem;
padding: 10px;
}
.btn-primary {
font-size: 0.875rem;
padding: 10px;
}
.login-box-msg {
font-size: 1.25rem;
}
}
body,
html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* Centering the card */
.login-container {
max-width: 400px;
width: 100%;
padding: 20px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
margin: 0;
/* Ensure visibility */
position: relative;
}
.login-box-msg {
font-size: 1.5rem;
margin-bottom: 20px;
text-align: center;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
.form-control {
width: 100%;
padding: 12px;
border: 1px solid #ced4da;
border-radius: 5px;
font-size: 1rem;
box-sizing: border-box;
}
.custom-control {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.custom-control-input {
position: relative;
width: 1.5rem;
height: 1.5rem;
margin-right: 10px;
cursor: pointer;
appearance: none;
border: 1px solid #ced4da;
border-radius: 0.25rem;
background: #ffffff;
transition: background-color 0.3s, border-color 0.3s;
}
.custom-control-input:checked {
background-color: #007bff;
border-color: #007bff;
}
.custom-control-input:checked::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.75rem;
height: 0.75rem;
background: #ffffff;
border-radius: 0.25rem;
}
.custom-control-label {
margin: 0;
font-size: 0.875rem;
color: #333;
}
.btn-primary {
display: block;
width: 100%;
padding: 12px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #ffffff;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-primary:hover {
background-color: #0056b3;
}
/* Responsive Design */
@media (max-width: 480px) {
.login-container {
padding: 15px;
}
.form-control {
font-size: 0.875rem;
padding: 10px;
}
.btn-primary {
font-size: 0.875rem;
padding: 10px;
}
.login-box-msg {
font-size: 1.25rem;
}
}
</style>
<link rel="stylesheet" href="/dist/css/toastr.min.css">
</head>
<body class="login-page">
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">
<div class="login-box">
<div class="login-logo">
<center><b>Bukid Bounty</b>Marketplace</center>
</div>
</p>
<form action="?loginnow" method="post">
<div class="input-group mb-3">
<input type="number" id="usernumber" class="form-control" placeholder="Mobile Number"
name="usernumber">
<div class="input-group-append">
<div class="input-group-text">
</div>
</div>
</div>
<br>
<div class="input-group mb-3">
<input type="password" class="form-control" placeholder="Password" id="userpassword"
name="userpassword">
<div class="input-group-append">
<div class="input-group-text">
</div>
</div>
</div>
<br>
<br>
{{-- <div class="input-group mb-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="keep-alive">
<label class="custom-control-label" for="keep-alive">Keep Me Signed-In</label>
</div>
</div> --}}
<button type="button" class="btn btn-primary btn-block" id="loginbutton">Sign In</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="modal-incorrect-password" style="display: none;" aria-modal="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Unable to Login</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Incorrect Username or Password</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="/plugins/jquery/jquery.min.js"></script>
<script src="/dist/js/toastr.min.js"></script>
<script>
$("#loginbutton").click(function () {
let usernumber = $("#usernumber").val();
let userpassword = $("#userpassword").val();
// let keepalive = $('#keep-alive').is(':checked');
$.ajax({
url: "/post/loginnow",
type: "POST",
data: {
mobile_number: usernumber,
password: userpassword,
// keepalive: keepalive
},
xhrFields: {
withCredentials: true
},
success: function (response) {
// console.log(response);
if (response.success === false) {
toastr.error(response.message || 'Incorrect Username or Password');
$("#usernumber").val("");
$("#userpassword").val("");
} else {
window.location.href='/';
}
},
error: function (jqXHR, textStatus, errorThrown) {
// console.error(jqXHR);
// console.error(textStatus);
// console.error(errorThrown);
toastr.error(jqXHR.responseJSON?.message || 'An unknown error occurred.');
}
});
});
$(document).on('keypress', function (event) {
let keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
$("#loginbutton").click();
}
});
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
function getCurrentSession() {
return getCookie('SESSID');
}
function trysessioncookie() {
let currentsession = getCurrentSession();
if (!currentsession) { return false; }
}
/*
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('service-worker.js')
.then(registration => {
console.log('Service Worker registered:', registration);
if (navigator.serviceWorker.controller) {
// console.log('Service Worker is controlling the page');
navigator.serviceWorker.controller.postMessage({
type: 'INIT'
});
} else {
console.log('Service Worker is not controlling the page');
}
navigator.serviceWorker.addEventListener('message', event => {
// console.log('Message received from Service Worker:', event.data);
// alert(event);
});
})
.catch(error => {
// console.error('Service Worker registration failed:', error);
});
});
}
*/
if ('serviceWorker' in navigator) {
console.log('Trying to Unregister Service Worker');
navigator.serviceWorker.getRegistrations().then(function (registrations) {
for (let registration of registrations) {
console.log('registrations detected');
registration.unregister().then(function (boolean) {
if (boolean) {
console.log('Service worker unregistered:', registration);
} else {
console.log('Service worker could not be unregistered:', registration);
}
});
}
}).catch(function (error) {
console.error('Error while unregistering service workers:', error);
});
}
</script>
</body>
</html>