UI improvements, contact windows, fixed #196

This commit is contained in:
Pinga 2025-02-18 13:43:41 +02:00
parent 5ac0e9f1fa
commit 184322e2d2
6 changed files with 493 additions and 360 deletions

View file

@ -266,4 +266,30 @@ class ProfileController extends Controller
Auth::logoutEverywhereElse();
}
public function tokenWell(Request $request, Response $response)
{
global $container;
$csrf = $container->get('csrf');
// Get CSRF token name and value
$csrfTokenName = $csrf->getTokenName();
$csrfTokenValue = $csrf->getTokenValue();
// Check if tokens exist
if (!$csrfTokenName || !$csrfTokenValue) {
$errorResponse = json_encode(['error' => 'CSRF tokens not found']);
$response->getBody()->write($errorResponse);
return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
}
// Create JSON response in the expected format
$csrfResponse = json_encode([
$csrfTokenName => $csrfTokenValue
]);
// Write response body and return with JSON header
$response->getBody()->write($csrfResponse);
return $response->withHeader('Content-Type', 'application/json')->withStatus(200);
}
}

View file

@ -302,6 +302,10 @@ $csrfMiddleware = function ($request, $handler) use ($container) {
if ($path && $path === '/clear-cache') {
return $handler->handle($request);
}
if ($path && $path === '/token-well') {
$csrf->generateToken();
return $handler->handle($request);
}
// If not skipped, apply the CSRF Guard
return $csrf->process($request, $handler);

View file

@ -491,10 +491,6 @@
<link href="/assets/css/tabulator.min.css" rel="stylesheet">
<script src="/assets/js/tabulator.min.js" defer></script>
<script>
document.getElementById("cancelButton").addEventListener("click", function () {
location.reload();
});
let addContactTargetInputId = null;
// Capture the target input when opening "Add Contact" modal
@ -562,6 +558,8 @@ document.getElementById("addContactForm").addEventListener("submit", function (e
console.error("❌ Error adding contact:", error.message);
showErrorMessage(error.message);
refreshCsrfToken();
// ❌ Prevent modal from closing on error
let modalElement = document.getElementById("addContactModal");
let modalInstance = bootstrap.Modal.getInstance(modalElement);
@ -593,10 +591,6 @@ function showErrorMessage(message) {
modalBody.scrollTop = 0;
}
// 🔹 Disable submit button on error
if (submitButton) {
submitButton.disabled = true;
}
}
let targetInputId = null;
@ -638,29 +632,6 @@ function showErrorMessage(message) {
targetInputId = null;
});
var table;
document.addEventListener("DOMContentLoaded", function(){
const toggleLocCheckbox = document.getElementById('toggleLoc');
const localizedSection = document.getElementById('localizedInfo');
toggleLocCheckbox.addEventListener('change', function() {
if (toggleLocCheckbox.checked) {
localizedSection.style.display = "flex";
} else {
localizedSection.style.display = "none";
}
});
// Generate ID for Contact
const contactidInput = document.getElementById('contactid');
contactidInput.value = generateAuthInfoC();
// Generate authInfo for Contact
const authInfoInput = document.getElementById('authInfoc');
authInfoInput.value = generateAuthInfoC();
function generateAuthInfoC() {
const length = 16;
const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
@ -691,6 +662,69 @@ function showErrorMessage(message) {
return retVal;
}
async function refreshCsrfToken() {
try {
let response = await fetch('/token-well', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({})
});
if (!response.ok) {
console.error("Failed to fetch CSRF token:", response.status);
return;
}
let data = await response.json();
let csrfNameField = document.querySelector('#addContactModal input[name="csrf_name"]');
let csrfValueField = document.querySelector('#addContactModal input[name="csrf_value"]');
if (csrfNameField && csrfValueField) {
csrfNameField.value = Object.keys(data)[0]; // Set the token name
csrfValueField.value = Object.values(data)[0]; // Set the token value
}
} catch (error) {
console.error("Error refreshing CSRF token:", error);
}
}
document.getElementById("addContactModal").addEventListener("show.bs.modal", function () {
document.getElementById('contactid').value = generateAuthInfoC();
document.getElementById('authInfoc').value = generateAuthInfoC();
});
var table;
document.addEventListener("DOMContentLoaded", function(){
// Only refresh CSRF token when opening the "Add Contact" modal
let addContactModal = document.getElementById("addContactModal");
if (addContactModal) {
addContactModal.addEventListener("show.bs.modal", refreshCsrfToken);
}
const toggleLocCheckbox = document.getElementById('toggleLoc');
const localizedSection = document.getElementById('localizedInfo');
toggleLocCheckbox.addEventListener('change', function() {
if (toggleLocCheckbox.checked) {
localizedSection.style.display = "flex";
} else {
localizedSection.style.display = "none";
}
});
// Generate ID for Contact
const contactidInput = document.getElementById('contactid');
contactidInput.value = generateAuthInfoC();
// Generate authInfo for Contact
const authInfoInput = document.getElementById('authInfoc');
authInfoInput.value = generateAuthInfoC();
function contactLinkFormatter(cell){
var value = cell.getValue();
return `<a href="/contact/view/${value}" style="font-weight:bold;">${value}</a>`;

View file

@ -615,10 +615,6 @@
<link href="/assets/css/tabulator.min.css" rel="stylesheet">
<script src="/assets/js/tabulator.min.js" defer></script>
<script>
document.getElementById("cancelButton").addEventListener("click", function () {
location.reload();
});
let addContactTargetInputId = null;
// Capture the target input when opening "Add Contact" modal
@ -686,6 +682,8 @@ document.getElementById("addContactForm").addEventListener("submit", function (e
console.error("❌ Error adding contact:", error.message);
showErrorMessage(error.message);
refreshCsrfToken();
// ❌ Prevent modal from closing on error
let modalElement = document.getElementById("addContactModal");
let modalInstance = bootstrap.Modal.getInstance(modalElement);
@ -717,10 +715,6 @@ function showErrorMessage(message) {
modalBody.scrollTop = 0;
}
// 🔹 Disable submit button on error
if (submitButton) {
submitButton.disabled = true;
}
}
let targetInputId = null;
@ -762,29 +756,6 @@ function showErrorMessage(message) {
targetInputId = null;
});
var table;
document.addEventListener("DOMContentLoaded", function(){
const toggleLocCheckbox = document.getElementById('toggleLoc');
const localizedSection = document.getElementById('localizedInfo');
toggleLocCheckbox.addEventListener('change', function() {
if (toggleLocCheckbox.checked) {
localizedSection.style.display = "flex";
} else {
localizedSection.style.display = "none";
}
});
// Generate ID for Contact
const contactidInput = document.getElementById('contactid');
contactidInput.value = generateAuthInfoC();
// Generate authInfo for Contact
const authInfoInput = document.getElementById('authInfoc');
authInfoInput.value = generateAuthInfoC();
function generateAuthInfoC() {
const length = 16;
const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
@ -815,6 +786,69 @@ function showErrorMessage(message) {
return retVal;
}
async function refreshCsrfToken() {
try {
let response = await fetch('/token-well', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({})
});
if (!response.ok) {
console.error("Failed to fetch CSRF token:", response.status);
return;
}
let data = await response.json();
let csrfNameField = document.querySelector('#addContactModal input[name="csrf_name"]');
let csrfValueField = document.querySelector('#addContactModal input[name="csrf_value"]');
if (csrfNameField && csrfValueField) {
csrfNameField.value = Object.keys(data)[0]; // Set the token name
csrfValueField.value = Object.values(data)[0]; // Set the token value
}
} catch (error) {
console.error("Error refreshing CSRF token:", error);
}
}
document.getElementById("addContactModal").addEventListener("show.bs.modal", function () {
document.getElementById('contactid').value = generateAuthInfoC();
document.getElementById('authInfoc').value = generateAuthInfoC();
});
var table;
document.addEventListener("DOMContentLoaded", function(){
// Only refresh CSRF token when opening the "Add Contact" modal
let addContactModal = document.getElementById("addContactModal");
if (addContactModal) {
addContactModal.addEventListener("show.bs.modal", refreshCsrfToken);
}
const toggleLocCheckbox = document.getElementById('toggleLoc');
const localizedSection = document.getElementById('localizedInfo');
toggleLocCheckbox.addEventListener('change', function() {
if (toggleLocCheckbox.checked) {
localizedSection.style.display = "flex";
} else {
localizedSection.style.display = "none";
}
});
// Generate ID for Contact
const contactidInput = document.getElementById('contactid');
contactidInput.value = generateAuthInfoC();
// Generate authInfo for Contact
const authInfoInput = document.getElementById('authInfoc');
authInfoInput.value = generateAuthInfoC();
function contactLinkFormatter(cell){
var value = cell.getValue();
return `<a href="/contact/view/${value}" style="font-weight:bold;">${value}</a>`;

View file

@ -643,10 +643,6 @@
<link href="/assets/css/tabulator.min.css" rel="stylesheet">
<script src="/assets/js/tabulator.min.js" defer></script>
<script>
document.getElementById("cancelButton").addEventListener("click", function () {
location.reload();
});
let addContactTargetInputId = null;
// Capture the target input when opening "Add Contact" modal
@ -714,6 +710,8 @@ document.getElementById("addContactForm").addEventListener("submit", function (e
console.error("❌ Error adding contact:", error.message);
showErrorMessage(error.message);
refreshCsrfToken();
// ❌ Prevent modal from closing on error
let modalElement = document.getElementById("addContactModal");
let modalInstance = bootstrap.Modal.getInstance(modalElement);
@ -745,10 +743,6 @@ function showErrorMessage(message) {
modalBody.scrollTop = 0;
}
// 🔹 Disable submit button on error
if (submitButton) {
submitButton.disabled = true;
}
}
let targetInputId = null;
@ -790,29 +784,6 @@ function showErrorMessage(message) {
targetInputId = null;
});
var table;
document.addEventListener("DOMContentLoaded", function(){
const toggleLocCheckbox = document.getElementById('toggleLoc');
const localizedSection = document.getElementById('localizedInfo');
toggleLocCheckbox.addEventListener('change', function() {
if (toggleLocCheckbox.checked) {
localizedSection.style.display = "flex";
} else {
localizedSection.style.display = "none";
}
});
// Generate ID for Contact
const contactidInput = document.getElementById('contactid');
contactidInput.value = generateAuthInfoC();
// Generate authInfo for Contact
const authInfoInput = document.getElementById('authInfoc');
authInfoInput.value = generateAuthInfoC();
function generateAuthInfoC() {
const length = 16;
const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
@ -843,6 +814,69 @@ function showErrorMessage(message) {
return retVal;
}
async function refreshCsrfToken() {
try {
let response = await fetch('/token-well', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({})
});
if (!response.ok) {
console.error("Failed to fetch CSRF token:", response.status);
return;
}
let data = await response.json();
let csrfNameField = document.querySelector('#addContactModal input[name="csrf_name"]');
let csrfValueField = document.querySelector('#addContactModal input[name="csrf_value"]');
if (csrfNameField && csrfValueField) {
csrfNameField.value = Object.keys(data)[0]; // Set the token name
csrfValueField.value = Object.values(data)[0]; // Set the token value
}
} catch (error) {
console.error("Error refreshing CSRF token:", error);
}
}
document.getElementById("addContactModal").addEventListener("show.bs.modal", function () {
document.getElementById('contactid').value = generateAuthInfoC();
document.getElementById('authInfoc').value = generateAuthInfoC();
});
var table;
document.addEventListener("DOMContentLoaded", function(){
// Only refresh CSRF token when opening the "Add Contact" modal
let addContactModal = document.getElementById("addContactModal");
if (addContactModal) {
addContactModal.addEventListener("show.bs.modal", refreshCsrfToken);
}
const toggleLocCheckbox = document.getElementById('toggleLoc');
const localizedSection = document.getElementById('localizedInfo');
toggleLocCheckbox.addEventListener('change', function() {
if (toggleLocCheckbox.checked) {
localizedSection.style.display = "flex";
} else {
localizedSection.style.display = "none";
}
});
// Generate ID for Contact
const contactidInput = document.getElementById('contactid');
contactidInput.value = generateAuthInfoC();
// Generate authInfo for Contact
const authInfoInput = document.getElementById('authInfoc');
authInfoInput.value = generateAuthInfoC();
function contactLinkFormatter(cell){
var value = cell.getValue();
return `<a href="/contact/view/${value}" style="font-weight:bold;">${value}</a>`;

View file

@ -155,6 +155,7 @@ $app->group('', function ($route) {
$route->post('/profile/logout-everywhere', ProfileController::class . ':logoutEverywhereElse')->setName('profile.logout.everywhere');
$route->get('/webauthn/register/challenge', ProfileController::class . ':getRegistrationChallenge')->setName('webauthn.register.challenge');
$route->post('/webauthn/register/verify', ProfileController::class . ':verifyRegistration')->setName('webauthn.register.verify');
$route->post('/token-well', ProfileController::class .':tokenWell')->setName('tokenWell');
$route->get('/mode', HomeController::class .':mode')->setName('mode');
$route->get('/lang', HomeController::class .':lang')->setName('lang');